{"_id":"@material/menu-surface","_rev":"1666-df24b4f829a506f984012632e5e75c62","name":"@material/menu-surface","description":"The Material Components for the web menu surface 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.39.0-0":{"name":"@material/menu-surface","version":"0.39.0-0","keywords":["material components","material design","menu surface"],"license":"Apache-2.0","_id":"@material/menu-surface@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":"85796f06940e5bc82977e81460c79c232a4e57dc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-0.39.0-0.tgz","fileCount":14,"integrity":"sha512-fIjXLgZ4ghI8K7DBpfHANGfK4iz05bC8O/ZvasDRGwGY2hNk/MlSufm3koncWH4oNPlouzD4EHDM76WAxoKBsg==","signatures":[{"sig":"MEYCIQD26pGXy5wWgTPZHa1z1rSmz1ByvjchJ7qSQj2vzHEpAAIhANbxgiolzdxx77eUyXsVZJTCxm49T8eROPgtOeZ1LvO9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":139844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZUfCRA9TVsSAnZWagAAWscP/1Gel/vJyWBXS+gB+qsE\nYOTI24FcrevRRKPoB5xZkateneAI7eoBxFa7FxKRa7/tp4ZWqha4wErfsH+a\nbn2RWfXqcpchYXhnkUjm6pdt1be7UwNFmALPamx3/214HsCRIts2G6rzQzTz\nkX4EgR1xjRGh2V+pl31HPFj52KM2yFDJibTZn3ZuPqaBksTSSF5nqmRo2N6m\nkNboihadCb+PhQsrPXk+6hOptH7PAfRsPpM9o8aRjUHd/prQRxyM13O87N7x\nevaT8Vz+1mCPQr2H7rHUvTCxgvt5EhPPUbyuth0eYeSwu06wb7Gtu1kmszCR\nHfk0d3pRtkNuLU16egeisx9+W3VdxM/IHCiiFKGNYL5k95krGfCefEHeur+N\n1lc+SeKLtc6WCDvQ+BKTWs+Z55K7aH8Sj7pKGb7lczSD3aWD/rbZqPdsEE73\n8dI7I3in3yB3xpYDMipdydpBe+6xlwTr76Ci4KzkwyGoL5zEz5XbURCE06SE\nVrdVm+FRaJlUvET5QdGQHztawGSRkEnYxBOHQwglfUAa/5xfW/LlK7NwApgj\nR3yAQzGmDdkdWR8LQ5nT8T5APZoCVAWnWQqS0eDQDpLb57xCMKtOg0E14bHh\nIa5ox7d+RKd5EsSzhYmajXRwQjWksROhAOrWGy4xRf0OWJ84FP6Qdgn+NFXJ\n2iig\r\n=PnPC\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.4.0","description":"The Material Components for the web menu surface component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/animation":"^0.34.0","@material/elevation":"^0.38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_0.39.0-0_1534432543162_0.736051781868293","host":"s3://npm-registry-packages"}},"0.39.0":{"name":"@material/menu-surface","version":"0.39.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"0d3532257b886c518c5634bcb7bc51dae0cfa8c7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-0.39.0.tgz","fileCount":14,"integrity":"sha512-VbDNXwsMOGyTdVw9GaP13Cp3YG3Jg+zH1bpMXm0Z6VL4Q9G31qo29KvU6mchKb89ofnIJhZmA6u+f6MmNhbg+g==","signatures":[{"sig":"MEQCIG5YR8beutSzkHqs8eiEcvqOg82qTU5TQVsGQinzhIdYAiBNUqBjKroNuE1Uno+tyyDjREEZJgYpJ4HDHb9+Y+vSBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":148990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDebCRA9TVsSAnZWagAAIo0P/0/6JcwvbLh1LeMS7HWp\nmYHcFABm29NltsJRpEpK+w9KOr8upO/kinf/tt2dgGU4M4Q/K7ekmGUiCyj+\nlETeDqRKJT1BrbVUlRwWc/PXjs0+rce7zbShihBuTwrUjX4xiRdbA8C6vy64\nFgkGD5eRN6R3U7Y9yQlWoimlXMGvBphGNFBoOC/AbYFbM2Vg3DwnzQGKsOku\nAZ6qwcdilK1YPmui6cEBF3wdg4A9ggpOQeNAmr82je2xzpUGlz1c5/zTgIId\nXE+6SV6VuEKfZDf40jaov/HBXtWsmf2b2UO29CsbzXSPbWzYF65VApuYRRDG\nOig1Q7nWouNf1wd+IZhih40QPb3vxGm+LAE4cXoi0pH5wmnNbj8MAW4w1kWN\n5llyZ5qtqPsVwwZgR92LLGtEVR6nEq/SUfyf0yJBHB1FMV0KE3wPoekzJtba\nYdn4GsHGHlUXp6pbTdbDvqCr0uzloCl43isOGx9IbdxH29zv6aV988JQYOCq\nSnBgKIPVb7YEvL4wHWUxa4Z/owo9QIOiwpLo/LerEbeo6x0BnN3yaDz2Y8iu\nMlRT7SnXYV6ueiF58JsfcTo3nRPSMWQf8vhzVr+9JWyEzLX/W7eX/4Ng5PB8\nM3P/1dULNOPjrbiMFn6WgxGiHUR27uUu0B4M7ZivOa5kP3laAxfhLlZQBLRd\niR4H\r\n=CfjL\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 surface component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.0","@material/base":"^0.39.0","@material/theme":"^0.39.0","@material/animation":"^0.39.0","@material/elevation":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_0.39.0_1535391642794_0.9151077058891728","host":"s3://npm-registry-packages"}},"0.39.1":{"name":"@material/menu-surface","version":"0.39.1","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"24c79ae746132d81bfb091f41245e4b1e807ad76","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-0.39.1.tgz","fileCount":14,"integrity":"sha512-dkb+9qI8BsUNUQxHfaJknCbyg/VTaJemEIbj+8kAaOn/47aem1or+yQos+uXPJZEQt/VHp5L1N9BKIzd5VcrUQ==","signatures":[{"sig":"MEUCIQDpmRHuC83U5d6ZJRY87PMVUFhu1w11rZYglp0KLOpP0QIgJ1UrFTQ7swlKoNqVpg2hmfRHNCL2oCeNaOjOABYXStI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":148852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibTkCRA9TVsSAnZWagAAQq4P/1DnNTdo3V3WcXR5iRPJ\nNYnXMeSqptPwS6UdAdt/gOdHuSU0ceZrqBoZFwzMKteDeokoDV8rCKHDlbjv\nUZGEZb/dU2jvi9Pmpuj+3Sz8088LV91dXkYEE6t9oDhOxitilRPLU8Lbe9rI\nvbC8WJwc2rmjVjuu6nVRWI+xrKegI4l9d57k0gbYZ+R4vvo8MCGPsQntVgOY\nt73KunMOxupQCpKpcYzRDFocpZMEZW3ZQ6XM3tEJm5UAGY/ryk8SvgXDe/Ki\n25mckO+YAjxwITeSEDGN70ZneDW0Qiw2MOgj+u9cHjDC8Mtuw7cLiJ6nCTAK\nFBi2F9+wOzgUzRv16sNaGN5At9zX7bGk3qMBTd9l9dVQU2GqnRKJ0DmVY7jT\nOmmJ9+7KoqL+khFNfLnUo6MlhYVGxdTmHAP5cVfAWrnscjq8CFSFQUb49kl7\niD8uvnxmFOO1QtavmptUCsm4GbzKEUdqe7gUwO/AO+TZ6qhs27AlYJuw2kJR\n9M+vGTScjDr5IAZsBM5zVVNrIEbRtyG11wztJy0lJ3v3Zzmao2AFaPmcPVnY\nTCIxz2D0Y5RN9spatbVmAyJlrSxEX/SiqzAz7T9Gz3GfQRaluPJ2q4Vg074+\nx+RKnXhQxzY5zxz4MTuK9OYEU7ar5R7JcfAWwadfKzr9ikV+T1cQkfPY8eXl\nItUi\r\n=mdwr\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 surface component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/animation":"^0.39.0","@material/elevation":"^0.39.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_0.39.1_1535751395664_0.3730757423855904","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/menu-surface","version":"0.40.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"79986125cf789e3a54be53ab756b3557e3945332","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-0.40.0.tgz","fileCount":14,"integrity":"sha512-YG/Hs4Ne3zvUzbrXTe397V1ijyAzfLGieb1jBsy7lSklDKl0E9ZyxEiQp4EPnoKfAzWJmYzxwlMmQSO+3rEIBg==","signatures":[{"sig":"MEQCIBFDmXfUof6O+d2CiOUVU8HR2LIOQHuA/PT+KwihuOgbAiALGgstGkE6Z06myfcmK2YlGEU99kMrrOD/I9txCGuvxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqUKZCRA9TVsSAnZWagAAl3AP/0YBPYV8g+5DP+9iVf44\nF78KLZ9V3epLbsPs91GATMIDnzOcKGE+tjTfh2QM5kNdVjC0fUHAXc87QeX4\nE0i/LW4ta5ghYM+O6IHLlosgZJLj/M1V1ED6zSKG/ZKoOYx9/ENDHLym1DI6\nvwkfNSxr+jCE+OKskkRS3XaygJi9yZ+o+G+JEqBQmSHn8tPupzNkFpdAMzPS\ndQDDtFevsHkomujlvqTYc1ciBZ3XO3hZxVTl2Q7Xo9pHnf4vtWMw1ddUlz/z\n4JYBbr0Mp/F6dF5t4z9cQzYussljUfudwVGxNFK61XYktBLqN/FjXSsis8FW\nyyzJaWmLeBfHIW8ImByvds7PTYpJxcl4uefY9nFDtuk0IY6tBwLMuFCFYumV\nVzSctU0rM9/lr2yS9ILpjgfKaP0O2JeCMIpJ/gT0gog9lMQYQxG3yuS9sMLH\nGTkIiuMeVktdy2tNbMhzboXhPRrRuNMbIsFOZ2SiWxUkGXbytECYTLbp9ikj\nufSla9JBxWIHa+rY6keeXU6Cv1UTKTCBAXW7MtR4KhUYfvpEroqv2F1vwx9X\nhhIQ0TI8D5Jprx6zb0KFRDo1pVU1RkHiSyohtu2zZRkgDxu3z0voUDiyOhOl\no08kmctXufusL5qDgfpVMqL4RzmTFmQc1jiqhYIINrdyzYYtYKbXnYoQZP2s\n+eE1\r\n=4owM\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 surface component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/shape":"^0.40.0","@material/theme":"^0.40.0","@material/animation":"^0.39.0","@material/elevation":"^0.40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_0.40.0_1537819289080_0.2990555449339414","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/menu-surface","version":"0.40.1","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d0905626e6e99d3009b52cdbeaf51ebfa00161af","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-0.40.1.tgz","fileCount":14,"integrity":"sha512-ottbuyEUEC8t9SWXYsM+um3NVUoZlNkPZ4HUq0iiWw3RZ7ycMm4TRmgXs7CvhxjwPXs7LMzmT5f3lufqPipzjA==","signatures":[{"sig":"MEUCIQCSV4fvDrFxltUP5dAF2yni3SnrTkCyrXp+3t514rXkkQIgVwKFv6fPWyll1PZl2yfEskbuLdqDBTzEJRMlBmAiLjc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8QTCRA9TVsSAnZWagAAiKwP/RttYghxjcJ6LhLhUuW1\nNEob3YKPx/ztKDdHhlLrbM4RK+T/4DnMIbijHOzota/z+u5OSlhVtO9ioL8C\n+bnucWNJZlDLEqh4xn4m16L6ljgPuSKPJznuOreuDkKlqxOfsK2PllGQpoHI\n4PDMpDOxQQfOMY4i7tzhiV6N61hw2OSOVC4m0yqSyRlcmnf/b4PQVprcbj57\nR1ujWQWklLCrWAFy7U+0rpC2rEIN8MzP9HfnoO+Sr4ce56f7eNx7oSca5hq9\nGbI2si/qMbmjSJQXupOCxTnK6dNhGGp+oTXGUEWAydzUfdPbvywCNO4rjBtT\n040ADYhLQcKTC5ULkr/VA2AwBsttLMdSC/huDsbRa8s9NFgHQwvyz+LoPi2n\nRfGhWyBv3YGDMIKuxKYdOcPGd8aCCx0lfLANZGzGb+H8BdZLEihomvcsMyY0\nxa90ubfidVdWMb8Mrncd55Res79K81HOgUeEaYqmJeIpVvsc0d9rwyl2RyS1\nd6HT1gaElL+94kwbbpffG7yxSkf2Cnx896jjQ8LGUKUa2tnqb4jagXO6Rmr+\ncUZ3JSuvCCkrQwIuUDTTIfug4YiSCOq/f9uzsy3WK1UHiTRvLnfKgxmFGzRH\ngIlQ2MJu5ZsjjvoQPRcU7xSle2kN4j9TTngO7LOxcJs32G8KjwwDEdoLiH4s\ngAfn\r\n=NjVV\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 surface component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/base":"^0.40.1","@material/shape":"^0.40.1","@material/theme":"^0.40.1","@material/animation":"^0.40.1","@material/elevation":"^0.40.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_0.40.1_1539032082349_0.8649659268724499","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/menu-surface","version":"0.41.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"13b3f0824096216ae10b6f63d78c2ee3e4fb76b3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-0.41.0.tgz","fileCount":14,"integrity":"sha512-HiGFrEIF8DCfEtS8mRtc6MCcK2CJNCh0U6KWWeSIXv+9nW2oiN09piuULXM7aU46wETvfweVcgvHNJvBAXnXjQ==","signatures":[{"sig":"MEUCIC4gMJVbk65+rB8MVSsb8C7fmfFjUXe7oB9r7YA6jQyxAiEA8cQQwXO5mWGz8LFo6uU76Wb8WNFC5TORYKp7TMEc/Ss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12v0CRA9TVsSAnZWagAAN5gP/2CcM3gGvsvkUvhhGXjE\nXom37eORdVv5SZ88U3ngDgPw1rmQyDSnlTVws2TzphfmFjsLSEARXVCqsE5N\naDH1E5B+GzJxGwNN2DMZBNE9EwoG+R+u+qLsLjRkDCidczyzvTY6L1EvPcra\nuJfOWwwL7YuJ2S6RBfelaXE5sD7/TawRa6onM8lTEStJiL1WoI1NciDyC4iO\nKCpvxdaIEL0CIRlznGFLU97z/zOi05LIdJ194WCyh+HGKWN3TNDuSmOgDyh+\nDZwSHCqFiPapidcciYyZA8GZ7KMC8H/vyRrXBipPmTglyl9vnfhMHrhKbSw9\nIpxu66c49aC5D7rD+kNGBBVqRhv2z/COgNgcT1PWf++h9A5aTCOle06GTGPi\n3XVwU+axY8N00rb11pkjRBBmV8SitTZtpLswwttYAthamxMJKQIqTkYWuVDk\n2Hy5zOimKnFfEUgoS3G/sqTSnlrd63uHOEKwh/yzSd8zfDQpsmumfvqgfZZb\nFjEBCa9hxyDLgvgeAJyuD3BaF5Iyhkj+dtxlEwBRuIpRpkVb5f59NcvmhWDz\nJlq1UsKb5J4h5psv3nzcfotvk0vB+p0ClFWRNBIN2SUCO6jJMBrFMe9pFoAb\n+7YS0ap1kn2kuWQefUBICiOXba8aq2ahXlNleWUwWVljvYtzBF7Wk1V07TY3\n45s4\r\n=q5NB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.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 surface component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/base":"^0.41.0","@material/shape":"^0.41.0","@material/theme":"^0.41.0","@material/animation":"^0.41.0","@material/elevation":"^0.41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_0.41.0_1540844531230_0.15764139969485602","host":"s3://npm-registry-packages"}},"0.42.0":{"name":"@material/menu-surface","version":"0.42.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2483b880fa192a207cd7875dfee9efb14a8b4a0f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-0.42.0.tgz","fileCount":14,"integrity":"sha512-xPw9cvdXG0lCmeRrgLghCVe+YcALQnCT8SZfxs3yEnojILSXl0egOs7UpcFDCyXt2ZX/L/RzjD/2Or98HY7/vQ==","signatures":[{"sig":"MEYCIQC0wYCz3xcRUUEAwvBq1MSzG6mvjkLIR+6SKrQXoErerwIhAIP6Fw/oGfm0xXmpVq9g2RbCv9nfipTCPmB+TAtdEoko","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBwXDCRA9TVsSAnZWagAAvYAP/1y42o13HJIdLPkIIzTr\nlPMdZqb4hXymYynVxJobNg/izDuk3+RkT5i8cviGuedT1lhJC/1DbA1ynYBr\n5iXnbluU9PhztDulTpdL1fJgYKCyyRs41vp9Ho6vC1wLG//RjAeWldoonPR3\n3J34yh/GDNqVEg3Gva+cukykMby2GlVKGIdckaRZ349UHklkb+nNFNU4dueQ\nN/Mri9//IyJ4obPzzbWCMnltO6Z29O+iWjau/OEnR70QbOewFAteEmMjhvBw\n8XMY6hjvxS/vvGkUFxxUCqOMAYJQm4UfaWTNjtYov+du7FSyuyL4CSRDGbvl\nJSX3ZQY+2pqAfl9ss2USYJiVyZOAxODN1JrD9yjArj43vChq9rTyVKs3+3Kb\n25iWP4fYtbchnmfZdfM0emYYhJSC2Sjrh3WiMFmQ5nqaueUq1VjKvMnr7beC\nXHTDZNSzqYqQrjVQCQOG1saoMY/qP0c0jz6NgW5UTqe+cIygG89zWBlKx/if\nfmHf6ebvaiC7LenX5oI5xLCWqsGXCFQNg1OBpraivWIz+IJp8tZjvvfqcl1V\nBWYwYvphxe/g/ibCVMmTCk3h2CnB20CfvzksHZNW77kgSOi8+InNSclT5MN4\nPwT21l3urof4xIkCYFxc3Lnn4cDDXBGI1JRFQ8lu/9j36Ku/Ba4eikkErZeu\n2RlW\r\n=RVqb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.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 surface component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/shape":"^0.42.0","@material/theme":"^0.41.0","@material/animation":"^0.41.0","@material/elevation":"^0.41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_0.42.0_1543964099131_0.8444775971849747","host":"s3://npm-registry-packages"}},"0.42.1":{"name":"@material/menu-surface","version":"0.42.1","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"41d5b11023f7d6e1a7b225fed1182f131b261081","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-0.42.1.tgz","fileCount":14,"integrity":"sha512-N2O9NstjtLGCBaUiHCEJMyVuY04L3SPnMUw84GkiOh0MvmRi3pYCXoHzYayzqzdpLJAphu4/68NRwRsJR/2VxA==","signatures":[{"sig":"MEQCIH2xFecZjBJUkH5EvSGebzr6m2HLfzKEnBePpDrdPzuIAiAua9OGlhOGtUF9j6mg3fj8q6gdiRkVB/bdykez83PySQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGCJXCRA9TVsSAnZWagAAuvIP/Ags2w++V2VQfYp6JoT/\n3riSgX1dwPGyY3fUTxb+vuopMdRCqx6kTO0D7Z7Dzw2w9eA4GbKXRca8gpY0\n+84S2OlhrIgpkb7MuWLliR36JtVEmhz4OpOr96KHAgVM6X4TcRIsXgfg9K7H\nGlZg+VsWraDgroLq0VdVSGXI1csEnbptsgi7HDr1yeJqY45IxgiON+kaiA3x\nfCpc8Sp7fs9JiN0oq62uy7j3dNQq98dOM9TfdEsO/uWN8oFk5OuURk3dPBmN\nwby+FkST2l+XbG48dVAXaBA/ECN1gc9dZhCmSuufLTOKph3Dju+8HaPeJvYM\nVJE7/urAQ5jk3LpMOE0EA9vFMgPekgLTAgmTCnWPL6Bzrp9Lo2QV2pwAPrLt\ny3Lk99N4sDU1xP4u7kDL8VGu4hUTqV4zyMPmaZA+YDSLZ4anx0wXoYJgYGnC\n89IgD90FCnfRnkkUD/d+y4+LI1HBYUBRTIjUafeQnG5daowu1ea7JgfSdWdE\n+HJBbovfy0GMvB8QqDCNMJBoJl7NoBzzZ7c8+tq6M7IRBta+3GqUQyTlXhpf\nehKzkpjccorNjCJ0YHNvW3KZkrqNKAT4VfMH9bnktRkQ3oCOumQyqfFVi8J7\nvTQaQZnlUlIK2Xog8uE3ZQP0HsRGsj0Z7DMJ9mZIrhTz7LE0Ti0KPKCeStFV\na6F4\r\n=xr2Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.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 surface component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/shape":"^0.42.0","@material/theme":"^0.41.0","@material/animation":"^0.41.0","@material/elevation":"^0.41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_0.42.1_1545085526097_0.29945388159227093","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/menu-surface","version":"0.43.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"0e2bdac3c9ca206e95dc5a0f3acab6b7376821c2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-0.43.0.tgz","fileCount":18,"integrity":"sha512-iXu+w2TdlRzF1l92+NOylkqowh96jvdZAyiD258pvf2X2pgSjgcFVsyL0ZjTOCdYAkqJHZY9a5/GV9aWa0bSzA==","signatures":[{"sig":"MEQCIFVCwRuBSjX3V3+3MbyIwnzKMIWBOSXK80pnKGOzo3fAAiAHpNT3FUPIgNzbvj6qsPP5YGtXzu7vSLjBKqzkASshHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM608CRA9TVsSAnZWagAAe+oQAJB2JBHe3Ar8Z+Rk8qiG\nl7NCLNVX83+LSbpXSdxV6ek9AwfhNNM9yzBhfMmodqKkAsE/yhk1P24gCZV4\nK4ztviY3vpaYhkpS2w5BVdMyncCv5Ot4kPmUPUN/fYp6v0vjjigiFoxHHWTr\ncsASpavnpbHiPGIpbmfI+ePxPbKmTfv7aXq4TFD/wQ3bBIOzZ50k6+XqsvhL\n1B7qlzd+ZurWsCQrre+o/VNWvRE6pBSdgzx19OBYjT3PFwfPDiAo9lrPDnf5\nUc56nCMECR26jDdDwF0WjzAVcQCfo/9YlyWouCMeTyV3FIyrv/l4Jzcw0IWS\nx/j5ZwYixifmlQ2tXI9EsRz/O5n5BniaiaWsLa4KgQDlzDB3+03lS92GHY8Q\nDIvr2i5IFDQinawaTJaeYNiGQrZ10lCZb0M0CcuG5yo4JiUlsOziSC00Ox4n\nRaVOLDNhylwI1OTrjRWYUYKHDmrFDl2BaiDK/8MkQ8sU1q6dwILZ1Tm5VehD\n0ulRmn4vHgrMIdFX/xpR2kJ/9g34J9vfbBH8ohJHq+M4sSAD+hByVBtK+B4F\nPlhdRiaUMxfvlxBcWP5XhveR1mX4nBJx7yKknmpEHLz+frTNIWVNbXZsQz8W\nmQx9D/99+YTo+n6ErBOWRMmbDKjxR8KgObFWLLab/laQNXyHoaAs5/XL0Wco\nEHZo\r\n=LmpS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.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 surface component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/shape":"^0.43.0","@material/theme":"^0.43.0","@material/animation":"^0.41.0","@material/elevation":"^0.43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_0.43.0_1546890556111_0.2931117298188153","host":"s3://npm-registry-packages"}},"0.44.0":{"name":"@material/menu-surface","version":"0.44.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"902c081df42859b925a5b4502791b3febf48f1ae","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-0.44.0.tgz","fileCount":18,"integrity":"sha512-s49kvIlQ4H5wvMD4yeHMMqnamPod06IUagMK6Ry0oTpUANSnyeNXxa3HkScl7DMJiS8IJeV21fSLAzlZYP2PDQ==","signatures":[{"sig":"MEYCIQDgFDUrf2928MzO98pXdcBYaI4vpZltIMRupCxhf5zvDQIhAJEY8eE1PIEKeyKggEMyEqrcNJB9854LePhbtOPkdltE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWIMnCRA9TVsSAnZWagAAOXkQAJs5liFPtV1bHan3YgqQ\nqznt/YwhxAT7lyNHX5VzkdknWnVVJNwupRz2GOxQm8cy/MVAxr2xGl0CLyir\n7enEtUNR9c/GzMfHU3lNxKBKj+NDMu3jqiRpC2mh2lWJRTBMnNU0PRqhQALa\nUhUbRkOHtG8T0qOb8PW2Zp8oGbcJcOBChKnFCOLLGRxzCMoBnT6R/zTf8hUP\nPxCi40dWIHcpxNKRZ7yiqwU1T6ImTL9qD3nPV0Oy21jsEUfGfHbJyZSmSET7\noeYRQuqXp+mgIkJaYbZlGxeFAQXm8sk19SVLEyNXKyi39XGpzYgYXEPcLFv+\nB0fee4hDg0BG8fM42mY8fAUYo+48Sq72LvCAFqxuSpkTQSyXUIpI38LAaqTE\n82taHIgY+yoUbSdgFKvU8NBiWHbzTnkt+8brOP1HzzMWZNHwCZIMM4+Ozg79\n6ya9CpD8GJ/6r6NhbQsgSQr3VZhPoh3luHuG/Ri0SkylK3Fxv2Wxhhi4uSq/\n78ul/Hyg76ArG8O4xw30OtupxpyBhqVbFzn1lD+x+6JJMGTNLCkemtxf+tB7\nf6wHR0qwU5ThknUANdXbp0xJO+qONjPRvlCfB99oKSQHDH+Q0ASjvcOoJ0si\nb6fjKRBG1NEUbQEzBmZv/YhkYeR+PxnKnLO1LLzySLZG6UJ1UQnjv7dLUHC9\nb+de\r\n=XL3b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.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 surface component","directories":{},"_nodeVersion":"10.12.0","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/shape":"^0.43.0","@material/theme":"^0.43.0","@material/animation":"^0.41.0","@material/elevation":"^0.44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_0.44.0_1549304614439_0.11993892528994676","host":"s3://npm-registry-packages"}},"0.44.1":{"name":"@material/menu-surface","version":"0.44.1","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d84bc3cc50e527c68b281224899b0b4c929bdb1c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-0.44.1.tgz","fileCount":18,"integrity":"sha512-mRTyG1fLtlLCB0syAEKi9Hbvl8su1Lw4z/Miymr01Bfqpvc2hZxVf5bYJ0wuf4RqW32Ch1JkEDI/c5kM2VlCYQ==","signatures":[{"sig":"MEYCIQC/ImrQWznhdElklb2UnuSqdIyyjA9t+S5qCps6cA9FVQIhAL0u2jVQmryN85wGYTWiX1On6v6u/AUTDoC5u9LdGJkV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbIslCRA9TVsSAnZWagAA+zkP/0PWyFX8NZxqO1qBbcUh\nwD3UTqr9iYFo84DPEyswk9UbgEQabzWedYcvT69XD+jiB6fCFDVNYhnEVBOb\nZAo12urMBV/uWlzcMZPOl/B43kZwYaSdiNm3siRXxehfuNvExymBv7J91xMB\nvrGL32f5QaufCBM8JLHsJwQR/aXQ2BQSz5BojW7iS2sYdyj+SnFmEHH9d1an\nYzkP5nSjfmf7W1sFO1Bt47eBx4i19hyYS6YCN/wWEZD3Mm4xy5hC/9uWiR+p\nwNH0eyvwTk8KSIke6vmY5ovHAGXbC/QopF3AreYPgqGxuRj6tNWDyUAu4Gk1\nIDCyf+aT+IOKJ1tAKdcENzj/grTup35hifEzu9LKKaogdfyHlqX3F9Os9y8l\n82FwiqDHeqDmmBpya/GOQYqDOgss8LXipD4PS3iGPm4Yyp8nkIaXadYN4kV2\nWQlpjQNmTKCGlcDEp2k5dfvVvkDTnbcS9y4wN+37s6SunHNGJJvUz5/z97NO\nQGWFdE6MJR0+A5Jx0BI7ivakYN/B7tSkZ0sV2YPqR7acedXdLiwrML9n9g5e\nGDdPJS9G0/v7DEcB4jjXM8l0+1u6xdAY1qNAxG4qJ0ZuRZOSGpaut8z+0PCd\nZWNzFiSZzeRVhp0PA+weu2/93mGb/FMtv99qc4y6OOiiGjG/D/EZEcRS4iM1\njmhE\r\n=s80F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.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 surface component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/shape":"^0.44.1","@material/theme":"^0.43.0","@material/animation":"^0.41.0","@material/elevation":"^0.44.1","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_0.44.1_1550617380733_0.8169907187481358","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/menu-surface","version":"1.0.0-0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b349b9e58c1d90c8c1adb2bc372e42a81c6ef340","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-1.0.0-0.tgz","fileCount":35,"integrity":"sha512-6OLK1N0mV5ovzmHo6sNpKGBgESemVUCNdNAkVE7VZDOEyOlGfDydm2wk3fJztCnMwNDONtXlVAGFpB5Fe6scvQ==","signatures":[{"sig":"MEUCIAJEziGsRBus2tNnW28IXiEdU4vDqHYpsiPQCa+pY+KdAiEAgMxYO0dYABibgZW9WAZsyxSLSEke0k60UfGX8viQEoI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdyRvCRA9TVsSAnZWagAA+QwP/ROdVFXStEmp3Ya3NnFp\nvgBSvg+GBrt0wnG0kyqYbvaapB+MUc09J7PbJJ+QEt5abbUGdRZVywT7rXlb\nSTZ/mXmXzd4N7GZpKdDj4lfPcSWRwrtFem/nG9ZF8Hzu/kdp3MVd9/G++j2x\nCk5mPVjrbxOE+8+QodadabpFJZ52GkDEbDcKklcIs5/JbvYD90aACTRLuATk\nS7e4POZ4DTaXpnDAIV6rToq8KF0XpNxDMYUxkzOHw4iH8BWg1Hb7MklRno0s\nOB79nYVMM6h8C6nw6CU0hkmoFb784n9zf4FDtOR1NLx81ZkvoIcs8/7KvPRS\n1HUb0UpJB5INHq/ElDEk0qMlsX21IoYvdqtZYSur52x3WNd+uxO9zwqXuN+G\nXrumV1IZfELITXYQGfzb1mPLAsoTir/fCbXhr5DXPofk0AiuUvmR0Xzt28J6\nPLEl4g606iB3RV/usorGREpFC32Q1q3hRGKfoBhDm43pHBbYuOiXdP+SZcn7\nTDASClHLiNfwUaqVSsTmQ5cGq4qQuC44KnICx432UGz/TU3QoSBgWDRhrpy+\ntfO0P0GNGGDNE5nvRzzpaPR6IzThFwbpzZ5EcyssYpHlAA64Obhsli2AilPz\nhrRY5AoSYUjhhaXbdTpAc2wBDYHl7V2MsSVUmrLw15hoyoNvpNhF1XdED7Zc\nY2pL\r\n=wD+i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu (`body` if using `hoistMenuToBody()`) has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.hoistMenuToBody(); // Not required if the menu-surface is already positioned on the body.\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | Boolean | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | Boolean | Proxies to the foundation's `setQuickOpen()` method.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic. Should be used with conjunction with `hoistMenuToBody()`.\n`hoistMenuToBody() => void` | Removes the `menu-surface` element from the DOM and appends it to the `body` element. Should be used to overcome `overflow: hidden` issues.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`isFirstElementFocused() => boolean` | Returns a boolean value indicating if the first focusable element of the menu-surface is focused.\n`isLastElementFocused() => boolean` | Returns a boolean value indicating if the last focusable element of the menu-surface is focused.\n`focusFirstElement() => void` | Focuses the first focusable element of the menu-surface.\n`focusLastElement() => void` | Focuses the last focusable element of the menu-surface.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","_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 surface 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/shape":"^1.0.0-0","@material/theme":"^1.0.0-0","@material/animation":"^1.0.0-0","@material/elevation":"^1.0.0-0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_1.0.0-0_1551311982750_0.9392668163278286","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/menu-surface","version":"1.0.0-1","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"8b0e50e5b9c9c607b709e80c2a3c1da3e37443d5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-1.0.0-1.tgz","fileCount":35,"integrity":"sha512-vT9n3xONKgrLMPdiouPdv6IoaJi0oEc2w4eAok/1EEX6GsbVB4oF/RbNKX0OvzGn0IhkSaTKEFo34qRNwqGjGQ==","signatures":[{"sig":"MEUCIBaNtzIkyMKZuyfjkWAMk7wSrAQLSOyO7uWwCWt4sB7lAiEAvNUfQWn+sskYDepUpaKjOMqLUenVnyhg3bbSw2olIGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbXQCRA9TVsSAnZWagAAjvkP/A0SqZKSR026DYQM8a7G\nGV0CBGK0XBFiOWXC4iEBC2E7QqNSmAyOP1sOrLF1U123x2qj4rEB6JkGlJtt\nHqrnjVCLJ2FYTAFHjigoAuz9acct6cHtuRd7WDkrjoac+VTxdVZkDXhHr/sl\nG6R9nkr/FAkua747AdHB4jabfJgm6SdegcLX150D8nqYtEONzys79wH0ON16\ndOlMRDV64Wri7Re9rANthCfuutP6Y1bPMVtIKZ7UYvnqHPsvsJGG/AA930df\nyTCz2PsQ1czQFX3shRWaYQuygTOPpwyBz3vg52b1V27C9r0ODilyjiEPWF7H\nAgJMYS1U/AL2r+W9j8KdScjkmOnaWzYXR1gKeBWzRzTyWIL38xrlAR4gPs+a\nHbG1pDApdGx1VOODOPW8VRppT/cg/9LUhKJIc5WRNNjU6UIkVFUxVmdllpkA\nVq3x/2Z7rSeLHOfEmAlk4HqPU1KTsV7vvz0hBbKr+j9+aiq/OZGAlzbbXsY9\nmXhajgpNidZLSj2o/IatEzQztFouLe/3A0jA+HGDnWFoidyAAJEt7dlcxXr0\n3OsvRht3YETLG+vq0nh3MUB3K6228dKAVxU7JPnTpseMJ/p9p4THG3/gfG5a\nXlYJoYpns6YtZcXwlwqWKgSlhcrahyBSXklyLgzWbfOkEaUO5vRozRt290dK\n+4Rn\r\n=N1pc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu (`body` if using `hoistMenuToBody()`) has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.hoistMenuToBody(); // Not required if the menu-surface is already positioned on the body.\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | Boolean | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | Boolean | Proxies to the foundation's `setQuickOpen()` method.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic. Should be used with conjunction with `hoistMenuToBody()`.\n`hoistMenuToBody() => void` | Removes the `menu-surface` element from the DOM and appends it to the `body` element. Should be used to overcome `overflow: hidden` issues.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`isFirstElementFocused() => boolean` | Returns a boolean value indicating if the first focusable element of the menu-surface is focused.\n`isLastElementFocused() => boolean` | Returns a boolean value indicating if the last focusable element of the menu-surface is focused.\n`focusFirstElement() => void` | Focuses the first focusable element of the menu-surface.\n`focusLastElement() => void` | Focuses the last focusable element of the menu-surface.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","_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 surface 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/shape":"^1.0.0-1","@material/theme":"^1.0.0-1","@material/animation":"^1.0.0-1","@material/elevation":"^1.0.0-1","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_1.0.0-1_1551742415569_0.28266342455016624","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material/menu-surface","version":"1.0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d56283fd277862a1e98ecb873fe8b5150f7dc6cf","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-1.0.0.tgz","fileCount":35,"integrity":"sha512-eAau37kYAbJX3D0d6CbOqjoeHEySYBBhojxAdePZg9BoX/gCwZMqwdOR5Y1J2XXD33F1iaVUBpDUWDxW0uvA9Q==","signatures":[{"sig":"MEUCID3USTToSl5Yi3PwGD8v2nXefGvUZg32eJ74SEfKdtx5AiEAxTuLlKhDteOA5bEiB4Il8XHREABSQQiQUutajDUhdOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDbKCRA9TVsSAnZWagAAo7wP/1Fr/LejstuSWGNx1tXK\nIHtb4rehkIE69rI5KQKsqXubvmufEK1Xy6T4ZwTgzETf/zULNldnZp3agQT0\nvHhgHsdiEyRbKYFsZuFB9tp7SGWjBSGSEd5Bzhdk8OpHKa6G7lu0dBIgj0Ej\nAnTm+0QWxV1ZDSAFQpATgFxmlhAUaov3xk7JJNHjK3i5rY+u+RN6+dSk5pFL\nWtPtIZcW14JNxGDMo3PQLHoDRHbTE7u3cwibgd22qNvL068eAdyYNHlqyou6\nuoYwq9hwNwjJFTUY107pKskKa50fL9CWKWed9wSpc+xd9nCpEdtzhW8yF42J\nCHvhbfvUhf7gKhrs6L7dxMdhQx2QzRx5VqfTdMlivHdv2CdwRaRxT0Od/8a5\ncckWYXmg/m68v28c/Tih3sHp5pYBMJoy+KvGYxY34za4W1yQSLL8NPzPjP5p\nJIw0Sqrxd/HaV1fPCT9L7loPIK/AwaSyX8qLL9B40Ruw5JE48cSA20Yr9EaM\nZuKvBvMViawfFW/dKf/GvHS0eHMPgo+copSi/MqpfsM8bk1r4jUKKtWdnJOu\nmqYwjDKzJXojuBHGrC8ZZQoyfAaCyY6Iw47kipSRRPU0x9ME0AbBeUqrVm4N\njf+CuIJQIsxXYIVdIylcpr9vjx2i75e5IR6YzNZY0NC5pfNH5u4fzj5dAb7g\nSJ6U\r\n=X1Z5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.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 surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^1.0.0","@material/theme":"^1.0.0","@material/animation":"^1.0.0","@material/elevation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_1.0.0_1551906506194_0.6081080897502931","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@material/menu-surface","version":"1.0.1","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b6675771464ecf9ffa397bc2375c4fe29ff07396","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-1.0.1.tgz","fileCount":35,"integrity":"sha512-JFUa3kQ+NtpuK/mgWIcyhC1AClKmt9EQdW4SG2KQhPAGg0juWiZwyMySDIjf+V0buSUZXZ7N26bi32+Y1LvZ3w==","signatures":[{"sig":"MEUCIQC7DoPfQ/PtZwcwxipyqJdaDoiJftffdEg4VMK5oc66vgIgP/itCCERBlDDa0uWJ5f0GwqN2DnrhoRpDgjOupwLsGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":443601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchtwNCRA9TVsSAnZWagAAmY8P/1XtszvGn4vtXbHoO/pL\nyYosqGyphKVAUalshfXdWrluIzkTveYxKKZeuigrxDv6l4qKxAh2XWZ6HCqE\nTet4wq3W9bnSevWkmOxf6wbVPoAXHpjLD08vG10mi6oeow6572gmkIvYrlO1\nOimguIO0oyw0/KtxmzYp86k1e9AaPkQzwhV/loe/fZWb2Pa371sZ92ET+GaS\nDDUx1lXFeqrU7X+90W4MOxg9HBJQvHLdF34pKY2VNa8UPdXBgosj4uo5x58L\n4EmIMwIr1YBj9yBBKaKJZwnxT7U6BLDSiresEvZraa3Lg99YV7PX+JnL0orz\nNl1i151LrkPP+fFcxUtLkk3o8pbu8LHItLiI1v747cYZz+HJg86EvGHfFymA\n+cS+6/xAClXIUkbP5rKC/WF0s+JFcy/URyqcX77xthWUtQNN7yhSbj8A4ir0\nunvoE/pc94/zxB6stEByY1EJtXYJvJtGuQhv9vHFhjsHRqm12OA95R8VHZwC\nrkhqnmr+NdtwEgwefwDAvisMoF5GbmX57l4kxAMcOgGvLc15On+2E9Ah0FPU\nnMhfgBsvF62bqU7uQCvTMg8gzrTV3OybhoBi/cP8gK2VoXmLrAr3ZY6raAd8\nUOZeIM1fKMUJxXKStgAfKtM5ElHwZzI8+2c7JAvLBAmOHLoAZpPTRKQb15Xr\nUgdp\r\n=dQMn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.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 surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^1.0.0","@material/theme":"^1.0.0","@material/animation":"^1.0.0","@material/elevation":"^1.0.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_1.0.1_1552342028717_0.805866211226516","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material/menu-surface","version":"1.1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"76bf59fca940f53e4b1f41a3e24db8d6f9b73105","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-1.1.0.tgz","fileCount":35,"integrity":"sha512-FjCA6TBgeY+mwNcjfeq5/3TCSyhtXxHrT/xQrz1LyrztuHI4Qu7bTb496pXlfPsZHQuwmo9PqW+pwP78noDf9A==","signatures":[{"sig":"MEQCIGcysVG7DbwXM18dDL/d1heCJgZy8rUnZNJp0F1SI4S2AiAwUIrCO9efGwLt3CHezvb2HIeH6BCQmiGU4+zO6kWrHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmnzQCRA9TVsSAnZWagAAd40QAJNfLdmt4EXo3RUzk3W0\nsklUa3WCALJnA2fVRy5pM5kQl2LvnyIjaHh2ynujtfG/j/3t0ucmQPeVGiQH\nOzYq5Usci1LyCSemU44GXUApdRiQtM2EukpVETFZa9skgzcdKVB1ujsibnX3\niV2GGq7gMOBqj9t+TFSz1fd2QKPPbJf6sh9yqR2OSnMPyYYV4bJbWECUsIs5\n68++m/jo+w1h0oVyNuoYHbVWbmuupnF4yK0HjYPmL8couvr4Wch3ZPRnt/CV\n+4CVcw7nivzrMN2J4ZApuedB+ub6VT2ATuwsgeF6TT7jwX+3OkjnLuvRxjQ3\noHv7mnjpnQH7FYET1ktYziBjs6dDnZ04pyBgcLyKOi5HOGqA1BlY3L8x+Js7\n/E1XmCJa3yT+wXw2hUVVTHSnST91nYOGAj83KcCgIqRo1ChWCkbvhmSMA3Fu\ngfAXSa5pLpsXH42GPkdVT7b/tVt1GHMayWc42euYwA8gvFFQbhO0E5aI24A+\nlUItcWfKWXxa1fk40L1wjJU6XZHOLtcFwOdLsAd0DOyXjpGbUEDyBcldXRpz\nFaL/0Jc/8io0ASRTaXBP3qD3HLc2k8Ekiu5j/E3oiY3zTj2pQ2ok3leDEBHd\nQVG48aJbXQ/L2vb8F0SW8dlA+/50M3JM8CdGaXIdm4sWxQxG+G9gUoGalRsw\nfjxv\r\n=0dl1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.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 surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^1.0.0","@material/theme":"^1.1.0","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_1.1.0_1553628367618_0.35778861005728313","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@material/menu-surface","version":"1.1.1","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d930f940e31a1bc32a2c9e3f15d5e60d43871cde","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-1.1.1.tgz","fileCount":35,"integrity":"sha512-bOY3LsVamovl/yb4hMBDi3gh8UFEYyP3GHNpTt+X5KBPDehoFhXG9s21aNvGbHZbwURhhWiRzy/OUC3MLE/hKA==","signatures":[{"sig":"MEUCIQDgDdtaviwhrD7+kizLVbkeitqZd/7Rnhpzvas4srp8+wIgF/ra8ie8ZgebuU/RuXg4jkphCCYCPqz+ekcDSUibDfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq6uLCRA9TVsSAnZWagAARqMP/RV604tj+zGJdVuTMP+A\nnfkijUov0pDKwlfo1XSo/pfqQz5ik3KGe003VzfAL4VA5F5X2M4ZMkbllDRz\nCD8ev0sA+saiU4RgZ9tSDJv6Lg64fxjzLxKndoH1sg0ARgDTrmOTf+7U6cTP\nsf0lcmJ11dw6uBu53b3esVZ68wx/s50BRiGmNaNux09sEQAG096LgTkyzqVY\n1e214Z3opEEx2UnIn2wd4Qh9tgbQzEDScD46rbLBhdJVdQlW6SedOdUgvJ1v\nPk5QwcleWFAo6/KY7qwJLg0OSDhfVHVzIAnmSTNrGvr38a1+CoqhwG0JRWA+\nBm7hNtLIfd/juOhdR8IwvYqXHrRu2lk2+QWM7dcT4IL3IcRo88NGFIUTF+Xs\nweRxi4pSGKLTuF2m32q45YGPp0kx9Ck6GpRKg76dDhdTdLves2DvfZc5aD6U\nbNruRTUN3GrIRbsVkvshwIFo3kiYK7A4qT0JTt45UfJf8wvhbYThx56HUGhs\nYdkePyS8SXNchdg/6R6dDvoDQkaUAO03onDMd0mMoiV+VX+Xr5JOybeJDnHw\nxMVnmdb5U+ARjUVifvzUDpDMqwDipB0C0BSM5TbvwSedOEwFVVnRMHPhQkVl\nE/bLG/5Ssn9Z+xc2zUf7sYy3jAf1EeBxGpvqLkVOaXxByIIvVddCBx1t9yPa\nPVOB\r\n=+X+N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.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 surface component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_1.1.1_1554754443180_0.4114620923821739","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@material/menu-surface","version":"2.3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"5d82b4ed7b7124000a2e1fe76034e94f0a433b83","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-2.3.0.tgz","fileCount":35,"integrity":"sha512-jJ1MyeJnEJUO0Z7kNxvqN0xruWbTT2XKHCiApQcJHHkeibWfbWJdhXcx5aO4FMf/TVcy3ADSxDTdvc6AYrBX0g==","signatures":[{"sig":"MEUCIQDcNddDcvXki8TSXEVxq20B5t+PtRdWNMsRIrMutB9TeQIgBukNv1uxB1KGVFxBpt62fWGzMLAvz0OxAigFlC8d7L0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7abXCRA9TVsSAnZWagAAVoAP/ideponJSnwq5TkKlu5b\nGjlPsa9dn6dzXBmteqJasCYTMhlxvMK8AT6H9ophknuPYWFmEx0hgZHgogii\nXbUpO9dLYHnQ2xd4YZVzhornzSMqqRAPWRYZD5RHcxAMyrSNfifAJv0s7g45\nAle/opTBGlsc/NYHi9kb5NPzkOoWkspFbbBrHN/GlmN6e1LvkesL8aexCAiI\n2l9HlGrommyKx9tBMbdBJ5t9egdblkrlrYIpvFCChCCoZ3oQv1CmZD0Vh5y1\nZ7clJSq2MCABnA2O0XytM9XaE1l+fxps9/8O2ZzYk5xYoiOkRaRKCQ9Vamef\nRSwP9Sth/5Rx+lrEYbw+pUUtYal2Ft+P+CvrQSzQeGeCST1ZfitPAPbLD1wy\nhbcyjN0+YrxdlLbO3PhM8zbZJOjQglF8uKFOz92yaIaNDaJxhm1MKR7K/Hq1\nFYWLmq8aH+JbyNJ7LlzUCk6WjQkKuR+SI0YSifIAQ81qzc34YWIyQbnyb0Ph\nHlLy2NfvrPkr7U6XPtwcRSnQHWqf0p0o+tCw65gzhh5fqfyQ87tdJVoAsjGB\nQVaqdh+nz+m4rQHNxE8QWoA2Igi2cx2X+sBYdCguk0jyMEm0GPQsLaj33YJx\nvFbNOC8f3Ni7CocIFykX1YJStLP+8OI9WRaP6jYg5/fV4c18CwgJVPcgT1mt\nrsR7\r\n=9R3S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.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 surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_2.3.0_1559078614871_0.050185838073807165","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/menu-surface","version":"3.0.0-alpha.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4ff0104448ec3f31cac4bfb025fd7b07e106d1ae","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-3.0.0-alpha.0.tgz","fileCount":36,"integrity":"sha512-defTKnGmPYK90ZBHRP6tnMd4C+oei5Z74L28rQ+wsCCmZlDby/GWhDPLEgQuvfLJI3cg100peZUTdj9O9g7tBg==","signatures":[{"sig":"MEYCIQDwKiKP+QQWyuQU58OiOeDNoeClaANMjGpVN9Xi9j2u7AIhAP22qzfxXf0YINm26N0bnmC3SH4a96O2cV1ty94l/qjU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHpbCRA9TVsSAnZWagAAoeIP/3h54W11Su489MkGfwZH\nnNgXIgvGx40uAY6+27PDR2jcZmdgFhAWUvZ35A2kjk9G+en6aUarx4b/YzHO\nIT4+sp8EA98hZ62dodlOJ0f1tGPUhvlGJU7P9n/tstmDeORHArqlykEdPK5B\nlBgA5jK2Spq670xQqP9/KxWsKzUVKfcBqAKUXtDl3S/t+pa/51xTFGPsJY/b\nxHfa/L8sRvKn/uDU5hxufkjyyyUD4Xxe1qFo7t1imcYBsVb83vu1twySYQFn\n4SontCXDOKlAPbrS3XHyGzsxe/ieXUwjJTty79RzZ4iuaiL1FJo2gldwl0H3\nPrkS7Ie8ahvFf4xcCQlGdGk8tl8s8h5e0T7xpKx8wwnG9mML834gmazAb5e2\nsjDu8gvpQ1OiAQNT6LTb9yWbWoEkQ79IwfmgBCiqxpxjVL1NJJTb/izoMXN3\nJadzC8E01xlf81QY1O39hts0xjG340Sb8cOYbeApuUot0Zvpq9Q5J2qKWF4B\n8FKHUDbgZkLGpFJCO7houqDc3sEFmPK+cybvJHdHJM67D1TmfHxYy/sfHVLU\nPnBbNTp6MYr398RXBFcr0CD437IDl6w+iJlfRMhVtXGuDDGpmcvZnOUIQUNp\nvA14FWTwrdwe4h7l1nq97oXh7/L4WoPDMWxDd6f2ZJmCx/sAfcwQnH7mbuCb\nL/Pd\r\n=Qaon\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu (`body` if using `hoistMenuToBody()`) has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.hoistMenuToBody(); // Not required if the menu-surface is already positioned on the body.\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic. Should be used with conjunction with `hoistMenuToBody()`.\n`hoistMenuToBody() => void` | Removes the `menu-surface` element from the DOM and appends it to the `body` element. Should be used to overcome `overflow: hidden` issues.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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 surface component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^3.0.0-alpha.0","@material/theme":"^3.0.0-alpha.0","@material/animation":"^1.0.0","@material/elevation":"^3.0.0-alpha.0","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_3.0.0-alpha.0_1560312410590_0.09614803433080943","host":"s3://npm-registry-packages"}},"3.0.0-alpha.1":{"name":"@material/menu-surface","version":"3.0.0-alpha.1","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"aa3cca71742d02791a71d0dd9a0ad9b0ad695db1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-3.0.0-alpha.1.tgz","fileCount":36,"integrity":"sha512-A58sVToMjP73H+ht86sBazjydPAVHUNfa0O6eJwWFlutCvsYQX8+Q5ABwPe6OE5RMRhp+EIdT4V6f9mmHz2kZA==","signatures":[{"sig":"MEUCIF0YPRP6vZAWUWJz9yxfr/wHtiWW7q/Pl4Eq5R6fA7W0AiEA4TIe18tEEuF/V96qA39TAYHBU1qkMjq6D8hLxu/wVwE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUw1CRA9TVsSAnZWagAAxgkP/AvKIpV2Yg9JxOgjrFtX\nvcjd5FpEv1taj++JzZp3s1FLSdwTyoYzUT1x75SbPgNtcEch7SIIfKoWfnkr\nHkQfAYFsMDH1KhyulanoCESwj4/mL+Cgz6hm2esVmP3/otaOYWf29VPytbq8\nnpyZo5aIVAQIGhRpXxoUMM1Wse1bmCbScd0sAAIlS+KNw3g0IldnRuJhDWt4\ncTHAXQH90OG3t0UdfTZONSGCdjyHHzIRlK2uNGbQZN5Hrict+eDkF8IO8uEV\n6diVRfBU/Cn3yPMZeyBlG0lQ29GAXr76VrAgXcduc44sAULZQ7ghL9yYF8hm\nMQQQ8IDUIxJ4HnuBLDIneWFsHI6I8OBK9OHOXnMGEDWnJTWg/2ld79AsfSNu\nEJmtQ1LFDqScMtKyEYtrQvuBP/m/f7zIi9+jxenEhyY68+hw1CsuMQywi6Cw\n9LpNeqieR2YhEiYgE0BHQSmNA4oMSORDi+g7NfLu38LL5zQFKCjlapcFX0Qo\nOPxEVgfFqzMnEK0Xjxf/B5txPgf4YETZgQcNfmGdrkZKJ8VnS4aW5TBxLZV7\noQBRUlh7Wji9gHW1LxbfB3MJTlFbGxCJTq2fMw7e03xRTE/p844q5YlEIJ7p\n9yQSw6KrTSW0l0NNqbk1LmWJp29QqRE+vQjjQs36wqrCv1nZWOYpnEYJYops\nmaBt\r\n=Mwg3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu (`body` if using `hoistMenuToBody()`) has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.hoistMenuToBody(); // Not required if the menu-surface is already positioned on the body.\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic. Should be used with conjunction with `hoistMenuToBody()`.\n`hoistMenuToBody() => void` | Removes the `menu-surface` element from the DOM and appends it to the `body` element. Should be used to overcome `overflow: hidden` issues.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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 surface component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/shape":"^3.0.0-alpha.1","@material/theme":"^3.0.0-alpha.1","@material/animation":"^1.0.0","@material/elevation":"^3.0.0-alpha.1","@material/feature-targeting":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_3.0.0-alpha.1_1560366132926_0.5076530750565627","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@material/menu-surface","version":"3.0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"499fece728e9199e063a9caa49ace878cf5563d6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-3.0.0.tgz","fileCount":37,"integrity":"sha512-ILERPQOpgOHpngnMadn4RV/vL5vHvz5JyoH2ttmsaUdfh3kDCifIDFNjTokZNWz3+AAzjbbpSuUjqZkatjPCbw==","signatures":[{"sig":"MEUCIHMzWWgt0XY3SdOsFVw313vSQnv401VjND2KhCGGGV8BAiEA5Qt5mJ711eNP4uPTgamOpQ/uIFcxu8UE2GcG4Fq3UIo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/uCRA9TVsSAnZWagAAsngP/1T7VppBa9ONZOCRgd18\n9FeXNa1vq1pS3MafZoyD+7J+Yjxa6mFyxvAAJfjz4bBAPHCpbx/Y/xSfi15h\nZgNBhoUsSBTGUYSE2zm3PXoQXBT+Ds6sv6GuqST28pDYMVzHcZzTDgttuIPI\nISGhChi7J9ggr0JiQn3OTrBb557KHkg9xuL3A/+rLOgiiEP+tRG0RTVqbB6w\nyHyEf2R9FkAeTSlSJYp3FVvQ2hJVaxzQzPhrULD42kA/Ztaf9j0A4zMy3Hl8\nKMNuELv0EI8iu1gl6Xy0fVLZOwwjjGokT6h+gpjp8mFWEtojHYNuXbIlf8Kk\nxujXLvqn21J5nYAwdygAJ5bOc/URXXWPDIy7v8fFj58RpewQY4kK1XBVVLQf\niiergJhz3rQxbIJ/wvjHPtP85XKQjs2na2XwUdEBDvmXkEd757xJqB9cL4CJ\nFja+8EIGxXuZzGgG4K1YK/ITMZy8ZbpDnlGIWxtgBeFGmVqCIV/4gQFaL1Ug\nTbhvsCrAmrS0Fim6e9FsFvEUWWPRFxyTkgPiexZIvXEtyXctd8w6Mc9Qp1bB\nXb0R9ywRYbR9NhE74oFxdzyawNyykV7zfdqntxn6L1YVhPlqEMHdeYMqqkTG\nsQoc1MRMScFyPBjAPS1w7GDH59pf3BXAUCuGGlVXfIonKy+oNAEKzR6xRz34\nGGvl\r\n=4SXp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.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 surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^3.0.0","@material/base":"^3.0.0","@material/shape":"^3.0.0","@material/theme":"^3.0.0","@material/animation":"^3.0.0","@material/elevation":"^3.0.0","@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_3.0.0_1561501677082_0.7385321237717399","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0":{"name":"@material/menu-surface","version":"3.1.0-alpha.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6f8d438de48575cdbdb7b85e99d982bb4906f890","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-3.1.0-alpha.0.tgz","fileCount":36,"integrity":"sha512-7hKd3JdlsZS1VJVuUGgNIkyZ9ja3FlijdDYadgndj1Vd9ekSPWveFJeY63WHQAzIRLsUpmQVBJ8wK4fPJnfCJA==","signatures":[{"sig":"MEQCIHUxS+XsrfaFcTh+SvYxMDeUVAKrAvyWagPRsqxTPzf7AiAyqi3eBPvM+GIwRHJhdZlFaMdaCkRiOXL4Bgzkx4lJIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":306848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdEnCRA9TVsSAnZWagAA3FkP/AmX/uYxsLCoiYV/67bb\ndwYCjoMyHq4LJrztHDwOTG3RjN6H1A5kdwsB8W0LxqUVKRUz3Qyiue5I7ZDj\n8aWuW7SxmvD+scncS5lYHSDfyqTePZqyoL0TJo/0QZRVN7pBX8aD6iiUoFqO\nWn31b8RgcyDNRhwUQJWIElh5U0BdqDILPwTEWO8xyTLuMJZNKjqfQQ3b35mt\n7zCJXwoARepbmT4N0demGYUiaUCcQdcovCfO8W3B80LFLV4jVlvyhQi/aAzl\nnLsaKrGpIl3DBmPUwuZAuNZ+b2HJBB+deZV4RjAvEjmQFpBTtJf8g9SujPQJ\nhdRrTf6lafeuIoGFnE2dlFCidSN2RWz8/g2g3U3ksTXcyyKu2myi0E4ZMx/4\nsFp1qn4xx1Eyxh3Uukc1xIA7RXPXvFdl/tFje1CI6heZD+wHaoKwBXqjQ3tv\nod4j+APltdx8OmN57ZjtXQAHZ9j8muzapaRVlY11yccQuSFBaMFQGM7Xh/18\nMpEMfEJeAbspb8h6u2w2O+Ec12YhBhxK7QaPWvyXM6Br+HB6POsIeLGI8zx2\nsfyOqYsrdaJAV6tgwckOvkbrpMFHEO/WpXdrj6B62yj859k7d+ZMMGawJVKy\nC9sbj5i9Grr1NhqgykanVAT2+Ojxz0LytuD8BWvWkQsMwfl5U27xHDuXQZfs\nNsrD\r\n=QRvs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu (`body` if using `hoistMenuToBody()`) has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.hoistMenuToBody(); // Not required if the menu-surface is already positioned on the body.\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic. Should be used with conjunction with `hoistMenuToBody()`.\n`hoistMenuToBody() => void` | Removes the `menu-surface` element from the DOM and appends it to the `body` element. Should be used to overcome `overflow: hidden` issues.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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 surface component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^3.0.0","@material/base":"^3.0.0","@material/shape":"^3.0.0","@material/theme":"^3.1.0-alpha.0","@material/animation":"^3.0.0","@material/elevation":"^3.1.0-alpha.0","@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_3.1.0-alpha.0_1563283750690_0.2915579060330973","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/menu-surface","version":"3.1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"5422097de43a371d9b7f4931ab87bc86670a4e3f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-3.1.0.tgz","fileCount":36,"integrity":"sha512-6LiEdJyxosgID2PJJ9VgkG6VGHf82wgAwMM6dVuS/XBaUvMkfIbuT/NuOGJmKQ+R3loqcEsFWwo9KZu5gVnb1g==","signatures":[{"sig":"MEYCIQDV6Y5IlvKRhMjylELUkyieSufaVMI+n3iR20Ry07qWVgIhAIj48ovFSxjRIAcmcopyyZjmqO2Dmmh1mr5Uu+dfVRJJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307050,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjKJCRA9TVsSAnZWagAAGYUP+wS9M8SF4IOtm8phQbwW\nbwD+DvZ4+vLpSqkxhBoJIgSJQxDKGXt77ldOIgpsWX6byvzZrKzNjEf127X9\nx0fBbIm1WuDlk5TTFUh0mYO8zTx/GekEPUh4ZJbILlgCR69fnYykZOBCsrH/\no9C8st2S/0R+219ZtdV5Ot7kxgNwI41wMFFJYIeQzMuhU2tqmpLqdl55KIKQ\nKQbPzCAZDvI2nWuzUAPg2J+Ck/eUtsH91iRM77W5oSV1jMeC0x9LRL2dshgs\ndzbgRTWA4WNV2eRYCs00nbwJPM8V11xv3o1+9xjlz0sQVc6tB6jIfrE8u8O+\ntr7GIEmc6dWb3CKkabRJvMtoaJHmWkyAS5z9yXWYBHjNsiKT2BR18OSXPEXj\n4qP3tcP+V2+2Qxj0BUOhkTDaxWTjZ5Kklvn+eu0mYXiCZq5/AMa/mLXf9pwt\nTDIwLjFWHdCcYop4iSLCjQNPKIroZt2Aoto3ThA+PfYfTnjmV8S5MRu0CpAt\npRiaqy93rnZrKZSD4HoykBtHQRkT8HdtD8efyrQeBOPvHqB7dYrRyqWjx0aC\nd8EPc2T6Oo1mXPvXaT7Q/+PVqh7y95vEtlyNkmlvTOs2XR29ZSQJyNy+dxQE\n6AQ49kHZbuiVu72dUMAK62PznRhiZEf0quRYEyGqd+KxHVPaFtl8/rGXB0Up\na9zc\r\n=qv3s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.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-surface"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^3.1.0","@material/base":"^3.1.0","@material/shape":"^3.1.0","@material/theme":"^3.1.0","@material/animation":"^3.1.0","@material/elevation":"^3.1.0","@material/feature-targeting":"^3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_3.1.0_1563832968513_0.6344974691872722","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/menu-surface","version":"4.0.0-alpha.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"8588446a71b544bf18af58f2f90415f792d409c0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-alpha.0.tgz","fileCount":36,"integrity":"sha512-xO4GZB4NYCcHHSVJXo+LPFZikrA/xMxKNJ8I/9dfr6vFR0cW+oGFH9fsz97Wl3bbzzX2A5iqiBkZQ+M6Euqmvw==","signatures":[{"sig":"MEYCIQDrLjEzozSWYM/j3jYomkBg3TkTOdC6Cqy82qnM/ScdCgIhAKRVw6qqHzEOR3ZdHiGCcwYhKZXw8qwtIgxzDbjR57Ri","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz4HCRA9TVsSAnZWagAAXa8QAJeSi2Z9/Ctzb+Yp7q6W\nToCOuGau6l6oH9wl3Bv46sSFRcNuea7a7H/GtqY1e/eQGmKxkELfUmJWyncr\nf830J+h67NyUqT0t1jO6mpv8B2uSemoq5K6uqd7QLt/2cApkIFHZDzBr1gJz\n0vdBmaNbNW2yQU8bQZNC2PXeQCfslMm9lBHZsVaoxLP8SY1c85Y++sOboF3f\ns5elMrwjlQBHM2zekDfgmB6q0GoK1/xpWbRna2+MYE04djZTidzpsvx3dB1C\nhcDtMyKn+Q1yYQFoM9/FHy/JNhWXUf3kwpInwcB2NJpxf3Md1OKZOamxjlgv\nysCzvBZ0taxTtonFHTgpBbXlDiFvOJtetalcb97E8Y34F4o3y3Y+SyAotgQL\nrkkvNiy12BT5fW74EXO1cK4t8aSJNuCwdGFEePJZbAqea26ZG27XiT4JNSt6\nHWSwT0VOBToZQ8dJicITad8j0xrjyRn/xt9scXqrFSmSPfake/iL/rP5sUpS\nZS2ptAF17eUC9jX+XkfUaeYMjaz+TxmVVDNBAMrmFHRH4R3wacK+xWbUcBML\ndr8K93wncfyj5rJQwDHx1OpAAbNmQXg1n2PDRdNtRhsyUjGHvHikUpiDW5ji\nM0m1f0PvS1cy5fHzfwtqLEd5rg9sZZs/ktR75KlGm8Ts3VxkP1fMkcP4Qpa6\noPGt\r\n=1xUl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu (`body` if using `hoistMenuToBody()`) has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.hoistMenuToBody(); // Not required if the menu-surface is already positioned on the body.\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic. Should be used with conjunction with `hoistMenuToBody()`.\n`hoistMenuToBody() => void` | Removes the `menu-surface` element from the DOM and appends it to the `body` element. Should be used to overcome `overflow: hidden` issues.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-alpha.0","@material/base":"^4.0.0-alpha.0","@material/shape":"^4.0.0-alpha.0","@material/theme":"^4.0.0-alpha.0","@material/animation":"^4.0.0-alpha.0","@material/elevation":"^4.0.0-alpha.0","@material/feature-targeting":"^4.0.0-alpha.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-alpha.0_1565212167062_0.6720456613640726","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/menu-surface","version":"4.0.0-canary.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b8562c1e47943a0fb074d95f907fa4a4e77b0447","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-canary.0.tgz","fileCount":36,"integrity":"sha512-CtQd9QpfVG8RROLzAGgl5z+mB5lKPgkKyWxyYNm4AenKkkMZVEqjchODRvQguHwsWcohB+7WpXrfrMOfxXpkAw==","signatures":[{"sig":"MEQCIFvB9g2XFomQLmygUsmZVVb8GbQYdqOxyjpDIi+iyc0YAiAewzquXFvQUrZUoeiD65wS1x2d/abfc4kkit25qb5dhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":308598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJEjCRA9TVsSAnZWagAARvsP/2Ut8hSF13Zwt/4Sgl+H\n8OLGjI43N4HTlh513vtWV89ZPOp31ajGIr9ZaGmr4S++nbyJMACXS9RZfMno\nls/33oeylEQMOGxjYekrUqBYMUxAfDFUn2UAKVfjAdlmisLCABLbCLiuDrdZ\n4+rPi7PvVgL89HRLaGRcG9tE9rNDtGCcWJBO9/fogv4OUJeoXYLmvzRv2dM+\nITyoTyXU74Yot5xkn0HdB8TYtJKmNueBpPo1wVGKzJSgv8A3WZUJNXx+Wfjn\ngA1j3Cvkc+MR0mQIu9A7eRzrSH8DVGX3z9wAb7h0ehi70dSjZZqpkjSOnOxt\nzNz9HKEnRh4kmPl4fkprB9Zk2qljmXNyhJM6zMxH5/w4siZw3aTVvwRMRThW\nR4mP0FSCw7tNDsmNmlwR+vK+0xVUZq8k4/PbC/hrbaPC93xu5berOFwR/LjE\n8TH9x3D6ZXFo1Dy29uM2Wrcx2N2fJ9ZU4Ca2s/3MRV0lPHhyPWb0DURNtqHq\nHM9N/jQ9vyetvVANO6P6Y9CtNhFYMeef4psPAygxQ+X1/UD7VwK2iuaO/qWr\naU7p3m2D5kx+UsmvloB21zXxC4c6CEt4r96p/MJ9LSuktVDJO5Ae51wB2plT\nGr2t3mjG0p4suqC2wxFAVjYqXjMbROoc2iSlNL4YGeM9dMLuT93NMBQ+npTV\ns+5t\r\n=RxZn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu (`body` if using `hoistMenuToBody()`) has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.hoistMenuToBody(); // Not required if the menu-surface is already positioned on the body.\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic. Should be used with conjunction with `hoistMenuToBody()`.\n`hoistMenuToBody() => void` | Removes the `menu-surface` element from the DOM and appends it to the `body` element. Should be used to overcome `overflow: hidden` issues.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.0","@material/base":"^4.0.0-canary.0","@material/shape":"^4.0.0-canary.0","@material/theme":"^4.0.0-canary.0","@material/animation":"^4.0.0-canary.0","@material/elevation":"^4.0.0-canary.0","@material/feature-targeting":"^4.0.0-canary.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-canary.0_1567658274798_0.5235140693027114","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/menu-surface","version":"4.0.0-canary.1","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c163c1e9c344f5c74cd8a8e80702065754450fbe","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-canary.1.tgz","fileCount":36,"integrity":"sha512-sP3E86Xnc7uEbp/3PQLldbRXUXxvvLNu0HPYxoccZ1BkouLHEMUgYFGxlrHv7WXQrqkib9HoTB686/1V+N78cA==","signatures":[{"sig":"MEYCIQCDBqa0TLI5rrXONj7hh3fBDa+NvERRX2brCKgCNsst1wIhAKmC+MZ3XsjY+q5sa9Vhx8a0V3suI6gJwQSmgtJgSM0A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":309462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQbCRA9TVsSAnZWagAA5IUQAJbR/ijWoPvmvr72twtP\nW3kel2PX3/6wPb1SOIHMdWgvHwmBwBSEDjIvE5wS3FdigKfMlJzxjrQ/S03Y\nJod/ep70vdafKsjuW79C6QN1jIU+5DSTQcfY6ZNDingDuOMC3wpyU/QIRioP\nuKjPvZKOi/aRl6LyU0FDuQnsRDQ9i38ztPJI0mgfs75E9o86dzSVovHjVqRq\nzWNyxx3PR+kgNe61P7lePkmrvh7KKkxELIGWf6fp0XRxPoDbfO/rLfw4xIgY\nXXUcveH2lq11lr8oGf2qsv/cBJF2SW6+Z2PTVnHhcvtPyJDym+twgCz2g05o\nqz1EySb6VLrNB2KwwCT4dYWUMcfw5l5bl90Z4gzw5//Ris9YupEGlKoOT0bU\nT5rNiDT79L8iX0RA0SfS4otF1fFW6Yf76l5o2vZ6mJhyrw6so/3ZPneH7wUl\n1A9vFRNRXtiMfA7AfJ5fbNzOPPElto25ZUqrHPAu1DfLMkHf2O0bwxvQbMPF\nnELm28UHyHBtqjPbdFruemX6jUeDZgeI7LT/aGRXb+/lfeai4Z6J66pBG00u\nbtWaYMcvgBG/HiO9umoA8Rx2duwV5XPL6RuBuI0+QvvJNFQVCJQO0NoUiIKJ\nEcElG22jIL40lbngnyli4QbBuyLqPuXys0Scs0Htt8LR+cefJG23jh7Hj56C\nDDeF\r\n=PiF3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu (`body` if using `hoistMenuToBody()`) has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.hoistMenuToBody(); // Not required if the menu-surface is already positioned on the body.\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic. Should be used with conjunction with `hoistMenuToBody()`.\n`hoistMenuToBody() => void` | Removes the `menu-surface` element from the DOM and appends it to the `body` element. Should be used to overcome `overflow: hidden` issues.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.1","@material/base":"^4.0.0-canary.1","@material/shape":"^4.0.0-canary.1","@material/theme":"^4.0.0-canary.1","@material/animation":"^4.0.0-canary.1","@material/elevation":"^4.0.0-canary.1","@material/feature-targeting":"^4.0.0-canary.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-canary.1_1568060442362_0.8176481253246586","host":"s3://npm-registry-packages"}},"3.2.0":{"name":"@material/menu-surface","version":"3.2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b779276bd69c1ff898f40b7cae54e5d8a874b1a4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-3.2.0.tgz","fileCount":36,"integrity":"sha512-/B8FB5CR3QVNJZIlJzepeVluxPnQ6V2EbalgIAtOF5GIn441bXRDaZ9fNsq2yV424v2nhnDjyEcRgzBoXdeLVg==","signatures":[{"sig":"MEQCIGLLqG9cbDi4D38GhNzxyiKrkOTI86sWMyQ7DkSQMO43AiBhaooJ8mLvwjRK1U/mWCcbRPKXnwKXnE4Ef0L0GQFjcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":309774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJder5nCRA9TVsSAnZWagAA9JUP/2QEJ0LIvG42fQ3vj+XV\nhYFMrYUY4KBXbrlxCF4AZfispqF9EH9DYc/FUveoabJiXODxmnOyIECxvnS9\nzPUHAgZAZ9gmHc4Yz23Lqp4tVkdm7hxBAqbXIB04BFDNL2c+RRX+IzR7w1oG\nd7vRlDcsMe8MNL1Y11ikR0NbeyXoEngxCbPY4qmjQHXjmyplrg/czUzoYNue\n8WxdKbH2s39a++KiXhgQgj1wqgaQBN+IrdCtAS4hY/53lxZzOXGZfMHbt+9Q\noZaHRIR4k0hcxfNyyVF7FYTAISbS5gSag14rqYRbmYlivYFC25ZuF3U/7xTj\nLQhY+S+5K2a8Pt4GnzREp1nbWkrWtF+dk/Sh8rxhZNn4YwrzdmOLzvReezVn\nXpWEAO+mOcM1b+YqeqGzUKIZ7LJV3TN15hkvaeCdOpy1Ymj55uM41ZQoxzEd\nvvnBikvWxZnuorUnI/LW8jhUSifhKyS+9g2X3GGB3eaehwp7kgRH3tvX3xCU\nNOG88P7QS2SJ/6So6nfwJOYDtyDvefJFM6ufcCOn62TB6I6IXKBRxD2NBdQK\nFDeUUudeHCYSTvcyXo2+duJKfapX+Mdi7XRcEFB1qaPMsADfxgyLu+ljmWM6\n/VulHlmCv5vUZt6UXpmtm/ETiKg9BWk1UC1lXV+eP/kZUvKHSJcfNHxes8mH\nSuJ6\r\n=7all\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.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-surface"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^3.2.0","@material/base":"^3.1.0","@material/shape":"^3.1.0","@material/theme":"^3.1.0","@material/animation":"^3.1.0","@material/elevation":"^3.1.0","@material/feature-targeting":"^3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_3.2.0_1568325222532_0.612574127531182","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/menu-surface","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4e30954b4fc53877925b2e139f06d9f778307f70","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-canary.79d881baf.0.tgz","fileCount":36,"integrity":"sha512-s/Kbn93WMxdCfQSq8MbfSiLUx2QOAdP5RBDbakHr1sS0Tyqcz3ybc9KXmFMxPXdngKRq0gYRJr0bt2iv5ZJXTA==","signatures":[{"sig":"MEUCIAflPc/jMiVV0oJVHQxupO2PmcEabvPaCj8ZzHo2te3cAiEA25jcSKDbCSS0cioAWMjjJ3S0X3iTCmNCbi37C5ZyJ5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev0vCRA9TVsSAnZWagAAseYQAJSTOEG0aPGaZkpjqRj1\nUfVK92hNbTmT9D7KyRFee3OPOyzzfrh8r4wlriHPiaAepoiG2edOWCPDP6hd\nKG8KJJqtTCuuhWnlvhDk/MiwGFXAUg9KLt5RUkM7RhfBTiJO4hLFMKbkg5AJ\njJdmaSd+6H+GP+YRUNQBSUnFilnHjVVziRKioM1LSTdjxnQYIPFSrvLwrOU2\nW7qOr1htnLK6WyqBEglK9/+9aOfich97Zr29TxdBxi/863CkzKUyDKspjPXa\ns7a1a1nP3bg7pr/KtKxc130E23fmfYzNvWhpxb6vUI+aSWyh/kjtrV5towE9\n7blPz9IZ6zb3mhXqb5tI5+bQeqC/KqnXrmRrSR1aFwgdJSEQevAhGAVLncPM\nOwGqYGHligsr9biXMFMvmVAOW2mXNEm7Ao+xP6N8yue3E3RPYx8tx+P6/+cU\nT5LfdASxSLp9pMv48XSwTL11azH5Tz6E525yHNEWrCCK89D9q4F4cIOrf/c9\n6fq70TU0vr8TGr1BiNmZ8FQMfPa4gD6oeQzPkJtddH4EGTAqEWaPHsbPFrFW\nORv4QB+zdtjt07IBonH+fTdTUjn0YRRFdG/biws3iCZDpJlwR22J303sVk++\nFsVKDaFIkKjJEaFuGBzQI2VfyTqyYKUU4X0H3BETTdNUagsd5lqB7GFTcieY\nI5aV\r\n=Es1V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu (`body` if using `hoistMenuToBody()`) has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.hoistMenuToBody(); // Not required if the menu-surface is already positioned on the body.\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic. Should be used with conjunction with `hoistMenuToBody()`.\n`hoistMenuToBody() => void` | Removes the `menu-surface` element from the DOM and appends it to the `body` element. Should be used to overcome `overflow: hidden` issues.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.79d881baf.0","@material/base":"^4.0.0-canary.79d881baf.0","@material/shape":"^4.0.0-canary.79d881baf.0","@material/theme":"^4.0.0-canary.79d881baf.0","@material/animation":"^4.0.0-canary.79d881baf.0","@material/elevation":"^4.0.0-canary.79d881baf.0","@material/feature-targeting":"^4.0.0-canary.79d881baf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-canary.79d881baf.0_1568341295371_0.10586155329135227","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/menu-surface","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"981bc187000d41960f701221167ab21f5613d4af","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-canary.e851d4f40.0.tgz","fileCount":36,"integrity":"sha512-/DTN+HnoGc3E+XU+GRd0p5oJxGAVuYUcP9HGS/JtWRH8k98wfZHy2ZXPmJya3c/mg8XTjyNuUz0jD92mfgBc3A==","signatures":[{"sig":"MEYCIQDrUlz2G8VNXjsJNT3FL1obrYtVJAOePUSBl+Nl/jrh3AIhAL4Wd1+3Dq4shC7Uo26KB3wfpYuie7Kx4YlWhx77fj7H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexX3CRA9TVsSAnZWagAA3EwQAKFoEuLJOfN1gnQhoYpD\nlGUJR+nZtAQV6CemIFzF4ohKFmYN/HoFpb3x3iRGPQkKZXH9r5VN30gyf7+b\n7Xj6JafX6WiyE0KOiKPhZ3NTxE/jrfZa6CCUIsEH0+rq6KGhMXayLb5LN2ij\nAP+jpMaTOJUDon6hV8hKuqQbdu6kiu8hjm6wmZZZ92eTZ/uctIPEj0sikqPj\nWfhAdDW0rQ0JTzycg00PQ8DqbFpp2zOL7j74vTwQ+gm+AVJDzI0JtfxpDyEJ\nCbhQPQ1dRp66i+2vXiK8jtRF++51+o1+1EsLSmPuzuUv1mszQFBP9CwqeOGd\nKChlwwcA9Srf29i8H+J05Jl/cLJjKKMC+hsxPBrKhUbiVPNYnETdgjf/mrPB\nUGMZmg80XTbiNmehuVot/VZvhkGcjFhaAxxr5Ah/b7PnLyDWoydZkIMrIsq3\nYswffFsoGM8hdqkRdnMX6h6WS9G0QtnS4Yo2cTAfMckJGKcqYnZul0iwYdJi\n4LJbZBz9EQY1n1RaDOOKSk8r0sCkiblH47eaudSgDKTe7bDPpzdNoZ2Prv8z\nwzlAlbDVDvoYUlxuaJncSZWQZubPLEVrh0T3+hUyHNLbNNYoNeHt6EFoHsNC\nrlOV33ggs4ttUhJfGxyxWylu2ldeJ9KR7j5j1rNbsSZjEymbf/17meNr4Wkk\nmIFM\r\n=dIpj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu (`body` if using `hoistMenuToBody()`) has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.hoistMenuToBody(); // Not required if the menu-surface is already positioned on the body.\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic. Should be used with conjunction with `hoistMenuToBody()`.\n`hoistMenuToBody() => void` | Removes the `menu-surface` element from the DOM and appends it to the `body` element. Should be used to overcome `overflow: hidden` issues.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.e851d4f40.0","@material/base":"^4.0.0-canary.e851d4f40.0","@material/shape":"^4.0.0-canary.e851d4f40.0","@material/theme":"^4.0.0-canary.e851d4f40.0","@material/animation":"^4.0.0-canary.e851d4f40.0","@material/elevation":"^4.0.0-canary.e851d4f40.0","@material/feature-targeting":"^4.0.0-canary.e851d4f40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-canary.e851d4f40.0_1568347638529_0.1279749673731565","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/menu-surface","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"423b6d66e0f21657bbda3762c621027c4042094f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-canary.905884690.0.tgz","fileCount":36,"integrity":"sha512-BrFJ4F6qUaaapL+XWawmh/lURAPSfIAxO3zuTvwOqAgbB2b/zL7J1NPr2wuGErGiHWksOWIo2GGvHYLMAO9Oww==","signatures":[{"sig":"MEQCIHCAKbwxCDQX4kDHWqQyMuCWjBNXTDtMTszD3743SdkNAiB9Bv57wzfB9WeHi2qTcYShYre/0avFhQvpMdQGtDw0sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB82CRA9TVsSAnZWagAAAGgP/1oSPrgx6g2VBSr56AZk\n2svOf8Xd6iVcLNKg/Ao2T3uKbRgtX73S0ynV9L5/NjSdfHw4nMJGs0osPbq9\nGhQ3e6KnDT6urq8LCrEfUKbuFGtUZbGvUlM0wnH2pjunLH9IkTWv8FFSIemQ\n+I4t2RNOYNDm5HRvRtCyvDg0iJLzdXm/Txoc0iCN7XuWatrC5I8UKPI9rxna\nmSfOEYYZ7kdsHOBWg93fCMadCsZE0Mx64eOObwzBPHpBnrZuYTb2lZm7KHGG\n7m0miFy2lWqt1/NLvbzLT8eTSgEjB6G+vtxHsLrLNJtyXFy1jUoMEQ3hTBdx\nMbrL79A39pqJYKNYaQ1IIofQHfLEI7Qj18s4l1uDi36jJk1ghd3CpAb/YxyB\njlZElDNcW/n+hO5DIgTjF5tZMe0r/Aa812H9jFty0qda8rN6kGKL89zViGq0\nQ5PUKXuByn1zfJLy76h6PKJ+eFMdperWlFEit0n4J+A8Lx/FGop99VEzzHK4\nICDgmAAT3JCzd/e1ttxdxTm5ua0f0/nU2Jhga55aHqTNht6czXHJw7cdv+hG\nwn2QtyZWBd+VX3/hXMppjV+tn/g4iLjObc19l9XOlU3TjrPKONQ0Iu4x9o3l\nPNT+6r9MuepKWX/Ol6hAWhDX6YGLBlDxPzTo12mq6sSXAlbY7djP/8iVnf9L\nuGlY\r\n=KXA8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu (`body` if using `hoistMenuToBody()`) has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.hoistMenuToBody(); // Not required if the menu-surface is already positioned on the body.\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic. Should be used with conjunction with `hoistMenuToBody()`.\n`hoistMenuToBody() => void` | Removes the `menu-surface` element from the DOM and appends it to the `body` element. Should be used to overcome `overflow: hidden` issues.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.905884690.0","@material/base":"^4.0.0-canary.905884690.0","@material/shape":"^4.0.0-canary.905884690.0","@material/theme":"^4.0.0-canary.905884690.0","@material/animation":"^4.0.0-canary.905884690.0","@material/elevation":"^4.0.0-canary.905884690.0","@material/feature-targeting":"^4.0.0-canary.905884690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-canary.905884690.0_1568677685462_0.5448444839197899","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/menu-surface","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"93d61d1334248bdeca89a4e5cc41e9352962ff3d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-canary.199534d61.0.tgz","fileCount":36,"integrity":"sha512-AIhhdEegCBaKTBb1JOQD4/sdGrPeo1LCsHFbHHDcIkmwf0O8pR56qqhZ4uGGY0LYBCeyTkJ4Bnb/lLNJGNov1A==","signatures":[{"sig":"MEQCIANZmToopl5BukiETOx+cU3ErciZNSzu4r1GdDirh07DAiAgs0XsglXgR6sRoXEELsInNJngLxsuIgvnSoklLUfCtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":313196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjluxCRA9TVsSAnZWagAAHJIQAJQWSeNVGbYVEUiOYrxe\nMOcTAXUQZYtENwEGvbUUu9J/RAXVQocS9z0t5CORd3eBZG3fFf+xeYcwqpYw\nrgJz3k7X4Ehv7XFAlhxzCjlfrgmm7x0WIsX0o9PYEaWfW/TVnBqJpwLT/kJO\n5tt2IGCdZoER2zc7zmTmb6/DCuYCrrrZAZit5tCNNT395Z4jv9TycKFa8n0I\nhMZI3gVSRWvQY/3Yqg1hPfPyt8++nXAunegXZzVzjdXeS8APsLlibGaemW+d\nDkwOQrLhhKJTygB/I4ycVzocBvxctj3KiV+BxNrUHl0I3FQ6woZgLJkKTAzb\nOF0G9KkOTL5KdJFhuVzQACn5FTVcfRoEPFD6g0CIye6uC4z7hOTnGbQY2V/R\nro5IRTTr1H8Hxz/xzEQpNNN4BMK1dj/kQ0GnS51XZEIamQcau9RtlOOLeXZO\nD2CivpvHTtO+ixpIp22TEQ9Lq+BW9pHH51SPBNTYMmjUi8NlVfUCG1nyPbGp\n/6YaZGAwL+3O9d9ro7w+7YxZm9JfMVqZ7/Zvzl/dIepdERt4zEY+6+73awVz\nR9DaW5Eb4inMU6Jv8wJdJoFms5TF7G9cwIFr9fmhoaAllFemqZ1ZvD7JKkoO\nal52B8g7lrbPqJFWpKrdjUZhG9x1VBMLexSFwOHQhoG8QOoVjTP59yZGTiqo\n6DTr\r\n=A23g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu (`body` if using `hoistMenuToBody()`) has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.hoistMenuToBody(); // Not required if the menu-surface is already positioned on the body.\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic. Should be used with conjunction with `hoistMenuToBody()`.\n`hoistMenuToBody() => void` | Removes the `menu-surface` element from the DOM and appends it to the `body` element. Should be used to overcome `overflow: hidden` issues.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.199534d61.0","@material/base":"^4.0.0-canary.199534d61.0","@material/shape":"^4.0.0-canary.199534d61.0","@material/theme":"^4.0.0-canary.199534d61.0","@material/animation":"^4.0.0-canary.199534d61.0","@material/elevation":"^4.0.0-canary.199534d61.0","@material/feature-targeting":"^4.0.0-canary.199534d61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-canary.199534d61.0_1569610672926_0.24802885475650305","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/menu-surface","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"5c0c643da3d6c2a3353baef2d1802a16594e3c20","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":36,"integrity":"sha512-IDo9TYvI3JGLgfMgyvW/OJVNq62XY2+qUgstRExF73BobHv0sAfw6jY9D0IP1jcWtk7I4/gMjedRi2AsFfgboA==","signatures":[{"sig":"MEQCIGU7GxZuW5dgFLEvcqx8eTy5mriraX8PLc51GQFb1PrNAiA18l2lgIpgC1zqzaOrAMbZ/vB0bAHk611zIdRoZ0B++Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphaICRA9TVsSAnZWagAANwkP/jqbb4U2ToE31e1K4LH1\noSIhseeIbkqVdLqtWCfiqMTrtmnIcKly+5QpRvV517WF98+JS/4oa74SJ6mH\nv8+9ik33Tq8l9UNiazPIf2Ssv6Y8H/r1OSf6FOLbBEmTBj7Y2RkuJiRhjVTH\nYdLvcg0wOP+1a9pQBz5L3Jkph8e+TpB+z3lu2nHlc9QW43EujlTQ+Vi9XP7w\nAQ/AsK8+h535T4J7hrUfZId7y5jHci4yBntZaaPAvXbRlMouptjkY88W3GS7\nlQYKIz8TNmPwCwyd4CDcbHZO77ScDP+hC291RZenaI+bNwjh8VBow/NoyQLA\n6IqsXM7YPyF9XLaOClXjSv2+Qh/6bzc6afs4OyWbYh6+xFbo/U05rOzQmvJc\n6IrlNomRzzdzd76tsSmGZCpYzFii1jRGT2G6Lh05RqDDViPPNxVKiQGbx/wk\nFS4d1ZY4kE+N2q4Owyqo1OhcuE3RbBJDOkXHrqdou2wvGhnzhJNU5qzprwRR\n6LDya+TDQ80ptC9+ccYU55sVm5F+RM7ZK19UNOXCz46WLFkBd38+5P5MPCwD\n8Ceofxd5mFzNwFhD79S/U/iUsPV2EOmVaKRoJA6LZZgubV2yQaF0ZoD4BNxF\nlMUBwsae+NpSAXOdJLnygdr4lnOEfEm/vCvQrFDOKU6sG00zX13ZAH99RcPw\nSjKR\r\n=cpO6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.22d7ad2fb.0","@material/base":"^4.0.0-canary.22d7ad2fb.0","@material/shape":"^4.0.0-canary.22d7ad2fb.0","@material/theme":"^4.0.0-canary.22d7ad2fb.0","@material/animation":"^4.0.0-canary.22d7ad2fb.0","@material/elevation":"^4.0.0-canary.22d7ad2fb.0","@material/feature-targeting":"^4.0.0-canary.22d7ad2fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-canary.22d7ad2fb.0_1571165831916_0.42223758278622503","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/menu-surface","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"acc6c9efa0127e2c4c20ffa41b455f196f6ac5ad","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-canary.735147131.0.tgz","fileCount":36,"integrity":"sha512-MbJaQnc9Q6Z2RJA00Q1oxS4Xw8oUc9r2y025Xrk4cWkcJLN5lml6SG7enZmX6KQXa/2iHQPimpTh6/dmIIiOKg==","signatures":[{"sig":"MEUCIQCpyv0uuVzTMFIg5gv06ovvP853n8YWR817W4wnDSAeEgIgERXnvgKPT8/7nk0SeUs6X0TE/kpkYWoYi+ssooq8nco=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":315466,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnEeCRA9TVsSAnZWagAA1zQP/2IG+XoJ56cd2zkYUHYN\n5acwVAHPg9kA6tb3+M4FWkoLW3Lc5idD6tbm1fKYmioBkmVmwAyQkCZIgQp9\nNMlZJVEgXAoG3pKH597JS+CkswFHMh4K0z9Uirg5yzePGbCecwSWQ3R3hTGk\nMiHxT6YV5DaWi4fEPVbSuVg/IUVAJn+1MuVdlyoQA/ANo96XcmRs77JtRBmY\nc/jYKPU9HOrAVpEhNrS+JbDp6RhacEbWLRW7UMeN0FwPts3pv4fsnbG2pKEt\nNeyaszB9FEior5t+EBbvhvhu72kQgVXDPCS1bfgXgbgiwHAkAMq/kivCcE3G\nFrbSFU4Sz2YRyEe/Cl21kRQuLofUHEXTWu+jHyzRJuW9Umsht1g+nYslXAQ7\ncE3xBu7+vphjyKjXLraCOI6nC+3eEylanz7aSmx0111SvlkOy8rW3n+n6RwR\nnVBA2Q+Dqv9+YPhTFC4jEwAT4191vMGtyOnNvO9MLxpZZWdjzVd7NfiRvHOM\nsQXiY0OOG78+JFH8drJIiS/KFPk2kIFBsEAdwjcwUWVyM8CqgBMw+jEMHQkK\nl4QDyR6gMUIO5oy+bkgQokZJwgN40/Efvo4EWUblmYRuPO4VidWlO2UJce2P\nlHOpQ63RcOfLrp0ZLQyHxmYU+3ZOn/tvcxPHSxoDPgypVJLhmVXfPA5fV/Uj\n+CwD\r\n=oiWr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.735147131.0","@material/base":"4.0.0-canary.735147131.0","@material/shape":"4.0.0-canary.735147131.0","@material/theme":"4.0.0-canary.735147131.0","@material/animation":"4.0.0-canary.735147131.0","@material/elevation":"4.0.0-canary.735147131.0","@material/feature-targeting":"4.0.0-canary.735147131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-canary.735147131.0_1571189021704_0.37451927429258824","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/menu-surface","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"99b7067265764b71741c943eae742bce49089d16","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-canary.062ade5c0.0.tgz","fileCount":36,"integrity":"sha512-MiDuYAbGf7zslYLb18eUyCV24Ji/S1gcBT23c7asd7smRyGHq3oWZbfs2joGSSPyOPmz68SO9NnP9wGYx+wgEw==","signatures":[{"sig":"MEUCICd9emIu7rrOU5SbNicIIP6Ta/mnrratkjyofMaAoIvsAiEA5OMH8g04+BTS4txJcyw4DsvVDJOP7/KBPw2Lstx1t5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp71xCRA9TVsSAnZWagAASMMP/ifSc6Pzw7b0wuBkA4q8\n/MExyaVD9tJyG2vqdMNI9dr55vC1Y4AVTvQWaTbUqM5krbLeFkvQ4+tb0kfz\nm6fa5jvwdYf5vljtG99P5uolS1McC5ADDaCBtplC2BOL/ddShwbMIQ0MqDeV\ncwybiB5KYYL/k3vKDUcpRzmuVsiPh2hIIHl0715dmV6EclYBCFWlme2CR6gO\nc1PvYj4Lot96/PCmCvuN2cNOpdldNB+gYBWR5sWHj47YjTDdjESxMUMR8Y8j\nPUtTgzREciBhOyvyUFC5UE47Luqn3yBbYuaRY8UCP53bR4yY/ZZ9mZnF8xFt\nFUJXtLFKIzyX8hzXyXaBl7JdpEr+YJNGXQzfhUhiT2uT4ZoUcvO5+752UpEk\n4T4FadgZOEmav/LPgla66uyI+qM56hDu3LvbaGFucUEnWYbAvdGzi47D6sC0\npotRcLYgaxcxSDm/s2tsBRkzaHohwdHK3F29sY2vLxYCe9LShvY0H9SgGnum\neQo881zpo/kO6P+HJSBkx7kkg/POpvzdzuHR+YThwunLeif5nCk6AGPini6m\nqfH7Vp1N4ZCaeKFpBeg+1HFrTIfhtgD6RGotdoVga4u37hMbsw3nqIiLEvm5\nq3PZCStP0o7f7tDiRrtGos9zCB8XsbP6MoDyauf2rt+Jd7i0uo45jrcz/eFN\nZM4J\r\n=Kqrq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.062ade5c0.0","@material/base":"4.0.0-canary.062ade5c0.0","@material/shape":"4.0.0-canary.062ade5c0.0","@material/theme":"4.0.0-canary.062ade5c0.0","@material/animation":"4.0.0-canary.062ade5c0.0","@material/elevation":"4.0.0-canary.062ade5c0.0","@material/feature-targeting":"4.0.0-canary.062ade5c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-canary.062ade5c0.0_1571274096365_0.34527161585883315","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/menu-surface","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"7dd5a66be4f73d75ba8a4764efa8197d47cf8787","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-canary.774ad4f8.0.tgz","fileCount":36,"integrity":"sha512-NeP4MvZ9L/zeZisbBguTr/0aZw/Nq6sfDsUdrrs9dgJ2dH3jqsMBYticwjq2mkKzXJOwKgXEyF42OZ5npbMfpg==","signatures":[{"sig":"MEYCIQDvABqsq1bTg4MHeiU2hIymYX3yw+r6dbAoq0M3sCfgTgIhALSmpRV227GIG8MhpNFW8IokLqN3Zd7tkgl1Un7d/vTA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":305558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+hXCRA9TVsSAnZWagAAM04P/iFmd/v9w5gUHNttvj7r\nWRIUj4trpWvueVM0p8Lmt/QG0CNzK6eTKDtzg3bPIJ5lQ6wTErQKL74cO9pu\no4/7sR89N2Gehldx9EPPRDexbINZ3Du8xcckF06xPe/jBLPKGLJ2Y4CEv2r0\n6197FeZUa46qmbwOWxhII5e44a6jvnTfhV3mJbXxE3rStFtlReAyEggo50mZ\n7IebMKW1CGxaVxk1UtiVeLQsbrxAvOKA5b1EVOidOICJLA9r4wUllHiRXkVn\n5/shPh2KCQiDCAH+2C+YaaAV2D/YzLPQ7jQybLSdsHd3fDzCsuuxs/RyBQux\nyGI79OX4zTM02RjpBMxQYwAddhzkY/F+h4ZT9i8LF6yln8T3rM47YmlrXc01\nv26jmPMH6W+EY/7peSvk0EsXrcsStrsxAXQBJcBY7WsnOzIA4PPiBgbdfmKp\n1x30i8jB5GlxZdL82yiZxHH2tKc+JT002ghI3qKyxr3P4TM1xWyE+rwGIq46\n3P7CXicKE7jbBdTFbEeADHY5c42M7jYAY15s/qa4x2L9GKzRZBACCs017+5Q\nncTaxF25dNalIphSq1hl8vA3TuFJPuQG4xuUz7vflP58yYiQyPEj+19whmuW\n18NKgHqPW7nOHWdLHz5MSnkiEKjPYBO3AvQ1KHQf9hzxVfx+umZRHkW5QEEi\nGDQk\r\n=NT4z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.774ad4f8.0","@material/base":"4.0.0-canary.774ad4f8.0","@material/shape":"4.0.0-canary.774ad4f8.0","@material/theme":"4.0.0-canary.774ad4f8.0","@material/animation":"4.0.0-canary.774ad4f8.0","@material/elevation":"4.0.0-canary.774ad4f8.0","@material/feature-targeting":"4.0.0-canary.774ad4f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-canary.774ad4f8.0_1571285078301_0.5953928973997415","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/menu-surface","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"135bcdaa8e25f6f65a668ee7a153ab98bb9538ee","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-canary.5916d18c.0.tgz","fileCount":36,"integrity":"sha512-+QKwJFHwMXk9HR1KV2h2xGVEXXvfk9+m2Oao1KUNKzQEVnUNeuSJSQi5j5sUMvmqyKXb/OMIkeTc9M5uIgW8ww==","signatures":[{"sig":"MEUCIQC/k6yKUoGNVWFqbSknOrVYjnoV7CcRzoakmp1inj98DQIgQ5v105rCMp4k8aB1y598nh4lPM1YWcKtzA/IT1z4n7I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":305739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhvNCRA9TVsSAnZWagAA6+MP+wXA37CHe6+bZI/exbWE\noUDMQH9W8djztD2KfnjGzyK+UGPWEo/Lz8rDRSZpsqycGyjdi6qWkuI9yxFW\nShdwMT7jKufUoGvWJ+tGIfp5500B5uvpVPTx+aKMAlQ5ZpIBJVL2Ggtak4U5\nB9W7BsAmirPs+LsNflGmW2bgKTUnNO0mCp32O8AJ75PbIEzK90r+6T0qLbet\nyJ9v2nB5i67YReAnHAq55pstUiQDokXaz5TtcyR85S9iaXDp2aezPWSHV5/p\nLy7hOBZ9NgHC+8ium/I3hpL5hwfYv5zRsirwcTsRrUw5yY/bVVxCUOfpaP5P\n2FvmWKPfqkPfWcvY7F0NpWzU8lbEC4/bLwItvLNPadWfBdRkjM1xU+VPEPLK\nE+9UCeT0sVIX1cwyOCKIddu8Xg3plr5ibJoysFRsNzWCzF3bWZ0ccBUDt6mu\nsWUdBoLC2bhjUUgHlIlZggATkpdbYje0evQeRmj0AGs3uY60VrkY+HSI5qBs\nl3PNRklk+0gzr3lnUl0F+OublF3970msWsRfLHU91SxjS0NqzX0Tk4Kn7nK7\n8Np9xA+UMJGbOAcLsqTmhhMalOthAX8CTw4N9aJTY5+4CuTrwOoL4UBRoMji\nMKMTdJsmpofIItB2/WO8k/05rtvf5+5snLUdpCDhjDlm8pQD3+Xpcnao0TfP\nT8jP\r\n=SLKd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.5916d18c.0","@material/base":"4.0.0-canary.5916d18c.0","@material/shape":"4.0.0-canary.5916d18c.0","@material/theme":"4.0.0-canary.5916d18c.0","@material/animation":"4.0.0-canary.5916d18c.0","@material/elevation":"4.0.0-canary.5916d18c.0","@material/feature-targeting":"4.0.0-canary.5916d18c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-canary.5916d18c.0_1571429325177_0.884552791497982","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/menu-surface","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a2c882fe3e18b45aa429028edda70b8364f2920d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-canary.d4141c95.0.tgz","fileCount":36,"integrity":"sha512-Kwd6MUAe8y99KuB+Zsj8iQ6t3If5k5WUweQrg1wjapXVv1or1/Z2lRi5ehZssI/P4WOOmh6N2gJ+ahW8JOFSpg==","signatures":[{"sig":"MEUCIQDc6TC+yQek7IeLFo4aSsfDCwUL0pKsydEl48SQ3IEuwAIgP7KvqrPEGTIYUPsBxc0Z15NZXOP7OL0mcyY2NroFaTE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":305738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQCMCRA9TVsSAnZWagAADi4P/0yiMBx3eqU9IGLUZANp\n7m1jKh/A36N8IkPnh82F2b8hcnHix5y1nBQ0eRfOltmGmZpcU+NJO3L1SlHF\nkqfk8H1PolUhjV/JC3heMx78a5B8WRlbYKIQZkRd1iBFZWLMIUUHPfOXieFT\ntK582AiAG/oqWrnnjyyy+V91JgAuvmYiP013h2KqfPA8LYtvtzcNUhPmkZKJ\npathj7p+BfrA/c1vVswPZeVgj6o1u8EyJiEMb2TRbSaWmDI3yDX98lBoiCU4\ntXQQOm6IQxzauxQpQ++KN/TIUYJGwQVLI5YB4U1etCRFvuCGE5oMw1D59UDZ\nNJSUxdep/OGXAQ2uIpWBJ2w3g3w/apAZDG6s96uVPXzqU8ftvue3IZhJ0M6F\nJf48CXzXrNJjkSUvDoxMYRW5kYiSACuij/fa/uCEC9SQ/w2LYuSvrVHEZtVg\nB/MD7HyGPWuqv7eO8am3zizU12hrF8xsf8TmNuU6pRHFnCNGMcp+1slLBVzj\nKBR5SD46PRMCQVNSk7YJyd6DBDWsrqXZBnGBQH90Tdxxd+VIVX+ypxwqixfa\n/fw1mdmlKM7DN/lna1/Bru2OdnjaIiwwXKdX5Z7FlE4gOUC9KzJ96+hvpY0R\ngKcknXTaY41TFA1aA3xnzZ+SbI7EkXKqmZoeDYrH/qO4ZrkqSmNnBdrKPv7X\nst2K\r\n=h0KK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.d4141c95.0","@material/base":"4.0.0-canary.d4141c95.0","@material/shape":"4.0.0-canary.d4141c95.0","@material/theme":"4.0.0-canary.d4141c95.0","@material/animation":"4.0.0-canary.d4141c95.0","@material/elevation":"4.0.0-canary.d4141c95.0","@material/feature-targeting":"4.0.0-canary.d4141c95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-canary.d4141c95.0_1571881100134_0.8787545085707471","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/menu-surface","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"71d92facbdbc468c0a629f723d92050da321df21","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-canary.2b878b3e.0.tgz","fileCount":36,"integrity":"sha512-Tuqplur8cL+6wj5xY88Ud5AyxpaBLURQCvDwLoDeLryO6VY4r+t92IWNDvdqFpFlb2iblDJ13ZJUwP4YwSHT+A==","signatures":[{"sig":"MEQCIDwzD+VAQjflxAGdVJ/0vGBD8cmd5ZBzqWM/6/UsgbsNAiADJxwEYcIZpAIb4QkxqpjuEGNblf9MRXKHSI9RLqGpJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":305848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslmqCRA9TVsSAnZWagAAODQP/3pblcICw1LOLHbcMDHP\n65tY4sEuq7ZuHaGSMrE7vl58tJeXR7C0mjU6JH9dG3LgFO1/dSJE0F4CJLUf\nBoEkAqYa+PSxFh5j4+NgxmvZNNLa/fkxB2NoV13Tv9TiAbEvmnbmK0zKq+v8\nArreiPfLtfe/4lWXc7RQvmIf47sAFYmRnU1iTNYCd+oMa5M0xSMNtxwTCKoc\nh1f/zfO8be79t2APOIHQMLc0PHjw1hY19/Pk3pAv/0X30F55AT0BEqaTL1c0\n4NQLIeVsRy4hsLT5n4PBrkSumedSEbADgWVI+cUA9Au4VmCuUls3hGC27oEj\nw/yWiNLlObMqTA7jjwCkt78aEMDU2GosbZX0MY3fat1TCuOur2Rl3TX/Jtl8\nJWSRXs6neiYOp1vI6ktiQifE99pKsneVPqjUMG2riwB1IdG3soATuOTtQ9Mi\nr6Y0m9xT/K4yKbrMkD5BVoyScCIcEEVF4OrFgpspmg5T8MtQSQm+t1WbdrjN\n8E/I9DVV9rl/1i0a+Bmu5ibIi/jfPW6mTRT5OvZdW0HUycFeDjkbYN6EQPo7\n4JkoHbb2kuwxZb5gpgUKhDGrXUXIKAEyrnaurHxsQC2wcT5uv86gLi20FGb9\n9ExyV26wtCRtl+zGFjbleVzVaVljMAzcNfYTKGRbYGvMsfKk9oO+FAiIe8fE\nf3fl\r\n=0fsV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.2b878b3e.0","@material/base":"4.0.0-canary.2b878b3e.0","@material/shape":"4.0.0-canary.2b878b3e.0","@material/theme":"4.0.0-canary.2b878b3e.0","@material/animation":"4.0.0-canary.2b878b3e.0","@material/elevation":"4.0.0-canary.2b878b3e.0","@material/feature-targeting":"4.0.0-canary.2b878b3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-canary.2b878b3e.0_1571969449702_0.4558478208763077","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/menu-surface","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"fbc252d1b5f0b00bf4e4344d5dc487eb3c499036","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-canary.b06c0efe.0.tgz","fileCount":36,"integrity":"sha512-VC13WNJQiicxhAyMHJ+3osVBWJzdvpu89DmzE35Rc1w0JJV+irwk5Lz7IweDEIJRzVLIvnmiBGrSoddkAFh0fw==","signatures":[{"sig":"MEUCIBHDKISktqryzVr7kz+c7HCofkGjiFkeRsPjK9bvWnLAAiEA7YYxXqlNKk+cmGNmUHIrON6ReE2HotO9PAJsIzyx8AA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":305766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6LTCRA9TVsSAnZWagAAc0MP/2Z3p00c0uiNCmNcLhY7\n38mgN4acN6XkWyDhGKVAg0x3geJTn0OKQOq4TieyYx5dy/96PNMVgsYER4M6\nhL08QkUyYKhE2LxvIXALQSCge4/TWi6taWoHNcVl5DczX35v1Xhs6Y/907FM\nJI7ucICZ2ALfHcYBIKoLOLtp5zEMHMzHhg48/crKyv1/j9+yOUy9pSju9l92\njKqG8J3c68MkGxItbdY5WfpB4IM/d66K7PI83kAc29HG7P1sMTlePhYkNa85\nnZLqAHyiBhLhTvujY50KgR0mUcFOUo6YoYFqnW0PaP9rODX6Ah/iHshi1OJ9\nxIEpF5EPJ1h3H5dhkUmZJjjngWq/AWIlSx6MmoGtzSYBtMkJpmeG8w8H+xX5\n7SpUyPt069iY+J3ijRYmKkvEve2b2VhETRN5ssTTMEY6kwWp3Pb69W86X91A\nsLsLK6fRPklina/F82LSMasteE5Rnkm5NINFZFWBwDTBUOgXv3rx0xETtR3O\n+VW0eX3LOL+sZHbLqf6KIW6ebSiDQ0L764CKL7eSEaLMtRl6GlWckWtt7JX3\nLboIJWHvQEKvCyF/O11tE7J8GlQkSEEPI7366wi4xuzrg5F5PFs/PhCZD5s7\ncL5CCico44l8ar7KZTVPRmWOW9w/qacdUoMJZLQA3bc5V0uOqr+6x0erEcs/\nBQIb\r\n=pGGs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.b06c0efe.0","@material/base":"4.0.0-canary.b06c0efe.0","@material/shape":"4.0.0-canary.b06c0efe.0","@material/theme":"4.0.0-canary.b06c0efe.0","@material/animation":"4.0.0-canary.b06c0efe.0","@material/elevation":"4.0.0-canary.b06c0efe.0","@material/feature-targeting":"4.0.0-canary.b06c0efe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-canary.b06c0efe.0_1572053715310_0.4619007732843441","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/menu-surface","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4f581bc06923fa21b766660527ea59973bf2a640","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-canary.01628efa.0.tgz","fileCount":36,"integrity":"sha512-1WX+L8uTyvfkTwsBVQFhSqwu95zjBNMqBJuaP97VOv3RboJ07U11OwvENX4xAMghCEthqYEF/cSQRynY2F/h4Q==","signatures":[{"sig":"MEQCIH2q0l/5VHEPtKz+exeMsqpta0o056eAE5Hd7uQPVb5oAiAOvu1JQ2qwKWNUzbJPdbZ4I/lnG8is28ilaXAttOsL+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":306053,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4G/CRA9TVsSAnZWagAAr/8QAJdOQ9WRXHBJp9Y4hOqX\nRpdnjv37TsjSpR5sgpH03Yk1AdZzt2gflC2zSzPCIugjFnRdLypC1rdF3NdW\nLCAFWVFsn4tJdgAfZcTWg/fhavAzWNUkk0lEUcSe03UXY9KesoqjL/dpdxQL\nDHMwRZ/Vxj/32PTm3EoUOHQcZ5zQ5660P7DBjVV2OGE1l9jIj5UZpztm2v+j\nJ9cYb5izE5mnyhNiYs0HKTLCtt625sCXHdUiUAj5LUR1qmkTOxUrzQ6ZqOVU\nViO3eaeGnqO+t4EzUd+3wqrqCEd273iMLb8YPBNbRc6NPpNYqrWiQyD7uvBh\nWFHzV+bxvkf6UNnW+MKoE+M+X8EyXOHYpbct+BHjQ8ZE+ih7essBHm+FGQDP\njO/H3hvEp2aKVaRSwbJhXoPUlh/+BiE8l7jGNJHnht6oUvPeBj673DHm7Y+R\nWU6j+qGVMFjtxf6/jNR0/upAnbCNXG7+EeZaFs9l10U7ozzWvQ/iotN8pKXh\nBA5JNLNbdBqLOOeyuyebj9TqEgAmyvzjxubz/ghBdx56XM36cToTDi+gbv/S\nvPD+Vn8xwBUoMCs0lOSqzlJq0s6/5/qau8HlrWJqUJuoaOsecsOP2f3+6pGf\nN6xiEvng1oZa5bE9s7i7BHcINqeic8KzodVJTpAaKGKVHqfRKoRB8WeJ+OfD\nvyu8\r\n=9cy3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.01628efa.0","@material/base":"4.0.0-canary.01628efa.0","@material/shape":"4.0.0-canary.01628efa.0","@material/theme":"4.0.0-canary.01628efa.0","@material/animation":"4.0.0-canary.01628efa.0","@material/elevation":"4.0.0-canary.01628efa.0","@material/feature-targeting":"4.0.0-canary.01628efa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-canary.01628efa.0_1572307391124_0.3044896489063862","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/menu-surface","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"41ffa60c3d0c8f922877b657449777903df0537d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-canary.b5c6d66b.0.tgz","fileCount":36,"integrity":"sha512-T7ebECH2phFoN7Xja3xCKGZ2DCa8YwzUC0phQbXqXRJ7oiXVH/XXArGWZ7lWGigo99NAaHcBt4Ngl4YQQL4uAg==","signatures":[{"sig":"MEUCIQCrpwNmkYulptPIZX5H8wtqI+uInx0kHnyahZJqNe22yAIgKm29vswmCnr6RCXS3usZFzZO8w4ta50QbcER8fjRmxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":305940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH1oCRA9TVsSAnZWagAAgtEP/A0wWuTNT7vk9unmuIJZ\nOpwUObmk0uy7J7defaFHc87ydSNc668fOCMrCSS1gv5jCgJmXVQ0/ask2DUC\nLP/NMJUjli4ynRnGOABQ12nY9bmbgejG85v0LBOW4tc0gN6iuhAmWdhWXVeZ\ncgESLWotFGf1zt9JwJzjkJHXp3Iw8x6b3rC2Snr96ftqbwZFtipYpMT6NdTC\nS03XTc71LJuFYsYiA+BVI3g6lWnqD66I71dcNvyP4KQuEcAuCMLOn70tW6b1\nH1fXgvQ4xK/ff/R+xfm7S0/pVpwcf/lrJmFWsnEdg6kGu6fyYp2Ygq5aAZ6h\nMAk1xuAZ4gQZfYcYp/0HhMkGjg++ZpD++tLHSm8U33vmjIRHz5Ly60zjztJQ\n1sKBlVLNwAOugj0dc/vCIjXJ3Q/uEKx1sIbn7e3tIRrxKJQVKfV8mZOi9Npp\nTZWs7dgSzEBQFoyGTUdID3SGBlXTWCeErg2B2xJjQCLp0LTaASvyVwwBNV9z\nyF0tVsLBZl6DRcP6df3fhjinntTK+mH+P79ouQxzat75nDbQgRwQS4dnTowJ\nacVQfXY6QVt3SXp+r8BsTqeEdZKh71Kcb9rEymft2y5XqfGK0eWI3HnBLpMt\nrdSda7qrY8DDQsahBy8/By9/ttGn5JcWDbxF0M/xgFFRvmLzW0pAVFqVYbT6\nGTe1\r\n=sabo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.b5c6d66b.0","@material/base":"4.0.0-canary.b5c6d66b.0","@material/shape":"4.0.0-canary.b5c6d66b.0","@material/theme":"4.0.0-canary.b5c6d66b.0","@material/animation":"4.0.0-canary.b5c6d66b.0","@material/elevation":"4.0.0-canary.b5c6d66b.0","@material/feature-targeting":"4.0.0-canary.b5c6d66b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-canary.b5c6d66b.0_1572371816365_0.6362365326406281","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/menu-surface","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"e12aea23d85d135ae23a517612253648a5553b29","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-canary.cdf858ea.0.tgz","fileCount":36,"integrity":"sha512-BM0vfHMhewTCXkcZvTU7Kog/e0JIPjS2tTfE0JdGDubR0ovzmYVdUZilNP6qQ2mkgUVVZJhfW/CZawuIR/B1aA==","signatures":[{"sig":"MEUCIBHOW7SBbpWdLgau/55jDopEDJdyNRySBP/v4BRgv2/rAiEAr3Mnr/DfwwpTTpokEzYXl+dzWfx7ndCR9BNRnSMU/YE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":305224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHJlCRA9TVsSAnZWagAA1xAQAIf2E1yjmJJP4qwtZEC6\noOtIXhROvt0LQK2qYSxuVp9I8ige3XVbnIuSt/mhs0gDQxtKy3gPZwDjYpx4\nMPMVEI5cw72+Ay5qmyvHFBtSva6W8FcxfztZ56fVhN6NmDRrwk40OmMtOWaL\nypAsF6VewJI5nKWZwIBwWF5PQ1qnYsNGLeJVAlpoz8y2Ve5j3Z5R66y+UoJH\nFiSU4u2hxpBgI8cgU1PAP4qyCLtcz0OHf2sHT71r8rpD0x9H/V+0lXsvxMdY\nd2X18dlNL3fcpOIvcHGIt7I4Pi8XI7ZqXXMf7iRMVqvMCuOlPmQW31xrnpCK\n+hn0hnE75bw2AWHjgyi/TySnD6OkFZjBlLmdZhfc6qtZA5CcTdwZdTbn5U2E\nt5gKJ1KC+Va6HOMqkrajTYBbaKrwEnH0Pcl9JrBg0vf2mFA8DwK6Frr954tB\nFmsqIle4ImW9BgKoMFZUZyp+jCx1gfsBLI8QCbhxJhjdMCo+Ef8aCT3LuJeo\nf1pTPwzA74ST/gaHuciF5tlGiP89oCy6U9knDnRPn0mfdWw+sKgkLsT6lAsZ\nJy6ufpVZCUksT6+h2TLQ+WG7YfHxmnAnBwFh4EHQ8wpeT77NoP7lJ7o1/MBA\nGKCN5+ou7Nld8BpRCmRe79MgZrUmk3FYysbhZqEaTxt9DO/pJIQlsEvFaiOH\nJRa2\r\n=2F5x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.cdf858ea.0","@material/base":"4.0.0-canary.cdf858ea.0","@material/shape":"4.0.0-canary.cdf858ea.0","@material/theme":"4.0.0-canary.cdf858ea.0","@material/animation":"4.0.0-canary.cdf858ea.0","@material/elevation":"4.0.0-canary.cdf858ea.0","@material/feature-targeting":"4.0.0-canary.cdf858ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-canary.cdf858ea.0_1572631140798_0.5868408119929396","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/menu-surface","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"48dec5732fe8dd827e148d739ff876b4fde37ffc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-canary.719b57e1.0.tgz","fileCount":36,"integrity":"sha512-0USLy8yXnAppkcQwiNc2KAMinpUFxZbdRYiIIgnTUZSWFWZYRMw4Gdquxf4ipiD6xMwixdku1pscz9iGf/11lw==","signatures":[{"sig":"MEYCIQCQ2KcmVJSaNNj50cOnwe/JolzvoEeUnHh+PqTBa36MhwIhALbzfc0pbndlBj4IkKcSmodNeWngu0nbkM8S/cIVlc5u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":305414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI8lCRA9TVsSAnZWagAAZUkP/0rE6nPFoGRTY3N4I7yB\nK60Y1BAWG//hSRru3x9r80HBJ/YKsnGnJPG6nhfpHjAQosZHlBvsN9HYYN0R\nYCbGaxzOpep9YlCc+bVDqkAkwrcqFLmda5Erp6d1sI2D5YPcCfWMoWLIx93v\nEBtbQpvqio1xecmHcbXz6SvMfHBfLoMSWriXVqWLcHKDQ/vvWIhhsjF07u5S\ngoV3FcbyRPFp3tt0psTJZGkndfVJ2s2D5H/eon3DIxQ5fL93nVD42gUaeJdY\n1Khg/x7Xa89ta0pfCpWA9WSkR+2+aHK/stu/eAf7YMgnZgjdNkygvhw+pVTC\n5nhsw6HGmK0fmwiAFgzu1uctAHhK085jibY3+45S2lIkI5NOIJFGlRRo/ccc\nBZdk//qBjERGtfWNZkuOuZtNMe5RZdCioIgxi7GxV8bVAM/B94bCs1if0pnO\noq3CZuaoYwLnnSVXNNbLALqJMmpXaFTEnkio2rACRDQxUkoLsxM2fRlVvSIY\n3/d3e6jKcTQm00yZIOW/eiDr7I7QLwd4/T6dL3fe86W8F549/eMIG4R9hcyi\n78I5cJ9Uv2xFDBbl2le3JABEtuspWWqGStPHY7cmy/horHfhXjbGsdiMXZjo\nPz0EpV1KcbYeQIsGfcnD3Z5IxyD9wmBrbe+cE2aLzDnDNFZwQK1NP5fhTTeR\nIPnQ\r\n=ZEne\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.719b57e1.0","@material/base":"4.0.0-canary.719b57e1.0","@material/shape":"4.0.0-canary.719b57e1.0","@material/theme":"4.0.0-canary.719b57e1.0","@material/animation":"4.0.0-canary.719b57e1.0","@material/elevation":"4.0.0-canary.719b57e1.0","@material/feature-targeting":"4.0.0-canary.719b57e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-canary.719b57e1.0_1572638501085_0.15276161191359772","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/menu-surface","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"e8c9fff19f1d8c1450dd40867d89a5b0cc3a4215","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-canary.97cbbdc2.0.tgz","fileCount":36,"integrity":"sha512-NSjj2sBLc8cEs6SKxfJtSvkJbXXfEo0Q7FP24WC/doE9xVEPbjSiaWHQfGijHWH4/FJ4DIb2ncJhAZ8U9nOE5g==","signatures":[{"sig":"MEYCIQCBTG7aMriF16jwWQmTzSGUywWNM796BmrI1UcQBhc9fAIhAMoGa6ANFT+55NPRZqgbfFGX6SO2tzbWffWjBvN97JyK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":305427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJWfCRA9TVsSAnZWagAAH+sP/iJ3BWPRv5x7E58s/Qeo\nFaXU8nr4IIdzyLsu50ykcMkj9q1Osz1nBqUF5KdzoKByeTrmTwtuwypK5ZIB\nEuEwSNgvumOlu8upu6yUyEJKX54ehQkNzbWi8F47tIcleaC+BEzawm0rZUcI\nGg6KsGC4cHRKaZWweju/Ql7Ij3+pfPvWG/JRH8JVPp/OJPhAkroQPZ2xqrbU\nSjQ+4DaG+vBWY2Mee8WVR1kj2R0L2JXvsIeVVNplDfnzS/+a7M0jiD2S5rIb\nIS3H/KZjgjTnxnZwIlWCWRMZRDIvACUclieHyC2/6YtqhJeFXlC5YxVVzbSQ\nucRC1uv1cDrd34bScNBtmVcQDPLZ1tCp3elTzq7NQwT78KXoDB1cIIw2R0eY\nRm3UK3eq8Dgr51l1d7u5uNAuQ94gXBfAPpfIDclCPEPIsa01JUgwBSjEZ+I+\nYpIHaldBfNHNF3z3ZigGEanc746PziLg85gc3iIBqoDwzFkei9Cb3Cr9T0ZT\n1YcP6Bp+kH+5edUI1cwPGLosP1Us1wVfYBQt6x4KATVA17D5OEPvYlY5ofDV\nvcvGebohhfbKiqF7d22HzhiyxIM3euHX7hLisvQGKY4iNdrsQa1MzDL2J4dj\ngm6MGQySD/MZ9D2URsBPr+W8sYL+JaivttuU/Wsfay1t407ppi4Nwq0PlqWo\nFXJj\r\n=vD3L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.97cbbdc2.0","@material/base":"4.0.0-canary.97cbbdc2.0","@material/shape":"4.0.0-canary.97cbbdc2.0","@material/theme":"4.0.0-canary.97cbbdc2.0","@material/animation":"4.0.0-canary.97cbbdc2.0","@material/elevation":"4.0.0-canary.97cbbdc2.0","@material/feature-targeting":"4.0.0-canary.97cbbdc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-canary.97cbbdc2.0_1572640159123_0.036047366582733664","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/menu-surface","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"68a0759de75075956e904deab2e299b5cd0504fb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-canary.8e36b3b7.0.tgz","fileCount":36,"integrity":"sha512-CQRjLapLSZ6Dpw3+4fwesEJXPyjskWyW3rDcGOLKuhzNXUXpozEhTIT1zC3kOBRz/qX4R18gRAgAW9QkZ4x2JQ==","signatures":[{"sig":"MEYCIQC2Ye8kMvT8M8f4zrLubjLLsuhg/AmMhaZFnxHD+US1OAIhAKo6DniwYwbsW3EP/mtIoZeRG48tkbwkG0qwas0vaoH2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":305224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ0rCRA9TVsSAnZWagAADfsP/j8OXbk18E+Z7XtjTx8Q\nUnwrdOY97f5ANOufX6RNm0NnPLebS7B+9blXkCLspDbSyaWCmoj5c/QORCXI\n2LFsyLRQr5at/p0vV1TU/8GXUs01U6kagXGFnua1knKexLpxo+JJmXtVexg/\nMF5g36kCUp+fDm2YdTEHp2UuRORPRfbpQINl05Ko6t7oRUOX1kqL6shqtlai\nZaBmTeK+Vg8/mCOdstrgABQo87Y59JEqdUEet85NKNfLU5AQPf9pM4Is7wQ1\n6awIBb+OecEvBcNOwDQyZjuWD+etX0ZeQS4lpXhy+sHnMHixrFH9zTp/qU8Z\ngxjY5H3VGcM5s8Wwqb048tjiBXIdhkrKVmOGTXOhFeUuUIm+2Po3XCQBXZBP\nLZmar1OefneXwcfmCAsHZJ4dDrN8i75A5TEc/cSxBq8Ltdg/4K1kr00DDKg9\nstfcbP7Yxd0PYglu0oUbbeL2AlNtRHOJLezPe6mQDlJ9wbUoIvSujIWM//HR\nIwvTNT1DkCThW5pVPAHGlN6YmY8+pO95ECFroRtUKZ2jXEqg8+Ux2zzT0sG0\niV8LOF8tsH4gva8TMcqhG31nwoFqhrs3KCOvKjD/DxjIL3AWsFPVPcIsc8Lw\njnDKjyAiL76dxjK+SmJQW88W701l4d7/f2RbvYfLvRKaf1a1pI7cSmI933sk\nz0TC\r\n=cgic\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.8e36b3b7.0","@material/base":"4.0.0-canary.8e36b3b7.0","@material/shape":"4.0.0-canary.8e36b3b7.0","@material/theme":"4.0.0-canary.8e36b3b7.0","@material/animation":"4.0.0-canary.8e36b3b7.0","@material/elevation":"4.0.0-canary.8e36b3b7.0","@material/feature-targeting":"4.0.0-canary.8e36b3b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-canary.8e36b3b7.0_1572642091453_0.42547962693414587","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/menu-surface","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"fc6dfc03468f2cdc00322ea1c4874eb05ab12d97","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0-canary.62d3a09b.0.tgz","fileCount":36,"integrity":"sha512-hTiIu9JSgFrcVe9L1doFZpjaPxnCrPo4aHGf8DsDC2HnOKTe+6u9OPd/2l6UJJaLa1uQPMV6n7n43CgqnwYKoA==","signatures":[{"sig":"MEUCIA1FeljV8Ob80cPkIMY4v8F7ejmULylvaPaNsFm8hHt2AiEA/fW0ql8+z/81SXGtGhMHgF/H+lZrbiN8MYUzsYTmk/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":305016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ9YCRA9TVsSAnZWagAAkegP/1+I9dgjTVFWwoG8+YaD\nALQG18GvR4anH/47tjEMky9NYhTSdeYQRFcKRoIdZ+nOcSGFmtZBwzVCil3M\nYYiaMfle3mfxn6s1nS3Fb/V10PHO0nx7HugbQViiCprh3u2Rsen7oo8jnjUV\nNylZJ38CQUUXSd10p4twSG3sqP1tz/HW3YzqALRRAQuR/elRmtYUe+yfaxh8\nAx3AR8XXvaDtylIkX25M/P0BWevaK/1VAHZc16Z9w8+9cdXzGrgTfMu7Zo/Q\n2tecL74G5axRjNlWZDc7JBWGs8+chzrv1HFzJGxRB+E6ruKVyZyjOhShg7jm\ngPUlE8aBgJ/DF5C9KGgD7jsMn9oRs5UpBNIUs4lMB8zQrMrkgnr//wv0mUiU\n8sBsG1aozPalQLEeKCLgeFooG3nuYfQwt0SAYGmHLk5pxkVYr1NF33DnoNFR\nTStnWPepMaa/LeTxEtPJ4A47f+xESzf/LxfpeAoq10kfHVk5+4B4reerjqv2\n3kmG9KxZlk80KAv/bdq7BupuKM8dkZtRx5NcRDjhaKXWbjVQcAeV/GGOsrm4\noM0iHHuuaCRMLck4DbjWh8NH6owJXRzjQhz69mSEX7p/2VUe9z9VXNpVZIW1\noujp3nipSFnUO4jC+Df0f/u1Q8jIk95xT2wDn0yTDLPnOVFELdFhnvhk0MKj\nugfz\r\n=ctU7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.62d3a09b.0","@material/base":"4.0.0-canary.62d3a09b.0","@material/shape":"4.0.0-canary.62d3a09b.0","@material/theme":"4.0.0-canary.62d3a09b.0","@material/animation":"4.0.0-canary.62d3a09b.0","@material/elevation":"4.0.0-canary.62d3a09b.0","@material/feature-targeting":"4.0.0-canary.62d3a09b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0-canary.62d3a09b.0_1572642647878_0.3242421163689826","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/menu-surface","version":"4.0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6de670bfbc5d0075f26baf58e46d00a91854131f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-4.0.0.tgz","fileCount":36,"integrity":"sha512-rEsJMJKL3zr8sytH6M25c989vy2HrIndBCbHs51PYYNzMDYbdEyf//UC/ZnoT4fu/Pq5E90+YcLZDpifES3axA==","signatures":[{"sig":"MEQCIEGAOjYjyNGa7vYzLmNnKotaHdjaXN1/FMdxlmHSy+R1AiBmg52WPEUZvtaGr3ge3s36iqgVv48S+kR9ueKkN0Ju+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcbjCRA9TVsSAnZWagAAufoP/2quHodkVqHUMe8hWJTo\nI7Ox/8cnZqNlGpxDpQWVGuv0ihEbjQNDqu4DF7lRawEJS7pELKwefaphzOXN\nj7efXbe/lxVNQ2RUgjjgnlNWIcg5HcSuNybjyWusAo1jeELce8MuX5TLMwpM\nEDdPCu7YW4U7PrwK6it9gTQs9LBPIXdevuvGnJjmLD4P5nXvl4qdJQToML4l\nBe79TIGUI3zyQf4SvEsrcA6xZiQSJbtsrx82KDFpOumcKlfPDeE8+18VZhJn\n7u6FQRQYfko4vDjVqoXRzFTTD0ughjDt6fh6AAxQVfCdVJFkuPcPSSQtkZe+\n/uyOPpbrwpZeOYNc2TfjcSjMkOucsiXRMOINrb43oVtBQkhWMkM6jvL+zGGA\nAioGHX2Pge5s7PgOnEuNTdBDmuZQ+PWu1gsDGKXJjz+tg2S4LN5EsMwvik1D\noX8sGwnMflezsG9Hlh7zVKZMHe5arvm2VHXyVjtYZsUa8TqYpvmuwNi9oBa7\ns+rDptMeeR7cj+1RgB1WqaInjVbo4FIPCZwNSlFwNQCfnqMytSwZPvdHaK6U\nd6P9D+hMXmW+tk+miQvJf9EdPwqWdE+CvXXhdt5Gp26zzbW9ChlIOpHktMti\nKzFWoUgN6udh4MpbYMga1BxCybFlUuwEzedxFr0y/stXz4heohdcOmBjDHkV\n+RWN\r\n=Yp6V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0","@material/base":"^4.0.0","@material/shape":"^4.0.0","@material/theme":"^4.0.0","@material/animation":"^4.0.0","@material/elevation":"^4.0.0","@material/feature-targeting":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_4.0.0_1572718307187_0.38435528244935546","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/menu-surface","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"5df35269467f7d6fbbf0494b2758d8b0a8a7c1a5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.b5eb51e94.0.tgz","fileCount":36,"integrity":"sha512-TpEW9gcTnb0o0Izk9AJIkL5rbWIodo+Q4ttvoozL+/65/f+wwYlPC/8ZZ02TtTWmuwJ50ssknAYXIaRG2ssJiw==","signatures":[{"sig":"MEUCIQDS4FbaXfM8wQe6+a+6Zd4o+TXm4UOKI1hx8hVPUow2dgIgeXMCsZar1oTV0Hzp3Ny+NdZi3LYpFE7FW0eJ5l820/E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":305134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGONCRA9TVsSAnZWagAAGgwP/3X11NjbphKOuRd7uWaX\n5BpI3iYjsx2kH8Fay34KoWWSZosjRvTt2DjXXp6NYS45jjLRxQcWYaLXPYsU\nNLD11jttpNAD+vyLoVnpuda0FJsD5ZYsN9PKtWp2G+haiTXK2WEbd/PE96IX\nE3nN+1lUdKKEGyTMs8jaFqpoQJcCPmZHLXit6ouMj7LodM6eACTCQ0Xta2Tu\nzsNzMKej6LkpEv1sJG5eSjqvNIBkSCvOCzXkh27T6iK9SXTdVxrIEN+mdpuC\npdLnf6yb0BnBnOGtWP8s5rAzK1pOeFznYPZqB3SCF7O4A6kuqqBQ4RAxvJFI\nPeWrWfEb7+o/mASp4kIE4jqU+Hch2JSBV0L6BxNK2FTFHs4vqX1/ij205UQ8\n00KVBbXAejNwHYNSjZugtlHWGsUW+MII/4rTsJl7+DpjvmiZBPutJuABUUXQ\ncvIVBJvyPXCV5l0aDr0WGU8wfR8QsKNqNvvru44RlHRMbSmR61QQiyAko9S3\nZE3h2RaTUwPXuumZ9pbIQxOKU7vuMMYnOYOmIiQGq67pZt4OXr/6pAkt3eHG\np9x9ks1ql5PzDTY64fay/bsMK9KbwVvGH9LvabbS8gAOi8Q1RfBfOU1CIPD8\n4FrHSsDAa4LKMmssaXujf+2xtCdco2GYWUmIvW01vlHLdaSn3y72Fg0b73AN\nhkCJ\r\n=Rioq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b5eb51e94.0","@material/base":"5.0.0-canary.b5eb51e94.0","@material/shape":"5.0.0-canary.b5eb51e94.0","@material/theme":"5.0.0-canary.b5eb51e94.0","@material/animation":"5.0.0-canary.b5eb51e94.0","@material/elevation":"5.0.0-canary.b5eb51e94.0","@material/feature-targeting":"5.0.0-canary.b5eb51e94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.b5eb51e94.0_1573151629063_0.49133676539997806","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/menu-surface","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"eb28e829f94d59ef41048771597174b272b70b71","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.58500806e.0.tgz","fileCount":36,"integrity":"sha512-HTz0se6XEHANJftq5Us0nAclfbbL8NBHtanFIPwqQWEQkk+xUO9pxGCteFvScFtTH4ty7fAYntKNXIsfkYTv8A==","signatures":[{"sig":"MEUCIFdVs1mThp/1MyyNruGlulsY1J3QFPmRyZXO1OAd9gjbAiEA6USdooEG5qcOnhwmHQhan4D34pPnWRB8fPGu7AwTdWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":305134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYtaCRA9TVsSAnZWagAAQGYP/3bEkKAFrQioYSLVV1Pf\nRttvdx7ru7q2+sS4DKtsx7A6VchQecPNrbMdfbmfOY4YTKPUkSOZPCALC+DW\npyCMgGNlJJ6BmKkTpbJdRr5L+Dj4f2ZolT6FiZK0mO2S6JioEiYp7G6mUr+3\n4rgvbJtN2xl+CE2PyPCuapyM4mt6/TuHPu53FXJYW5NdcYjp1rZOipzAFQn2\nT1ymvCmk9d0ObcrSWNDZdp9V8Set8JtIcfusS16vuguim9kE+L8+p8tfgV4v\ne0Icmhg3eWg2OiT+1+q+S97oHKa8DRbIKrMGeao4VTPnOhku4mJRc/803xVD\naMEKDUnPETlNEAMkzjS+QB12G+TnQaIwZijoz49q8Mi/1AZfsChUNlRGtbEM\nFRA2pc/xyfgYI/RkFwg9ruEOyobjpBL9Kn6KgS6B8LYitsxBEg2HLOTkPTuC\n3JErkG3k2Bnjrqv/vDJlLTpcnqSQVXWO8zW/mlQBeNC/4S9UYSH8NGpRZxFi\nhnsApeG8816Eo6+C1vaeJJ3WmKECkXdNhgqO7r49vVybjmP8YLOtMb9TdetF\nn1vn7Zx1HZf0CRlAjGwEGqc5jKELCbctchO71tJi/h3kxvsTsksXTGqvyBT+\nSg2ltv3l6gcGcqb3DtY6QEF7GrWB5IT/i+wsMzGUGaTZSnVbX+MN75Se8sUT\n64dO\r\n=26r3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.58500806e.0","@material/base":"5.0.0-canary.58500806e.0","@material/shape":"5.0.0-canary.58500806e.0","@material/theme":"5.0.0-canary.58500806e.0","@material/animation":"5.0.0-canary.58500806e.0","@material/elevation":"5.0.0-canary.58500806e.0","@material/feature-targeting":"5.0.0-canary.58500806e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.58500806e.0_1573227354058_0.7469175823830261","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/menu-surface","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"e0a5575c550d840b151872554533c313097ae83f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.66299b646.0.tgz","fileCount":36,"integrity":"sha512-T4PyfHTXlHy1DqmopODToA7ChZCl8OeJ7BafnJ2WsfDSV4gV177mBYIll+cfrHKALbE5W06Bc43FDjxjBnT+mw==","signatures":[{"sig":"MEUCIFf+LXzQmwMfAxj2Ay77Gbey+/tqY9jy87WExlPEDdtwAiEApl8T+g8xsP0E+ZfGRRpUO/ZfiQYZFqc/LOeBvWC53Bk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":305134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdEuCRA9TVsSAnZWagAAYrUP/2BPg0vkDQCQtuC/8Bdy\n+/TuR5iR07M/9DraZBDU/7Dy6O9hNYhN77SmXuFl+i1S9q0MubcILgXgAo+9\nMUKqTQ4TO4lYY5sTP0rkvMUZqJtCNbWzF3ctX/Z9if5HlkL9hQb+zH6ihbaN\nqcrFoQHHMfhJcyWJRxdi1rqMHCd9424YAkFay1u37rNGgLjvd6u9TBLLqW2I\nDTKQ7/xwOo6iVR5RHupYb4X924idfo9JsxZ9wkOKNtpoz/2RKMMxgakw1dq4\nw+H0e7S3Xm+/BIC/IxyX4rQCpDG6IDvuDSPvbuOtPbzEpAGiim3g+L+XnqNH\nGvMsOc6jniQoTORr66I8Ro752YXWFiL0birOlclvODvGfsgVeX3xxzuDIDx4\nh3HWi1aKEfO2rjQj9H6a+EO0D9w2ap8lryCdnhc/Wys5BSTb7dQtIisQHBVb\njhejcdW/K/XYIgNKe/etEk0WP0SVVD6hsGRmBfV9jX1Qo40qebptq6OEk8+H\n1GvppppgsiaY9uvt1drX4i1MEAQ5X+aY5UhVL+tBmXbwudKMULzogrdJ+5l4\nDVOv4fQLjlmWd+Ayw1GRXTdTztO04rkUE4gDCmJmFEkOoj8J9+ou6zUcZK4U\nP6Z0A+IOg7KRW1E67d+WseeWuNxxLSSEL6YrCMlrxALXPAQM/BEyIZDqBcrk\n4Lqz\r\n=RCiL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.66299b646.0","@material/base":"5.0.0-canary.66299b646.0","@material/shape":"5.0.0-canary.66299b646.0","@material/theme":"5.0.0-canary.66299b646.0","@material/animation":"5.0.0-canary.66299b646.0","@material/elevation":"5.0.0-canary.66299b646.0","@material/feature-targeting":"5.0.0-canary.66299b646.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.66299b646.0_1573245229936_0.43691287760127695","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/menu-surface","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"8c5cbc3ada066a0979f2fbbdd24b5df8464432ab","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.821871e04.0.tgz","fileCount":36,"integrity":"sha512-kT1W2L6y8cQMqaCcE60A9bSIaaVA46+jGSiC+aeVv09epDbtbizZ3kaZPd4mI8eRk/JjG7qF14h/Wf34+AVqDA==","signatures":[{"sig":"MEUCIHipv5scfaBGaul4nIqqQJ/B+zoxbwkzkdLACm1ZvPwyAiEAiUwnomJqdSTH5dQeUVOjkk3M6nDYgQONzTtALlAyVbk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":305134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd3yCRA9TVsSAnZWagAAF7MP/0AmmYyHrdoeT5AMLjjh\nU6W4/D7RFIB5uADQFBux9I/dXq4I55ofg+3WVhTydVp5H0MCCics3LWuhKEQ\nlDB1Y1aX+fs8cdCjwb3kCB1rOZ2q9ykDfnWckopJpPcDCDsupiZm1b73bY3u\npTAFsLslkg/RGkrdBIRI2dsCJnCsTxSSAt4sJRB4QYpoCLDE8InaL6pgNvnF\nPj1Z6fW0e4YVeSZaC/nt1TIVYMmQOMOYXW63VPsC2lMPvoV6DcLuKaYzuY9B\nSDhT7/ABjz4kvO86lKOzL3TufuhR5/ZRYhZL8LmwKtJhdi8cTKu363VlQHlk\nyS7XzAkDaZrlsjbJzWJH1pT37wAb4WFnyyYBMJL6kRYeWQgsdPxseaODyNSG\n90TzuH5lw1U1yphgTiV7bmWUsW8rl513fI0DcelYj7w1wc3Ad/2eiN08Es3s\n/vmm5sJeDQvXXS04fB/W2Pl4T9w3+IXpfAFS5H5hkcQonMIKpmAtBuWKqPHy\nWdHUKyDB4/7By6yoMKuXUsK1Xn27gi1JhKj8/yyPgg5n8b0BsKNbH2WudYYU\n3g21RePtxbAlzRD04ec7G6pozYXNOVvLRGKvuRjH+/8Tto6wK/2BnKERFuZn\nKBISxJSfL3aMunO1TleW92VJmNT8+u49Ej2RLVP5c1r9wv+tG1gVFKlBYO6c\nGdTA\r\n=O6ML\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.821871e04.0","@material/base":"5.0.0-canary.821871e04.0","@material/shape":"5.0.0-canary.821871e04.0","@material/theme":"5.0.0-canary.821871e04.0","@material/animation":"5.0.0-canary.821871e04.0","@material/elevation":"5.0.0-canary.821871e04.0","@material/feature-targeting":"5.0.0-canary.821871e04.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.821871e04.0_1573248498318_0.9111070714867546","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/menu-surface","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"ed29d4119826962c0cf2f5aa853ec620342dedf6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.491fddc31.0.tgz","fileCount":36,"integrity":"sha512-VjH4lh6xCq08clgnZ82ZLPNf9zcO3QsbdgxsnToiJ8ffgDse9K8bpGyd1Dny50KOFtxmE04fxEnTPlCxIq8+Pw==","signatures":[{"sig":"MEUCIQCbYd3oR4CvE+aK1JhbziNrkS9L+oEkm05EYBsh9KFCNgIgMAShbdNC+03XG3NIvOFVyBPqluykBZWFHA6M0sIwRqs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":305134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxecZCRA9TVsSAnZWagAAggUP/21EAjhpI3dqQUX2bzYs\nNN+jE9qj259HziuOOzOTg7c8fQBv56msztD4XyeVaU9csIWzPeC/8IzhOgv3\nn5VetCDAxeW/1SPSbUcfhHJSaxkZ9b5N+q0XE/LmZuYnShrVvYDGEops7kpZ\nWeBVKSIR5DQmokoQFEpMS0tZBI0Rul1yDvOifsr5PWOK7q+az5tbA0We2JcC\nzeKO8QvhQhhhYteffNEst95sCy+5ZZn9W+zsGYDihmZu4aN45fBSkr2GtIX+\nQmG/fyUrcujZLWHLjUyWqmBh9ByZw8rkMzIgtn1pwt5SNR5GezlZuEGI2GYE\nk+tJkImoCpA8xwFQCrq7S4C7dRL4g/AWekCOC9ZomgHzoN03up9ZIT+ifHxD\n2ltRngfgRsPpPp3/nMjnagdmru96FrpJH2/Z3zT3RLwYj/KYS9YG8XlVpY8m\nnlUIUWIyJQgYS4x9N8Sx+Ba9B3IlUeM4+WLGc3xh0uMcIEZxx5B8Loe+pgg8\nEjzqMk/SOKfX5Pong2IyIm3kXPmzxqsmdlkLCWmCS97TopHkVsK5r4byngBV\n6A3HJH/KRPnFRRRU1n8KdTfKwS5D/idwry9fawZHVZcBTLSRIYh/FP1bD6is\nm1WiFNs/NpUSDr0NcJzT77Qm40u0gsKrkdoLiQqPqchUkgpz5HYmbsOxz+cN\net+f\r\n=nksO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.491fddc31.0","@material/base":"5.0.0-canary.491fddc31.0","@material/shape":"5.0.0-canary.491fddc31.0","@material/theme":"5.0.0-canary.491fddc31.0","@material/animation":"5.0.0-canary.491fddc31.0","@material/elevation":"5.0.0-canary.491fddc31.0","@material/feature-targeting":"5.0.0-canary.491fddc31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.491fddc31.0_1573250841100_0.9489949936606548","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/menu-surface","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"ccdbd66c5bb75ac49e4a75cfea3f9624f0ccd795","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.b0cecf145.0.tgz","fileCount":36,"integrity":"sha512-mwUGIAXE9MKyaqbzVKsiga92HW94oqVqrOdgsvmk4R8YqTALr2iO7AgYXQjcq1YVOxg2tU8GpJwUBJo+iT9pGg==","signatures":[{"sig":"MEYCIQCiBHfg/FPxBZTB9UgzuuOHCd838wNDDcrver9SA6OQ+AIhALDGwNgaKD0Q3TO/u/qTmY9ZQAyjlHiDqdhWxAcKfYaC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":305134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwiYCRA9TVsSAnZWagAAefYP/iCrkmByoU24xZ/rSmqc\nHmmW0whNIg1Ef5OvIzBlyEx+b2zYqr5fUapBNTm7xPWobZ0YybcKOjPRHpvF\nTRHRNr5zQal6538Pc0hSX6KJ3i1lIxTYSje2A+MYDRQHCs4dSjB0pOvNYMXG\nUhZmqSOUdH6630Jse+L5NzOe9uJTYSp6vTuMqV8g6+pb1AV946bynmxXUAOT\n+rGGPLahyX2I5LDx9Vpbs0zibJBOqrPEsf/oLVG30mpvg+m39YP0Hr+9B6Mf\nx0iCtBjc/QGKqABgzejqbmXqULnRlLmYk/mZplmwFA1DabrWIdUAdf8KEJcc\nPyWVEhmciXETRNkm4xG0Rf4qvMnwju72zqBHIxf5TYI4Oewlq8iFfuWbjAEJ\nRB0rb+Ee2IYsGSq5iawQXPgBgvlL6MzNOgo0koyZMz1GnjOev9RZ1bqY/vLc\nHS6q5ZcYHucI4ftxm4Myssz45h2abNENSXcMYcWthChywxjr7a5iBW5N6vha\n4mZZZAP673kXviOpx18lj7zdtGbjBp0u8bTWKR3rto3pGrY6GW5imeTSw9II\njqWg0Zlstq7YWVHt6rJvPcHK6LctJWQfJd1T3WF8vZERuNcfvqlYO36ieX/6\n8T7dr7WCkdx3tfpJGcP+k+LF5xlM5c1Cse6plHcR5QC20zhWCly15Jo2TUIw\nnX5v\r\n=+Itu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b0cecf145.0","@material/base":"5.0.0-canary.b0cecf145.0","@material/shape":"5.0.0-canary.b0cecf145.0","@material/theme":"5.0.0-canary.b0cecf145.0","@material/animation":"5.0.0-canary.b0cecf145.0","@material/elevation":"5.0.0-canary.b0cecf145.0","@material/feature-targeting":"5.0.0-canary.b0cecf145.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.b0cecf145.0_1573324951536_0.4621778225487163","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/menu-surface","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"ccd76e9450a81cfd806a549ffe65c12cbb76f051","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":36,"integrity":"sha512-Qx3FUD1xLKT3ZYUHIoMNxmexxdE9mhohfoi/zv3ARODVyWU2uM1bPJCKyZaAhaPB3QpTy0pB25LZExC11Xr98A==","signatures":[{"sig":"MEYCIQDARO3qAQM5S/ziMChsHkwdk7OHEyV3T1bimw/r54NwmQIhAOtTij2ZV63srvcAQ2tn7HfGKBr3aAVCGcH62UeTEBmI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":305134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYBPCRA9TVsSAnZWagAAJOMQAJSJHMKL4amKz9GiR57H\nPyZvN8GqIj0I1UXnC5CbFytYyUo65V2geXKUyoNDWiW82Ce568KBsABB4RK8\nqf61KYbMMj6kPHkBZ0AM5XeUYKcyPIfUOvly6zKt+pNUAqqpkHL5ZyHXuZay\notdOxPxZeUQQGR+B6XMwPhUs+foR+aW0gvqsTCJmslHw4ZrLNYFNGc8qmjR6\noLuzxyKNyhPhvtxf7ixRwylzHL8eG2XW+fR7ryR/kZGDcDZewsr4FKAlwiLi\nC6qAT83CXgDOSk7OJuBTbAeTwvCpHuL4G3LXXHlrQbXfd+wy6Z6vd7xNXVCP\n3/MqdU9I/K5VVrtRuJoPI3RJNW9rclPuLKcRZfRvS/STZGC4pnzojnUoSmzq\nwAFzgRSQSTOvMxvIueLtnojj/5I89etqq0E0CK6XodTAYIcfqZrJFrBc9t0N\nne78xOLptW2VLWQFexc3PCCwIZ+cEfbSbuRcU8aPa/7+olrdkmSW4WhJubcp\nECkdC0Vi2nYn/K92EJ5IxOTOcXmPUjliATpZP0cFYXbTTFG1SJg2qZWzc3Lq\noXB87v5rOReACcV6mBgFhT/kQh7CcQao94eWi0XZykrH+ABDxYkj5mu0BHxT\nHmngdkNawJIu55m3ObODk69dawmaUFNrR2AwpdYDyy+MpS7wP2rgW7vbPAqX\n87rO\r\n=tQ4B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.afe0dd1bc.0","@material/base":"5.0.0-canary.afe0dd1bc.0","@material/shape":"5.0.0-canary.afe0dd1bc.0","@material/theme":"5.0.0-canary.afe0dd1bc.0","@material/animation":"5.0.0-canary.afe0dd1bc.0","@material/elevation":"5.0.0-canary.afe0dd1bc.0","@material/feature-targeting":"5.0.0-canary.afe0dd1bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.afe0dd1bc.0_1573486671189_0.9565743398173825","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/menu-surface","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"8394a49e8d6d8802f9a6e834d9430167d456ec3a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":36,"integrity":"sha512-8zUJC+ogvOEk82TcjopzTNXLNv/gWMWZDJmR9QhTqkU2LkOu+FgR6wvKjS6ygsdW/e+1VKnzFR947xx7gggUPw==","signatures":[{"sig":"MEUCIFf10bL4Amq9o/S1zRjOUHr0yPLPWS6gc5M/7fL1NZooAiEA2pzw7lER8xuDDxbBXzrVMt0a88wy+B5i2QTCB8yFtqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXm5CRA9TVsSAnZWagAAd7YQAKQZfvFRj/vXjkQ5OlWb\n7Ggl72AZc7I6+ml7jHdXpOV5FNJYXjwSiAXCr6fsAI9pMEMxppa8AbeS3SyZ\namHZ3wSEFt2C87Iqvm06C0CjeK4zN/xqsvV85CAeNuUJej93grp3p0e518cn\nVykhdTjpF7AQ+xpz4MOYgr0YCn5vqpcGeymszYD9J2p9G/0SXKyNzodFLs/U\nRP1NcAJJsvYFjmFXxwd99SkeX+VhnqhUCdZfY54CcVA0u/QJu123ZhfIW0P9\n1y/Q0fqiucNxTq5bMFkMnSi/kD+2g1fiAprqnYbcmGLgPCgVjlg2TmZmVDpj\nNwGmgP0Sth+4Jrsb19VM2OWOIfTB7SLEf3tqhRnGqmAgP2631Civ+8QT58S0\njILFsmXHXXshTQhz5HrMUAtL1awoCSZaI0xeDGZazYfa1WjqPGy+noegydl6\n8yuUHXEtYm0HmuDFHYdFZDpQZrESiipW/75juoKlkN49vVopWJAdySqfiqg6\nAeeXC+X5VzHuzcX1LkrCBtzaVNaobHfMUgMPPMTVEC2WUaDkObHMVtlFtJkb\nOJrJXbAM2TZKO60dvwx5iPpCZZK8roE17ZbPNsyGOK0l3290DF8K1LMVzpAa\nTJd5p7nUGclFoK9IxZOPxhZYdaP3JW7uAB/u0vV7V9lEObdbJ5BygLZlTwAb\npNGX\r\n=tx6n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b4cfdc40b.0","@material/base":"5.0.0-canary.b4cfdc40b.0","@material/shape":"5.0.0-canary.b4cfdc40b.0","@material/theme":"5.0.0-canary.b4cfdc40b.0","@material/animation":"5.0.0-canary.b4cfdc40b.0","@material/elevation":"5.0.0-canary.b4cfdc40b.0","@material/feature-targeting":"5.0.0-canary.b4cfdc40b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.b4cfdc40b.0_1573747128861_0.795829021047229","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/menu-surface","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6aa7229ef2b49039f7faaa8d7107c4219554e41e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.525989b5d.0.tgz","fileCount":36,"integrity":"sha512-iG9Ry7+bQNADUi7rkOsW9ATWY5rCgnm2oSBEQQEQg7dblOQRD0uNr/IQedTedhErR67dIssrC7NAoo72IUznKA==","signatures":[{"sig":"MEUCIQDEMnor+QcRoQOtjVJWrJqM2cgX1J34fYbuqZowG5ScnQIgEQFymBXmprRZlez2e84j07Im04w5pyjoSQm1bfyDFC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzeOyCRA9TVsSAnZWagAAl+oP+we94LGNZU1ZGONCrrm3\ny+EsEJNLb3qyTAuSVBtmvaJDVNvD/WhWDHVzfd3XYGTE5f2J/bBtPmPN3ut7\nF3Ice0SuA1pjZG3v3g9h9oeyYvO+rJGcCheNAjZAvWK1N4MuVOe7tw9cACiP\nCALsYlRwbP9B/9ADtXmHokGpixNyji/fTj1/G2pCNZV0nkUj3xhnnLSOqtTO\nKu3nDsHirY7+E+zqp0YIFlII2l34o/GMhaeZ/htDj8ox233VEmbhW9dkVCPc\n99DwXCvesPBrW54ve/BEWY4H/vLC/ZAMaV4NTJyGtpnF1we6zLbo/gPBSV2I\nnhGd5HytGnK79jCS0OMF4izgHebylpu2SFem6AZoVzaBBZ9Y7cRL/B20JeCS\nHLnMaeKOVrELVPmVY06deLjNuZYRZwxfz53b7VYotME7Dw7DzCfTxad6rT/q\nYKnHMtc26kLGqABR8KG/176zrmRD83iYSxtLLHjIYBE+hxud3jdy7ePpvv4N\n5Y5AjX6rDq82clKtnjUdPev10513Z6s/AKps/NsqvWhr2eAf0RKno4E9fQwJ\nM7SS9iZlJf8kJ5KLK22FI9b3tvztaVjvI/HL+W1U0AEDNObExhrEkrYXfLKD\ncugm2Z4j/pDLF4XjHSJD5bAJdBUY1MR7uJDo1GX2nHcpNP0R2isC/6VB6XVk\nn91w\r\n=iKSI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.525989b5d.0","@material/base":"5.0.0-canary.525989b5d.0","@material/shape":"5.0.0-canary.525989b5d.0","@material/theme":"5.0.0-canary.525989b5d.0","@material/animation":"5.0.0-canary.525989b5d.0","@material/elevation":"5.0.0-canary.525989b5d.0","@material/feature-targeting":"5.0.0-canary.525989b5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.525989b5d.0_1573774257803_0.9535116733419677","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/menu-surface","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c349323fd100c826956d32f5ab528d63d7ec9498","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.7084b403a.0.tgz","fileCount":36,"integrity":"sha512-LioGqP9YSxDOkEWxJsPCuOTcHUbyRjdj7KM7Wm6s3uhSwFQP+0aADHleBVAk+4zO55jvbm1qR7+e2Pb5t5sXUQ==","signatures":[{"sig":"MEUCIQCXwNNkxJzmO/2oK7Kh/VYKU2GWG/KdgernOmfckb8vPgIga4/ZonN3uziCVsgZBG6YzCQWBZLx3T4oymIOOv81yFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfn7CRA9TVsSAnZWagAAOuoP/1dxhR3p4VznE85fYF/H\n8CmoID0oVkGCdb73kQEIJ+INX6db46KgUeWdjD14FMrMSnYk8mlOTvh5EOGg\nvxordL6tr0HoSxym8pZpyMCXXVLMfi+BfoZpcdRyYX8EBiTMKD7IHwlXqA+k\nlT8Z5BuqjMaiFrDXNXDlslZDzBJ39NqwIgpeIVLdSPlIKcZnAeyVScXGpiWo\nRJ2TnilH5eb+Vy2ETqsl1+c/D+ylC/v1N2t79LvBQrbxrsFn63aPjBABIho5\nRj9DXz/7hJzb1FQfcpdtk2C4b9632jEZnoazKH9HGlPwVaARfkHE/uEU0bzj\ngIX7whvwKGDMGrVp33nrwsJBjY4o2LvNbj5BDidYQt8SeDpRnH4UssfNcA8d\nR78XSQSn95A46gx4vMi/Ts6sDGNtHZQPtb8EjhoVY7yTUJkxlz7BsyeWRuXV\nlbiY/jv9H5sRX+jjYv8T2qA9gj5+aRYb/nujUlQ+fA0crOqdI2dmxpA2z+Bd\n/xePIi6gWJHogxScMz3ul8zFEO5jPg+me1b+TkN2aZblckJaR2xl/UtNhqf9\n/3rofNHHtT0p/wZwfUVD+ZGJ6OCXZOThgYYfBqZgEGdJHYAO+PsQv4RdJTK4\n94SY9lw8iNSxEuvnRDaUAkyW6smVPT+hzIb9opdpSVANNKyg8g8taMi2sICu\n1PEG\r\n=vsKX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7084b403a.0","@material/base":"5.0.0-canary.7084b403a.0","@material/shape":"5.0.0-canary.7084b403a.0","@material/theme":"5.0.0-canary.7084b403a.0","@material/animation":"5.0.0-canary.7084b403a.0","@material/elevation":"5.0.0-canary.7084b403a.0","@material/feature-targeting":"5.0.0-canary.7084b403a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.7084b403a.0_1573779963277_0.2674551338062674","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/menu-surface","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"09e71881f4fd4f45d46205cf2c2b8830527223b7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.3cbee6dac.0.tgz","fileCount":36,"integrity":"sha512-+a+6cDaaM3+PJXaLNtD1U6nJjtRR1zluq9FnwJEvUSSRvubdWw0wn2mGJRtx+GqOLH9ejUISB71CK2HUzHL00A==","signatures":[{"sig":"MEYCIQCDK5uVNDbpreQgVSH6qhmUKkdIDcIre6rQjwvo1I3rhgIhAPIMVGiX7ODsPrWc9bwEkxkZd56/EopEOZq866IAz3uG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyeZCRA9TVsSAnZWagAAh9UP/0dpa0YJsb7uGzsp78Wt\ncmvrFOUp5x3avaZLW/WHOmc3HeCjm/KOyq0DHXRycgpFKcxYMpcLkRjyKCO4\nr4AYKCNrchD8mxHdR+p9c/t4mRoFH2cmtNAsiQQUHwVkd58TI/S/TL84Qv49\nyBFgbTYjgtq/VYLAZDN8wIeB59CPFTMyP6VOka7ayVC+sZJQ3jkeGU0ELR2e\n7UZ/lh9UY/Z/uPBQe6as4AYqj9qhmSMP1v79WDceW5FG9vKt/uyQxpqfwfRw\nBpWCajuKBGAW1AjWq+ewQvLEvK5Q0Vs9ilJixLDJGxOkgpLWQnzk+Z3uA70U\nzqFgHTgMbxeXbLwDT/DP+zuxJSi0twnxEAWyCM6y8tOZMacgBEkfpwBrQ4y6\nV/bef+nY+MBxVBbjo9P7wWX2P5dMBB9039N/EOYYQN1r22arY8/wRSlAUyvt\n1RYVHp+9A/hFZ1mq2lfsmxKo1xuOulwUZzOXEgJ66ROJjGjV6PStWLiDpv9Z\nIoMkDvO6+WHU6azgIIi/CqLQoghLbZNrTgSab16/4dGi3Bq19jy+HfAxc8f7\nOtFPHg0D8/WdMZhh2TGVCKhlc9Y+YOM1IzaB0GMIk4YzykKaAz+8mKCNvECt\n+EB6vVuED2bVXBBNoQoVCorOeQBUjEjOaZE4arZJnsNvjMTEVpH2FqGX7k8r\nISNE\r\n=0rSV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3cbee6dac.0","@material/base":"5.0.0-canary.3cbee6dac.0","@material/shape":"5.0.0-canary.3cbee6dac.0","@material/theme":"5.0.0-canary.3cbee6dac.0","@material/animation":"5.0.0-canary.3cbee6dac.0","@material/elevation":"5.0.0-canary.3cbee6dac.0","@material/feature-targeting":"5.0.0-canary.3cbee6dac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.3cbee6dac.0_1573857177294_0.5869625664040599","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/menu-surface","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"75b60dd0af89e77f6d88657755ef447fdec26a13","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.591a6ad44.0.tgz","fileCount":36,"integrity":"sha512-sChVVz61OrYXbx4skjgRKZ2I4DGJ7X1JtGUSMPwTVZPQSSVxj9iA0MrhtbOkyDZT1WqahuE9l2/i9K0iPaJ5vg==","signatures":[{"sig":"MEQCIBLwQPFcua7v0Y6Fa72lNDDBDx1fjAThRzA5KLiPCF/1AiAulFrgvYpc5vOSelt0eCOJ99GokJT/t2rM9j4JXFruPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y3ZCRA9TVsSAnZWagAAZLoQAIS1qI83Uc4zqjSWQUse\nUrfZCmJ5kmor/EbMwSkQfj50B0p8GzliVtVempdtQDI011l1Fq2Hx5pvBfuk\n8R6liOMTSBwQFtQx2Nr2fPcmHvH+WeyYQ3NdY+GyadyZWnwXLxpGOmtWnigh\n4kYZJ2kUkTYZv01sAklaUHg25Fu5esRnabpcb9h7/UYGzUiNmYpu61SnfkaS\nVR+ApNSg4VnnIY2c/QrWKKi3buADUK9tRX0epfUspi1mMy3ib5c6pSnuiKx/\nqOQnf1/skP77zMm3YSPUixtL7hY0sNzRcx+Nk+ytUh1KXgXGMU/lMftSyZzW\nOcsUsaEdhupqy8eOfLo7MtDnnU4VbbGqpKTfGd77gOf01uCdRwSH9Uw7n5WE\nFwK09Ug+3qmFPJqpqhh5ZD5/lnezGZTVsj/HZIQNLdOFsYYC8vDHnQZhsp8Z\nkQJQpbf8SCTQLGlxAxymA9Dqaggu1/fDRD1loVbB6ofL2LaF+Wp3wldW2uBh\n5S/h9qL7ck0StcRx7EsYJd+TxCDRBcNogmoTHomNbrc337T9fRXe/qudMtf7\n7nsqXbCZcY0gWIimC3GO+RxSjuoSc1onSnGRwv7NQjx9YjDzn41q/ZxnfJjJ\nn1+RQ/XHUBYpDgCjTFMt6TLVYA1Zy1+lh3D+mB5aDsFrirSYP1Qn3Byu1ITw\nd38f\r\n=HZwF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.591a6ad44.0","@material/base":"5.0.0-canary.591a6ad44.0","@material/shape":"5.0.0-canary.591a6ad44.0","@material/theme":"5.0.0-canary.591a6ad44.0","@material/animation":"5.0.0-canary.591a6ad44.0","@material/elevation":"5.0.0-canary.591a6ad44.0","@material/feature-targeting":"5.0.0-canary.591a6ad44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.591a6ad44.0_1574120920743_0.432801974683662","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/menu-surface","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4bb90b9e137fc88c3a7f0798a42454372641bfca","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.5729943ba.0.tgz","fileCount":36,"integrity":"sha512-b3VFvH2Qe7hEfU4d6mnAZu0iPABs5CZWwUeYRtaYcTny8lFR3Lo57zUKnUkFeM68cMZNorNqq68Bdk9JKMOVTA==","signatures":[{"sig":"MEUCIQD2UFJrtx382T35bl70DeU4PGj62Ziuwr+uIIx2p4IMxQIgctx9dP7/9Qw9zind5wgKuyLIV/6Td+bgfWzpjuodwao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1MzlCRA9TVsSAnZWagAAYZMP/R4GSR+bac2+vuO0uNUo\nkQgF65ECe3OyymNUTV0ouAWFUAEx5hg4JXTOGlT+9BovtF1Y19lGMZ5/JMaH\nAMYjqEgsZ0EoaVPHgxGUUq0vmIPJt+MjZiRx2xYxcn74xabhPe34PF66um2u\nXueyejDIa/6yasqsZNn6eFdFsTKWV4+9m6uUn3hdEFI+REnqvZGSVM4nrTJY\nKedE29mnQv0iAhtqkT6A1Tdvz5D7LG2mwoFnkBgtUNSvcz2I3wqYpYVLtztU\nth+v5y+oQtLqUy9MR5Er3MLPQoZxYZHZYVRHrIemaONk4asLIG6mbh03UXsL\newNTMQx4dn8986JR9+1YMpo10rG+3nKu+4uUR12aYEhFpciVtd/KFl4fDfi8\nDYtRx3Hs3cpeyoad/XRCHd6WqBQLA8KIeeywCPCFuamvxLewWbT3xe/4nE9W\n4FsdRTwdO4bzLEvncWgMHFDL/qF1zmbc+6NcVigc5TY9zz19qDrNqtx/wEhU\nqprHu/J+bEVeXqHFvXKg6TqK5691olDM+g42qxpykDtR1O+MIgvuo3dKpLJe\nG1X7ilajSXuXrH/37oB0erBvsbDafT8FZzso4X26IlS0bbzQiFAg290jnEvl\nW598vPWhzrCBpQNZqQLO/vz0dDd6eQaaHoQAjgMua5P5E4U4DQWkYEfN9+DM\nMrvw\r\n=nuLO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5729943ba.0","@material/base":"5.0.0-canary.5729943ba.0","@material/shape":"5.0.0-canary.5729943ba.0","@material/theme":"5.0.0-canary.5729943ba.0","@material/animation":"5.0.0-canary.5729943ba.0","@material/elevation":"5.0.0-canary.5729943ba.0","@material/feature-targeting":"5.0.0-canary.5729943ba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.5729943ba.0_1574227173273_0.2257557817920841","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/menu-surface","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"1a444620724d1a552d07f8e5ba1f08548c8b14c2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.e89750dc7.0.tgz","fileCount":36,"integrity":"sha512-fwLueHFdsoQ5ApBp70l+ujOzuJGmQmQEJ5dvtu+8yWbNTiZ97Rqk5rTfvh7FA0WRuwnHdfW4rip4KEufCTFi2w==","signatures":[{"sig":"MEUCIC1AEMwL9q55oYk2ilm95itcbTL8e/ghVldCk4WlE8YoAiEAo4emCoK1M1CCjJdv0uMaQoqcidj8gudSskvGp5dbIC0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":306777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3drtCRA9TVsSAnZWagAAmlwP/i41w0GXQa0VlBTISPHc\n40FRMckgLSACFEx7d7AX7ZplBkef8Qh491/yOztmJLkSHNryOtFU1RMg5N9q\nEd1QS5Q4sr0lm90jvulPwTak0laU3qW2dYRUnq5HdrLXV02B32hBLBIkCu5r\nwu0croVNBfDI19Pq/ecAegpYD9Ou8+oIfdZ/YjwK4272MxSP988+/bYJ1FrN\nm64EGdSMxi9d+4t2ndazVWreQdjCXBGr2u9RLxFvTv7jkLG1LX0Wqr0jqbSU\nA+01JBobwba4oW3Fk+i3yV7PkQDRaVm68EvVtp2NQHniNRIbNZZb+AATJXw2\nyt5UsohI9Vg59FhXaBTvx/W5aVFFL4bI/EMEOhLF02NlUI4bNlqaCnTjBheA\no8pcNp+UKgtVq/lXuqdBhYblHE0AocOlJMoQdIoxHK+H8Pyip6a2JZlw6J7d\neqkR2SMiK8cItWt9Mcm5VbBoRwopSGDlHbJFKV/X03hT20qaJGKrcgAtAxkY\nnS+WgfhO7HsaKz8xjxgCI9Y0QvvA4jMWEyYkcsJay6mWTJTKX0lDjL8TRxp+\nQpt74iztYcPhcHgsDkdTAIwbrWhtvtTILB/DTyAWBL6EPcj2alokHb3divGS\nNmbT+ybPlFtT4Zo9jQpHgnu5Zm31WL1t45p3MxnuDiORYv9h95WikGjV/hTZ\n3aYu\r\n=PRs6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.e89750dc7.0","@material/base":"5.0.0-canary.e89750dc7.0","@material/shape":"5.0.0-canary.e89750dc7.0","@material/theme":"5.0.0-canary.e89750dc7.0","@material/animation":"5.0.0-canary.e89750dc7.0","@material/elevation":"5.0.0-canary.e89750dc7.0","@material/feature-targeting":"5.0.0-canary.e89750dc7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.e89750dc7.0_1574820589220_0.35109583732824357","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/menu-surface","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"34b093a0818383b12697b65697e1c604c8c4509b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.3e560b33a.0.tgz","fileCount":36,"integrity":"sha512-QIkDcc93jSjSfd5sIZt4U189Q97KYoOWNWbeTpR2AQAUuysGlOvUgWL1I4VaVSekL8T0QSH5Q1RBBY5/Z9zlYA==","signatures":[{"sig":"MEUCIQCBdUYV8Ovfn7+ZdXDZ7O3i7wFWx0MMMAJIFE0sJMQmdgIgdEFw7ivSQlsXUXcTKyCNV/f+71l7W4jJ2buMkgXZR4g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":306777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dskCRA9TVsSAnZWagAABbEQAJxlgwYQpgBYeVw/yc0E\nSVrEleCTujdtwbdsK/PBwZSbZane89gX8kU1XZxHNd0Pb/2USTKX0RyZ8YVr\nnL1i91oryO3e7yiUcK6SkobLvht8N0lo6FhILM65c1I3dE+tSFnT++efliki\n1Z5Tg26hv0AJYu88PcseO1ZUSHubw9BDnKMBqbvfcbGFd4fL7mgP3U9ufMXo\nPE8JX6deZidAsyTDQ/vZI7TRaOIeA9V8T1RK9sHnLh13gL6RriNsH9+eo0rA\nhAmrA8XvN0OH+7dqkEyZLftpaxraOaUndTAZKkNtPuObU4t1qcaEmgaYt/W6\n/m7QTwqy6oTtY1qEcfxiTFqLf+9GdcCMsGim/nmXhV3J4zurMIY6Ku6YHqFe\n3z0XVGyWEhwE8kdrOps84gYDnbs4RKwOfvzsCmwC50F3PzBPHFiDukNZ7MAq\nzWXRxaz7GaHlAaWxRZFSqiKha+1nhRgNAcONb/BfZqI7sI1I7U/5a/8cV4Ko\n31wE1NxddX+6lg323+yhBxBym5J3wxFRyuaU8p0vJVq9H86Yz/msqQhJ5OGr\nmNam1icURG8uK5OPS/VC2WaOm19wVzgSltf4Mjnvz5lRvTYg5GKMJgQ7N1F3\n9ihGx1RHiDWTSuqXS/yPX4K71MBXb1LYeGuutvXuIjmnk7NlWQ+IWwTWLbNN\nqcrI\r\n=6QMu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3e560b33a.0","@material/base":"5.0.0-canary.3e560b33a.0","@material/shape":"5.0.0-canary.3e560b33a.0","@material/theme":"5.0.0-canary.3e560b33a.0","@material/animation":"5.0.0-canary.3e560b33a.0","@material/elevation":"5.0.0-canary.3e560b33a.0","@material/feature-targeting":"5.0.0-canary.3e560b33a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.3e560b33a.0_1574820643571_0.0735196496187489","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/menu-surface","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4183d7017ccbc86af22da9d5b35f8d2d88260384","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":36,"integrity":"sha512-6S3PPyTgRzGEp/OxiEkTuXfUPeHu1JoE9nU93tXJ4h27xT8w47Cqty8rkVHC2KpI/W8+G0G3EF40LQUlHu0Ntw==","signatures":[{"sig":"MEUCIQC1zQp/lg1LOB/o1VXdSIoowwdQcUcszcefFkFNjZ999wIgPSlnh8pM0dgtDQ6bEpdD2jqz34+y1ASlaIk2kTjtfq4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":306777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dtBCRA9TVsSAnZWagAAsc0P/3UFOHOD7ZtebFqzH5xx\nsOg7WOjIjQeKYLCHxm6WmQty3VBH0JbKvEAyo/fRjj4Qvf5Nyb3oexcMxLyL\nNqFMuBRBi5u8W2WL2FBbtMzNzdv/6diff3bjpV8MITr8u40Sa/N2aVSFjBXu\nzv9WAkxaghujTeK28vA72QRQTyrlccHJuBMOgWRWEMtaMFZkpRZoTjoA027c\nEvISjzdxr/A1kNGz5CsBEOj3frXXfoS13B9Uhsn1mGw8hE2FgvdMKjlBH4UD\nwBKnk16ByI7BxB/eTw2/uyB0k/b93LA5Yi6645LG0C29f81G/d7cfH3GNZ9K\n4wFOCQxrE/O57EZYZcFuSl5gDTtgmN2iVCUkdwncWrRZwPaDje/tL15N+P8n\n2sTB90e0BZa1Pb0keG93TchvtPOAh7sIsk2LsjLFjqkLNo3X/wvdOT8n4wWI\n0+mi4+8Q60ujXUO2QdplBRI1qootfVR0YzD83igQIcQ1U3z1CfUOVhEux/tj\nR/14d/NJIEZ1JtUGlfEYd9iMAGysTCK4bGXW3JbQsyogGUtJIroq59y+oWuS\nXWj5yyRKHCJtTXqKw2cICQFK5ieHmRhAnEx1KmsRXDALPUlnq4VbUyG4M/05\nFGeTFmrECSc3y9hg933I6Ez/Rp5PED4FmPeOeSBeMQa1Tu3LuFI5Q1+bAZj9\nGc2d\r\n=cpzI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7fd17ce5e.0","@material/base":"5.0.0-canary.7fd17ce5e.0","@material/shape":"5.0.0-canary.7fd17ce5e.0","@material/theme":"5.0.0-canary.7fd17ce5e.0","@material/animation":"5.0.0-canary.7fd17ce5e.0","@material/elevation":"5.0.0-canary.7fd17ce5e.0","@material/feature-targeting":"5.0.0-canary.7fd17ce5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.7fd17ce5e.0_1574820673172_0.8123881176277139","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/menu-surface","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"ed83dc0b369341cf4ba07f2e1889bc57299e4348","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.ec729683b.0.tgz","fileCount":36,"integrity":"sha512-XDcG0uLKqL7GEIaFjcDjYiRNAC1HVG3fnWbFKBoZlzhjYB7zmZxvGKOR6kZh3j/6wI7EtEcKZSw0yIpoO0yUjg==","signatures":[{"sig":"MEUCIQD2Psj2v/rYQZjAZs7OReH+6ybikeXYw4CxqVetitZZQgIgVCQbFBCLLWYPQXjMUKjX9BOj1ah+0eW7IUD21vrdsMM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":306777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pxSCRA9TVsSAnZWagAApykQAIhGTk5jEa6oWppb1t7P\nAfeJq0xIpcd7KzfCCwZRu5oeakelPdJD/FSrhIJBgt19Jg4ni4pexY9OkUi8\noKDgytoGR/4XIpKdpfbozBpQ8KUXcSuUQ70auLvqMwmR/fY0dTFC+qIhgrB8\n6An4V53KA/+k0T8GLkQXW3YvrnYZDgF43pmmBokz0h10M0L6cOzjSuQJM9XZ\n0d22SeM+BjV1aVlj478WGZIMgXcDH4feRgtzKQLtbd8zqoJSqZt9VAmyWyIU\naGAUMHbdNh2r4MEYSMHSg3r9yOB7IN/F0oV/HboiaRgx5YIJCnKbBHJpJQmR\nSd2TVXhK01zdbUH/Co+N+Gd2GGxIW2nim6pakUKTzVTMHZ/5/fbKqTZyHeQu\ndBzL2k9nEV4GhgatYJpRms+3rh83JJi20n0vexrLizabHho8NRPhTobaLF0X\nAhsa6xkV85vyeQBvtJ51Kvlmp1wk35nqheAp89hFsL/pGmDm/MbTccz8vvpa\nTRIH072hG/sgRU7D694EQbOOBskQCMtwevx3igNqJCDOkrUVvhXSOlxt+DVH\nor0Ulrfoa0cHM0vpfTrI/4rT026jIU6fSzyAsbCnt93pmtiUlnqxKBVb7j1+\n2/0L9oqGElhcLs5BmZUwpcz3l/4V9xPW6A2Ao3AqIehTnzWRfzb3vhkhbRdM\n4kal\r\n=9h7e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ec729683b.0","@material/base":"5.0.0-canary.ec729683b.0","@material/shape":"5.0.0-canary.ec729683b.0","@material/theme":"5.0.0-canary.ec729683b.0","@material/animation":"5.0.0-canary.ec729683b.0","@material/elevation":"5.0.0-canary.ec729683b.0","@material/feature-targeting":"5.0.0-canary.ec729683b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.ec729683b.0_1574870098083_0.041671454761988524","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/menu-surface","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b4901cd94a4258152c4b19f72f1711ca59f481b9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":36,"integrity":"sha512-19lgZoA+v61f1bZyaDOoncsMnhEid2ZJgnplDAQxj7Z+7yPyqpeTAVmhkEoWAXUw6Y+GwdgpuzIwL9hu5jVYmw==","signatures":[{"sig":"MEYCIQDRYLXQLkDBceQHP92XyPhVGUSPvhni2aIKHu+/G9kwHwIhAKJsh/6FdM0HqJ0gIfxQeABhehM2eYehXN8OIkotycwi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":306777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3sulCRA9TVsSAnZWagAAOuYP/iYaOKyhdLbBOodyIi4Z\n5GpGtNbqhfl77EKgnRVVKiRDqV7aynJPKHhzHbkmOrbH1MJEY+Q0rMWxGX7G\nNp6SjCY5KwA19YiXQXBX6r/V1Xvy3SBYUillcT4Gy8neRSC4mArUE87TWXd/\nkFDK0FwFhoLtoVoIjm16Y42h0tlE3CDh0AFUppOS59Lfv4XwxTjHOkeEpnDv\npcWMZijbsjab2iEZ5FjXroWxEpjsnCw4XcsXcJkFZavvqj4W9uUomvNn3SDJ\nS0YR0+TL+feDrOFSgnCNUfMKw5jVipI9o4sk7MRCbwEFHN79RmC+JZTmbdqz\n/tAcUxNV4XXdNGmlcfAGomCCW/pt/5g3FLMv0ry8vl4TTO4WDmvFEIQTasYY\ntdvIA5SZoA/wue4IK1hBG0QmLU3DWCQHM5bYw2POZsFyopgHPzISnxJ9DtE6\n60D+sotbJ08dJ/GGLSzUh/46Ly9RN8ZbDAHJ7dS8/xrmbAMGCbBBRC5QB6jZ\nqKOdAt7OP+89jwNaWuv4AeEPd4HHHoM1RmzVMRcShMwVL/VJhjHNIZ/s70za\nWml1CiiSMFQHMPv26ax+VB2NdLno0dBnbtJbInFqhDAcN0T4cyqqtte6IWm9\n/2D3EDrCYu/kpG54DGCGrF69Rzo7moqqvhcgFtIpwTZ4VhFmhQvEAoSUWZMq\nOzk2\r\n=BeRR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b8bc4a26e.0","@material/base":"5.0.0-canary.b8bc4a26e.0","@material/shape":"5.0.0-canary.b8bc4a26e.0","@material/theme":"5.0.0-canary.b8bc4a26e.0","@material/animation":"5.0.0-canary.b8bc4a26e.0","@material/elevation":"5.0.0-canary.b8bc4a26e.0","@material/feature-targeting":"5.0.0-canary.b8bc4a26e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.b8bc4a26e.0_1574882213579_0.4903558052597301","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/menu-surface","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"e0084d1bd5f3482b8d8440ec7f73d45f6b7ec6b2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.f978109c3.0.tgz","fileCount":36,"integrity":"sha512-baEWa0WpT73elJXccIVJ+zhMO9uz3YqruUyMUpr1ToDltEY6p5yI3J0TenVb5BBP0uuZ/smZW2vKKs00IAdVdw==","signatures":[{"sig":"MEUCIQC4py8LTb0NRYw6pZsn8j0Ot9sRPtrRqCH5F+5T4Lgz9QIgYYZm1Ci/3Gd9pehuOqiProQYVqIQ0reefiHx2LEo4kY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":306777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5UTLCRA9TVsSAnZWagAAabYQAIi/ZGXCzoeO5YJnHAZ1\n75RctjqBJIrEUIcXxojbDLFaRoWWhBhLQ+g116Yvn6okoo3UEAtv52saXdXQ\nTdX9jz0yFGcYEULlonYMpvzBikDzsjnOuRkQc9H+HKino4SvUbAmCUK2EnQS\n7UTyUEEo2WXVGF3dESreWZi44cPOqfeqQP4mQsR9JHp7e1zL1ZTjTfdZeRBF\nHTrqfe/E+GkUgLNiS9dmYc1AZGNLaop96fzqHPU+FaJZOC+f3m5YeCMrqmEb\nfG8pFEuDYxC0GzQyEu5DQW9coDx0jGQdTH1r5VG0a3c8LquBbL/mwCvChNCh\nxH+1kiZlV84t75Fyaz2ogUN6Y34nCk7z0Bym9nb8w5+gQa+59C6FR1MTmxWI\nPRKWI4kkjvwX5jrzTv4dkznblgdmx+nRTAxYiWiV81t626ESIq2bL+uIicEr\nQ8OqzI27ihK+V6NMwV+YGJtNzWcHTljqQD33EoMkIxOkW3nuRzxz9sc95Bwk\nMmiw4yDDl59IPTiYQGoowiIKlqgsBoPlwQP2MU0q9lod416tolq3pDo0gxkU\ngpG2W756S3Q5sBBbSeSVnPmy/ddNnSAzdV+Zw+wPzkLJ/RZ4nYYd9bIvkw64\ns0DtoEcupFd7MX2ARxgLAaEzcM4LLrP/ZFRIrn1kx6w9kRHpN+fd8Z7aPw5o\nvyiI\r\n=HBnv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f978109c3.0","@material/base":"5.0.0-canary.f978109c3.0","@material/shape":"5.0.0-canary.f978109c3.0","@material/theme":"5.0.0-canary.f978109c3.0","@material/animation":"5.0.0-canary.f978109c3.0","@material/elevation":"5.0.0-canary.f978109c3.0","@material/feature-targeting":"5.0.0-canary.f978109c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.f978109c3.0_1575306443524_0.7302323163874329","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/menu-surface","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b75a5236ce0b6454e58e41db5ad3818c318142b2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.ad9dfe706.0.tgz","fileCount":36,"integrity":"sha512-xMtbr0hGS2JOk5gLNBW4utl+DO8m+WISjIfUK99R9gTIKyigaGBFIufe7ZiY4Xfktfz1lBaXuyxc3LGxTL/Z7A==","signatures":[{"sig":"MEQCIE+X5SFdRo3g9KhKweBeL3Kr9tsJBm/VDRLluXc0K5BFAiAZJaJ16FieFVZqaT/b+tm0TyrBLo6Q6rOqRXRnD1yrEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":306777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u00CRA9TVsSAnZWagAAlRcP+wYmHkySlnjGuRNcTN9O\nR+CXmnlvrVbmfiq58BpsSikzdJcRrbEw6C0/T460rFCUr8vKGsugK3e9mJpj\nJc16Jlpi7N0YyyeLyE86j04HsjAJ/fpY6bGXMcJ2Krkm1CRKjJvZ3l/ByH/I\nbGzopSwt9CuLliEbdBM1pX8ui7e4WX/rf4SuLgHR6Xlytk+vb3SqFG6YqwP/\n9dekM24y2uXKQqkE5n3r+Kzas+E0Ry4NbAxoTIBxlKmNrw1F+HiZu20wFa09\n7AjHiIHhW8jov8p5kaAMCooK7l760OzlTlmBRorWWg1Y9PsOV0auv3aao0IB\niu2xvWhN91dmxZSefdqXBVQKZT4i0O3lui9AWJrFRmTYykLt5/1tyHfuQMGa\nOGP+WVNoE4vQcTz98N1I369MiZ9P69vuHDWcG3/Wg4FcLspqkgL2/3lVqszW\nyzEIioJPfC9MNIwuOH/KOv5QNjY9n0Ek42W9MM0i7UN1J+PenDhVzda3l57d\n6Sm/MI8oFS0a0O/K7j/iz1OUvXSXwf73rl7jBeqk15CLa6AvTWN3pUZONit4\neBRnmal7BEu/PDjXOAYbXYYAHlw9tPTPFYoaEOpM7FphGAPhVzW3TnnQNqlc\n3IRBCSbP7lbVoTG0LBoO15NVGOpgbFxUi+fYgMWY7trzO3wo3At6v4jS78gb\n5nnJ\r\n=G696\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ad9dfe706.0","@material/base":"5.0.0-canary.ad9dfe706.0","@material/shape":"5.0.0-canary.ad9dfe706.0","@material/theme":"5.0.0-canary.ad9dfe706.0","@material/animation":"5.0.0-canary.ad9dfe706.0","@material/elevation":"5.0.0-canary.ad9dfe706.0","@material/feature-targeting":"5.0.0-canary.ad9dfe706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.ad9dfe706.0_1575415092643_0.6703728836703264","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/menu-surface","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"ed122a8d4e17786826d523c5c98c4aab9b4f49e3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.5e45d77f3.0.tgz","fileCount":36,"integrity":"sha512-l9eB53RcM/+Gca1gHBfRP/Q6ZpEzaCoU+AUUrRjA5JnTotO/atbn1RFw5x0n1sgHN3MDMtCDJ5jq18zf0apQ8A==","signatures":[{"sig":"MEUCIAHONLHtz6HA8Jn/Pry8yiT9K+F6eRu46wgFobm2moO7AiEA+AFE6Ie93gZ4D4o/sUL/b92O1lBY86wcm//+4QpfU9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":306777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u2XCRA9TVsSAnZWagAAoOMQAJWulQzW2d1TRWSbnKDH\nbq4harwRPIePEJX0whCDGSjv/346beGPyjvbdPEHBk3TCl46S3VuLfNkJs5w\nTkstZg5V3VOyhHyib3bsElDUY0LDmrsUbHi3VHBoUEq3/+1L1zJ9tNqIfGKw\nk+r9NAYWADTiibQo0aeSBTEtTvCn2HeIZQJIEdQP8uIv+A6WIoLnw1krcKEI\n4mMVT5w6k1HUKqhXQ9mFkLmffXvjlaXN+diqzx16dtdNQJuFLUzZG5bKMlBH\nau3HFrfIR4ocJEMJxM/Vpe+/pvHwn9xCY2GSzBehettZIsmBaZYqRP9jcsNy\nLX56q3Es7w0w7Olp98A3/ccFPXEFFHkWjY7LMWJd93oercIrIIH2zN4PIZ/X\nnHd9YGdrnfphsiQEHuL439u69bm7T0h95PLvpmDsVxIw1+RUzJco/fuQa0Yi\noR3MBXNMX0WfHCgF+gP5QJkmGUcGX6gIoHDFAQoouFPSDEF6bUaBpfDIp83x\nh8Rr4WxGZt9GEHfFHsXeky8vYy9Z+shxErJGvRh1wh2xQjmAmGMGmt7k2tzw\nmwsiSoAvbWjsVkdFjKAEAhIfHRgHOzHxznH7DQtGe7cfXliumGRV8jV0jkvv\nbyCP6KE0xXt5rANSo2DV6yl041QY3qjY6ZzSYSJj91PQJrrnukvd6YsMj7Ft\nUKsH\r\n=ZAs1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5e45d77f3.0","@material/base":"5.0.0-canary.5e45d77f3.0","@material/shape":"5.0.0-canary.5e45d77f3.0","@material/theme":"5.0.0-canary.5e45d77f3.0","@material/animation":"5.0.0-canary.5e45d77f3.0","@material/elevation":"5.0.0-canary.5e45d77f3.0","@material/feature-targeting":"5.0.0-canary.5e45d77f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.5e45d77f3.0_1575415185987_0.8888303335568934","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/menu-surface","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b06705f98625b28a91dbf4fd2c7d118cf15db237","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":36,"integrity":"sha512-CgHa+3uqyCgko12KTPLGI5tWfrq+hmWijyGYEFnT/eh7j56TK9cL8HjmbnY4rkH3KCJQYOB1WwkjY+/7sptyZw==","signatures":[{"sig":"MEUCIGC9cdv3dUHyTbFzeL7uGl1YaknfuznTz/ABe2/p8lunAiEAtfkoeB8YrsDrPmMHEi961fU0jL55gRobXCRsbC1lMeE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":306777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3CCRA9TVsSAnZWagAAcygQAJzW96kyuia8X+4bCKbY\nVUJCQ5NSWK+eFoKJgBcnKvz5ekHpSDva7kVDZkZVzQu3oZ+kspPZGc19AQwT\nAAUkK0LAiFBUhGyShk1JF4CUKvDF/EdhDYPJWalPdNiK8Sg5S03vM18ZD9G+\nTeezXdBOLkYbWmUVpYrpOS008H8xBZIMUEwmpaU5o7XBZrRWYmcILBULOZfr\ncBmmR7LlENRp7Bi/kH0s2vlgN96WvIAGlz20/EmoCYnP5cUThD/mIPBXmhIe\nfjE0vkvC1Ut8oJg2Ebt055tEjpz1XPgsPNdSwL6ygjW1bdqJEjliBBwok7dj\nfPwPWgsycfdkZtjgiFukz1QVmlDfYQhyeLzMb1u+y863y6nzScGHyY4NgA0e\nJahwcKDRs9afWoun3WWW6vciJnFCgwtunFL5AkzL8ALi/oHOz7sf3CrUsWVh\narb7GmS27Lru+uxEnitRHPEvLerXcOV1oHFnyyYRGBrdI0fgRkk7zTFgTVtY\nWtoMUwJLKj09Vw7Y8TW44aAYZrwz1VklGCP8CqzNDDbjR5OdE/mG+XWpcc6r\nA8yp3OJcPQOxKGs4eK0tzvLy14Ig3uWqC+Uamv1M3BwdZus2nNbkeSyEZVcj\nykJCvNyTKJFKTs3RY4qISPt4/j7u1vCUvg8Fz/kMnNPKkUpSd1KGxeRbd50c\nbFnO\r\n=lUvF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d10e8cdf3.0","@material/base":"5.0.0-canary.d10e8cdf3.0","@material/shape":"5.0.0-canary.d10e8cdf3.0","@material/theme":"5.0.0-canary.d10e8cdf3.0","@material/animation":"5.0.0-canary.d10e8cdf3.0","@material/elevation":"5.0.0-canary.d10e8cdf3.0","@material/feature-targeting":"5.0.0-canary.d10e8cdf3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.d10e8cdf3.0_1575415233763_0.5141186462059146","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/menu-surface","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c94c39d181dc11e9df771c42173e8b3f78fdcdc2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":36,"integrity":"sha512-oxw6tsU5ZPulJ/zIzaBJl/ExoLoTgExeVtBKIwPD/jqul1jN8YGwV7GPeJASYbpAIrXh6wI4RwLuPhExUvP4tw==","signatures":[{"sig":"MEUCICvp/7SJEMegh/BGdraWKE0iaHQOhDItOBUHQv+N82bsAiEAj+kgiZYQdZVsnb14+86PWrY985p1PojAjuasGclc1r8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":306777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vXgCRA9TVsSAnZWagAAUSsP/i3t4to3sdzTyEmaNQOh\n+iJEjsFNhd54uSjYDzNqSeiMCulYGMFCNsBZ/hbPTg46uaDQkRVLmqSFEg1l\nmKDxnPECt51/2Txa8t+LiGN5xf7fP/lFHrIFunSvXEuQXr8POlNbBkCOWbRp\nr7W5qilVOyevbXaqkgznY1JTAP2bNCTz3gGKQCWFW6cMiKcs37aNpnW5bEwg\nkgwKlIgR8ycsJ/z0txuy07wW/UJH1Mndp9LXR4LgFbZHRTi0NdntVs6N4bTn\nEliHRYmpe/5VXZtrzgHZCuQ71uT/6F2Dg/9rrMTjjj1hWIYkF5euQdNo4MC+\nr3R0Y9d9od4ref3KMg7stHLsyjONf1naftK1LVgEYHwe57fuQpeLccuErbn1\nRY/LWVzNrH2Y95mSbQciUR8bL7BITM9Rx2NyXvR+AglXoCIh5eq5bK69/4Bc\ns6/1DxZGZBD6NtjXzIzVzTwkpKM57WBse4qZmugJXtK3iuhJwQnb7OVHeQKi\noItGIp44GRQNJEWlvNfvNAXh0QxDGEnMrBRxWgefx3O+xh+DyRafRD/4Q1jl\nux1g3ykCJ5R0D1+Dmd+gPneo+Hdi3F9MT4MbqxYiVhYJkmtM8Hku0qbztwhW\nFP5WYDflqBnX1H4pO/HyNs6qkTT2UQosNm3XtrHiDSNOk2OS8tYRglom20Eb\n75iw\r\n=F99p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a5dbd8a2a.0","@material/base":"5.0.0-canary.a5dbd8a2a.0","@material/shape":"5.0.0-canary.a5dbd8a2a.0","@material/theme":"5.0.0-canary.a5dbd8a2a.0","@material/animation":"5.0.0-canary.a5dbd8a2a.0","@material/elevation":"5.0.0-canary.a5dbd8a2a.0","@material/feature-targeting":"5.0.0-canary.a5dbd8a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.a5dbd8a2a.0_1575417312387_0.14544476577651078","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/menu-surface","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"1c37585cd4ff8454379ac238ff4aaaf14aedfaf7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.ba879b68b.0.tgz","fileCount":36,"integrity":"sha512-PflsX9h/PwlXblJpIDzK+9MammwemSNQK1o8wKXmHI9XDbQV38RfAWo+T9BDGn3Kz1rYhmorxa8butTTY0UOYw==","signatures":[{"sig":"MEUCICxuMyy610qBFKios3SbghanrSGaXEIrfRyZRFAHHo5dAiEAj4zbNqj4TpGhqn+jmzOzrOhUOlygXGx5n7JcZDr+j2M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BWeCRA9TVsSAnZWagAAqQUQAJ71AcwqW78E9M/OSzbl\nwbr2ZkF6ONxgGe7GPnPGLVXw6Q6LY+j/oMMgR/RumxUe6w55iYAfhMLITMtL\nHwhSIaWYWEEC/DmLm5eZ9DHGLytC5IzDM3yuXi0nyLCWQlAYqGXVuXjV9xkn\nczmpJ4EkNfNwyDYpFLa2Qy9Iws7YZ0NEnyHEwNrKGnvAHUF+wdmJvXoDni5U\ngXBmbSqcSO6qxU/udKhD/ceVk/uFUFxtLzRTJCxndmh1ES9EDRJyjfwIKviH\n6AP6nYNB3BG6fmIbe2VxQ5Ck/JrHozcJGtmB0ZFmb+Mm+kGSZuQNuBJWBdua\nAyDKY5Dk3rpDN6xgwtrZOXGaCNaMT4Q3VaiXFQl0qAsGXoFyj8CTG5bZK4tW\nSJoFGSUM2l7xJczVvS7yYzGrZX742r3aFVKM17REJJNWLvI15B7LrUtnShZD\nxJo37Yx/pgFPLyfpAgbR3nLZhS+N8cqb+PPzR7CRny/kWJSPWFOCNnD43ScE\nTJfNFTCLykwQIeYD4+2I80y5dCagFkvLfAlos2n0Bm3Cm+dLmA2Gvb4Bj7ep\nrFUYwK+cPkzdsx24LMW+IKhACTq51LVpKO2TQlLzpcSKpxLjAfkX4qJQygRQ\nWtuXt2ONNh728UGd/10nKLEtS3Ax0QwGUmJnTy69BvV5rxbLwPjvWS+9e+qX\nkmK7\r\n=nIqx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ba879b68b.0","@material/base":"5.0.0-canary.ba879b68b.0","@material/shape":"5.0.0-canary.ba879b68b.0","@material/theme":"5.0.0-canary.ba879b68b.0","@material/animation":"5.0.0-canary.ba879b68b.0","@material/elevation":"5.0.0-canary.ba879b68b.0","@material/feature-targeting":"5.0.0-canary.ba879b68b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.ba879b68b.0_1575490973872_0.40861329702289617","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/menu-surface","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"e1e89d46edbe83865f6173c3a9ea9030ed784745","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.aa0eba489.0.tgz","fileCount":36,"integrity":"sha512-ArbkLCPpziQH3By8dzOXrD8tzFP8Q2KPwPZMy9w3kSrNLJQufprwSOi65Tr1U6H3Kw8fU+F03hhN2/7NJ3BzAA==","signatures":[{"sig":"MEYCIQCVNNIpHfpyx2/kcVHF8U1QZymthfXDNQIuU2XDkMdkkgIhAKaavA6zIWznXG9XXKAE0FYRq+TGyfW7amB9p7zr/srA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bX1CRA9TVsSAnZWagAAZmkQAIXpFyRcyhb/UjNZU7nR\nebLhqzLPc78gvCzdC0AzXQ1BWciSevWcz5CA3fIxb1qpqEeQi24WiG2OUMCt\nQ9ihrJv+elmEUizIsTD86aMGjmjQIvfvF5m12IeYYjFVO/RZfn4Hj/IglFEk\nSScxYCMzXjBwBJI94WoWRy1z4fg3iRmPqDjf6dr4PHED7WL8eZJrXrVi4smj\nRa52GGOWAQYDC1tRkmCVnbGsHJJXxIJFskMfvnnxAxvI+MFXYOc1KLmRjuS1\nyumkO2CQjzQiHxsLPgEOiN5YirZnv/3hq2CSE9CkOw4WNdaYWOoboQom6afG\nYK4yPsTsSy+5KEGzDVm7EOUrwHs4GWlt0rSlzNTwu6kgwRm02aKTLgdPpoDB\nllBnOM+v7IhCZVvkdLCWANHdq98cCbbRA5AMOHjyea1lvo8BIptXdaiU8MPl\nYdLRW+HHhgoC749dGi7DVF5a4+6whQQ+cDEoTitTT84yUNyRBznZrG4DcPvg\nng1qw5Sfr75L1D/1mU6Qxy+MbgnDPndKwisVVR3tc867lcs7sX6bljRjbe5f\nU7V+GIO7zbyOB0emYfNFDCOowaT6G8ByTQSsMLgbBFCCUvX22kawdZkYOxco\nY8FrmrIRh7o3JMiQQH4JmBXTjM4eJtlqODcwijsuqI8DbEX4+XI3zpMVUyKq\nb/0G\r\n=OM7o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.aa0eba489.0","@material/base":"5.0.0-canary.aa0eba489.0","@material/shape":"5.0.0-canary.aa0eba489.0","@material/theme":"5.0.0-canary.aa0eba489.0","@material/animation":"5.0.0-canary.aa0eba489.0","@material/elevation":"5.0.0-canary.aa0eba489.0","@material/feature-targeting":"5.0.0-canary.aa0eba489.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.aa0eba489.0_1575597556727_0.6389345876310233","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/menu-surface","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"8acd06b47729e04e229df6783d92885e3d648b93","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.cb7b71a86.0.tgz","fileCount":36,"integrity":"sha512-xFfYrSBR+MxRi8XPTf0auqSnOgrq8rH65hgfEt3FSveAy5CWx5oFU0uzFlTPJ046mmcIflhZ0oYSo8kiPBPJ9A==","signatures":[{"sig":"MEUCIQD0Vkz5SICayfpkyerrCettReN3vi/92AFj/KRFBCiaQwIgNN/s2bTyQZb+iX6AhpMNZOTF+7c4HJx6LNY+TLD6nfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6uqTCRA9TVsSAnZWagAAnNwQAIzEJIeVDnh/MzdOI1pf\novNWYyRnlbRjJ4/Jfx5aREBsvhXSVS9tbl51IrY/VqCRy0QKQndSd3rE1K1I\nrWiWucXWlsM2bAD09/ngWgdsofyoNqFMJa5xi641SUBYK3aEI/Xxa+3f3f99\nv4JmbZ5AI4VNiyCV0cwB9avkilarACpCgQ2Q48Xeavf51bJehbHn88vm7ocH\nz4jyOdlWsLsDyXqv7ScG5fQ2MILxnhzgZHM/NSz7WtPd4m7YDnTk5jPb09Tp\nYKLve0oIM08gDv9Phi4ngeqtRaND2RruPFHSEbZOiWwFAcratIhYY4EZP+bB\nBobr2jRve3az1A9rsU0BlCawcA7x1CMB37QwIPDd0qZYwxU8dlqa0uzbG6fJ\nqo1BcX7rXKbHdq4gydILbmjSq3xIvWkJFpyk3rualwPw0Mgx0Epq62CFfTHh\nGDYBE6YXsRH/iPj8MqRfHlQZzB/Hqbkr3LsVNgi9U2jlxDKhvLLvEaMFtBbS\n5GqxfiZKEVVofJaTbOE9NcrmmgtKK98shRaIsiv7WJhJPPNioAKyvPyynMlX\n9EoFYx8Mcp+e4ZP3+epDXRS+ffWI/CXslQOQkdD5KVKgLfwsWAd7CLqgrWpS\nVCj57ji8njotlAob76ITvm5Oitw0AM+bDqx90/SRLpnDE9oSeUTSPg3NEZh+\nR5+b\r\n=flQx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | `boolean` | Proxies to the foundation's `isOpen`/(`open`, `close`) methods.\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.cb7b71a86.0","@material/base":"5.0.0-canary.cb7b71a86.0","@material/shape":"5.0.0-canary.cb7b71a86.0","@material/theme":"5.0.0-canary.cb7b71a86.0","@material/animation":"5.0.0-canary.cb7b71a86.0","@material/elevation":"5.0.0-canary.cb7b71a86.0","@material/feature-targeting":"5.0.0-canary.cb7b71a86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.cb7b71a86.0_1575676562536_0.344831495020151","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/menu-surface","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c797407ecd74ef1aa96ebcdd9b0895f242f376e3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.50f110a6c.0.tgz","fileCount":36,"integrity":"sha512-6OLRaqrwzT9LKkh3sgAUC+4toDkklC9IL31fXLks0Ujp8hJ+ZhyY0Yw6yKj9JP2RjlRSAE5pmGtT8n5ujuA1hA==","signatures":[{"sig":"MEUCIDWpsQwOXk2QGJYSnORl9aXxrD/5jpiyatrNm48bpLIxAiEA71+aXBxGp7Z8Qahg6vDX0enOcmKKl8gzwPpsZD0kXQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd787/CRA9TVsSAnZWagAAQbUP/isU0+f9LXC3FztsZBag\nW3l/JVFr9HhYk+VojfZcK48YOxrh2dd7sZ5guBbK1CIYofaMrP7VIbv+YNd3\nCoPmu+gRMgIgFfpLtC0BRnA2MT7pPwefcfw/vNSCslEWPThTaqmbdV8Il+2K\nw7q55SyWGc4fxXPEImhmF7mUROfaONKCY0v02rz7uJTiS+hKMLwA5L5GWNGw\n8gZjAK0OSmWV+OHiZe/dnpePJrNQojKTQHE/4vzMleNqw+ZC679x+bbwZdHg\nWI6NobDg4vJ8V/X65tzuiywRBNpmigukTlHvsg13HpYcLVwh7uUnb+UvbESW\nObopnPrsQLJjTFP9TDN9X9uRPWolNXsA0G13Cct7gcjVvW/PEvscU1e/KacK\nJcpCtUAQFaW43uTG9OTUfpL4jnek0l9rpOkPy67sCkw19U3pVyaWNkabPzv4\nx+UawMGnOlNwbrAsylXSS8pOe3Ps/TvePMT7A6Qlk/1DXInZEun5eu9snAD4\ngirGsemM5pKr0XeatcCsNQ7ensDbyHQ7r6qX/cAEzx1SS/mICW9NrLvHUNZF\njWsU/99Ir3iMjqt+YoXjYOud8aiNBFUCcWckjBo0xd2Tu2NEExdyuwMskUKF\n7lLTdbSmBwvskoU6sa95w207AGKmSuUzcGXoWrmlwpYk9WKHsbpxsfOkBDVr\nZOVB\r\n=He4w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.50f110a6c.0","@material/base":"5.0.0-canary.50f110a6c.0","@material/shape":"5.0.0-canary.50f110a6c.0","@material/theme":"5.0.0-canary.50f110a6c.0","@material/animation":"5.0.0-canary.50f110a6c.0","@material/elevation":"5.0.0-canary.50f110a6c.0","@material/feature-targeting":"5.0.0-canary.50f110a6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.50f110a6c.0_1575997183556_0.05402807237209051","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/menu-surface","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"8702f28030b0b90eea7e02246cc26fc13c25d713","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.878a08b7c.0.tgz","fileCount":36,"integrity":"sha512-kKuMS8CHIZrDPPZ7XNjwEGiFsLZVJSwGzVmVUQiycyJBWN35CP2mYjnrcfhQbQSUc3pZx7H4KZ0AEeZQJ4l7oQ==","signatures":[{"sig":"MEUCIQDdSdTSIFDUFsyQUDHDErZ3ameLY1B3xdKjm+QnluAuWgIgeh46OEA2rRiZjlU0y5y1hGL6npCb1AZkU/wsco8kMzw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U6dCRA9TVsSAnZWagAASQoQAJ8vGmMhLJpaEpVXigGk\n3ki7YA5Gl5dCFtIfV8q3zqY1mSxYhrmOo3/Y4thc7IKRY7akf83WGlh1I+qx\n+mp6M8ZqvThhZu3RuuEOVXLMv1ZpncH4Dg2w7c7fyjs+X4AF9OZvbAuPj87u\nO0ZkNs2MgCWLmw4tXulYo1CwkiPgOrv0bTZ2aS4GuTsvbrkv8LTw4GFJ81Ho\nUytmCl6wlqAJXcR8xDSx1TFX/t1GvziaWHIaqRIE8iqwSVUohZTHE2/m2zE5\nvnOgZUL4gyR/Lllz7jtO5dSnx7eV4f6B1SlV18kKGyZ7nESo9AFDdUUf7B9w\nSaCa/3nrPW/+C9/BD15e3WkYtdJdzBljO9XCSFP3IlCllLUgdNzRaW0hFpDp\nWqJ9Al/uRe2HXRdv85ljCcJqGRdybzt4b0Gm1G0FjOI1kQjvlQoYLe4mN3fr\nL9OhiNcFDd0vNhcsWjhgsxjlTeiigqf/lJvFOZbZ+5e93X+NTDObWBkQWMzB\nIBHmWKW3qtpB4rD5A3lGtZ8s7fnjWSaj6r5Klxz7BgvFpl75R9KjyghHrR21\nvi1P2492jrE5SQTDn6PJzNo76i385IVJBfXF+2ktxoMILl/PmVjNf8QE5eeF\npK/c20Un8jkiFh966JMo3lPfceYcHlE+Y6BG0ftznn+6O0Df0m1f5WgKFwRO\naIYP\r\n=GFl5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.878a08b7c.0","@material/base":"5.0.0-canary.878a08b7c.0","@material/shape":"5.0.0-canary.878a08b7c.0","@material/theme":"5.0.0-canary.878a08b7c.0","@material/animation":"5.0.0-canary.878a08b7c.0","@material/elevation":"5.0.0-canary.878a08b7c.0","@material/feature-targeting":"5.0.0-canary.878a08b7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.878a08b7c.0_1576095389332_0.9755455459030038","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/menu-surface","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6f2071bcc948a0b964dbac18d1c02d8bdd022dad","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.397905b4e.0.tgz","fileCount":36,"integrity":"sha512-nsThKrfysuAba/aOT4k6tE7UbHG1NY4ki3tJlXWo+oVMipvZP4GsLvOCmpCZteYFv0+HUWCH9gcgZM67jzvSgA==","signatures":[{"sig":"MEUCIQCvi0kUc46BFnrvT9CUuQKOGV/NDt6ALMzTws6+dO4CxAIgTue7h1Q6Lm4dmFT0JKdTI9ggTND8XMtnLBCGlrmO07o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8ao+CRA9TVsSAnZWagAA56kP/2N+32gb7qQuQpji+Ybn\nxONZRo2E+d9T3LFARlWe3eYnai/Og2qsSGXeCmQqgFkcO+x9IIdrtpZPFCKO\nex4SZZPBSRWCU3wooJzrH4f25l6GPzVmRvYjntcloxLI8LluYFPH1rfe4b1L\n5kbWI5RTgHcj/mLigaFKMR0FB5bwZxslUknQqSqGZUAGiKATVhN6ZXRFqbId\ncSPPz5OQC92nRKztsN/hVfVRRhfn3Iu0oqJLmzuNFRlOmJjJ+ZnoCVoS8NJ5\nPe61oWZo7IKInKNL++u/ydpBtLrXz/qx5S1PZCBksaA0XTTq+qx3FKKMwzXj\nXMAgJdNmjPmv5ECukisPkANqQWfFmCim/XeYx2qXf4gr0SbyVAHCSjeEURSO\nbJlOabCOjjT+1miJBN0sQYdfSg/6V6Fp1DK6x6I3DzeBdBJj0AQRKt4xrc1k\nfCUDlw5REjW+CxEBnhsMQ1Sc804ZbZvd7lBqBFkUshOrb0TFP4XEJ5e0MtD1\nEUNtIt0qLOoZcAqPqYITOM8siyT9SNfR5hqBqSgSf3PCXjUlQlFc72RMWmv6\nWuBnnPU1L72tZn0UX/MtoYwG7MKWs67r+rXlroTJiRmYMauM1xp6IE6cZRM/\n+V/kWlV5mLx26sek8PqE4LXFTAR3ucqH46aZ4ngzqduIr8ONfiXpiYqXxkIO\nImej\r\n=99Px\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.397905b4e.0","@material/base":"5.0.0-canary.397905b4e.0","@material/shape":"5.0.0-canary.397905b4e.0","@material/theme":"5.0.0-canary.397905b4e.0","@material/animation":"5.0.0-canary.397905b4e.0","@material/elevation":"5.0.0-canary.397905b4e.0","@material/feature-targeting":"5.0.0-canary.397905b4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.397905b4e.0_1576118845777_0.00408967518836989","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/menu-surface","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c9d5b20c6a0bcea8a2662788009e03639d358d58","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":36,"integrity":"sha512-9A6o/2bPFOlI89ycgntnDeAsmsTcd0yi1GpZAZrwOc0XhtC1ahnEVLhlTWLUF6+EOy0fG4mZ5gCu6ndK8WKnQw==","signatures":[{"sig":"MEUCIHLLGUU35VT6emi2S0lQEpBN1kbworGDBD9YsFt6U4slAiEAgg6lAyl98sij1Khq7wWMKE6W1pD3jFNw2jnbkshjQjw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o4PCRA9TVsSAnZWagAAXBAP/jCubQ/VYxHE0FJgmuC4\nGVI6zoX2tzSk1ImsGr0sF4g/Nwh4GNcr2Tfy1MYb1XAmClotzrt7Fp9v6kjl\nsAKMDey1e426SlbHA4hLsrlgXWfT52kEmTo4wgqOdP1yMk4Q+2h1tNjTp6nA\n7Fp+8jIMdQyaqc6+4HEHeePt8AA1t1/reds4DfnGA1a1QgKpCx9o/lYk7/Pv\n2QEcV3ZVQuHV37uqZab9hmK5mMeyTon4oTLiOQPRWkZk8hDRMIKiD3SXfI0f\nIc1whQCY35t4N2Wj684QmwQCOYePd3sizrAu1iK0fKyV2ikpDJl2kbs6sOJH\nuB0skXbR6rHxQiOC4amgvmwxPb5/7YX2WBFPznzwllkXUqyv3vJ9A5B76CPD\nkLMvM6k08rOFJBqjfpc6cyngfP0Jh3BqDVkUejjPT+StmQZYrPhinCKJjhsV\nAPOixGMm6RkMLjn5u3MO4husgGOvq3PWq0DUjzhIaQ4adiwym+MDl6ofMKyv\nx1oCo5vPH8dRGMV/uAmWQNzY23B842NRZldTlNRpAQclU5IwdLxW3metKRsS\nV73gaDh8at/zXUyYnelUsK8ptwlFVQqH12+qgdMu65eotKMreiXsg8V7LRmn\nBX7tiVfoT3OpE3QnAkZl0NthR8/N8T8M3+UPCBs6OUPvzAzVZK4fdIt+MG9s\nkMjV\r\n=IWtq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1fbf5bd1d.0","@material/base":"5.0.0-canary.1fbf5bd1d.0","@material/shape":"5.0.0-canary.1fbf5bd1d.0","@material/theme":"5.0.0-canary.1fbf5bd1d.0","@material/animation":"5.0.0-canary.1fbf5bd1d.0","@material/elevation":"5.0.0-canary.1fbf5bd1d.0","@material/feature-targeting":"5.0.0-canary.1fbf5bd1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.1fbf5bd1d.0_1576177167362_0.25362986442097735","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/menu-surface","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9897d82162a201b537c7bcf16665b916737c6aa7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.b723dfa78.0.tgz","fileCount":36,"integrity":"sha512-P3PlmAPrEm3vu7Uc2DQLRJ0ZRaho7LBVfoql+f7Pn1Ew30kUcsViSYonWTcjAmS3T6UJZ/nxDymKYV2mT7XB5w==","signatures":[{"sig":"MEYCIQCsGW1QTpTvZx+iBYP6KPOETo3YuF6VoDFRpZbPFLOgJQIhAPUY4g2Vb3aa0I+0kzCidRSy4ZjFftRTM2brilGVdBMp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p6YCRA9TVsSAnZWagAAbQYQAJpXNRaBPceok73w0fHa\n+HDCCdTL/u3PbrBdZ9zC5M88VODM87+nzNB/6ph2VYMIeRzjTLUHJ5nWyMxX\nJDjseTtEIIben2ec+ID8FOMKVD2R/CHY+CIpy3pFfs10nryau1sa/TFNLCud\nje1lpooVuYRxVH8XkHO58tMPa6waZP37ZlFzyqYC+TY5/Eop+KltFZ4EDogB\nU0jlOUsjmSQD42LXrk2RO/YNhW+9hZq1SnDXj0k4ecm+fgSOwkbOs5xNWuF3\nprIees6bR9u/Ajm2DtofKKtxzxb3cgqpmLhOErlY6PTB8JvO5dBRXmqkJf9w\nKzaO0t+pgqHEMTw1Zo/TlSih+SeD7r+M4+Aj972F8ymoZnjydoiq9JhtrA2n\nVeDwhIi+DiTFFFUZXMrW7u3qpTO5FTMi4OU/3z1xJ4HhlXJdccP3cwfRnkgX\nw3lmneMy+6v8J+/Q5z7aCpJb+TBGoUStEnlaTNGBXxMwwSaWbl9m+Be4gwkT\nHPNfMQ0YkTPHRfJg2EmNeWxQZ04nlrMP6m9+/rLnzlTzD/mhrGvW9ueeuwI3\nlpXTwidKOfk66738qRhBGN+h0PFQn7hBwX+cBB7lf6TqvlfYND81XaUALk0W\noMdjVjDsc/a2MRO2wrWQ1Zkio4yLM9QSniExGkhoFYtPyHOdA7YsJpPjwzZl\nJkfu\r\n=v5nT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b723dfa78.0","@material/base":"5.0.0-canary.b723dfa78.0","@material/shape":"5.0.0-canary.b723dfa78.0","@material/theme":"5.0.0-canary.b723dfa78.0","@material/animation":"5.0.0-canary.b723dfa78.0","@material/elevation":"5.0.0-canary.b723dfa78.0","@material/feature-targeting":"5.0.0-canary.b723dfa78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.b723dfa78.0_1576181399680_0.12399031210726763","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/menu-surface","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"87ab452b0a10240309c03a04a32ab22061507547","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.1c494e567.0.tgz","fileCount":36,"integrity":"sha512-ai69CSLokrX8Cm2EmRYLSE7Ih4WoD4I7EQt+5/bNWLtVdB7ycgggPIoEW3m+896Ul1ICKUJCHmKvi3lxoRhUnw==","signatures":[{"sig":"MEUCIQCremvm8AYCURWNLWlVbHZ3ulKE1lm0bSUG7utkFDbdegIgacB7Me4/pj/r6lalBzPi0uciOFFXdVokMI0uEY4O1yg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s8XCRA9TVsSAnZWagAA8tUQAJgiOGmOuK2Jr98He+A7\ngc+SCIYTUKyfqSTlCBJTx5NZKfABUP9OXQl8WkTnJ/nivXeyRjUComAQa6za\nmXbuNBm36Im038IUN5f49c+zwncnfbia9MtwPwRxvjxq90PSIdkYu1VKHHya\ng8SAswOPxC5tVIkTzSu7L28t+x64X7WYIR7JKVUKCf2JWlsq3zF6SB2/Lwer\nFgI/nwVuJTXI/V+t4MaVNruS+pghBf/Mf8i0zHSTPdIFzwU+zmOPlOcuSr1B\nPPZOhcM5kjs+zRkt4VgKsMvJhgvxYC4jGhO2W4F1C2p5ASsvDU2v1TVOSokK\nDbileUXkZvks/OwKLfiJqhd5Ub70oiBoDurHcxcpN5AE6bjAsLrIJWuBbR9/\n40EECQwE8iFHGFeGfTYwcIdu03Jmvdvd2bf0ca7rvjbGfc4qSYLy5TA45dSN\nQaB5PKO/Mx6yvh1wKr2fWCAtPCUYFFYp8Kp9jsYhFFLDYEllSO57PuaTTSjo\nJGOkz0EjCMRZuWh6zE65QT05EBjs4ASSbZMzeECIHScUUUcUcEIp2JheJMpM\nuJvzPdLFngP9gvYzlgiod9FrU09pg/Yt/J1X2z+8NPysX3EbSuWphQLbX61k\nN+OdhHPPM9iDN7Pq+Q4xrFizRyegJJgcHfeLfBAfAewCtwqi573cEVahH6Qf\n355i\r\n=FgqU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1c494e567.0","@material/base":"5.0.0-canary.1c494e567.0","@material/shape":"5.0.0-canary.1c494e567.0","@material/theme":"5.0.0-canary.1c494e567.0","@material/animation":"5.0.0-canary.1c494e567.0","@material/elevation":"5.0.0-canary.1c494e567.0","@material/feature-targeting":"5.0.0-canary.1c494e567.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.1c494e567.0_1576193815535_0.5708921424390101","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/menu-surface","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"60e519a82e64828e9b40dde4c83a5dc7232ba0af","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.c9e98a125.0.tgz","fileCount":36,"integrity":"sha512-PDeHmK6K6owR5dia3JLO8Shl52UJlIuRMJpXSQ7dD7v97QX/psf+bNBsltNdGFQ3KfKiSIJ+tv/R0U6xfQXl9w==","signatures":[{"sig":"MEYCIQDCSetFr1AsYMqHglnzTiaQj+2FPerUxUBbRldLyxGaDgIhALcvX945sDCHFpwlEvsGTfVw5XAZ3i9jFXBDCiAHhMO0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RnuCRA9TVsSAnZWagAA85EP/1IATrEdJ1ZpnG10YkkR\nRltNU2H8Q1wLjyJ9nFuFASWz+IUb/ETgghxSh85zEpJdbMACBiB+CzIKQ218\nOs0IUBYBpf2RomDaqJiFe30pz0Dc4UNl5bblZ4fDAJfhB0ghCsWBx92tHU4+\nq2hB9nosWq0XkYg2R/oC0N6M2icAmymWxZ46R09Rdf/D8fdahXwCeW6vss6F\nMk31rk9/I1wS8FuzkkqMZZZ+FrqoPINtYUHptH639oSvc4HafWjMxmKPpSkg\nqxMV6sYdHkfKTFH3aJhmWWyDg2aNGYW1EkW2Ma6oeLRKjNP+y3mAA0a3Dbu4\nTO3TLuMf45A7/XrX2q3Od9aQGaCFxAy2nkTOdaW6tXwZX9Fu/beVNzgGyX6F\nrQfAHXA2gozXyGV6NeQ00g3csVsmozltXFUj0INYGlYupGTrE4F5BKmUSuH+\njwGjxIGSVyY/86ybIGoOKLtb29YVtCFq8yV3lrFxVY3d//92E3CCe2Cub8k+\nGZ/U3fGyzs9fGZvLnaxaJ6TQ3uF0ewz11waUBbu/Zx7UuGvP1E7/bWuKt/Jk\nM1g4n7k0+yAM3fOOvHcBT2JfVWSXOZLeb2GKPDDVHGJ1LYGA2Bvt2N8fnHz7\nVe+sHXe4u3QBIlTzjBxsTkeJ2kppkUdIAsU46ZnUT92hN7KvnXORP/Vb+Y1k\nqLIm\r\n=CQNS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c9e98a125.0","@material/base":"5.0.0-canary.c9e98a125.0","@material/shape":"5.0.0-canary.c9e98a125.0","@material/theme":"5.0.0-canary.c9e98a125.0","@material/animation":"5.0.0-canary.c9e98a125.0","@material/elevation":"5.0.0-canary.c9e98a125.0","@material/feature-targeting":"5.0.0-canary.c9e98a125.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.c9e98a125.0_1576606189100_0.5086717287378486","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/menu-surface","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"72c31a413ffa989e4f9c0c43acbc1d6237dcb1f4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":36,"integrity":"sha512-Vk/ipsnl22u7uqB4AJPp9b6as3QyjJNwrLnqwwkB9ghBdE0E/2SlNW/COKeFeam5oPk7BTaD7fLas7l52C4OKA==","signatures":[{"sig":"MEYCIQC9DiJrrKrk6DLcAXKsPB3Gc8vXIoHyXHnb3iB7GrPIkAIhAJ+LcA6QGbInQgpp6LyiOvsAbIggeTDyvD/Z/TlhYbl6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+Ve3CRA9TVsSAnZWagAAPrAP/iGYpWUOt2oaGuspHo3a\n8H9canzXr6w7CEBgTvRP+Kiis/vZX63JSOLzZSi2YLSBopaXRo50MZCNTSER\nSmxR/hHUkyFOgG9zVwW4Cvnn0Hzue3sZZBMxw8Hvesp0iJynoIBrz35u9x4d\nA3xMLIryi73aJqEk+GK1udh6y3UgYu22qLN8QC0LBedOrDq4VBmHTQSTy7Vm\nKRkflfbUPF+Aq2ZMVdyqeyOIdKDfMrwNYM+jf+DwhTuTrJcBuBzEDp/2TE9b\nyfuqD4K64zHKdDIDC3QJNMABgiiebBvh/9HU6zyju5npyi3jCkaxqKG45+pk\nAG9QALxETSfY4PzA6YBzOsiP+lYWd9N3qesP7yYmh47OSk6wf26vWikta/Ej\nGUzLnKddvKvkGNqQSlPDMzxHKi4iFVLqz1/asiUHlhdTBiA44pxtc4BdEnJw\nhTpGVqJqjIrVytppkSD59qU2jnqswL+iSZrX119P9vlbriW6kQwY9hu2K8yX\nv0m3ql+56yIqZ2yts4lPXe1eXIPtAQ6EgoPsTIM/4fQclM0MTS082RyDzstg\nCMv1Um6FnCdrmxlp7JkFHHu4bkMdXRXHG/gdwEom3YF2yMOD19SPbQj3qcio\ntbS/5aqGa2JbYgKm7P42s75onI16FVPwlzv/vldGKQ+pNBPosGhcxN8WWX3W\ndXJG\r\n=BCmx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5ffe8f7e3.0","@material/base":"5.0.0-canary.5ffe8f7e3.0","@material/shape":"5.0.0-canary.5ffe8f7e3.0","@material/theme":"5.0.0-canary.5ffe8f7e3.0","@material/animation":"5.0.0-canary.5ffe8f7e3.0","@material/elevation":"5.0.0-canary.5ffe8f7e3.0","@material/feature-targeting":"5.0.0-canary.5ffe8f7e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.5ffe8f7e3.0_1576622006622_0.788770025482622","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/menu-surface","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2359b33753c464996f88be558e20f2a9dd7424b8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.47949b08e.0.tgz","fileCount":36,"integrity":"sha512-Rx+cyFpwHuZdh1dqblTkuVKr/hD7g7u6VWE8qGHESK3lQ2ZjAx+KO/FhFq0DMNZmbrZsKCy9geJIHRc6ad2BIQ==","signatures":[{"sig":"MEQCICnvZfaHPbuOqsklAVEvm0+kGoWNBipefT9qZj3vqrZ7AiA7Sgyc/N9SqrTsEATxChfI/Y8OJTOf6Jfg9PeyiE7BJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mSWCRA9TVsSAnZWagAAA9AQAJwcSLv8r1xdaHCsQSE4\nrLvszhm2XcPVmzxaP3W7BeP3rLPF41/GIwEuN8ZthrFb3mrdUqyR4BDaiqgj\nN3Yrh4K6pYsZf7LKUGTmflVlJSWcdq8sXGjVfi2oEEjf32OC5UYhLe9Veshy\nd+fXSzUmopdpwPLV54ffG8s5sIxioGvjDLXEVHVtAQ8eX2Nn5nSc/MFGehJQ\nd/gNn4xiOJZrKme3k3EElSsqCj8aoew04G0bKDXN+6/6HnJyP83oM7M+RDdA\n00W3JNsxPF5S+i2A6GsntfD91gzRnIPbh8ER1rs94UdVNBrkQC6n/mJlTMqq\nGqF1Bfo3y/fDT8T5pGBZ6N0136sdEtDL8dTz+5yAi5Yk//CSlIDlbHFSEMo/\nrI3fgZ0ZewQeaCqb0L168M+5eQm7FUm71s6waD+F6MrMtQBFCIyJ9wWJKsLO\nQ3kfcp6S1YlBXKpsZFUMIGhB6zPFl/hqGttx2YUzO5poCjDisgWYoca33SQr\nliSwmW3B9t7vDBrv/+CKsCZjCgmZFP5drvPmZyuUdd+eNK9pDMaOotK88fKP\n9ds3xTaKjoulWXHuWUv39XeNHYpBnUK1wNyeHZWKvxN+j2dkq4gl0qaBeFyM\npZ3H3s9s/WZ5hn/Xb09jAQdwIVeCbDvknBu/EQ57un58Tu4/JSVvMuDtgOk4\n52nd\r\n=hbEM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.47949b08e.0","@material/base":"5.0.0-canary.47949b08e.0","@material/shape":"5.0.0-canary.47949b08e.0","@material/theme":"5.0.0-canary.47949b08e.0","@material/animation":"5.0.0-canary.47949b08e.0","@material/elevation":"5.0.0-canary.47949b08e.0","@material/feature-targeting":"5.0.0-canary.47949b08e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.47949b08e.0_1576690838371_0.2968239520209399","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/menu-surface","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"3b052b88d8c1e695b44d6c2189a301e497b8f1dd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.b240bcc1b.0.tgz","fileCount":36,"integrity":"sha512-+0Ezb4mq+jG0jMzuw7ELfZHgZ8YXGjHXPUxDW/KqFWc41eSm0gT0dLpWPhwCkkrWxwiW63V2rVh4ZxB/wuj85Q==","signatures":[{"sig":"MEYCIQDmjFC/vSf+QwiTrno2Avxqa6Kyro7u72RxIZZBMrkuDgIhANJuEp0MEhwHJlLhWTIhE18P5hMkMSmnXKtgPucf5Dll","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nsrCRA9TVsSAnZWagAAlXYP+QHp2wEd2hi1cG830nDX\nSMWPfq+QPYF3iinbzq9Z1iXPV6Ee+xtmwaGXVvzX8p/nG9E2w8Ec1tDsfiNI\nHQdw+lsppPxKSNxZIQcoDCbxzLjhLNjkXzkK7oj4QpYZ3Dyy3ia0Sh2vCK8N\nT8TpUgMnGBHMaAYSn0Kt4gDdNwZiX2pZm/zWkcAZTF5AcWNggGixsybxpq8z\ncbCYRgFKZMx6NkNp/fAL27y4gMF2g1WhsCpJWmGtCUNKa8GpGkyB9jpuO1/q\nWmWHrvJqKvoH1penCQDiITz0uhAmNHSrTcE/7TynfvxyEGtQUwhNjNC3p4Oq\nz3kXLByzga2b84zJFM7C/WrJtcUtU1QPZm/hhJnc8KXDNOsFh+NrgG0TCvA4\n6VJYPIIJiH2gttCVebY0xTO9w3seEZDKfwi/36Ita9/8VyvQ2jXZXY4wD04o\n4/BDUV0JAaTa7ELsIXZkF1VGZYDYFzU/1rGzkqTNayDc/GoCjvFBEF+yJDFx\nWOAJApnHIal1Um+GzIZuiFCKjy2YKM0UaZQBBM2MYf7U67J0O6tigd8Hbhgv\nz2402kRFvsJU2Bq+bdk7j8uGzi9Ip5vb6TOQxWvnz0NWZ3AopBO033SSVYOZ\ngiTgACmbswESg4inAEyXfbslVOp4Qa8+z7ojsfzr++z5xYS+x60ca3zJ8sTZ\nJ6Fy\r\n=WklX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b240bcc1b.0","@material/base":"5.0.0-canary.b240bcc1b.0","@material/shape":"5.0.0-canary.b240bcc1b.0","@material/theme":"5.0.0-canary.b240bcc1b.0","@material/animation":"5.0.0-canary.b240bcc1b.0","@material/elevation":"5.0.0-canary.b240bcc1b.0","@material/feature-targeting":"5.0.0-canary.b240bcc1b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.b240bcc1b.0_1576696618570_0.739167332633041","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/menu-surface","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"dfebfb57b1f95813162aab2580e970a0ee34d849","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.391674a26.0.tgz","fileCount":36,"integrity":"sha512-jj8AbMgA3MIvDUVIL2RW9dne2WJ25etU6ORX8lbPNk6fNQKfP+Gy7NdK3X81u56qjGmiztKToHZ4KJIjGuuarw==","signatures":[{"sig":"MEUCIG/la4Jrfk9PXEavzy9xY3mq8v9HC2Fymv1+CrtCLy6aAiEA/y0fK/fERI4dzicJsTmVx5XT99htwPGRnk33jDjpJ3E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ns3CRA9TVsSAnZWagAA5W0QAI0cd9ZEolcYJcoH6e2t\njpH3wzlDYuA33aTwCi5erGbW35ij+SH0rt7nngLs9FbYj8KNZBbjfGY0UJjV\n1fd98l8fnWNO2KSkh1lVwOb/f1daFH7uETh5N7vVOm503Y22rzDEGyAu88tL\n4Yh0HdqG2CuXrgqPpoPfjo08XgwDWtUxAwAihwPkcBt9A7sUEoFqH48NOmdw\n0qd5E/aLhlnpVFlZvU+RSWZ4D3EXpwQSEqIcQobtK4qyOlEHvciulmpAngJR\nLrDHYR5erPtFmdQItYR08TkM60MPf77pMUs3//pg29LlIHN8XERd5qXvlz99\n9BCTayAP9MWGnGsJPpoGlrgSHVeQyMywl9A0aUQohPz6qeyqmqcsA7G9//be\nOlutGrnRAwxnAZ0Z9fmgqosH8F4vnfA7uRBNpIvvJTCpWhM9UETeA9YVNxpZ\nzBJhzdzJDvKs/W9YVER60aCZ5CAjiZHkvR9OX3oFanD3hjvkUanmLnxScpNb\nBOmqAspwOM32T5nXzx019BujjURdCEwdkH7Q7wF92u6cMBSqiNoedmh6VRR8\nY40+AYq/7f0XmEr4YvH+rPbHHoEocrvnabBem28/LS0io3SnyMZJPyNTyzuH\ncj/yEwMqQAPKBaPHk37Xy7VMiZqtVJ4OZwBHzwqwWMUCQGELpi4gfHN7mZlq\nER1+\r\n=X36X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.391674a26.0","@material/base":"5.0.0-canary.391674a26.0","@material/shape":"5.0.0-canary.391674a26.0","@material/theme":"5.0.0-canary.391674a26.0","@material/animation":"5.0.0-canary.391674a26.0","@material/elevation":"5.0.0-canary.391674a26.0","@material/feature-targeting":"5.0.0-canary.391674a26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.391674a26.0_1576696630548_0.9924317865477965","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/menu-surface","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"cad90f9fd4471ea099f49360b4014f963e896905","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.c4837746c.0.tgz","fileCount":36,"integrity":"sha512-bgaveVo4nihNdEWQIo+RoiIMUuGPfw5FYY9q8G0RL4m4OfLPqaZ46cHrcyhEk4swR2DDxIXJhqPr2UNPqHES5Q==","signatures":[{"sig":"MEYCIQD8l5qGPFqYrbol11qjug6fnVD6wZpFKa9bR741SvFarAIhAM/QilDKMfX+KSJnLqmBVkQstPLjKACqZLsbDRN0vS1D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n95CRA9TVsSAnZWagAAyCsQAIXp7T1H1e60VmbwmYUx\ncc0byrpeJfzA1VlluG/tCW3ZtTjKCijalwZKLIB1jXMusKVL1IhKisT4gXFf\ndAOpnfdJAVvrsPZ/FNHE+IAhDs1ia2wP//qcRk17blqEfwo8CcHDJxPDbmsk\n1T6+Ftw4WlEU0fEGQlgzpaw/PyY0lOqFTBugQgr8hYQ3wCnRHWLna0fBXuIX\n2Le4AD8QLPWYGmKPTCHYE0cgTe3EISVjiX1PfjNLwiqz1tpOL8BJDbW+rms4\neT41O0iaIaYbcJYwKYmntTTnv6XjsA4nJPCdrI3HX27HTjyCToq2guHtpb+q\nkMkQwFkgl3Q7fnFy0OGC+A60nK+12TeCg5jUEcXsgGGMcBSulZKGJth2w7xO\n32n2VhuPNSdZD8RM/WkaS88xp+tpcu2LzKr6nYc+0IPd5QWUILs1BTEDgpg3\njS/aFf1glBdAJ+0DtJkRvMguT46StFPWWeLsEB+pqDWibKrCLkQKLw91zoZ7\nmPwGUWGg3SHhNbKCtuwOsqWQe6WV4jaApmiRYENCXgOQL+Lvn2Q8h66tVxlx\nzC+BbrvS+uJRFCSmd69HwGXwsI6UpxkW0brxkJwWTQ3swB6yPW6RAZTf0CQQ\nwMGjVuh/kUrtvOxEW8yoIlIF2WrimxvKgX5dhp8W/pg8zVWywYYcvlAPJzcQ\nhoRS\r\n=OTfJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c4837746c.0","@material/base":"5.0.0-canary.c4837746c.0","@material/shape":"5.0.0-canary.c4837746c.0","@material/theme":"5.0.0-canary.c4837746c.0","@material/animation":"5.0.0-canary.c4837746c.0","@material/elevation":"5.0.0-canary.c4837746c.0","@material/feature-targeting":"5.0.0-canary.c4837746c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.c4837746c.0_1576697720921_0.9063232739207603","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/menu-surface","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9b984aa0c5cc6a99387199c6c4dfe141d1a03cd3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.e41a70425.0.tgz","fileCount":36,"integrity":"sha512-awfoqQ+a90mR/YiSjcuTciO0wYtzolM8QfG3cCCoR5OiOs98Z8ziyiYpSeJc9yVJQIR2hMaQArGPcB13qTKnDQ==","signatures":[{"sig":"MEUCIQCATR+o+JSJZe08UjtjZ012pHfg1F2oW9UuLA31yQFLfwIgNRgpteu0XNFUpCifH3hg/OVyT9BLprqNhFZRj4MaK74=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rQ4CRA9TVsSAnZWagAAgIkQAIDCsHgjloKzVTucrrya\n6sUdnAJs+ODRivceR7DTTBddCrVFX4cZzkrcZLFtiRY9Fx9f5yuleoCPwgk8\nePqBI3b7J3f9e+cLkYfOWvq5N90CRksKtuV15q8oUWvs/Hnxb7qL7LzH2Gvq\nTwpqigDoRwGMgzgRax5Q7eG/yR5zO4emFr0LdnFlUwvQZCp0GbJTvkrmeRYW\nxMZ9RzMV7VCMpf1Q5lPHIPAVUZ/ulPTsnMT0rvD8YNzLbUa0DkQIn4+uxm+f\n24si8sqLPQdNOHJ31GyZtV9pWJMre94mFluz5bT48TBsV5NyV2kuUaYFbtcM\nNsNTI6g8s2YnqDmOoOJPozJtshSh2suqbmqq9Vy3CL8OvnnHCi4rPTFa8ELn\nR5BiT4uro67tZhUHLZ9O925BOgTPCYRNxDRxL4pYLcjD77gDMV+4IZeGJTAo\nFeR4aZicp+lslRtA61c/FERdsobYFgU9bZw84XydaDg6ArOwSwXYsTLzZKYV\nV+gTSx+wK5pOTtDA/oZIgo7LK1xYiX211uul/FHT45oaLUGD9bvLftf8zmnO\nM6us0suRvZv/QNGPOnfuxHiMmVZpTz3zcRfJz4JnNp5VkgLNS1SNmVfKx4l2\n45dPsyX7fMdtUxB1jdnRkLxH4geM3h6bqzWMRlKZvg+ISWDSvkCwV00XsySO\nsIVs\r\n=h1dQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.e41a70425.0","@material/base":"5.0.0-canary.e41a70425.0","@material/shape":"5.0.0-canary.e41a70425.0","@material/theme":"5.0.0-canary.e41a70425.0","@material/animation":"5.0.0-canary.e41a70425.0","@material/elevation":"5.0.0-canary.e41a70425.0","@material/feature-targeting":"5.0.0-canary.e41a70425.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.e41a70425.0_1576711223889_0.9178219739214379","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/menu-surface","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"ef051b00e4afc79e1d5db41fb31fa691f34fce6d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.bac43eb43.0.tgz","fileCount":36,"integrity":"sha512-y6LjeBfHlXM7rwqrReC9iEfkQ1yVdBl/aGy4QhDdTENrEgARuwu25gMCPNoJiqQyh3oqUwod/hypnSZWF08rbg==","signatures":[{"sig":"MEUCIQDT3HAKrCohKkdmfEASsZY5QdrLV0Xs3dH37M/iyRMQXQIgTTDFw1uzkVBB0CkGubqzVkYX7CYgiNgtdu3eXD8I7+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rUSCRA9TVsSAnZWagAA5xAP/iEf1j+VhBqivr6aN+K4\nGe1pss/N2B9tOwmmprPWexYNT1TSbncNBfzkV/kpQKW06igDvqHF5nEtouFZ\n6dV+LRL7yirjdmKBiKlu4m4VeWSMrMBQR0xEpbiX7h/FXWwlZGJ0Uh/dbYD+\nN+fDD0wVNbV+NOO7izJjKzwsGsfWfuff7m5TarxB77aoPBexGIPZ1DiLSybN\nuB3JBZdBP52oLXT5OHYcZiU1qomYQyELynk7XWIaY3VJZKA5kkRoF/9a00r/\nSR21SW0T54XI46S7ffqVmeoqxy/j3cdfUMj9XA3+gvYv/H2NCloDSPvef9Db\nj42wVpKouu/0VrzEhCyNDLGA6ikHjkW6vAhVoHm+mulfOqH3h7ww2fD0Dvsl\nHDidImhsReyC2T6BQjm59hUixSU8txhgx0DaPamWQsXqF9njLGp+sDf7hali\nNERssj04afOQgMBq0+ZGdAMcWuXQ0vGQoiSbviY3ig4g4tXoRgNQrUwIqBOk\norGhRWk+pO2BWXfIwMQ7rJz9IefoenW+vffq7REK8XrCZlQM+hai1++HXL4E\nCchjKWt1FCgMBbQBmOaP8ulkfIqptNh3hb09TYGM1L+NeN4aPlY0StEGL39h\nKvdE7VxJaCiv9yN/yqiFou30tNJZkT2edo8WIs3ylUPbTIpdXY08TZCUnJof\nw853\r\n=+jH6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.bac43eb43.0","@material/base":"5.0.0-canary.bac43eb43.0","@material/shape":"5.0.0-canary.bac43eb43.0","@material/theme":"5.0.0-canary.bac43eb43.0","@material/animation":"5.0.0-canary.bac43eb43.0","@material/elevation":"5.0.0-canary.bac43eb43.0","@material/feature-targeting":"5.0.0-canary.bac43eb43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.bac43eb43.0_1576711442431_0.6279486235152945","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/menu-surface","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6ee2f480797cf5f4b77262422fd067db01f61c88","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.2e491de55.0.tgz","fileCount":36,"integrity":"sha512-5V6lsMsCSQIuxNBupr+xjsaYMYLQrSONsGT/kpMGATI6rm52plep36TcN/wngObHu5WL9zXOeVmXgqVauFq24Q==","signatures":[{"sig":"MEQCIFbhxAW8D/4BCUUTCysSnQ/8lYF5+39SG4Pccpo6a3/HAiAhJytAXYG+J3jlQfwmE5I+1ort4WTEHxILVEqE+OV+vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1XWCRA9TVsSAnZWagAAXOcP/iE2KCZr1GojY0EFpShx\nwIqm0GbNnUEbJ9CADI5WYK2TziBsYvrqnHnZ/+6fa6AIE60d3luwqsl6aFUO\nMtxdrUntpPC2OK0+syGALWq/2C7HjY8LRDQExxdeusAeBtQS31V2ajBGavVq\nXrZV66n+mBsxcFl6WcTNuxvFfIR2HFXGoC4oyxL6Q5t6JNbnW+urreOIiaIR\nPTf/znjmE2SDofv1WVzkik0SXRI5wzYfSMg/GItdDgm8v/BxmFlXwrWAEGyt\norC7k/pcXjT0labMOljZtpG1Dcr6shtIXTH2LQkT9cEqyqrAJBo1xr2sYcoG\n2wGBN/0TII53eeopHjdZ80BD/rcJw9ci6xkfqedY7t6WzTHR3XaTtBRVzB/4\nabB4GQKEE/khR8wgvpLCDcr354J1nunNO/FLwnbPzHBmgSc+NFktmgq9zgdX\nMRlZ+6GZkRNwUNK4hK+UnYZZQx0JT8ftUKzG4REQoM1yOcpGj+fA3SZKP8kD\nIUpY3FMD+PId/ZWR90K/K7y/Gw5QNzhvzhwZkc43Kwu96T8DGbsInfN/+nF1\ne796iDVApdIFwcoUjOQeRzE0AxiHZfXDcyt8KihOXGoxEx+ln7i0UoaPTl3t\n3EoPEwMGn2fN2Ok9586puod+6zaL8oYbAWCJU1Lq9qHSsezEKCf3LkRUxudH\nLqgl\r\n=nqdh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.2e491de55.0","@material/base":"5.0.0-canary.2e491de55.0","@material/shape":"5.0.0-canary.2e491de55.0","@material/theme":"5.0.0-canary.2e491de55.0","@material/animation":"5.0.0-canary.2e491de55.0","@material/elevation":"5.0.0-canary.2e491de55.0","@material/feature-targeting":"5.0.0-canary.2e491de55.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.2e491de55.0_1576752598545_0.6563677952541287","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/menu-surface","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"8743bf279aca071bc16947649ef5eeaffe074c13","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.ae101c144.0.tgz","fileCount":36,"integrity":"sha512-SbWdnm8EsXRs0Dg7NR9lQPwOQcXno0vhGPw6zg12gHUllod+3BoDAdq6/r5aJvGGkvc1sToaxUtOD9uWtLL0yg==","signatures":[{"sig":"MEUCIQCsjcBdErLzAfeMDNMQJWE+4iLLlnEQyw/PSsJo/cJW+gIgAdia9JqF7h5zFjHUrO8X6Dwo9nyTgePr4AMWBnnwU/8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6RhCRA9TVsSAnZWagAAB+EP/3RKoaZUH8q1mFoTYq4d\nDMc+K4zForpAw2PF8YtWXSoC7fpMsVhEou/bmHvFxkEY1flTgXPSAf+t0Vtv\nyAlS+T08I+ogD5ScfHGFUrSziHsoQXD2foE423572RMVe3v5j+yWrAFUPo6u\nTazabhsq0U8KzvuKxpzkX9n5qPvMpoUOclpcCwxJAs7oiQnDFOK5MQqtZZZ/\nLWYSnNnuD99U35/lwAGzCrbkIaO1Fg+JA9nim4z3a5Ha1NPqlW7JQSbpc2pM\nocjIog34j+13dfTipN4ujBKLN4YuKy9AY+QjEtTV2p7gS3Z8txFg/wm33SSv\nNLFOa24cuo3ItDfuLjJbhOI9mVVqPoMBGktCp/YArOp/enAnJW1cz5dJShWU\nc/PfBPRZGkC9pJZWCEszxAaWfH/r5C6ZEuxvMfFUst9vhMdLCRYlfP6EmxGy\nB8cze4Mvc85hBVCL9TUQGnCy86L2TZWRxVuCqKx+pnkdYBwn44+rrYx99ltT\nqG8PdX+9XTnjwNCR57SzBIxB9VbT/skofkxgZmP2N1fHMRy42IKifeNJQg31\nwgx5pNa7iYIYobOk7EWQemuF2JkxH/4OL2k86r12jL14RkPDtQGcbb3+QBY0\nF1t6UYo0GYOJK6HOSPe3wCQ8SASpzWAofKisUMvxy5ehiWWcHph9YgkC1wbm\nzQmQ\r\n=JSmk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ae101c144.0","@material/base":"5.0.0-canary.ae101c144.0","@material/shape":"5.0.0-canary.ae101c144.0","@material/theme":"5.0.0-canary.ae101c144.0","@material/animation":"5.0.0-canary.ae101c144.0","@material/elevation":"5.0.0-canary.ae101c144.0","@material/feature-targeting":"5.0.0-canary.ae101c144.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.ae101c144.0_1576772704468_0.818272603964979","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/menu-surface","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c580a0742cf9d729dd07fb3ccf181d7cc6ed9ae2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.a51c31f26.0.tgz","fileCount":36,"integrity":"sha512-Du1ZjynKW16k3bymSaDqH/jLnRkcRgsTAAkbu9kAtD6QPGEPzJsMB/B5PQF1DyVg15D/gOUbk8CVZC/Y1y/pLg==","signatures":[{"sig":"MEQCIE9IWgoZ7HcE2wZtKIm7frq65oD+0WjAza+kpnFNibhAAiAB93J0v2yVPc0sVfqRRwscaKtU2oNrLeqmkmhpmNmUpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6/zCRA9TVsSAnZWagAAH+UP/3u21O+38IloxGSd8ZK/\n2SkaJb1/GB3/dkb0Tngfj2nyDrlBHeTuW9Le32hW3iJO71/BeWhGhpfwMdQL\n4Zvjy3znW1hd/0DngUNBtKmOB28StiVFl1o9WJpVDbxThGOOLi4z0wMFZwub\n5xOlTuuUbog4ZLpwoduYrOTXKgsGOjdgmrkSRBDsOIF2pLYmXnEmBz7EY6kb\nNAdNlkQI9Ri+PfUhQFNpq5YeuOuZrwXwHgELgPCP88zEghmAKEyB2isMTT2P\ny2AAWG4tDf2Vtep0gCeriRyQzEFYSq2Ljt0dhkEowDWCcCDofFWFCDgboEWX\nClj8P7qIwOM8cNyXDWu2I/Ix6+8S/TQUmvyOccPvZSHyVbklviBT9dw9L5wb\nZjB7Iz4e77scm25x6yXj9NNVVfL0Zoy31K5GjRD7XYDeXAPzj4LMDBxlug89\nWmKX+Egzh70+k6ennWptGrFA0sfmXb1T6A/w173dei+6Er3b9u4Elb/0T9Sy\n7WB22NswiCudhz1YGMvVAl6NKQa6DQ3Z0YyRihNxUeQ5VEVCESrhbYgmnUgO\nQ1Aml7lbfCWh0dylJX1J0Wf/suu3kz+XXwLhxPKJ++2VCgaDXNuYdHcyw3+B\nJ91WEqTpIiZDjoD5aKcL5ZrHgnHcz+4FiVKRRFZu7aZ8AMH/Z0nog82kGf/w\nti1L\r\n=EdY0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a51c31f26.0","@material/base":"5.0.0-canary.a51c31f26.0","@material/shape":"5.0.0-canary.a51c31f26.0","@material/theme":"5.0.0-canary.a51c31f26.0","@material/animation":"5.0.0-canary.a51c31f26.0","@material/elevation":"5.0.0-canary.a51c31f26.0","@material/feature-targeting":"5.0.0-canary.a51c31f26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.a51c31f26.0_1576775667481_0.767517628640509","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/menu-surface","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a809d0c05035a93d0386196b4f5ffa5b4f752f7b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.21fc4e13b.0.tgz","fileCount":36,"integrity":"sha512-NMeEAh25P7/7QkqsADEDuE8vhTScFdqCE3puDso18U6y7PlUB0YLFf8ktl7/f7NrBw6SzNYC9XipyaketM0dRA==","signatures":[{"sig":"MEQCIHV1dQe+53AHLt7lOrhqR1izAymnJVt3QTOF8eRUYotCAiBVdXzQgYd8ewDjr1eZY/chY+5ekTmhjlcPJ0tSno6bGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++s0CRA9TVsSAnZWagAAWYoP/1MiLkvRfhAZ/mHbZN2x\nfX79PorhgwwmuXESWqvHdvakcGVc8aCoxoGuFvS6hHiEm93zZ8RZ1Et7DKEg\ngN6Kbmd3A1QYvFStph1PMvGudSeJbrrrFjih1UX+qRwj/BJeMMZBO451LxUC\nVA+MaOq8JB074FdPO1RNxzqN9/Gpg5saZdgJ21919R45U2+BmxDL/JSuOkSg\nZ6kUe/lY/prfjJxd1NY5KYV7Vqt90alIni4WeBO1ENMCMbz8PRtPhCvqORSD\n6tzx4ARzK0jY0yoCGaMwonP4f+1PSzUcq4CaMYLRwbLOez0d5LTBbXKVPa+Q\nCQh2Q44MrPAYU/rUU2zxP39cMfVp4RlV/wTlZSgYN4mFxh0diJCSGYHjwCYm\ntz5C3mAzOgyYOi8/4yP6IrIcGasV8HhT0yYY/kGgftUEw5gwf5xz/LLBXBKU\nDT5ek7yRgXxTyV5bchl+SiE47ELIx9gpq14VyGxLoq2muYoD9hJncw2GICFH\nca5F96XqTdWZGksQARZiIboE2H1mhHiWyxdHtiWCWd/V3o8wnzTYVHanwyYM\nFxkz65ud51HkuA58w5oJuFsjrOgZfme0cpTKL0WMG77+kAGcc6/iVXYSu8qS\n7PCGa37lhbExpVzhkSpnTsUAYo17N+Mhd444ULp2nBR9XkYa+ATY9f8Gu6gg\nbdm0\r\n=6Uiv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.21fc4e13b.0","@material/base":"5.0.0-canary.21fc4e13b.0","@material/shape":"5.0.0-canary.21fc4e13b.0","@material/theme":"5.0.0-canary.21fc4e13b.0","@material/animation":"5.0.0-canary.21fc4e13b.0","@material/elevation":"5.0.0-canary.21fc4e13b.0","@material/feature-targeting":"5.0.0-canary.21fc4e13b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.21fc4e13b.0_1576790836244_0.9454610189466326","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/menu-surface","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b4112194a02fa3e3ab87b071a219208aab6ad911","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":36,"integrity":"sha512-yya8SxSkZlRE0V5te6kwlofMUluE61485hvC4JzW4msyYCFQCYVn1vvJeL6TxryZAPBtstkeARLKqFSFp8DZmA==","signatures":[{"sig":"MEYCIQCKwZeFq+RFpcNct5CaiR4HKdNr0NuES0y4mnEGWASl8QIhAKcTiLT/pv3p/Dcyfs8JHykaZiV1kCAqOhukqutzUHHM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/iRCRA9TVsSAnZWagAAAHgP/3ih23PixVdQpiRtWeAG\nkGt9iUlKs/PeaCH3Mv8cwNBn/FJxzdMMVz5kkvtGIEX2Sg7qIH8p7wT7b5FN\nDClHGYRadpIj9ZW7/btF28YbjMuPTZUXxLGvJ83TKmSlIn+rD4IyQlz1NLpo\nCiGIpFEIxZgizF6CO9nHQbLFllbIOqwHm1Lko33sPzsD9GSRFzbp7Vys3iaO\niLJVfQSK2ci6cAySLCRSVkHdTaBXHqgIOBmk0rdIAKKW69c2+3UIZXWkIeyP\ni1w1Qc+G1cuJdXMihREhfq3YIIX0Nu4VcmypMLCee75PO/OPBFT4EPn3nXhD\nYkqBE2O2+ISln++u6pyOhxMGnuB07j2AykVu1QPEev82rW8vCRE4590FohtN\nZNcorBu5TCXE4xdaPOYIlE3BefohCfBn3bTmfEglkymwvQy2VY0a7gAuX2qA\n9iewumJ9ZDleKwDcTObB/UB/Oph+fn4Qi4BxYffg8Nz3WcwKSwjtzxA71Yp3\noeff4bJIcfw2hj8wqyfDB1qmxfGN/I6OoSpLbmcGyrjfMXGvxA6LONvJ0tZM\nmgjVhj/zXntlor0sDIoGjxSdYi2mtJl7cF6PaBhSU2KSCwhHADkMqO9grzoT\nODtqv5py9vSaF30Q7tE1mJCcQMbXuyUURQ9GdaJWYlnQ0XcxxxptiEaqRqkI\nhcC3\r\n=DmAr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d2ae6e17d.0","@material/base":"5.0.0-canary.d2ae6e17d.0","@material/shape":"5.0.0-canary.d2ae6e17d.0","@material/theme":"5.0.0-canary.d2ae6e17d.0","@material/animation":"5.0.0-canary.d2ae6e17d.0","@material/elevation":"5.0.0-canary.d2ae6e17d.0","@material/feature-targeting":"5.0.0-canary.d2ae6e17d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.d2ae6e17d.0_1576794257010_0.6457153496542354","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/menu-surface","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"29aec36f05160eb7143a861ea6af8e0a4e854b8d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.ba30399ad.0.tgz","fileCount":36,"integrity":"sha512-vARJei8GWCURqZU8FcCBQIIU1P8C7SMqpfvQIBcu1oKrqzB5e5CT7vDW6DbVcMhR2btCs52EXyOPhXVJraL+PQ==","signatures":[{"sig":"MEUCIQCZm691wZGEqojs9aepGWmlfY5o5ce8h4zllj1P3YynTAIgNTHR/5v72V00cU1uaULPiP6gcJVJ4dxJtJZ5ZVgxesU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B9hCRA9TVsSAnZWagAAcp8P/18T+yZnEvdX9lmyOj2F\nhZAqAASfWDPwmh+Cy0wN46a2is8ucK2286Qvrm90QetwRDmZCXNtrrhFRkM9\nMu3u33PwI4+OgMf1xqTc3gj6vyitY6XcJz1M4/JzNHVC2IVlPhR5CQFZP87T\nzdg9OgAlCET98uPyqQDFVX5aD5ybsXrQ0A1PtwjxBK6PAl+aTRArldtZfCHD\n6DNrXB9K+cC8OUA9C4GeeN9QifA0aK+wgYNb+AAZ95sTAwbrElAPpYhQRGEf\n1tVw8esIKC/rjLnBKaWIiWvckg5UjOoPi6pXNSXKAoxKtu/LIn6zvEbFwOG4\nN6/K5iQJP1L0wKRQnO4/78WaOTuSDl705fgBMJ4wQEKhohSHst4XsfOpc04d\nT+VnwAdX1/JRgYWIHekdnXgMMQ78WuLR5PPIvqvABRl5eHaz2ISN1su5KlJl\n3YJ8ugrobP/2IlfAcxFX6TJ58W4/YkKXOx7GTWxbkLH2pUdXlQSvwO/7a853\ncfj3GH3oAWF0sRpkpmBobuM3eHUuJdj6BKz02mFPbFU7nxvlf0wisU37k9iW\nZRbIqe+4kxzuX+4gukvDAXAyVztK7bDwN4Qfmbmxr2YuwV+6HpB+D14OsSP2\nI2X1CfhKAf2f44UqupN92LhjwcA9jtlxwg0NUXT4oQyeXvRP0BHaTozf0mF7\n9LKS\r\n=knfc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ba30399ad.0","@material/base":"5.0.0-canary.ba30399ad.0","@material/shape":"5.0.0-canary.ba30399ad.0","@material/theme":"5.0.0-canary.ba30399ad.0","@material/animation":"5.0.0-canary.ba30399ad.0","@material/elevation":"5.0.0-canary.ba30399ad.0","@material/feature-targeting":"5.0.0-canary.ba30399ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.ba30399ad.0_1576804193517_0.6818250912784718","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/menu-surface","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"693f8ab3069ab81a56bfba17cfbb0cfe506d461a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.a08ccec35.0.tgz","fileCount":36,"integrity":"sha512-IZee66rkm1iLherA17Vi6oYjJmCmvRfyRD4mAvR22a+VYkSfHxpyQk7gwPcI1LocnvwRA5ZW0emVEtTgvMQNQA==","signatures":[{"sig":"MEUCIEiF+nNUFOAw5ZaKoa6ERCDRyZVoSI1cfBgwCD5UeJiPAiEAhB1jvfnEJwZc0Ct3NxdQcWbLrFzSyCNBpdXkNGgKzKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/Vi+CRA9TVsSAnZWagAAlE0QAJqdQdMkQFQAynK/viCz\n+Y8APo4rVyzJSMKL6loBzS1Vzl0qGC5D+nd3OZ9mKJt8F/rBVvKDZzW+GjSR\nkLmrFWrm6ZYJ0Tk74tlhOZrv8B4oI/BSuoVOLMDKcCYCzPHd4LvsYZivbc8/\nfS7RKF5+nxLn6yoDZAA3x8BFTfkj/wQ8DGXMTYRkASDGRdNIw/dJN5HeIb0x\n2f1rYfwlBN0UDYaVrwmGHLcTr7ZBnGHvl8n4tWY2NTfXpFQMgJ21Om2fbSt/\ngb4SaaiHlPposDxwFQOEFaFAlK1DHWPD7BZ/VNufFAIqbnGDlpH+Xgx9ksiZ\nJXMTTVIhKseiEsQpYTivgRmp2cSNHKkTi0IXecBGHoZMn+NzCQ69Zp2yhdNu\nHe7XuQ2Z3yKgydfSAm0tMHYBFmJRMTblngmEAfR/M1uuqbwm37AuJu6xJElF\n7B1Q+8/NqIWmxrwIShzsG7lYt+riYFnrRPktlxGrv85IgXP6w7pkJ8WGAxAr\nAHLhx9pvFLg75yMWeQmPFyN9DoCmMM+y4uQZyJdXOJ4F7mbKK2Bl48n8rC+w\naJHLtVi5fWTSckqzCMx6VV9S8ZeHAGG8LlB2hOd6NzDRPfrHvIO1OnZdXJAi\nBOFGOVPAFgjf1ejyFIasd68et+gjpEuoBnHx2f5w5jFDbhO9Tq60g72fB2zt\nj7ee\r\n=N53A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a08ccec35.0","@material/base":"5.0.0-canary.a08ccec35.0","@material/shape":"5.0.0-canary.a08ccec35.0","@material/theme":"5.0.0-canary.a08ccec35.0","@material/animation":"5.0.0-canary.a08ccec35.0","@material/elevation":"5.0.0-canary.a08ccec35.0","@material/feature-targeting":"5.0.0-canary.a08ccec35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.a08ccec35.0_1576884414226_0.7420671510821835","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/menu-surface","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"064259b99a4717d77027947cdab08fe7038ce629","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.a2f75105e.0.tgz","fileCount":36,"integrity":"sha512-8mD4J+RZZUcs4sPh8zCrX8keW/Hpe0iQ9lt+dRf/lYRzBylQ5eqvpNVV5/R/2l50RcYwCJQyKQuSdFeJGl08kw==","signatures":[{"sig":"MEYCIQD9IaVPKK/mIhJ5dFil2Ec+O2Il4Yy7v7eZY2NQq/OJFAIhAJGKyPS63X8MpNJxhNIbgsIErIRrp9mipWoyTLIeIQEw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARnjCRA9TVsSAnZWagAAte0P/1Zhwl5q1Ae+60Yu7RBx\nAQaVRzrvHObHCZLgNLfyLLZptmEfPm+S5DvzwsovKpDf5WZCG/qbL7orwF41\nkSc9sGSRsrZWBKu13nZ1DDsGvl57Q5t50e8BuQOSTmzv4BSNBUEct3DtRwnR\nRbkSWxN1S4xA56Li1otKsrKhKej4rcMwAr5LNuJKOL6QYXihymX2khAtyDc9\nRYp3k5MZ3IPWFBl6So8Ehmbl4vApxdkL3HEC+AakNU+1MglFxjZRXloi6XdM\nrnZOC1+ROrgVmoOJ/Co9WFrUdyxoMRjcSmFxuymyjk07JyHb2dAN8JyXeksS\nrmADtj/o46KeyM6XQdUREq2YcF7LZJRa6WvtQNSF+a/9vFSXbNKwc/5lnJRk\n0ImBjkKhngjLwbPGj+Gel5Dy9/KS0To9nyiaPVkcLxsbGvl9F437lbMKR5sB\nbL+UV/bvU2ijBZ+FSkwm3Hdimi45V2XNJSpjj2Kn271kyNri5QTKt69bfKE4\nl3hAsrRsKm6D8SI65Og9QzPPgfL0jUHj6o0sRF0Gm2OWYSf03ORnajuqPYcD\nCZPEC1HoHUmWdly+QuGRKNvP5WuaaJvTYQUJu0kaumZ0+pH4/wksARnR/E0v\nI5XX+S4k72HMtwf6coLIM4c+zYe7NdeB7Ar74Xck+Ti93RK67bBS4uj/Ju8a\nKnM/\r\n=2+gV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a2f75105e.0","@material/base":"5.0.0-canary.a2f75105e.0","@material/shape":"5.0.0-canary.a2f75105e.0","@material/theme":"5.0.0-canary.a2f75105e.0","@material/animation":"5.0.0-canary.a2f75105e.0","@material/elevation":"5.0.0-canary.a2f75105e.0","@material/feature-targeting":"5.0.0-canary.a2f75105e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.a2f75105e.0_1577130467420_0.8697465412876717","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/menu-surface","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2b857a32f4df8ffd940a1038b21bec8d669fab5a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.c054a24c7.0.tgz","fileCount":36,"integrity":"sha512-CXkfbCsEwjWMmzTqnXwq5P+n5Rw6i4xJfUvvfNh6izBjNElwLh+NEDnDMmM9jRwFv3LJs13h0yttB2BZsXXk4Q==","signatures":[{"sig":"MEQCIH26xMbME1KJRYcXjSiYRpkZsW7VCG1FZCr8cZb9fdxdAiB7aXrWg8rhvlN99zqV/dBXk+R+Z8rClGhIB5gWlg/9wQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATaUCRA9TVsSAnZWagAAkYMQAI+Ib6t/i7WzFqQWd4s9\nxcmB5NcrgIGaoCCP5yF9N19L9A+CAHXra0c1GU77ZoTI8cRT0cf+8zwtu+uS\naBHgkXvNCFdEbYBq7XFVcjdLL17QezZqt8rvMrRxqyFybQI5iYcKxh/k5Zzc\nqL3NLBE0zkcPCukS3yXDNBBYrpR3ECu/Lbf5BD4exGMQgBPSjkrgIdy26X1X\nSAepwyRw+bF0mNN/qOvB9t21UfiBqZEu+AxYpgHzcM3iAwOA6jicuRzPDJNJ\nAZ2RwjT6UySCqbySQfMsblk7EyRAplw0K4oD8MuxX5Hb6UI7EimxddyH1Y7E\nplniEEwWAabE949u56eKic026lDc024OBlTATX4xuaNldGPGSKVBs6cwE/bU\nC+ssPSkTMYE3P6qlLNAqO0r2SXI61G6KqAeR03YcG3byCYeUkcKuf/vJTK0u\nSAELMcBbk5DvfdYS0KrjsREseRBMRjfxF0f5AJ8jCj1GhCforjQRAb4/ALmy\nTqCWIN6y2yScxAc9o1joT4l2Pn8VcJJu7bVQR+QWsgFeXWx6bfZtgK5EWCja\n91/boSTyOis9g+ZWgmNgp2OmFKekbE2tETTdj3jNisEgIOg6mhhOUNKxhbGs\nVEnTUBtxhomwsuXN8kgzC726QVlVqja0T7FAXg/16Lu9r81plyQnYuiP2JoS\nYW4l\r\n=wNPA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c054a24c7.0","@material/base":"5.0.0-canary.c054a24c7.0","@material/shape":"5.0.0-canary.c054a24c7.0","@material/theme":"5.0.0-canary.c054a24c7.0","@material/animation":"5.0.0-canary.c054a24c7.0","@material/elevation":"5.0.0-canary.c054a24c7.0","@material/feature-targeting":"5.0.0-canary.c054a24c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.c054a24c7.0_1577137811938_0.5282284161785515","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/menu-surface","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"94ded1a562cbe2b25014ccac6fb636fedc182a59","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.c6808c51c.0.tgz","fileCount":36,"integrity":"sha512-agzx04sofSC6epI/DGc3YQrZGiLJm9HFL7FwodhX2jA5OZWwVZQu2z6lhCUnkDnR34QkVgw+67xdQySfHbwnZw==","signatures":[{"sig":"MEQCIHb2+vIbA4yON6jUP9paAATPdFrOHfTW22vzqD2E7mbaAiAYiwEJpFll+Om/JsNUhcwJCMEdFkGsfnlush7BjZOt6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATelCRA9TVsSAnZWagAAMZEP/1XGeH8A+o4GhN5foe/J\ne7AyhSDcTPQXPk4YyrGaT5BWl44GhBb8IQYiXloZpxxLMzgughJDPaXvR3BP\nzoQMwjvOKxxtivzhQsLC3d/7sWbpxxCcE3FwEGPaYUX/e5gjUUWbwbGMcioX\nwaxk0gl1nJ19EMvLz0iash2OvuoOwsIDcaqg1slTZV81ZWskfWhl7ou3B5vT\nQ2vdpP3hQwrS4LCUqw+pZrw5meUUuwe5lLM0bfNn0JTajA9prT5X0U/sAc+e\nvS6UWIEjoLBMUQPoKEqHkzklDIQ7A6r982cJy0foy6DlKsqhOvV7C3+9lXxF\nttGoxBdNkOozB9UWLlbyP1wIdaWOLXcGcpYpm8EJlPNEUFC8CEPaOsXXm+rC\n2SeomujhsViO7mw7DwVivhjTdhS8RFV1y7omIdz9imU/DsiFwgqTS6EthADS\nEF54p2HHOY7m4E3aQkCVjbUBOwkDfk0F2X6suYJ0pwJ8ktoLB2Li8LaBuH/a\noHGTYz4mo+D0Xe3cBLn11JnAgddGUWj2mYJY3X7vHdpoHcS1pLwXlKYzKbtg\nc5ctYqyE2Y2Dt0CjyI/TQEfLH2Pl9IiFZN7ve+a/i8iHkLYHtb1Zlb9wBktQ\nJQczjDBG/3fX58GXlh0e8pLasUaRLkSdFawqHwWZBekhiLOj+k4RLxiP4B3p\n8+Wb\r\n=xSOW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c6808c51c.0","@material/base":"5.0.0-canary.c6808c51c.0","@material/shape":"5.0.0-canary.c6808c51c.0","@material/theme":"5.0.0-canary.c6808c51c.0","@material/animation":"5.0.0-canary.c6808c51c.0","@material/elevation":"5.0.0-canary.c6808c51c.0","@material/feature-targeting":"5.0.0-canary.c6808c51c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.c6808c51c.0_1577138085331_0.4107917339724294","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/menu-surface","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c9b1cf011fa03a7d31863185020e12f4ee356f24","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.7bce9cf77.0.tgz","fileCount":36,"integrity":"sha512-2BqMSJjQ5Deygio3NZ2bqhDnUTW80FTVhLPtpCsFtGo5uQwZ4u+xorDTFkXb976GE6VANAviDpeXUf/VD0ceTw==","signatures":[{"sig":"MEUCIQCloR/qevvANI3XU6mXIZ91k80j85sR7CcztFnjoZ4KbQIgGWPprJ6m8s3BDFak5MmuqDIP62NVv2M5rDV449FmDTs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBP/bCRA9TVsSAnZWagAA+oYP/jycJN83RvYK2XZsxGuD\nDcmJNY801B8Y5et4TLiK9CZUyzbhLvhSuTYiK63bvCFgFgyeNPeqcC7MbJp0\nqFbSlXSn+b72GxGAJn7gzfOYkIpUSc7h6R1MoEIfm9OONG097HLCOLm5EwO4\ncRGricc6l1FH1H0J7DhiBoZPF6c59wrJFDiJSq7rNllmbF/55eNE5th5rmDM\nw1v/lbYAcFQhdTEY4ZuICFIIyH0AF0+LXMFyXyFge008uNyrKoqpPSrcQ151\nK1Z58SVTf61m1PRrssBBrd3cqIlggXTEy1BO7g+K7qonY1MqzotZMa5PLEf5\nE2lf6uTQTG7Uo/tz9Mhxd1EVlJ6lO6DWc82R0NlgaFg//Vr5cqYlRv3111Dt\nqGG298nJ+BSb5SsH6kZ1yYaBNl2+FLhH46dBNW/+yj7fC9cPnZC3TIhUqGb/\n7XImCTQg49WkZGXjfeRjJuGzBjO0mfrWEuqI7srOYiQpa3P9YISCEpJI5+74\n54h8eQz6a+ZHqfXntOXC172xGjAeMya6Zi79GD1NxLu4D6UVlk1Gln0N1VLN\nIYQLz+xGwO1cqj66E4LKA3NLaa95WpmT6ZAGNWmRJ0r6gk2AgufCZOFtf9YS\n5PDMRcdoG7aQSHIveO/Z4Km3vVys362TOh6gvd4x+ozS1/7NJGQ9D4avkAmt\nbCnH\r\n=k+6y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7bce9cf77.0","@material/base":"5.0.0-canary.7bce9cf77.0","@material/shape":"5.0.0-canary.7bce9cf77.0","@material/theme":"5.0.0-canary.7bce9cf77.0","@material/animation":"5.0.0-canary.7bce9cf77.0","@material/elevation":"5.0.0-canary.7bce9cf77.0","@material/feature-targeting":"5.0.0-canary.7bce9cf77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.7bce9cf77.0_1577385947329_0.3510652519695703","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/menu-surface","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"1199de0c2ed446f29cf11fed49be76e87a8b9169","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.c92f038c3.0.tgz","fileCount":36,"integrity":"sha512-idqxxLDiiSBUtxQnNuwu5X9hdchMtROuHNvzX76/Xl7klhLwrigHXHE1Fk6HMROtd5s3oa33bepVVpj6fkvU7A==","signatures":[{"sig":"MEUCIA2iuLUiGdKWaCsEgiV+nZOaQJIe00Ng9OtFI6vlXgvjAiEA0fl/FZTrS0s2uIaFsFB1bTTtlVEEcxEXRvjPsRdcTf8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnQqCRA9TVsSAnZWagAASpUP/jaiQOl3sqnEvMlaVDhd\nNcRsaEnXuHZGA92cGhlTKttNQcR3x/fEgH+NfyGcKO8pvElNRvRYdWsptOfu\n0NFK/XpZmef6vNJ2Z1ZDazJJ8HCWbSUlz6SnUccN3BNCqsFC9I40hvVMe47f\n8eK9aferOP904/ifaOQc28hJGR8Kt/zkV5gPNu8Q9rZKNxVy0y4KIGscSc0k\nJiR+OHwh+F+S/g97juhuxnz7fG36JOCZ5s9iN55jgTam4c0K82kPfzVcDNiw\nFx3ZArhw7tQDl37bU/wB/FhcHVNTWsmyaChNsdIV/tjP1Uvcx3DHZSdaj6Pq\nRhqsuda2s8lMgzZqAdOMCjyx006GfojktrfR41tRRtLC6+LZQt5JCgjSJHBE\nnGA8dLB9u4jezl6BRudtpkRUogTfyIccKRFmsQaPHM3ftjCRGs4fcd6Z9cu/\nWLzaFDYAms9p/wpn3gwTSyZLbS+lKyFe9hkfaS7vapDAZhSd2l7UNE4+gFO9\nDAA2/4YxUSALeYLQnKXQ5/c8/YHZW2AOS4iv008CKf856cxQJ1PcaxfZ7kwl\nm0zCK5hRh0YwKnBq7l5aOgVKyNeuo6SpASEbg8udohrp2A/ekdsBw+kp7sLF\ngsSA6NvYprwl5SmVxjb0KOjucDhWe+765Oie08vggct0kEJQAh7orePE/dGq\n9A//\r\n=8OVQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c92f038c3.0","@material/base":"5.0.0-canary.c92f038c3.0","@material/shape":"5.0.0-canary.c92f038c3.0","@material/theme":"5.0.0-canary.c92f038c3.0","@material/animation":"5.0.0-canary.c92f038c3.0","@material/elevation":"5.0.0-canary.c92f038c3.0","@material/feature-targeting":"5.0.0-canary.c92f038c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.c92f038c3.0_1577743402307_0.3178669600813666","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/menu-surface","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"11565c3e9f6e99e8b1366a90999806fc67c735f4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.1f1ac7558.0.tgz","fileCount":36,"integrity":"sha512-SxKsi20nj7d+O72nr+4HSObrrQI/W/KonXB8R3seM9dufqq7td7uNAk0douWFaTD7n/jN0Z6MyGizcUH4O7juQ==","signatures":[{"sig":"MEUCIQC9CQFrjNbzLAELTC9CeATCL1FC5/qU6IYU1O2w0tqvHgIgMWIfrKCZRPKb8fluRWODh28NwZZw96d2JtHVGKsD26I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDlh4CRA9TVsSAnZWagAA5skQAJQVOauA2deXCg8wbQjM\nOZTWmtqVibAeMrkLPg5J+V4yKyHLu7V1AK37BqlbhI9OzEqPDUsceB7MVYP8\nv8rHf0rLPl+K9Rj3wgO7ofiFmVJFj2y4jb4DjBoR+iMIvXsUgYECIo/86F3o\nATdvBzqyM3+rK9vIC5wXeqRAvpzdAbWDxLLK4mMk0MIge1QKqcVpJa0TwiWi\n1LadWCS7CE/jtBaipW6AoRIWH6ofBtIzBMKbWlMgIGOYLW6lUQYKwS0hVdk0\nyrE+H/5x6Mtf1jx7VKy0Wv8GfnJTBp9x0CS8xt0Nf7KraqRThqrs8S7zlW2a\n0ZOkAvxPFC7ry67ttDE3Qy/USIoeMtWayzNz1rC1L/RWKAAfeEFubr0TCCj5\nuty3K1f9Vg+5W1U2ZK71eqepMTMdvS5Q4go7mGYOFRQLLt2/+eiQASsSKvWl\n2gN42DdhBJIv3GYc4cs+YTmB8u+KRexpJvSD+jSfP3hPCELf0cvlpGomNvgG\nz7LPcHreruLINhLUm4caG6+5q3Jt7R9aFiHYpkhBN3BH9zB7Zsn6egdaEGCt\nO9bTssSxYcBRlylJyS+Oo/77lJqdWdeputEhQYYGGc+lkQMPZ0ZV2jQHreBZ\nfbon6re9PCrmZ08Kr9pFYJbsAyeF6tK7PCv0+GcIEbIjahPByp1Dn99jKIcS\nxGPI\r\n=Xv5r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1f1ac7558.0","@material/base":"5.0.0-canary.1f1ac7558.0","@material/shape":"5.0.0-canary.1f1ac7558.0","@material/theme":"5.0.0-canary.1f1ac7558.0","@material/animation":"5.0.0-canary.1f1ac7558.0","@material/elevation":"5.0.0-canary.1f1ac7558.0","@material/feature-targeting":"5.0.0-canary.1f1ac7558.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.1f1ac7558.0_1577998455629_0.92612513262658","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/menu-surface","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2c26b3dd041a285a37ee53b9144e306750e61690","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.ec26e799c.0.tgz","fileCount":36,"integrity":"sha512-Edxwx5R8OR9eyWWnOUkZd6m1mfCS0kTbAcpXUazLY8WzqoLaUSP9Rb9BQy2QKaQwDUt5VK7+dlLn9Qy2YSqghg==","signatures":[{"sig":"MEQCIAgBh6ObZjnbYoxjF2KyhKJzyW0uHiYn8hYo/wR6E41PAiAdd1wQrp8KdvQtY4kfRRIalvo+Z4Op+JGVKAV4FfniUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmPFCRA9TVsSAnZWagAATcQQAIsgk7fITyj3KNI90CMj\n7aDGzkmb8O52U2sBEhbbHqXTG/pQ66Mf3qV/bf7zC3zdFno06slq5aheXn1C\nZc5BtW7MDuCp4bBm1HjezEdSh3UrtJj+zjzYSErtBM8CwFxAGD1z+SQJNH0i\nlD+rNK1/h+TPYhJvAZSZIbQtKEgLGEexzuTiIyvJYJPMUj173w6vq9ZmgTxK\n52F/Cgiwhzjkn1OYSraBghsAG8uEvB+X+3GyFveueRsXIVXjFkPPoRew2eTs\ncZSqMt6umuFO9d8PwpgfLZ3f/51Lps+jDXZcSNt2uJHwLz7K99GQEEgkGqCK\nFPcddQ/EUAq78Fj136ymK7CxuFbD7Dl30Vjj7Y9xWXWD78OpgyqhXPKqPa0q\n29AY+81mYA0m0npOzwbiKY981uAr57YAxymGwrqZcADz4SYDzHsRk//I0ETy\n//zqShQ169taFkdTaNgWbBO2FfNCODf0J7x97D9b9el8zh6hdNEB1iSI+TuU\nQIFx5HTCNxbu6PQK8i76qXs65Yt2HjhBatB/FF9PSKd1fphbz3bAuLNP0clS\nepiZM/uufuFEnsnfFAsdenq9EX5bwbUmcOrJSszuH7X2s8vSjwslAx0DP8eY\nvUfEFxO689Zyeeeq7D+ulXu4+3kTtseLXcwEBuqp0el5B4PsxjyaNJuLQUsP\nrIwz\r\n=/D5B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ec26e799c.0","@material/base":"5.0.0-canary.ec26e799c.0","@material/shape":"5.0.0-canary.ec26e799c.0","@material/theme":"5.0.0-canary.ec26e799c.0","@material/animation":"5.0.0-canary.ec26e799c.0","@material/elevation":"5.0.0-canary.ec26e799c.0","@material/feature-targeting":"5.0.0-canary.ec26e799c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.ec26e799c.0_1578001349405_0.2578803567810297","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/menu-surface","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"67e4ae5ce27439436ae88e54a5f71f8b52f1ef5b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.0a40ced40.0.tgz","fileCount":36,"integrity":"sha512-11yUmA7+vwWuHFpS5cI8Qr42a/A5OuFD+Vsr5S4QXyabzWm7WnaTlt2zU1NZtuFCIN1iqop4J3kXYnhrUN5rqA==","signatures":[{"sig":"MEQCIG/HbXHMaozQ56q8p6ie1EguNHXqxvvX2f+CP1L0dgsuAiBgGPSkQxhu08Luuk1wClQKO9jU8dg6IrfzuSPpdIf6wA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3VQCRA9TVsSAnZWagAA5XwP/jCrDB/MXVuNQv0nqjio\n0iHlWXeK+sKnYdHpf35/VXDYQkx2nUnqCRohft1xda5jCSo8gHkNMchYy/Rb\nl3ceSz/iOBrTyafvDjKJR1S6AoY75Ee+Ofr5Bggh6nyCMMDblqlSHIoAMWzj\nhArjI+y7HB8ksMIK+Vq7MrBD43IrKZ/L50X7SH9n42Fu8iBSa72T83DvC4T6\nB/tKvgv6lw0omKAzeBJKfT4orYwydRm4s0jMsysFQJRWEs0kZnoCjwqDzFFr\nJYMXIoCBGz+K2TXUpnxn7Ls/cNGy/3INziVe/JIZdqva36isdEmWBUavguE9\nbdq3wg3VxwSW3rZR5zgoKRgYvxxfMWAj7fISR+3goZ0+0c5r0+PNI59zXrVY\nHRe6iVUrlDDZwDnPgJDXc85TRd3psNkj2ULJL0/s58phUTDv9OFTEj+J1A3v\nrHHNlK75gDUzTmU258AXYTMvu7PVxr/GoQH5QCF9L9RxhLXTm9EcdgGGD9pk\nQ0zC0qfQKb+XpooTaCC88GtLARtbm/JIddUcC0iEuteWXbS79J3tmmb4FgLV\nuf5z/Rb3zTCGy1GuBXldS7omt8F5PfpJJsuyrarBEeOgmh0rvApRJXpVYXYC\n4dNxIrdW3Iw1z9mJqDVs9IhlZuRT1upWhS5Jk2rdbO5AeTlp9i7VEUsBqB/4\nYfCw\r\n=2BJ5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.0a40ced40.0","@material/base":"5.0.0-canary.0a40ced40.0","@material/shape":"5.0.0-canary.0a40ced40.0","@material/theme":"5.0.0-canary.0a40ced40.0","@material/animation":"5.0.0-canary.0a40ced40.0","@material/elevation":"5.0.0-canary.0a40ced40.0","@material/feature-targeting":"5.0.0-canary.0a40ced40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.0a40ced40.0_1578071375604_0.6063506486459551","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/menu-surface","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"76bb08a923c51181f4b21c8a47e98bcafbe9cd4d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.3adf84899.0.tgz","fileCount":36,"integrity":"sha512-ZAhZ3DE1NGTdBLikuxVcIQMoO7fgMehyjEn2Mx/opwlIHDZoeomulw/2dnLvgyvoW9TBtuRLLwEJlnZDKcy4TQ==","signatures":[{"sig":"MEUCIHnIMkXCL/COIXNT3vcLdAXuIG+mTgSml/MJl6uc2u5qAiEAhvFrtmIvxwluuFcKLD/tL1nqhtDNwjFnNvwtzQGNdr8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4ZpCRA9TVsSAnZWagAAwDwP/0yE6JdPVQfNkB2CPleX\nu6hwEzk5RyArpYOaDImvoWnjOUbqOK86/f3J76Rn4PJ9hMpu5g1pqIfQZ3uO\niDtxA1wHVY1ygaCUF/PFihJTzV4tUHe3IeFtsc7Tnfz+teik5eWAM1vwlMfa\n64gzzaso6ha1/P5q3XgFvUHexvG6FqrGfKZKhMw38w+QFmk2UtCFoYoqowUt\nBtj2CIbtvjLYRMnzDqiQlL+WO5/s/scRaGclB34FJ0i0yfVTrbhmcMkapED8\nS8ye54OH6y4etVogVeIIZTL1S2wdxa9WxYSv0AbFCukIQmfCMWedutjmeN3q\n6FS8JYHU192kLnAVduGweA2k8uJR/HziNIFKO8HlWIWKuW8kmXUl5RXgyrGm\n0BtqGn+Kr0pVILVmVDY6fY03qqLPUI91RfhENUZMQ+Tv8swyN8Ig4OA0osJn\nXByEpoybM5Dez4eYfZyNppDchYr61+22NdD7cRZOrEfExHrU4Jtx9YQdyoZd\nChmFfXgoZ0myiGElJOX8AFtNpkoc8klZH+CkYjNWA/NVMurBeu+jTIURy0tm\nnH7t7AVNOztwlm9NZpAYxYqQZupDkiT8Gx6qndFCGn/zs7XZg6NqJ8b+rhHQ\nG/LLkyFSfNq9WeUlpxsizcSz6e9QIjQWKfMFcNkKRZP4C8xtXzPwjhcrNrei\n/zdR\r\n=co6x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3adf84899.0","@material/base":"5.0.0-canary.3adf84899.0","@material/shape":"5.0.0-canary.3adf84899.0","@material/theme":"5.0.0-canary.3adf84899.0","@material/animation":"5.0.0-canary.3adf84899.0","@material/elevation":"5.0.0-canary.3adf84899.0","@material/feature-targeting":"5.0.0-canary.3adf84899.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.3adf84899.0_1578075753145_0.0022181664862706008","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/menu-surface","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"cc1e991f3f44953da60036187a1c522186c75be5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.0d42ee650.0.tgz","fileCount":36,"integrity":"sha512-YT1Cfy/llwfKYqfBVuj2so96wGq8e3n/EKqYfqfbND8mzA3MWIa8Wc1Zvz4vAbyBmgVyLi/1UdEKaSBglKvNmg==","signatures":[{"sig":"MEUCIQCzUhduZbnHcGgIPABczR8wdBHsn9+2Kdf9xj/nMOJF2AIgc9D06dR/8GWE54Db0aKnr5rfSQKiGTbWkgfXodn1ErY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7QDCRA9TVsSAnZWagAANOcP/jvGjSU3VexP6j3xTh+w\n3+txEEtfAFx7W931fBxI7SdEWSBXz07lQCJJ0nKj7nOti26dpd4XWQ8KtGtR\neam8OyLADZ4CoIr+rauiqvIyPe5VHJtZnXnp9jfjCkjeeMscPg54NJQB0nkJ\nLbQVVkaaKBEgb52k3BNbFSTDinq8R8X6qJTvDU+RpzDdqiRZf46mZBWM0Dre\nEFsI42pWw5AZDUXPbkY9RTCugtUE3A0vYTh+hWyTcfrLeHBUErtVVRgVjjsc\nkhy3WwkXIeC5kUjCr1d6MeL6pOGBQANqCiBlNZorbbRHt03mH1CSRulni3nP\nzbF/5WuaCXv28DN/gbjxZXj/mIFnqhevRsV1GdrfMXhh58VrqJpogUOCXdEa\nCNoQLkca0US53D6c/BGjJxqmZ7fY4XoTctzmORc4E+6uhLyCDLX9fu57+OLO\nTn1YejNtdO7NIkGJmHbXJhwWT7ZCJgfxrR461Suwx5UAQ5tzBrYGfMGEmKHj\n+OYelADNUZU4w9z9Y6c2WbI7i9fPVUveq9vxi6QvS73AJCgHg5gdwfNwPyxK\nu66Ub3+R5Qk+yCseRJaHKQNWQkwJiLAFK7p/Q2QQ4qPg0wlJ4G4VPUpqSC+/\na2b9ax2ajgdX6KtuDWSTgrEMkXSqpilP5JR5H93CeFj3Ii9VakIMF2Az5HE9\nQ+mj\r\n=XhnG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.0d42ee650.0","@material/base":"5.0.0-canary.0d42ee650.0","@material/shape":"5.0.0-canary.0d42ee650.0","@material/theme":"5.0.0-canary.0d42ee650.0","@material/animation":"5.0.0-canary.0d42ee650.0","@material/elevation":"5.0.0-canary.0d42ee650.0","@material/feature-targeting":"5.0.0-canary.0d42ee650.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.0d42ee650.0_1578087427486_0.6868202714340983","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/menu-surface","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"071d765ca1411ea4f3a2a17cc6b05108d328c1a9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.847dd1ada.0.tgz","fileCount":36,"integrity":"sha512-BNX+L4hSAasUwQ0KjvjuUUmaYnTH7Fw68td79YeDZ8qX4Y53OWO5JS01UjvRW/nuihLDB3q9n9tce4jfu1Hf8A==","signatures":[{"sig":"MEYCIQD6aCI7GU20oCkhHbtR6MKlGWSp8jjroIuHc5hsZIu4IQIhAPKM+uczgVSAvg/S1L1nw17kbBAar161f4pswNd8z/o9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4niCRA9TVsSAnZWagAAMl0P/Rzo/RpkqdRfdgZw2FbW\nbczLEsoZAMjGU3Cfx4DOyGLB7AGRJMx1/oMb3o+biskFe++Pm/dtNiIFN6Zh\nsxnLPYV5sjVfy+S/1FmEO/ELXVnFVBuCpfH7LWN/kXVopjyXVgQ5EBBt4JVr\ni2d1USYS2UekhfhBa23itcOX84XMDKKTItBWHqEmtyFHQp6I5QNHpw8Tn+45\nMW/4MfbpRQOIblOIUie1qx+O3g0gX4H/oUQDjFh1xNjImORBQQFX8q9OMzJg\nMustnRtudaHaN/OQUSYDQh7LikJwIvUsHNPMZxyPxnWtjURPL9LPPdKRWBIZ\ng7IxsMsoExzteLn/xKpvAsu83bYh3Ppfgqtt1kkorVtA82RkWD2Z2EUUsf9I\n1z/ATxfEcnQPKViw63SB3kJtTxGMlb678V1mcc+n/Zf0UHmQ6hTBVCxrjd2W\nC3pSh7LImD+bYHdYscu4yvevVUCDPaEOlXoGuqbmRWIf+Bdkr9ctp/OlkeQW\nbWH86GETpENfFbv+Sxrmftr8HmMaUBelruUJ/4BXBFi0kOGOdgzuUK6r7TpJ\n91Y9yr1veHVmoC6PuK954YEYpbvLpD6lxKPFU57YnhNzDaiVtvE1BTXnEGDS\nIkAo5PJ058/Udm6OIolCVLONnHf9yRqTFK+qPgDvi4Dzx2hfj2H1SyAnW/qb\nJDDK\r\n=vYcn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.847dd1ada.0","@material/base":"5.0.0-canary.847dd1ada.0","@material/shape":"5.0.0-canary.847dd1ada.0","@material/theme":"5.0.0-canary.847dd1ada.0","@material/animation":"5.0.0-canary.847dd1ada.0","@material/elevation":"5.0.0-canary.847dd1ada.0","@material/feature-targeting":"5.0.0-canary.847dd1ada.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.847dd1ada.0_1578338786237_0.4366709124143988","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/menu-surface","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"04ce34fa7ccb9c564fb0f1a8edab70b5ebefa43b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.39df7e5df.0.tgz","fileCount":36,"integrity":"sha512-i7JfuuE0Y/ycTr7BbQ7RVzHRbVG3wACDePYmB9EpeWhh2pnizHFgv9iiwPsHLtxCQvZ1lp+8bw6rv05egfs1JA==","signatures":[{"sig":"MEYCIQCxn9azfXeH1w3mf5+DLZYwSjDY2eqfc8hGZm7GHHJ/KAIhAPbXkuBTqglPlXxBlf/87tg3HeaTZBLe9FoilsDWVrqA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9cMCRA9TVsSAnZWagAAKqoP/1n6RDxGqll+812x9XTH\nIJY9ZRR6WCymF7sTcSOQOkljlIcXnZU/CZScSgNnE1ldrt++IvrVJgVC4//M\neGAiRN6Tfuj42Aguai23P/KUpACA07kwX9OK7/DQNsmmKFUDfmlq+PZ+Sx0x\nZ3+ZvkX7L45iSL91QEDSeiL4919tt2RSaX6HKlqc0Qrd+IrllhbkCAQIQyao\nWHYOHqVjYRYWMagTM2WJttsZTjpccRxy06ItStQLwbxeX1yVJ7KQsuYvcEDl\nK0ysalTQHS1mrx3z29aMMpcZZSalx+Uwk9wSqmf1g88mGJbNUSmcpG/gwc7b\nG2HMkul54AcWoZI7Rk4CERRyEUPMVHs0tHZb9Uc+qLT776uQfjCBPLuP8083\nCeLL4tU7S/ncu9yeRJHcPjKtScoH4bD2XSnR1dfjrHrDwCvAlJTaSjaKEiMH\n31CLRR3b+IFyOxo/qDc3Qvy325IXMoGUgXkUMyPtZkUmGXBm249f+Oklw079\nrpXS8d6uak+KcZeayxiq4kZMoC/4Jfba2euW1wcccDtLLIR74QHgFou7t9k2\nthEY2CfiHSGH10bwJ+I/E06PI307F7gHbKtullv/3RLYU/v8RSbo3yrDJ6kC\nFWggspLVjEiswUigihOrYpIiZYww/WrIm64XukC8CmAj6yntERU+7xjUf+4I\nhWAY\r\n=WSNT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.39df7e5df.0","@material/base":"5.0.0-canary.39df7e5df.0","@material/shape":"5.0.0-canary.39df7e5df.0","@material/theme":"5.0.0-canary.39df7e5df.0","@material/animation":"5.0.0-canary.39df7e5df.0","@material/elevation":"5.0.0-canary.39df7e5df.0","@material/feature-targeting":"5.0.0-canary.39df7e5df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.39df7e5df.0_1578358540440_0.8264128129803217","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/menu-surface","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"88088f886cd747c914c519a23b668c8e8b4c2e3d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.f1a2581ab.0.tgz","fileCount":36,"integrity":"sha512-qnsxJgc84TdWEtdGkgj5/zIV+ZzdRshFuqwHnAEdPr5Csgm3EZPj2D7l0qVsqDQcXFY3XZTOPPGAmDrl5AosyQ==","signatures":[{"sig":"MEQCIFvCO72Jal1ot/UQ5Viw0lYzJEhEW+ZLQ2OFFiocGTe6AiASN6cn9KQdPbFH3CtTNODbODZGDCGrXk45g1v82jHPug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJznCRA9TVsSAnZWagAAu4gQAJLCIt7KoerzUHuDCKIw\npr+sSDGuVy0hlfgcv8VadM47UpWoO6ZjcD9dGakan4nQ/lfqf/+cBuF3M2Kp\nV9uZO7FDoRzBJ/kcp5lv+6bawJLv4ie6AuGMUUDolw/gpRvcRx/hZ6CrlL6O\nhYx8mlx0YClrlyIggwdcZKsL8HAmMx/sUtK8jJ7DAjZ+RiHLJVnZZEkgx3jh\no6J7Kx2zFcEN1Y6R2bMZX3dSbEX9bat8xbLz9bgY6L5YPL82TuLUHbikDyXQ\nsM914HUr0xzyHduZ0OJgN1CynzoY/P2H8EK4S9vWaH2a5vDvT5M0ZZ+HV/E9\ng+W5JpogEdkylZ2s3v5HZ/9M1MHJoQfXrUzAfPJBDceeKIC4bBTtIcLVuoWF\nnFV5j+C3zjx0ZCNiAeOkcTAHR65p/wnKgvkvCqSXEoEYICVT08GTMHsBMPWi\n4t0VGpXasP6T46QAtWqQo93mKYU8qT1qYX593k0PIGB+991+mMk/kcY4LeQH\njThwocie6HJwFnAkgNUV3exRXqcWSY9tx2z9yQC0tTcj3COT7ndjIE6C6WOX\n9/9D7PIW/6djs9M8mqk5MGrpqykwucbIvvrnzmSxT/pKu5TsgsI72oKE8XKc\n2z1Q562DARhQ0/DU46NTTmm8osn/w/+mGZTtPmzZYHCOslPp9SSTysxini6B\n7D9S\r\n=Quhb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f1a2581ab.0","@material/base":"5.0.0-canary.f1a2581ab.0","@material/shape":"5.0.0-canary.f1a2581ab.0","@material/theme":"5.0.0-canary.f1a2581ab.0","@material/animation":"5.0.0-canary.f1a2581ab.0","@material/elevation":"5.0.0-canary.f1a2581ab.0","@material/feature-targeting":"5.0.0-canary.f1a2581ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.f1a2581ab.0_1578409190787_0.8469922624703521","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/menu-surface","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d7bba4683bb138298d244c6a072ad902317665c7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.7c7ddf347.0.tgz","fileCount":36,"integrity":"sha512-lzGG9+RHMlLl94ZKdy4jPI/2yOZndoJq+KnsbFje+49RmxhHvKY5bhrHKwbQPyY47VDbHqrwqDbbvmu0B/pZmQ==","signatures":[{"sig":"MEUCICZY8l5xHpMwVWUF3KusPi+UZ90COjaqrKJ9GxIvao2tAiEA5C5sgvWYUOaYKce8bWs/Km33emR/73yFerJpB3J329U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKCmCRA9TVsSAnZWagAAjqsP/1rfjIuONBhSKGYDAAEJ\nt1FdUAn+K6JK16PXskl7OTZTFjgD0l9EGg5fkkjjSDq6AAV1Dr0T6xN1sjWu\noFSgkM+nMUgN3WTMW2eKNOiGVp5cbzl2Vx3J0U7galYScIX99BP03mFEvRUT\nsgG/ayWAYnvd9eHAm9IvNON2WKV5qasqfrgDM765AwgUCF+GjlgTLS+C9y6F\nh4L1OKbDkpcaaFcIEKz/wJ20TtKztjzznTuf/fzt0+mO9LWTl8TWr6YyDC0p\nFlDy/G50OWyC2kzp3SwVWbvJhk03tQj2nk2HcG4TjcB0jR8Qchha0Ovuwg94\n7Z/rSypsbGwabuYjzl8UfxXQJefVvDBQUGtKXcngcjmLtZZiFILoQVS9YPUd\nhlsiI40JQgrlUtcE6OKFRM0o2BEyo4nYuqZjwmX4nDY4DHV5O9mgomDZO6g8\nBgrMCUKDcxsiDeR6Dl4+Q2HkwXc23dOSWeWzeLrsNJoSs9YSXUCv6mX9dWIz\n0EYMSNHKoKIkoIz8xHzKlvElwv7F9lC2pKjnBHa402vOiMEK0R1vhUExPjRu\n/kYRyPMHKR+pYl+fch82OZFrcybfn8E879igug+hZbkSaFOcmf6z2Wzrzz4Q\nozaggJ4ouIW40zohg9bghmsoM6TJq64MgpncvJB9jzSK6c2mDPO+7k3euCB4\nt8l+\r\n=RID/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7c7ddf347.0","@material/base":"5.0.0-canary.7c7ddf347.0","@material/shape":"5.0.0-canary.7c7ddf347.0","@material/theme":"5.0.0-canary.7c7ddf347.0","@material/animation":"5.0.0-canary.7c7ddf347.0","@material/elevation":"5.0.0-canary.7c7ddf347.0","@material/feature-targeting":"5.0.0-canary.7c7ddf347.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.7c7ddf347.0_1578410150606_0.0761551018470632","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/menu-surface","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c4db4d58a343f34f353dc4c062f5113f5259f2fa","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":36,"integrity":"sha512-4lJUS5bjUitV6HMoWr+nDGmdTSmJDqO4h9JoLQVjeddCcoZrgsGuICb/bKgMsukNNIa34oyps6SVQoLB8vutgQ==","signatures":[{"sig":"MEUCIQDI97MjlbG/VDrx7E8D2IGh0qP8aSJVtmDBMHgmnL3K/AIgJTIoIeIHC+i5jMOrpLCFAPXxkBaFcyjK8LPaHkowJiE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMmLCRA9TVsSAnZWagAAqFYP/AzlPnp/IN0Qqu66d1ci\nIJI1OdRSMU+y3zCMt8KeQNtJeinIsuxE++IZ0TGmfqHe46URiH3LK7oWvifO\nwKNivYN0oSqiy+jZt8fXT4tsV9ebxg5HZGBLNzPYR4+nnkCL5Ib7M7pOuy2Q\ncifSBD/eeoNk14NCohqwlDybcUZqikzgDSBbeSH0RqaZUrHKGyFvtcPou+kk\nwWnYvcGJW+ICEX+8k2uM+wYj8WPLvECMCWdCeOF9JSGKNhwQO+mGuhR+bc7x\npkDyYtKld6Q04xiaQEq8JCyY0vlrzOFFppWmEySNYQjv2L4P0rtWwbidBvmG\n/IEEhAptFyP9I05/ZE5VJlM2/Hl2F6PZRSnTTkWtmZ4a1kH8VeVYC7b7Krb4\n8alooe1HLPDdjJmqjSDRY+QTWzMWmgBosNtxuUH/g+1t4ZU5LOaqyvFMnjtG\nB1FcaoI52O2EXo4oVMClEY/cwpR7o+uxoj+n8nm+iIDtPPAHdKJZ7816FIA1\nnHledmdYEWGf86UYoZkGvyrCqIKkt+Va/rHzOE69keiITxqQQSCmzowYNswH\n2VZmkk5nTNLUB8UyNJxCC4JFHhzGv7MCyFoJTHScK9Q5duxSbkzu2vpQQWUW\nkYRW99s55SyOOuKkdfXSSz3uuTHSBSUL79BnGPrIdNlI+0uWn7mi4zvuv+rm\nMhNv\r\n=o9pR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a1c84d4b5.0","@material/base":"5.0.0-canary.a1c84d4b5.0","@material/shape":"5.0.0-canary.a1c84d4b5.0","@material/theme":"5.0.0-canary.a1c84d4b5.0","@material/animation":"5.0.0-canary.a1c84d4b5.0","@material/elevation":"5.0.0-canary.a1c84d4b5.0","@material/feature-targeting":"5.0.0-canary.a1c84d4b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.a1c84d4b5.0_1578420619178_0.9351985405340595","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/menu-surface","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"02f8d9a7ac0856c811d1771cb57274b2989d7650","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.ec9f16578.0.tgz","fileCount":36,"integrity":"sha512-V9J0j/sV9sdh+OvQk4dMz6r2vAA4AaaVz1ZQ5hpEcGosszBoa86A/188rq73GNeFu1ZXmVXBLLlvwcNwz9zuuA==","signatures":[{"sig":"MEYCIQCzwX47Cvfrf86+KwFSrsHB1azp7UikhafRBmEyAUDLbgIhAOJ4lRVdTci5q/F6TygP/TAgkkOJRxQ6zaslC+8AWMFL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN57CRA9TVsSAnZWagAAC6IP/A4iLqaFdPXYJkB2piBZ\nb24afpQaoaVKIvqsdv8kFWxra130U9oDD3kwN9B0HvQ39WNmR0p10V3W682W\njjQT2dSaiRqOfOwfd5fXX6GRnlHcWKYntKrpPf9aRUJA0UnnOftwZz2qyLJi\nzwHep5C6omvUJrQ/6f+j/LDBSa9E/NyLEt92tEQLcD1qAAQ9Uoa9TSHFE6UG\nw6jVZFeWUPkUaQEkOPFvOZrEd20tS5kn0I+FwSaLTpelw7+M42aDNVaySyNW\nsbglRfnXWUSxO5wFhz2t1hhXduIQ/xkeFOOnwbEpWt72dpbkR1wtgz6+lvTY\nPKc6blupWOuJBLY91+pAzXPkrr2YefJKFQcW+pXD2TkMEj6FrZrKRCWQoJ6l\nEghGIaK829tWV5HdB4ejjZCkUH9Z+mWMgXjIuSvNMPNFLroVP17pzm3bkWKN\nlvWU+MT0SnbY6z3szPBcnt/VUwW4YTZdk7W2eG+tVDPHhz21Xpltf5FSBOtH\nnj8699HIXGmP7smGAYkXGnJy0xfG24K033+1hO8dl0Og7M05fi8oZH3OF2FE\nHw+XWKSvYlX25f5acq1+gk5U+pVRvuYJjLh4gYP/Bs3dKnhaVXG7MG4V/ETs\ndCSbZdJ41DzftPohYPLUyZEmq0fA3t++vgiyOOg8a4Jrj0bCkesv2B+RBycS\nvwuh\r\n=sS4s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ec9f16578.0","@material/base":"5.0.0-canary.ec9f16578.0","@material/shape":"5.0.0-canary.ec9f16578.0","@material/theme":"5.0.0-canary.ec9f16578.0","@material/animation":"5.0.0-canary.ec9f16578.0","@material/elevation":"5.0.0-canary.ec9f16578.0","@material/feature-targeting":"5.0.0-canary.ec9f16578.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.ec9f16578.0_1578425978708_0.8665316232747369","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/menu-surface","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b4ab0338b230577e2701086f686247642a934f49","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.b602226ce.0.tgz","fileCount":36,"integrity":"sha512-AOD9eZCFpBUTFMICFmxvMDNZYTrYqePFfjFwJh9pe15ps+ep/cqdiLlWmieq9xQvqWl0T37oWXpHQEA2ahJsEw==","signatures":[{"sig":"MEYCIQCfumbTtxu04oz4Ed6gVNr2AHx47xOPpASjW/i00QDryQIhAJ5U+CJiCbqSzHA7KbDjdMD7xqBz0LBceH6Fdp6wtYRc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFObaCRA9TVsSAnZWagAAhRgP/iPbcGBZppa7HhQjopEv\nccXWMw8RmVCSI3lLdm8WHa9PFdI9SZWNW99l5ni3+gMps98BXVWAHGtlE7RO\nJvX3ai6gU1nc08Mok/nhJvuulPhiAtoi8auliPB1ch8Y6jyAuMzbmORtf8Ty\nWf5a+XTbK08amqbBuW70LxY0R7wpqhSqg8HShBEyEWUV+vUkclSuUgI4vnXe\nB0F5Vp5fC2zrqALm0+CIYPjFW4BCf4GpHbFFD+B8gaZdx/f0KEWy2AxMTlNU\nc2CbLo0P20stqWUBQnO4h+sqZhRiDZXBcuirveAmghSHZdzyuGBVe4IIrbDL\nrNoQsXneqWgYEHEjyvu3jltsaSTVcbkCPDprBZKKtSv8MiTL5lGf2N6+yiCB\nHc69Pg4PCS8UXtg1ixh+20ISwm/HCn6smfIcoxT/4TdH2dpWvB/hJN8rwz3a\nqa/knDvLs3KYi/MoZ2pKrxCNfa14zIfGnKa/1Itg0XxmhICVGeE2MBHayYkJ\nUmvh3tXHXMkeWwPPTKMHYuYZS9W9oSthSyVZarolW5z1bfD38zEhfeHYyxly\nc3DCMlcmX4Hz6lm82859z4rFZpQNPGgvmpwEoXWRMwAjDAPWShB8vjz69WGD\nKJxNSWT5MhN4VTmLJOw8j/8PYKSomtU0O4uCFA1fW+ypsk2fK1maaH3Mhz80\n85L2\r\n=/RAu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b602226ce.0","@material/base":"5.0.0-canary.b602226ce.0","@material/shape":"5.0.0-canary.b602226ce.0","@material/theme":"5.0.0-canary.b602226ce.0","@material/animation":"5.0.0-canary.b602226ce.0","@material/elevation":"5.0.0-canary.b602226ce.0","@material/feature-targeting":"5.0.0-canary.b602226ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.b602226ce.0_1578428121725_0.11577596901989273","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/menu-surface","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b7524eb398eeb23e4d5471a7c683e7a7f6117248","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":36,"integrity":"sha512-nAo2HL8r9l7by8haInHnoCOo8eUhj58/b//qr2We+mAEWorZhwY9ahQnAmwPLdMG4nWMmC5W6EeHDdXOe36QkA==","signatures":[{"sig":"MEYCIQDVMYjQ5BRMwAEWErGr6WrVM7Igw5HFUGqRWC8MknKHwAIhAKtUgrMve/qOxEmraphrcxJPOvWWx0noVdYWXXfuiMGU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPdvCRA9TVsSAnZWagAAsj0P/2AyGvwTKmHFAz2odU+E\no1JVNnH1EGv3x3wFlYbicmvMcOWh4sjUDS0Dar7EIEMYAqcaEltf6zeHpRj9\n3lZxHg71hJyzC5+J3ui7Ttwm8a8e30oHmJs1ncdl9qTdnYuXoVwUPJYWfWpO\n0nXZYR2e/ChqxnoRSlzQ9AnYjegnrLM5hqOmmx74mQjsxmN61fOSapnghoKH\nqRrPLPMfXlEIesV1A2lro0zX2RwMqysybX1ojP4j9aA4LUT61A7OKrU7Te+3\nxuIgmFlqSwqBYJDjdVgpSJfx+KyrJZknyrwAmEz237U90iBtTLO8o6yg71BX\nzqnzmnDncTiQ7GLbfI2ozoZBE6IoqgEfogguR2bODz7jxec5ps1oLo2RQU8e\n38tSV2q8wKW7ztlaoPSGaeAnhkm0gf0TJTDRNxmItj670sXlaQPbkuvmtAWA\nX35i6aVAXNvBt+0+BbH5fvY065J2yP7/fGfX1g3Pw4K3CWbSI1dWC2TsLS/z\nPCNfnin0Q38nEfWbhESmhaDBp60di6I/+XO7qpJ9itIC/YsSQwyoGQH4HfKF\naN/+qmvKHHSGNv9fkVlrnJGSgkGnScF37T/zwUK9ebtczZY4AAT5kQxm0Hgg\nRy3tTElHsHVFEz2Zi0oMnE/nzLiq1LV8YJW5OIx/S+R6JX+63y4KiEWOjMiy\n6Y3A\r\n=RtH2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b2d2dc08c.0","@material/base":"5.0.0-canary.b2d2dc08c.0","@material/shape":"5.0.0-canary.b2d2dc08c.0","@material/theme":"5.0.0-canary.b2d2dc08c.0","@material/animation":"5.0.0-canary.b2d2dc08c.0","@material/elevation":"5.0.0-canary.b2d2dc08c.0","@material/feature-targeting":"5.0.0-canary.b2d2dc08c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.b2d2dc08c.0_1578432366766_0.13843375600120678","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/menu-surface","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2c05500cfcaae6f7a06fe748c4f3b8d069325ef1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.61f2d7580.0.tgz","fileCount":36,"integrity":"sha512-d4EZ0+UpOPTobzLfojMMiYQ+Dm1NQFKdL0sSFlxquDnR4cHpMUFyqrrHoJ5ovJ4SY0fNxECiahiLRsxRGlWHvg==","signatures":[{"sig":"MEQCIDMJBI3GbrREUMt6rlPzeTABEVb/poHrjvRgGEpNl3ZBAiBW6pQBbbWT/wl/SbsuymSU4ayZ7qkbHcOumQibFAOUOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPqjCRA9TVsSAnZWagAA9TYQAKO9YNxSiwuyLvp/9olS\nTQBbw2QvyXzUu0FHDpWWtk65lH98ilygj19tE1X4Sv6DvAaYxIIVhtvJ3nNv\nNFzE8ZN+P3vWapi1Wn4j5w2FB+X/HJyMlq1qb93xqjCZoy9+6EcU16S2FpSj\n6ADBThDFuMLzZQcePka9riTlSlub9LnA+4f95i9RVQxgM+7sRhwOpoTXXdpc\nhp4Oup7pKuRSrOPhBEn/722TEMTQgIH08OcQwDsNujuwTGvVg95O2HwTfkWz\nqT2hb8wjCaH2JW5144zcAQIVY0AwOp+UtHlIUTRcELt9tT8zl2suP7XznGNb\n+chOzYZ/ck+6VbS3t7U/+M1rH0iWvLWuhuTjSRImD/e5Pc62dTxQnWb9NelX\nk9JRXTQHb+ivAFR6wSRUPsfbVpVEpkizEbLZsCx5Fo9YwIEx7l+KYnfSMbWf\nTWWgP3R2uzt5Mk/uqEU4Y9nxaBXFe2fH3vNnUeReEwPPi+OLLBCc+lDLMZPx\nchzPIUiHQDDxxiGjjbUutdmmHzyReMgMwgc1rZVHTIYMyxwlIaiEMvB/6UmP\nkI2reks5iXG+xTroRElfNyoRc5pcFKlYDRHcm0NtATbLdhBUZJb6pc875w8x\nDLKXnRxTGiSU2gcjukDJkeN53voU6kiWvkvn0H+or64oxIpxZeP1dFqDCPpy\ncsgM\r\n=Fu6X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.61f2d7580.0","@material/base":"5.0.0-canary.61f2d7580.0","@material/shape":"5.0.0-canary.61f2d7580.0","@material/theme":"5.0.0-canary.61f2d7580.0","@material/animation":"5.0.0-canary.61f2d7580.0","@material/elevation":"5.0.0-canary.61f2d7580.0","@material/feature-targeting":"5.0.0-canary.61f2d7580.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.61f2d7580.0_1578433187002_0.0832411695924884","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/menu-surface","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"5e8e5e481508070ff94e9c7811e5ee5d23967087","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.d1be53a2e.0.tgz","fileCount":36,"integrity":"sha512-hzZDdl1m+C82Dmn4lPq967KZha8yfjO6W3nYEYpXiZnjhrDXvStXuxultECzlcMLu8PRjp9stDSj3nmBWQIyPA==","signatures":[{"sig":"MEUCIHsnSKgnIKuwMD3tTrzz8bqKKhdxn4NFx78ceXqvfUjBAiEAn4PCm6b2aKJDEwH6PK75kJNYRzBFMMGhkE2lQDfa4IA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQNqCRA9TVsSAnZWagAASuMP/1Fz8sQK8bqR0TNxjIPi\nmVw7R1XLIRsdUCt8cmuZhDTRB/d6jQpUUoj1AwtfN13ciL27qWUqhP9FJwNg\nN9lELywiEvjZuMXVqAVY/9o8sQRkApwKd/flxJgyNhSv5CVO6lCQTeyZCqoz\nPE/dpveSK5T9Fj52lpkWuhY24XNx02KvfOAUEzKrsskXMSZwU83FNCx3VTmR\nHCFM4vbK4TBzrj5WpEYHAjxdBymla0uVRRubPuyUMMB0a4ItOGQUBNfFgv3p\nby147uq3wMYGqhy9Pitsfr4xKJWxTqiaYER0EMuPg0jyMjqEbSxUT02QsOCm\n8RoecuwsxoqlaaRFUeNl7gIBf61RplmOItQK7KCIi3pyn00whwViwFgm3qte\nvj8E/pRmE9Lg+3fI/+cLOKQfSL35e9AFwxAS0bZu/TE361wR21RxX5ptB6T5\ni5xZ3zSAEI++BLj9WayIUjke9tDUdvZkKQr7Wz/Kemt+0QsUrwzq91xFHTpX\nZKVNZQgiHRQQpi0IE0kAiZZnTharjQSiRWuHlqTeAm7Fgibp6hZyHmu6/Fsr\nX6qleMnr3K3GC4EA2rnAV7whEk9kDter8Lru4NdBCIIbvgP917yQyaK1v834\n4NKLLyQt0MDjoP+eO1+RB9o0FKnb7N6cEgtbq/bQHQPMKoHnIM8bwIzhp4uQ\nDvKM\r\n=KHqB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d1be53a2e.0","@material/base":"5.0.0-canary.d1be53a2e.0","@material/shape":"5.0.0-canary.d1be53a2e.0","@material/theme":"5.0.0-canary.d1be53a2e.0","@material/animation":"5.0.0-canary.d1be53a2e.0","@material/elevation":"5.0.0-canary.d1be53a2e.0","@material/feature-targeting":"5.0.0-canary.d1be53a2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.d1be53a2e.0_1578435433977_0.1593172269623082","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/menu-surface","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"42d423fe995be0ab245b08a25ca0911d467c6dc6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.9b0d06e32.0.tgz","fileCount":36,"integrity":"sha512-4zYHOQk2ZYQY4pSpdVl6vM+IFE0OV04SvN+5KFeyo4qyo8PgtsRFT9P38kfL31YWO/NsQNfbwHwTPRgD1uHnUQ==","signatures":[{"sig":"MEQCIAjkZ/EtV2q6IHf6PicrvGPPaWEyxxqODAXrasFPTbLDAiALAgg1FaUjFZocmUAeVZTQ2Gfag/ibuU5xh6OUQEJfKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQPtCRA9TVsSAnZWagAAe70P/0qnZXkSuus+8JCSprn/\nX0iFXGwmrYxjWS5Q3Y2QkgZypdyFA+aGMuxqf72747P7/x2D2yG1B9O4Lwwr\n28xqoCRQyTvEqd4SaGeGi4VAU1+iOi6OCnvdt356lbJE7Z7Z27QueUpm5FHf\nuvgOkzOF//qRDy+xBDyN4ziIDXe4cB+bHYvmjXIHtqn5b34wB3bS1SqMedKV\nNo/SA2IacFIuMVU26wOjRA44ApkmzLwsXQ2N+/qT+z41p6f3SXmv5dTEdc/U\nTrAnzAkKIfkNDGrqpX7VBglW0rv55L/AlNbnflYNTpjSg2G7SWELO4CNNJ/d\noqwAXlf3Q3V8FnTVw07+jHEndlPaQjhqGRgUMjzmQA1rXxhaNTJBuxo3mVu3\ntBUPNfV/mtyo0sxjhVhVSBZjm9OlF4blrzjfTdAwYuXkF65t3rsCztKrYrqc\nkfGjnkyZIoZL8/usIahOCZNAXpHKMTP4qcA1i+OyR8lOPCSZ+KXh9SNmjW4w\nFARn4EqliA4oOkq8y/nLCIqLJrr6+qiicgDnC/lsOTyDxoHscISi2BIjr/hK\nKs+39lg5cuLdKrD77yhsQzw+Mvs75hpakyrue4YcVmvayOMMBoN926x7JkE6\nrkW7URNr0qRlIsAo0Zs1BjnIYKi9kjVy6IUoTaAydG8IBn8qDmoQ1+xHVS3k\n47UI\r\n=th37\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.9b0d06e32.0","@material/base":"5.0.0-canary.9b0d06e32.0","@material/shape":"5.0.0-canary.9b0d06e32.0","@material/theme":"5.0.0-canary.9b0d06e32.0","@material/animation":"5.0.0-canary.9b0d06e32.0","@material/elevation":"5.0.0-canary.9b0d06e32.0","@material/feature-targeting":"5.0.0-canary.9b0d06e32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.9b0d06e32.0_1578435565466_0.11929151543979732","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/menu-surface","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4ad539365ca6760d10a5561ca373d641410f8d73","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.730c807a0.0.tgz","fileCount":36,"integrity":"sha512-lqG23iBN+Z5zzImx9LU/Sy+x20hTrU7rFmO6sLiNXzex6EubeU3XJwIZN078QmldfXKFilO+EQJxUCrVO7PzDQ==","signatures":[{"sig":"MEUCIQDlJCMhp+1kn28aLeCjrHoK2Mq1PRxhQbTQhQs4Pcbb8AIgCHiutG1j7Q162gg7fIEvdPttAe0/C9+I/aDKFPmQZug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQRLCRA9TVsSAnZWagAAP+IP/jpQFqMM/bm+EB+QgZYw\nai7728yA5qOksa/P1ZZB76w7ozRD8RTrDtogCKO7m6923whXtupxE9GadLki\n35alnjaSkN0nuoHU0VlO4VwFMO2SlNaEIJzOAYrUOOQwn46WU4oKps4UAcOq\nYWd7MBCQFfR/vv4DTpJurzJEHSCuIMpwm3QcdtOQ+M4iK8CUZ8zmXLr8kdAi\n/YISYAUmpW6Br6g7J8BmeV5ZkoDVHNQCXUi266VrCpb7Czwdb10OkUgyv1s4\nDA1hFgPxZC/N0nBmy8du8uLio/egNCvqZZaABkMWdzLmLcgfaX24iKvaruXe\nZOtI+PpTL3IE0Fv4X09Vmbyr/XdiqLkLU0v0gvxF6f8OvuQBWwxdC9JY7SHO\nt/UQkM3UWJY1WwMpH/5bSzokTZcNp5mEFARnD1k+Gdm/q5nrFTZcDZOjcDF5\nT/qqDEIvIDYmhYQ72ra3hLIer4lio6fgY1/Fq8iCyreaglarV6jyif8dp6uM\nP7GESJSaqWOD8fKFFJAFpeqNlGYNe/DTZ7wZtpQk5xutG3FULHCWfDes7Vwa\naY5GI8G0BemtRpvoV6bJifBi9aLAezMyqmaDBI23L/FB/uKW1yjDv3DIvPr+\nhtOzqdXiWQg2vw6w/hGisOd769FzzSkR85xeomPDIRyAHsW7zyKWnFF0BW80\nZ5b7\r\n=RWY5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.730c807a0.0","@material/base":"5.0.0-canary.730c807a0.0","@material/shape":"5.0.0-canary.730c807a0.0","@material/theme":"5.0.0-canary.730c807a0.0","@material/animation":"5.0.0-canary.730c807a0.0","@material/elevation":"5.0.0-canary.730c807a0.0","@material/feature-targeting":"5.0.0-canary.730c807a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.730c807a0.0_1578435659213_0.4767132683781854","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/menu-surface","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2adaf22b11e65506746429b44c331ba57f76f8b7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.2213152cd.0.tgz","fileCount":36,"integrity":"sha512-u3FgQcz74csrTE4RiWxMAHw35AoodFEedfk4Dnmq8o9BHMyNDjf08N95z3yf3BfjE2DLY/+25FQGX71FDIw4eA==","signatures":[{"sig":"MEUCIQDAqJEpZRypBK1xMjFoKo+YqAoi19OPNZaUqCJmYbPv1wIgO8GmFp4/sr+CfVolJ5h6yEpuO0wiOMXTghfDiz3L1wU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg/MCRA9TVsSAnZWagAAaE0P/1UNL2lF0GrqJA+YEWpM\n5/kspDJWKQNyCahIKgS6gXMcAe6mopAOSNXoRZMHjM+jII3ibiq+jXeralHD\nWENRij72nPArgJeVUkyorR7OVO5bb/Nzvn/WMpEdxgtp3YUhGmDflwpxK3+S\nhyC+12Lh4fpYwn090W5zOga/wEAcRY/9nk8mGQL2q1DuWYfO1AeLVPAeX8iU\n+i0PF4anX9s4FkUvzsux/vI5KmGIFo0Zgeo3kMmEUsb2WupWanpn2l9Fcplb\nmsUj7iz5poAblxrDNdX+Q3aBk6cDDbBR7fb510NKIHG95m+hI0cV0UKZTf6v\nJJKeIt8Gl+3+X/wFYbVKSjzOmYt8FBcNKP+UwIkzUIFPt2mLub+lVDJag+Ol\nqiqHS+JQn3nR1ucwKDO9FYkoydpdWlNQY/ojNPWY2cgaTRRJ0AlXd6fqrss2\nojPpbgzHl45bhXkFryG1Vr11pb6Xzl4Vpps8hnHG4D9qV6V87wVJ2WyNVOd0\n1xri+JvVApo/KwkXINQ9bWTtM+3qQN9QBludXWvcm5HzAxR/DTlRAlkJ6H9s\nEALG69A8lzFsG3uOz1nGLvs+zN2D6rTZWSeEzI2AUGnb1EvP7Tg6D2cdFDn4\nr6LYwyPjPE9bq+FZIjCy5lYkCZCkpLNF/hpryUHdFs2Auz5kYuGXIfkSW74L\n5iBu\r\n=gujm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.2213152cd.0","@material/base":"5.0.0-canary.2213152cd.0","@material/shape":"5.0.0-canary.2213152cd.0","@material/theme":"5.0.0-canary.2213152cd.0","@material/animation":"5.0.0-canary.2213152cd.0","@material/elevation":"5.0.0-canary.2213152cd.0","@material/feature-targeting":"5.0.0-canary.2213152cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.2213152cd.0_1578504139521_0.5018026958780955","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/menu-surface","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"41117e831605bf9229ee3cf213bf0019bf22fc34","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.5750f7169.0.tgz","fileCount":36,"integrity":"sha512-xG313L6fKmKCAO+xNNPi+osMAe3qvmGNgvNem7rziW9GiD5MYRBfhu8NfLi77oc/5yPu6TpIYk/t0EYN5NYCBA==","signatures":[{"sig":"MEQCIHowHHB1yKErubxemhJwJixbeMCOg/NQ4HyCLrE+ziplAiBepqT0W3NPTWrwcpw+dkJvwFrZT1xzNeH7/Ls4xRY7ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhfsCRA9TVsSAnZWagAAHgMQAJqXybMD1uqkoJZhrIKt\ntoyzIPWhGcluMZ8PyueDY85bncLKre8MvcaRd1FXd5GzqtQZwpMdBLEq3IJJ\nbdpHv5FjZ2ZZbFeG6qDSFHXeSpMXiO7Bfz4nV3PLTQ2r4zhoSx56mVsToMCq\nT9f9USP7st0S8fnOov7JQ7eG1OSElhkKVcC4w0rH+/3vHBRAPyE9spQrVlXU\nui543xGYOAUXhVlYKPHhZLpbhZ6uoQepfqlDSifAZR813epPd34HsrWBqn6j\n8mpRjfdquTSFuubkOoTkMN4L3+mF6chC4A3zyckPI5C9I6xQIca++8g8B0uR\nVrxD58ZAaDDY9B/4xoANtUo1T2ggxj1wZDrTU2yP0t6+pHEvnwvW5s456Hmx\nYWLyeUt+f7cLUXxlus8isNqOIw9Ewd0gwk4zAy/b8AK8c7ZXqd/mVymnHHR7\nlofiBhpC/DLyJoK6RVDK9qKKMdjVXnbw2ldHtfweVH2s2rM2wf3dCRPyjwuY\nkFz51MxQSCEu6aOnI/MeIVVTpvMHXixzAr3leOyZ0HsV3UabaDmHCB0hu3xp\nkfCFnHwa3JQK+nfjgc7yLRz1RewnJJA5BQcFd87oBGd+zlt29ZHU346FG3EK\nbIN9CXeKPJ7GWuH4C3XSyC3LU2JDhXDaixIoPV5hmdnExKJ7+/GCzAI5/GgI\niUis\r\n=MskI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5750f7169.0","@material/base":"5.0.0-canary.5750f7169.0","@material/shape":"5.0.0-canary.5750f7169.0","@material/theme":"5.0.0-canary.5750f7169.0","@material/animation":"5.0.0-canary.5750f7169.0","@material/elevation":"5.0.0-canary.5750f7169.0","@material/feature-targeting":"5.0.0-canary.5750f7169.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.5750f7169.0_1578506218729_0.48028900798830065","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/menu-surface","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"63c6229f2ddd6e9543ecf209d1daaac0ef211665","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.f7abc7a43.0.tgz","fileCount":36,"integrity":"sha512-fononzPJiIybafHZSLnnMMtY6w1w4C9ZVN5MQu8HcGY/0IvyptHv4KaHC1tvC4i9rn/N59Yq2NipjlAxp15jxg==","signatures":[{"sig":"MEYCIQCDyF3wYb5NXZNki1NKRYKCp/MB88YlIIdgxDFZZyBHEgIhAPA0WFsdqbnwYrgiYF8/6O5g1+s1lqoWIkl43W9y5K9Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh80CRA9TVsSAnZWagAAd2QP/Ag6Y2uFUBh29o4rAfh0\nxFXb0kAvxScL5yFGWzSE0q0P6s/zFvlL9SRrI2qHO/JXR1v7Gmw5Jc63IVlI\nQT/wKhgDnXCxSJdTn1Fe+fzeg+LqepuanKNyVYn1zbYzuOykcqtZfEIvYf00\n01XKEl+eFw4zcRJysxNt8E1/udliZVEwgI5wYfXTnpo8FV1iDCSTOB8rzzlR\nkBGLe70ei0bdowg5TCcej5QVRC6GAyosTIpfy121JGGIhOeLfk75eYuRrVEx\niEcMZSE3YwtzZdCk/Ji8Xd5Yu9c38MXSy4+EGuMrk57sb66Guv3R1hjs1GZg\nbYjRSD75p639/WiiiOvNu9mtH3WVsPdUwdk7z/+LujaVhb2vzwrotDKoFF7T\nOWANp8jn0uUggJnjbq0ihNCv59T2DEzWlj38Bz4Na+ZGsWLgSZLmL2znsA28\nOvzRcTgtptgilwjm2x9ZmPq6hZghwenSXv+XBmV1xYn8VQRMmSR3QEtidwiz\nWsqU+nPnp1Vd9YEpIpQ6rf4QziqBbUrql4yOa0MV6WWHzsnWIPnFUlYg6ewN\n1jHFnBzY5cGL8Cko9qRnIfR1AzeCfkurQ9lhfs7IlrH+KDhX3ICgaNplZXkb\nu9LVCVYF9u97dzSzvQv0doeDwI54IwjF6cV9vgrQKaLNa/z6lsUEr5ng1li3\nX6s8\r\n=7yfb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f7abc7a43.0","@material/base":"5.0.0-canary.f7abc7a43.0","@material/shape":"5.0.0-canary.f7abc7a43.0","@material/theme":"5.0.0-canary.f7abc7a43.0","@material/animation":"5.0.0-canary.f7abc7a43.0","@material/elevation":"5.0.0-canary.f7abc7a43.0","@material/feature-targeting":"5.0.0-canary.f7abc7a43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.f7abc7a43.0_1578508083816_0.21696253379279118","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/menu-surface","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2bd5579bdc3359104359a3f3bb30b81bfd3f143e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.bf7b4a061.0.tgz","fileCount":36,"integrity":"sha512-k+l12jRjhRf7/NsK3MxWJ1aoFmWzvqM9Xe5naavPeynjFJQSq3nGNbUP7SHVEzg72L5PbCQA62AEGRBObSiLEA==","signatures":[{"sig":"MEQCIE8h24WEI0rfdgOGwxnD25Jk72Om+pT8UDGmeD3GtH/6AiA9Adh1Dgx0xqIqj1P7SsSW4eHQISe0HcqWBM/4hqCvrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiJhCRA9TVsSAnZWagAARS8P/iT0RlobhgqsjzVUyVUo\nLAcpd3XURsbow+WfSISwH3z2hV7AB3e0n9zR5sKFB/tS7xCXZ/wbzXU2+y86\nwsZXJU3V1N7WejB41ic19ONVv06aoNrTHlztXpk/w2sX6BeS/1Q712iOaR/2\nNiefQ/t0G73RGzrnjDbTkgdwi8VPUnjazYLbd1mQfL+LpGLtOh1jniULydGg\njxVea4eHZjMamIdDoI5IO39CSkRNMTncE65KLZ/TyTdrKy8tdETDVBL2QkRU\nqGeP2UuNEjTTvNKIt7z5QjWO5SSRQicLsWGYPH1roUMgeIeYgzsAkMEVCOG6\nXoJ/Lj7CzYQ8880LPB4TSsvBm5Rw5MGofYzHoglkhllVbUat2oUI37FqfOMq\nzAxVsBVdqFfwtw9Tc+0D4a9k8zy3k82Aej+vIV1mDIlZ3vypWZvD+qdNTokw\nhbfMcHAhjPn6ifz63+ZAXpsuTc74eZq3NfCDhHF5SYHf6n5D+J4C60rRZQjw\nyu8sOCytC+d0SuIXnNzDw2peb4GIZStU2yNoBrSY/5A1hJI/o4CirpsrBIvU\nbcjlwQMvpSQIbhK8PMOySl0V4yYQJMBfxLoEHtNWmsOVFPfy7CoDpvytX9bi\nh+In9upo9bUH/MDUgxUiGf2+eXWNGFj78EL9LQmGSDGB6+PYs8b35YSdk1/x\nve1L\r\n=0M7I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.bf7b4a061.0","@material/base":"5.0.0-canary.bf7b4a061.0","@material/shape":"5.0.0-canary.bf7b4a061.0","@material/theme":"5.0.0-canary.bf7b4a061.0","@material/animation":"5.0.0-canary.bf7b4a061.0","@material/elevation":"5.0.0-canary.bf7b4a061.0","@material/feature-targeting":"5.0.0-canary.bf7b4a061.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.bf7b4a061.0_1578508896972_0.4671860571504529","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/menu-surface","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c6a4ceb24ed9e6caaf60b36bdf2ab7d01b7b0404","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.784fa7903.0.tgz","fileCount":36,"integrity":"sha512-Zor08v16oSZpjUVRnMuxaACIBImBwF2fFNEB2mdeJN+vIpTMCo6Ey4Pv25Mm1j0FMCBmBnf89QZHHKFwZzuWwA==","signatures":[{"sig":"MEYCIQDQ2sfaE/5SomqIWnHkZ6X5LThd7s8UkY7/j9jM5U1UOAIhAMgEOvs2uU2uzaq41RFtNgEWMP5XycLXO3n7GscO/e9K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFikgCRA9TVsSAnZWagAAM0IQAJh2/xibIMW+XP0wXD65\nBgmw+M3TpGb8TLWktfMgeknGt4+OTmpm69Fq/XYk1IycxS+9jiu+kGtSEUpr\ndqGIgruUfRnLkAeT2z3DBTi9QTRC60+/IsxDBNi1qgTj7j/cmv58rskUfxc3\nx8bMZ9GbnJBChUk8nBRxtKeCuHZZ/NUBJFDgwrAj6UiGgU1A0qmt6ncnJcgs\nFACmfe6DAnKSWqZVnLDtQDJFUo/PbnXvXr/RfTIU6uT6QHIgcDJ9QWM2fZnX\nWdZgCph/aYh/u+DsNT2n4cGZ5+/VpWaukkJ/Eu43asXk7aI8jxvpMfDGJ7OY\nqEj5su9HXw0jRet54pmCJbUSUlfT1Q+SPgAybYdQuPuOWY6jSRG8sUxU0D+o\nmGZXM0VjIU//LtzzNWEyGkCrD2yLgIEEiQwxHKFyaFWOa/4IHr3uY0DbQRT9\nmusQRaZULEDmUZSCauYHXJHJ6iCMFL9tgmkVKIBxGFylxSYUzqRXUcy97vWy\nzWc0VFjLIWEZaBMK5/hC9fYDyIHVtneoBhoFXjowrPs/yMQOik0ob6DYwYZM\nJpy7HYvsZbonNmij6y8dIgj9NLkf0yO3l/05Th+3ZybBIVrPYmWFgM132JlF\n6HtBRkDU+0oyoi8lU1PixkbTpe+hCSaiiCxH9BU36f9AnKH3e96uPCr6fglG\ny7Ri\r\n=SXEw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.784fa7903.0","@material/base":"5.0.0-canary.784fa7903.0","@material/shape":"5.0.0-canary.784fa7903.0","@material/theme":"5.0.0-canary.784fa7903.0","@material/animation":"5.0.0-canary.784fa7903.0","@material/elevation":"5.0.0-canary.784fa7903.0","@material/feature-targeting":"5.0.0-canary.784fa7903.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.784fa7903.0_1578510624267_0.8767130647622998","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/menu-surface","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"bc867e10a824f5cbae8bcd979af784fc97ca4e7b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.823c050ba.0.tgz","fileCount":36,"integrity":"sha512-KG7mFQCYR36hgy+jb1DI3XcoJWE6xnJ6ntaEGjAQDXRFILHYf32g/rYcf0yTvwGaBJKI2gbPTPI+uyK+XQyS6Q==","signatures":[{"sig":"MEUCIEBVbojeUpDEbKwOlhLYGM58viPd6sM2vC/jycgY0sSpAiEAk+tDZ1QwJ5r3rL5GsXj2YeApCpPtI/JmeNx0xXyqUR0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjdWCRA9TVsSAnZWagAAEggP/3N5dris7Z3CoGIcqpg4\nEGrnug+YiTFrjRS6m6qlgIBoP2pdNefCMQ2cajBVEewlv6iFBnTepCDQmM9x\nEZMajkOg1QssJ1arteaYibxxwQ96kz1ZyUDlAiQPJzgHsowwHJno0qXfy/5T\nvCIpMyTyuSfh7skgjRYzNAb46cf5qZaLF53xvsXVlQPn76Ahr2nEYzjxae7M\nuf+0NJ0QpYggKTubN2tDzDLiCBa5+O3DQH6K5PtyNfx2ndfuXlTJPBdXFlwx\ndiOK7/Rbf91piXVHK7qj2vFwZaWy9nZrMzG9HRbu4RgvkbPN4wB9hZz5gfOs\nJc5M5ljN3ItCptaf995aAvTjZgKPcXb8V4/PztsmhId1K5DEI3x6ypC14R4f\n8JVjXQtSDBLmYA5fNm6fd4G7nlGoRjeRLOMMg0vMKrMDgBq9ec8YYUcsAm4X\nWNX/8ruzP3Wj67xlsUNM2cdXR/DpMhfYOml2/leQwEJ6eyQPwHQr6JvuNJfO\nPUwvTGxrI8Xb5YvnqOYqgDJG4G/GlNIDwJEITwn9kVKKLwX+Lh7fNje0wg+w\nIYwiidIOMgNnDAm6Wz6cpQZBzpZ7Hm94n3uLTfCjtShBGeTi2dS9filZqcTu\nKE2FWDNSMBwlmBEUtRh+F806QiKKyRMMa2Y85L1aNw69+Vn9w9VsEETTF9I8\nN159\r\n=zzcW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.823c050ba.0","@material/base":"5.0.0-canary.823c050ba.0","@material/shape":"5.0.0-canary.823c050ba.0","@material/theme":"5.0.0-canary.823c050ba.0","@material/animation":"5.0.0-canary.823c050ba.0","@material/elevation":"5.0.0-canary.823c050ba.0","@material/feature-targeting":"5.0.0-canary.823c050ba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.823c050ba.0_1578514262353_0.6687769259217826","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/menu-surface","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"e5fdbb47ba62684ec6b18bf837f3266a6c85c36b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.70c708dee.0.tgz","fileCount":36,"integrity":"sha512-SIebj48aIMTSKZxTIvCbdkg+0YLeVhLDmueItJKyYvEHnTfeIahdCnvtMWVDTIyhGnE8ULuOCzjvUFPWTRbayg==","signatures":[{"sig":"MEYCIQCWCl0EILvYqe9sTfjMYhuvnOsKcQ3eWJcNzR+SLPQ3GwIhAI4xI9DfFXk/SP8FDYay+vqKOEEsGf00F7V0dh2cHdEE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjn/CRA9TVsSAnZWagAAWvcQAJ4IMKnqfdmGIeNb18Tv\nmaiZFAPd3vLKxavjKEOrPYnUv0q9Fv2mMWmjSoe5a3aWuPodDtFamQgVYkPM\nh7I4OQAEb3QjvsrUwWaW48mTvGTCiO3k6qjweMM8xCaJv913GNup9rrb3MtB\no7nDUiE0y6td+V+tf8cFeehfbIWzZLCzgTt0P1At7kSZFga7p3EjMOw306zW\nOKoITWt3YJz5+XzMRoNSt5hpbzJNS8MHPZlrAIZAR0PZoo/145SFkEh3Oe8T\n2vlJXKq+M/f8/Ajc0ys4QbQpK9XNzlo82KRFtBtjfHSyXfQdWQ2NeRUH6/DI\nUsY1vWpJbP3Y7aXY0Sp6d85B8xQDwYvb78AbNB9leCzQVAamV6lfVyw1gi+1\nSANm6Jq4TicheHty03/WGsnpJ3++XmNGI5LELDkD9OR6A2kACEsv1a3Mz4Jp\nWoLXzkLP5sOk0EJ0ydh5YVZa5aOXlb3o6ghs19jo4BH169ijtfaqrFOZoRQg\nd4SeFdJ6JtHzTkTZTdAVhwPP7srJ4c5gvrT6dGpr2r7qIoDXhewEXj7xiVTR\nZIiW9Isoxl6v0qM75ZQ0oRANez+6EFE+uMCrP+5K/E+gvB1viuY67oc5txV6\n/qXN2IQdzenDLgOCJHBemxbDs2x0AQC/rsLxdIjvadIaQZDNe3mRXoW/YfiS\nl02P\r\n=DeS4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.70c708dee.0","@material/base":"5.0.0-canary.70c708dee.0","@material/shape":"5.0.0-canary.70c708dee.0","@material/theme":"5.0.0-canary.70c708dee.0","@material/animation":"5.0.0-canary.70c708dee.0","@material/elevation":"5.0.0-canary.70c708dee.0","@material/feature-targeting":"5.0.0-canary.70c708dee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.70c708dee.0_1578514943370_0.12350757896710407","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/menu-surface","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a5b2c79e78b84d3de1e7b905492246fb421f2f08","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":36,"integrity":"sha512-dFGGWvjyQbmMVffMnznJBZy5m1Jmo1St3gSjuTDoyFSfUCspj4PMk+hoXHwe4v2mNvJVCvPZQ+QEJGt5wBzHVQ==","signatures":[{"sig":"MEUCIQDlq69WFNKtZIp2cqVHQcy4KLELbA1gWRWhgdeOrJaQegIgQ157hOBFioc3UvpOkTqB0knYvAhvv3D6A0tATzwrhaU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFkzUCRA9TVsSAnZWagAAL1gP/RH5zUe/DmT6MWEWPlV9\nX/ntzP7j9ZyKNaTN42njL8P9JWLRRhRLsoN3uf1MUgQuXn0RhAiKK9Np3nQN\nvL8hP01UTSsNNRQqbLyBowN3W4d0ttFCOWqCUOtw6Fd4X3uPulExQR+lekei\n7B51+dIRdDqjopFtp9jUJZRU0XJh59BaGX0ILrAvcya4SZdWuFesvgNzyejs\n7XOZXggNvOEFM8vXkSMP/rqun2p0yNBlZPKYt4St2u68q/PyaY1ak9iRbKw5\n1BeTWYRhInjbVgnhCNrhEzU/ddjVG9bsFQsShhv0dAPzBDjdXL+/7PaRJX9i\nrptgxmMpc2eEM8mJ7F8WctyaOEi7t/e1twmDqfK4Wn5dI6XlhYIz6Mh9t/NG\ncmKladP13+mRyI/vghjA9ARV3h+iLwKrI1jixlLYxitHo2lVGKJGJLuhB6nY\nSiIrAJtzv+NAIZWCnhTjXcSthdamA6wvKAf2/y8dWp9JWPWbbzdxWUdB+pwS\nOFLH5WzpiDhloxEQG0H2qXjjiCfTgs64vl3o73+93xqCXfmCMT8DM+AFtvbS\nUwbVssjJ/dGiDvOjBtO/TIXxOYiA/9D3sAGQWDp0Y0GzpCLonjtzkSdF5CGb\n8wIiIQoS6f29h51OF9+iKFUGqLqivzRSSqjx4lLq2skYpUMm5BYdETiuOnbZ\nz4sp\r\n=DI8F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5ed9d13d0.0","@material/base":"5.0.0-canary.5ed9d13d0.0","@material/shape":"5.0.0-canary.5ed9d13d0.0","@material/theme":"5.0.0-canary.5ed9d13d0.0","@material/animation":"5.0.0-canary.5ed9d13d0.0","@material/elevation":"5.0.0-canary.5ed9d13d0.0","@material/feature-targeting":"5.0.0-canary.5ed9d13d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.5ed9d13d0.0_1578519763743_0.7992909508579453","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/menu-surface","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"5916e0c5ff842a2d4968ad1c3cb277edfe6e373b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.4819cc7e5.0.tgz","fileCount":36,"integrity":"sha512-9RTmodFn/tGadrW42+p85/THE2gIo/uXJpPor94JIi38cyit2MyGbBFp8f+RELFa7oUinY9Msli6yv4KaMfDhA==","signatures":[{"sig":"MEUCID+EJVCsSo3ulaTSH/Vombt+emMjfzpobn65mapY6MveAiEAwlSEoW3wyryzVS/uqbRxfGqLy1+nGeapOTrtKMPHdng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlB6CRA9TVsSAnZWagAA9iEP/3npCDcxsBj4CMqjKqb2\nQNMS6YFqdf4p5YjomGROGIdgS7OIF2ereHHetwMvx2X+eFUcIev9NePLggwg\n64mI15AoVNOxZfYAcvpEWAKF0LXR6DPt+FgB7NXHvQEt9oAgaVvexhm9D7hH\n6+0uaREdTO1ruZqs2jaE4pNniN1Jf5R592GBiCXM/sncAqwWJ1Nepmv/F3EB\nB3ammpsP5DJWp1VJzevwBvnMQ0j9ycBU+bSOFm77o1/MI9I2EPelrnz9AXme\nf5Dd+a5V4ssSUq+HV8Wklwri63KclRekIV6meB+vEndoUXEkFiDTTW5dj5ww\n/ArqY5EoOrnJ2/1RgfvaHQP83sW612CDhKJI+fvCxyxtmij2iITf0HTIZ2tq\nUVK9u+lF+yH3bBCO32KkSQ4SfBcealVc8cRVXZqqVuLy4tJnQeONsenPIW08\nLOJ6ZpHdCbUgMBCE9okoNYvt2435FUsHsCnGuhcYzd4qj2PEo77P1+1rC13l\nCrSQTrGTrIr7gkb3qVOWeQBgtuO73fMtmYcH67sO1869tkUhO+puGY3uU8LP\n1j8pYQWRRwYWQZSl63WoXXfGAkE1PI37FXgFm4ArPeJQ+j1RKz0A2X6yk0wy\nCa71nOE0oUXJuipNqbuw8m9DqRY7SYWBZVIGeUNx50TJrDAqRbC/8R2sCVvj\nSOA7\r\n=Lgqb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.4819cc7e5.0","@material/base":"5.0.0-canary.4819cc7e5.0","@material/shape":"5.0.0-canary.4819cc7e5.0","@material/theme":"5.0.0-canary.4819cc7e5.0","@material/animation":"5.0.0-canary.4819cc7e5.0","@material/elevation":"5.0.0-canary.4819cc7e5.0","@material/feature-targeting":"5.0.0-canary.4819cc7e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.4819cc7e5.0_1578520697632_0.7328138978320291","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/menu-surface","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9a29123bded96d86eea9fd460f236eac1e8b8f8b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":36,"integrity":"sha512-SaXt2OnrddXmcTKUwWVJ6doYmZz64dVm331XdS+Tzx1p1hTrOT7b83Wv0JYwjhdKUu9hJSmrd86HucxnproQTA==","signatures":[{"sig":"MEUCIBpmv/bNcJLQx6jcyegREIZ2TCfQAdhnzEAN6Kx+j3ykAiEA0v4CbjNOogKJnMOEvrcomfvV3x5Z4zsLggSEQsSLHn0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlS0CRA9TVsSAnZWagAAkeEP/R3ZYUtvaLj1Ab9p6pqh\nO5O6aSrWf19UgwcwtAyIuqE15GUaDAGIShceMKH0vU5smTOoCqI+hvarue8V\nKLQkAStPCiJyv61+n12b43eyM12wMZxkgNvrcf9fmViqLfhXbNsnZImLcL3m\nrkVevNdH7ANNq/uX9XxA9K/Cel0mwRtP2P9ZtPyWEvF4uwk+55nMZvxyVtBA\ntyTsdC1u/2rEdFhcj5LUb8aqNrr3cSLaz5XQykEewvkXYPKfWGkuFkJTuz9S\n+pCGp/Ye2hx0LPbb6Vepg7jWRSgtJv85D1HOkv3W5JfhTMoCLAauDneZHx9V\n9mrdavRaIGyR9bBlgsVeYGXed8ai5FHJQuFX1ShBgOIpjAE0W8Hh5U8se6nr\n+r+SZRbsg7NeenwyOpFwSVCRapuvrz6Mq54RrSc0qVoBDgYLnVnGC61OcJ8m\nGz54QQuT0ljpDKgjDkleFpzvpkoKY/jGqFNhEMjiM/FkO1d11F7DxoCWNDVS\n6s0Y2LC6EuDNu02CL8H0TM5rruWhoISG/tndF5ZYeG5Zdh04kGhWzP5oB9g+\nrBZl1CCGvg+MUkAZref1oOx2KrFLGZDxiEC9hvF6e+79vPAv3h/kSfICVMnd\n7pltMbyvs+Bgw0iHNRuZ0WkloKCMaaJmSTGQWGNqZmAuP1/BYnHU/d25caPY\nu/vi\r\n=391l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.fe3ffd2c3.0","@material/base":"5.0.0-canary.fe3ffd2c3.0","@material/shape":"5.0.0-canary.fe3ffd2c3.0","@material/theme":"5.0.0-canary.fe3ffd2c3.0","@material/animation":"5.0.0-canary.fe3ffd2c3.0","@material/elevation":"5.0.0-canary.fe3ffd2c3.0","@material/feature-targeting":"5.0.0-canary.fe3ffd2c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.fe3ffd2c3.0_1578521780149_0.6366675985518973","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/menu-surface","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2fa6760bf73e63bb5d063771b9ca72c6f7942511","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.c0e850090.0.tgz","fileCount":36,"integrity":"sha512-t9ECo8oiXQmY1B25de0z3ExdQ+K4rVOavAnByJSgkmh4bakaSpo1V3WMEbApGnbRL3NPQECPenR3k/gEsbpwUA==","signatures":[{"sig":"MEYCIQDReuuAdKs3xu3Fmj9AAE5liNdkgPfP6nvEJe+tee+LpQIhAPSAzTr6wnOA2HzN88KRYsfJtwt3YEYBsW5dG5+tluoq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlZVCRA9TVsSAnZWagAAQ+wQAKLYHNHwB1OWoEzTsVLH\nD85AgmknoEGoauRCTitBsKleYuuf+DjyPJcwIHejRwYEAAdjYJtNWNS8XVqY\n56NwgMcKDjAfb5RBBF2IZPuKEmFNEcEJ/mOZbhQQmniJ0YKa7F5IWo9e3XPF\n+DyTkI3uITx2URtNE+eUUdQcBGHc6JLPmLroH/nwXLOInQshX9iwGHpwHPc6\nW/tIKZm1uY+0a3WVjWDg7aSBRetO8JPdu/qnJf5rFBctSMlgGNpR4iSF+cZW\nkE/Xai/joJf27DFi/RiFYCo8CgChWSr5flz+8BeawmH8FxJBcxq7vWgdnLNc\nTqDznKfgctBxTVoEDbFQsEShwOcHkgLI8mgX6S7gPa/qsODMQdsKUmk0JAKd\nANILcO1oyDGJRaxnC5oyJYlrEvvOEcfto8ay178vzljoeqoEhMWnKKgnN1P5\nu2pBqOd/LUtyjwecb9pxKD/QgEH/8xaz8QXrWpdbq/7ue0akpae+Ha+K+951\njdGZHFOJ1/WzrOuDIC9j4xcOH+BRuwO9JR7XT6KS8tMR/Wy/hf4eDYA/om0v\nWixKv1fewEuSKVohLTnb8otXjophrCx8v8mwU7eUiUBKrjU76Wtzu6ZNIOAG\nw2/UbyfGj2jkALfK7wnV8NOKTOpqVGaVe371vs5F6ocYWWtS1fD1acSt7uCJ\nxxVe\r\n=YUoc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c0e850090.0","@material/base":"5.0.0-canary.c0e850090.0","@material/shape":"5.0.0-canary.c0e850090.0","@material/theme":"5.0.0-canary.c0e850090.0","@material/animation":"5.0.0-canary.c0e850090.0","@material/elevation":"5.0.0-canary.c0e850090.0","@material/feature-targeting":"5.0.0-canary.c0e850090.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.c0e850090.0_1578522197621_0.10963923623044902","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/menu-surface","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6b104ef53b1d83ba8c7855e426185b3c660c5cff","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.615f86f38.0.tgz","fileCount":36,"integrity":"sha512-BMy5Wj4nHjRUT9ugJQk3/Afziv9yNpVfeWaQfU06t+mg1n4Az33ZekCk76pnvn4PnCpboiLyOCvVOzb8LrxWvg==","signatures":[{"sig":"MEQCIDa6F0O26fZ/x9+lrI+a5Idws9bfOfovuA9hKf2F1uLZAiBzI3GSRm1d+FyFW5uqAThwh5sXQKZwhtCcFPwRZFlmlg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlpWCRA9TVsSAnZWagAAhHwQAKMhRVdml2sU22PWhezh\ntDgE8DxlU9ui2FW+8NJa+yaibMrVoiRgiXQBhAJDDJrEzBE3Eqj05UI6+PAo\nvvLNQEPzDU2xqq71Ef94yHi4cX6ovGibE+GRXUVf6giNRBBudv5gSTHSd1mM\nzBkkFJK63VrudUoRUrE9mXWqy6npJGRpJ456SzV0W1jtF6cm8G3thavTbSt2\nqw2NsCw6rKFkJA/8ymbTwVOCoMTx8qPBmvlxhicS/U4SjVc1uTL44MaXmMXp\nlud3P0yCUh1yrhECpSBYh4Wz+veByutMexNrdGJKXqKeZyWaWH7f6YWX7o4Y\nAsRLM9nsDcg+lAWdVR0VY/UbxnawTrqqECPt7yUpLz8WfaQjF9yIagVMoiU+\nN/RzLATgX4hYtbD8qFlHZ+oij6sQWCrZqcMhf4H8EIObrOkKdLUn6nsmZnXU\nv7tnPvhK0BmshC2n6D5Gq19PiVxOSV4papGtlCsesQC9tHaUe+6K008EyjXW\nwlgSiFJmG2jD5zva4PeUQIu1JpQOgY65VOOLxusgcmcXvixzttWLYr3bFVvW\nRSbZUHMTm7HnCEEGu7B4XT4laEhFSV/eSKsMi+nIhwYWBqYAb9ipZcGIj9Yn\nhTKLOvc38bscquCfFsVuh0er11qMCT4PEbL5+HbSYPl1LEGT8Z2QerjGrhNg\nXXIh\r\n=R0Qu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.615f86f38.0","@material/base":"5.0.0-canary.615f86f38.0","@material/shape":"5.0.0-canary.615f86f38.0","@material/theme":"5.0.0-canary.615f86f38.0","@material/animation":"5.0.0-canary.615f86f38.0","@material/elevation":"5.0.0-canary.615f86f38.0","@material/feature-targeting":"5.0.0-canary.615f86f38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.615f86f38.0_1578523221984_0.9945736655679147","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/menu-surface","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"0f830206b6d3500a0e91643e10ae9dde51ce3b0e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.1eb032637.0.tgz","fileCount":36,"integrity":"sha512-yymDIahCoxLOJMprJA2maHLusAWVglCHmbYlU9ar0LJfcEQtVjPoTpK5e9IKWlBe1+BU5eFG7k6TI4ZP6Ky2ig==","signatures":[{"sig":"MEUCIQDTTdIap+qj2fNIMepDh4k9zRoKpagwaK1XfQ7cXpovnQIgAkpkerGKYzXzs4xIeJLAamEzqrP1uLlTYyHqEThCeyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl71CRA9TVsSAnZWagAACOAP/j6KvQzh1N7FE9EzLoIB\nVF6bo6YD3R72mZxsGWCA4NhCfnSQNWqvj6o9L/Ncy3QY6a1f3VnGxqgGlr++\nj4dBOD7hIQjOTnpbyyz/xEAQMU5KSUYaCUZ1OlSi1e25692PDsxm5JRaUM2m\nAa03zpsRGelCPgmpqwYPfrL++M2ud5KknpnTcJDBSjzVmoKV5PQ1CLgDbWQr\nbF5SfaaIR+3O7346aqLFM7rQiukynKBizczHsUPiKoWLGCZVnRl73UaBC4TJ\nEgI+lb6RD0MZK2l/yDQ0e2Oy5eborKCIbD6xs+0MHwpNtb0d46R68Y0YVoML\nDLnWjDcGkHz8+Fj11c+UBxMSoG/YbhvlI7N/OHsEAWJ8xETT7R4dJV0tUcgp\ngBALQ/ybLrijesFAl14DKAFT8XGxovGBnayjMsJO5ippsK7acuEj/UUckKPI\nd/NPJPSEwjjuXXZegujTFQnfYN4FiR1zPMGIzxmefru/bqGmltqrPvp5obO7\npAgTXKRT4X2Fpvf5k/8G5Bjaoog6OaWMpqS84lBkLKnc1Zaj/LD1JOMoRX5c\n+K9BFG+xiLJCIBR8IWRTvextX7pMLCxvUjsUOQuHPAqnXjsQbnE2hLuT2Rj7\nVssS4Tg0zoFp/9zqcr4lSB0JZhH3pQpNaQKwGnu5iM7DrsswO5ESb/XzlrtN\n313g\r\n=UXMb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1eb032637.0","@material/base":"5.0.0-canary.1eb032637.0","@material/shape":"5.0.0-canary.1eb032637.0","@material/theme":"5.0.0-canary.1eb032637.0","@material/animation":"5.0.0-canary.1eb032637.0","@material/elevation":"5.0.0-canary.1eb032637.0","@material/feature-targeting":"5.0.0-canary.1eb032637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.1eb032637.0_1578524404608_0.2512126486996562","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/menu-surface","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"7e51b198adb787cd63c9623e5bdfc503d08b3bc8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":36,"integrity":"sha512-QmHbMrZkQQZQ4A5DU6AR8xUuynGeXhr1zHJmKk4T6AEYMMfX2vqZbuqiyZnPvsKTPn8cCg2RLg36GXToFCTNYA==","signatures":[{"sig":"MEUCIQD/z16YQ3ggGMGexlyE+3USlLCwIpfHMe2IYdzfolnCiQIgIgVv/PaCvVcOXXXlQj0CpngEzzhGm+xNs0bCPtDtprM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8rCRA9TVsSAnZWagAA8vkP/ijzTNV8va+RwcSymFRh\nouwn9+hILuVyFDCYSF486lwrVOtJheZBGO0eGB81mkQiAgsHfckrbb8vOpXw\nySfMPaObYturJhJiGyqvAaq8g2j9lt7tkfwiSLMttJnBfktqBP89LtzJUNJT\nY5vfP64465WeF9mQy0jE9BRoEE74lgyhW1Do5DQD81ADBp0kLLN53DYA0G5O\nHSuxZHQsRSQqTXnJXquYvC/vadHBPK3Mw5Cb74r/HVbOQIvDCKL7RGSy8ZIO\nu70I8Z/6iLZmaG7Kq7oiFl+DobD3X3HHThP1nLbDBN4xJ0HWvMrGgbiqtn3F\n8HkTrxA6MrgeqWbaAPF11TVeJiAsdh8ymxYPirOEufG76SWQmwdTyigudhEW\nZQesp/g9NTUmOg5EuBkoJR0v6XNQ5jcWwCYpMhE+8V9owBfunbpUfpquEc8G\nDWBbClK/Mrk8p6LtBfonvus2Owz44enRnK8pZF/uUX+Bk3mTQ7T9mx1rx3Hl\nuECIdjtm1oxM8wGlYetS4YHCNd64qwP9wkJzMIM6p8WInyQhBLZsTyVBcuGc\nvtus2FIRqaIhXbbgBsFtpoWBCibmWnP1HoyxEiUQ8slZhIGZaXJngW5/zVE/\nOz+5G3j4cvHRP09Zt2mPP/k3T4QL3K6c8jMBBVZcGBspLMlSVymT3K9UyERT\nsxVW\r\n=+Rub\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5bc5ebfea.0","@material/base":"5.0.0-canary.5bc5ebfea.0","@material/shape":"5.0.0-canary.5bc5ebfea.0","@material/theme":"5.0.0-canary.5bc5ebfea.0","@material/animation":"5.0.0-canary.5bc5ebfea.0","@material/elevation":"5.0.0-canary.5bc5ebfea.0","@material/feature-targeting":"5.0.0-canary.5bc5ebfea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.5bc5ebfea.0_1578524458927_0.5992995124127312","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/menu-surface","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"737b4010609f052be05368ed98c8c59c5d8a680c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.1112b8def.0.tgz","fileCount":36,"integrity":"sha512-o0GMUV9FC0FgPc6VAerafgFZ3KVb+bfug65MRW42MbKqMHuAiyJoG4bG9V7DC5kcG42ZYjzXpfsvUH4DI7JJ+A==","signatures":[{"sig":"MEUCIGKgudypGOLRZ5bKQ4w7s3JzUTzgXNWs+nrgL9PDpLrDAiEA9HGc9H0LHo+6b1XEKlhQ8qZOtbS4jIYtD3TWSMwxt3M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6TOCRA9TVsSAnZWagAAeHQP/2tDnzLUHADzj3QB1Qv1\n0BCAVZZVdV+vopgI/GxsrTUG0Iif9oHG0/EB4Z1InOongFfahKrU4Um1JgDl\nMpgNliGQdBTICN9rAtkRPbSwuXM5nX3Z+KmnVSbbowXl7y6CltoIdyiZ9bgE\nweRi25DlK3GBqz4ZcwyezyLwmOnKiRDPF8GcP1hYx9yiYwMVErvbXjxuCjlI\nfYkJLNpoitmM3Wj6KdbPaCn138w+xCK3/NiIkZH2qGt75AzRr3UlMRljE1te\nDyrz2iL1LbbZhcVc4iLYdoeXUnbj7JfgAq5CcyvOXnwmJ+5t1rV/3zlHp9Mb\novUO+4gW0eVzCthulpvf0N3QDRXM2ffW1OVdY4EVE05uTI1zDTxtDixpa+OH\n9gAhBIIgNZEm6mG+FhD2y3cxXvls/UWhnlkj0wNCrSm49XeOEj2iQD3oa6U4\nvmZIMecwnQcxTTpiRtWqXfKexNLwAwSEYekKCwIa75W+HyXIa1xDoH/FV/3K\nmPzhHil8+LKAykcYi+Gm3rlKnyc+Li59YG0p64fXzr8G34V5VB4KcUiFwAK1\nL1cpK1AWiGZBsuJXPIOSEyju8nLoBffsNwPzrMLc4VPyLR30PcevIGeDQzwk\nJCLoQ5+7DdjIVE9YmiwAYQNx5nL4iT7Rgrzp4rAyBntbFld2JdiI2Dr6bbE4\noISB\r\n=6yq6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1112b8def.0","@material/base":"5.0.0-canary.1112b8def.0","@material/shape":"5.0.0-canary.1112b8def.0","@material/theme":"5.0.0-canary.1112b8def.0","@material/animation":"5.0.0-canary.1112b8def.0","@material/elevation":"5.0.0-canary.1112b8def.0","@material/feature-targeting":"5.0.0-canary.1112b8def.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.1112b8def.0_1578607822534_0.3090237053378797","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/menu-surface","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b0423efdb7d82e3396ca66cd1d888bdff2390d26","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.aab102017.0.tgz","fileCount":36,"integrity":"sha512-a2bdHnuVGejpQ1LyuAEykxYeP5XPm3/l9EyJaJMT3a215iLofBKrf36SR7gN4omCa97HVzofs3tSwslWpVW0pw==","signatures":[{"sig":"MEUCIHG+sO6WtJlGnZ075pXvzLATTLX1K2FsPlhlgNvd8O0VAiEAsvM9U7dX+U2uMkE8mgcoFI/tOquK9PSQ+HRQR4KmtXU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8FrCRA9TVsSAnZWagAAe/0QAIpPwS97lLjRMkbimSKW\n22noOXg+6s+U9PRkp7N50QXDxjGRYj409BPbw00Rn+GJj8Q1LJppP2KIRwNc\nyObTrSQJHrzwbdOjR0L19YAE0LMth29/ufi3rGt2DsLMllz0Q+MZcideJDL7\nUCvreF4WCMsQZwLMEe9+BPMEdUVir+K/EFEBk14GuD8CAdV2nXI/ykyPu9GA\nU9n/kDbw1wThHLuX/SdjoovwHRLGRZhh4ZEynWBsIeG0mYcG3jPxG7AMBRAW\nK1rj5SI/RN30+H3LQx2dfCO3WOjAGL9ary0VWuj6YK1i4JoKaBYER0FtiIBr\nUquihlvXjCSaGfKvtfo0hX5U1lIZQzxrR9IoYPl41XI5/hR5JK7TksNmJLk7\nS/OP3BHjJm4x81/xlL3+NWHUAbqQQkDjEARWetOG52TJ09i/9h30uHADrbXL\ncLgWWCIf0FBXbq7zZr/WYq7oX6BM2amhScTDZNbyyEhPsWOYKsuVBSa5eFxa\nBShkjaW/FZczAnBz0doU6+g/eLlPJZHOxJnlvjMUZf6Rl6AtsHImpAIEpc/9\npsnNyGdTh6AxmDS0BrE9tdjWB3+PqqZEsQsiXtCjtburFSstKHc4yIc5T5yn\ntIG7xuMjdeu0QTC8D3b7Twd7Li5JIJs8Yv+uHQB+Ecqj5CHyhUx4Hi209yOL\nY7y1\r\n=rITc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.aab102017.0","@material/base":"5.0.0-canary.aab102017.0","@material/shape":"5.0.0-canary.aab102017.0","@material/theme":"5.0.0-canary.aab102017.0","@material/animation":"5.0.0-canary.aab102017.0","@material/elevation":"5.0.0-canary.aab102017.0","@material/feature-targeting":"5.0.0-canary.aab102017.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.aab102017.0_1578615147278_0.8807343653864494","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/menu-surface","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4b54257d3e2450e40d9ac1a93ba73af80eab0107","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.426913342.0.tgz","fileCount":36,"integrity":"sha512-43HV76PgW2dS0b4CfVqNb8x1ifqMIlD8Va8l1SYKEfIwBeUDaqdZBqcg4QOeyYbpVOslsMelGOweNVAHVK1e8Q==","signatures":[{"sig":"MEQCICiL6tcXMpvcjkMdN1weO2M2M4tAr1MZetwuiflFJ1lSAiB0EWeg9oQb1WlahBW6ayPof8op8JxI43YrvU2yvccvKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9byCRA9TVsSAnZWagAAwFcQAI3bJrjW8cJFyTPr/ZYo\nqCAMf6m2UGn4hsSAKJCFwe4Ui/Vq79trOMAMDx81IGVnL1pL5okkk/hPVB1I\nrOcZaYMPpEktILAI34IgmszjvqHy+nD8tZanM8HIITbWOz354x86fQ5TqA9J\nWpe51CNi/mb+U+h0ymXzTbcH85PjVk5L4w0ARaqrXlfBZ1iwNZR83i4b4KGG\nyEB40Ux3aPZCtbE01rLJcaItJ3tdCUHAnLSmqMwu91CG3vKDFNdeU2UvFNcM\nD8YdRVHZt95GE9Vnifz9DEgfyJJPzye6QwoZ0pShoZcakk02603C5Y8v704e\nCpqL+b8UVHFDV5f0ySxxop6waXoW00brZLMZv/SsLSkxuU3Tvje75x/SI6B/\n4D3WQ19fefWSkOPNYB4MXC5cdy6SWMyGFPzZC96Clvr0wF75edSLzubNhqy6\npUArLcxo9VKxr8JjpDqlbd+Kk8S2+6/Rhr0rDesPdmVIdDerigu6IEyG6+4H\nt1IHIjpcRLjUiXe1CY6Gr+lofAPFN+aLuGWzD8IvhDodeDpwAg/UhuzqwB3W\nNbBFoLGS6rHr7miByeqskXw0qGQdKN2h8DBK1kMw9SXjbeEe595KdBs6I0Dd\neQsuU2Adj2JEaeOJTsl/oZblSdsZfpSVae1oK2CHfC5ofWWKrmt+P1dJwoVZ\ncyoz\r\n=oIpk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.426913342.0","@material/base":"5.0.0-canary.426913342.0","@material/shape":"5.0.0-canary.426913342.0","@material/theme":"5.0.0-canary.426913342.0","@material/animation":"5.0.0-canary.426913342.0","@material/elevation":"5.0.0-canary.426913342.0","@material/feature-targeting":"5.0.0-canary.426913342.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.426913342.0_1578620658208_0.23304423737590674","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/menu-surface","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"5a98ecb142831fa6c54c42e442621612d3030fc4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.d4ea9a706.0.tgz","fileCount":36,"integrity":"sha512-tcjTdzVMmV/ZQ0fCqTw5NbOUDFndlCBJ7X5z5Xks2LzevEtxYCJY4GUHsshZnq3FLK5ukzdcp5LINVkvlACNuw==","signatures":[{"sig":"MEYCIQDay973tMCVr4SepdZDy+GqFijMAXPFwzMcgAawQZQZewIhAL5mLysqD1pj6Srv6XD5a0IYiBmBc6eHr/8XDjLy12lx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLOGCRA9TVsSAnZWagAA+OwQAIghUfOqvXrmKm+kSc4Z\n/RNL/89yiKXZfPebwNQH6ukD/4aMsfsgpmQiqvq8TbEzA5GpbqlsxSOqcd5d\n31g+TW0NZkfL78bmv8tnCmzqJikj1LDrHDNaXwIXKYq+66LeQyfvCg7nQwya\nBmvIOyFAC+ClH6648mZ/p1VEbr3fLT7jgtHlRf0LuKuzQC4AZE21db15VAWB\niczXrp4vN07Fsonuv1IMqaZrmGI43IjK5pTnvoIMsNW5azhlGVqa1XGAogKA\nqynYpDzYE8H5IE9CaQPq0ndd7BRBU9L5vKF4Itz7uD/0mMhcP3IANh6CmBX8\nSiaq3cdQo2uRsKt3tdgNojCNirmNt+cL+Rgr5Yt7wi56Cz7/DDLFr09ZrdGF\nReJuF2htTt4uc1IgZtyKGq5SAgmHeUNpWHNsoGXXf8q5wl9dhTSRUsLDrp3V\nVKH9qUm31QFgCo6qJGF1vLpY6mz6LXMwLd3kM+zALCaRpuxoj9V4ggWQq3yo\ng+bHEDYJomtXG+0nc9f4zxLFWYZuvNtfrRPaFSfTEDM0crxomFhTP8KC1sDy\nr5bN3NDhmRyn7p+KIODSq7SfBSVW7WnrkTdwJ40YvTgVowzfbbZajqSD0k5C\n5xPxV5GtTFlpqDeolP9NU0/qmsC1NfUSHiGcWsMfwr+mr1H28PMEuaLw5MYq\nkTfm\r\n=qc0+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d4ea9a706.0","@material/base":"5.0.0-canary.d4ea9a706.0","@material/shape":"5.0.0-canary.d4ea9a706.0","@material/theme":"5.0.0-canary.d4ea9a706.0","@material/animation":"5.0.0-canary.d4ea9a706.0","@material/elevation":"5.0.0-canary.d4ea9a706.0","@material/feature-targeting":"5.0.0-canary.d4ea9a706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.d4ea9a706.0_1578677125995_0.20519393920766538","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/menu-surface","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"addbf4fcd25b047edef0b3ee1f781b4d3a61a1d7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.7d4ee2996.0.tgz","fileCount":36,"integrity":"sha512-Vx4vNsrVn3iHLHYc0fDeGOlBNDpOmE5mpz51Wy82wk0HVTHXhFkaG1jmwu7rWsE/r1+e2E60evgPMXdy4q2m2Q==","signatures":[{"sig":"MEUCIQDZkyrtV2aiKF7H+YwK7sSsg9qTLaOeSgbjBFoPV9pfmQIgUC7XCzvkgadCKExWHTkFFdMDQ5rtvEqcT6g+HI/96jw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLrtCRA9TVsSAnZWagAAtr0P/35EQlTUruE8iMds+SQB\nUMj+N5joxGH8SJAcsZfezLvbPJqeggZYCukVTtizSXUgAM1TG4PLIkmCXSef\n+zpCtubCaN1hHRH7daHbNX0KIQv95mapO/f46EesmdnmmadjJcvlC6TNMsf0\nBECSxcLK1JabELuWfoLhVkIpIE9o2VnulAY5KyR/Y5JT5+b6HZdmx1x/Zy4A\nAGpqKWlnx7yrqZq5O61cbxInVX1N5f5PK8LOz9sFwNQGwzuoI66fNtoAiQ9A\nEUkFM09WLnlyvrCart/HjTsJ9YYYoQuJCA0oOC2dNDzSnR/tNFs6fmmELryw\nJLLzlmt0FP60qLsUnhFtex3YCyiLPOC+1AkWTxeKNYJxvdVyV+LM4JuP0ZPJ\nWxFbTiCbQZVKPxHLwxO89KY8ibY1yKrhhukvDfjj/Y+Zw/+ipPjWCy++N+hp\nlsun/aTFnvfYgYwevqP9X4pHod3m3X6cbDZ6H0cZeCfAGJVjBhv7sbJpLWPu\n1kNUOEG3pIw2FAoceFFAqFuVooQ75BwQij+T+Pq2MJO6a+ztQj9di6HYESoa\nMBwirFylK/OaIS/pi2gyLitfUJWwBW2Do3A9WSRutCWA4PNHM0OqKxuE+PwD\n0hoqrZlXGRth4kDG2ji44BZ6FU1Y7UkVxTnH2LMz3n25hR4E8qQyWnxby1E/\nX3CH\r\n=1CEN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7d4ee2996.0","@material/base":"5.0.0-canary.7d4ee2996.0","@material/shape":"5.0.0-canary.7d4ee2996.0","@material/theme":"5.0.0-canary.7d4ee2996.0","@material/animation":"5.0.0-canary.7d4ee2996.0","@material/elevation":"5.0.0-canary.7d4ee2996.0","@material/feature-targeting":"5.0.0-canary.7d4ee2996.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.7d4ee2996.0_1578679021096_0.3103252339315714","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/menu-surface","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a53149e9577ce5a9cedb3ca119d9c87a0211a0d3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.981ec9b6f.0.tgz","fileCount":36,"integrity":"sha512-Bfx4HuQsJFPDrvOHpNmcFaslonXqItDoX//UECTR14YU81nmN7DYp3cBU8cZROJfeD+VvO5totz5zTbeHlFxQw==","signatures":[{"sig":"MEUCIGAcMnaN55mjsYrAe2yNYfYkT59stUKAZIIB6OMMT199AiEAqSib+sKhhdwtKyqLYuAK9xMMkXJSABHQvb/vGNsGiKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGNBHCRA9TVsSAnZWagAAeFAP/iU4FB0bkcFHfEsYqkIp\nrJIhHUddKzh072UpjsCb+wh4v63jfyIfyaDbN3L0B91zVwkAFqXZIqLKFMld\nY3ohcO64nul5FwZ5mq67MYlnPbBq59/erSj0yYGgDULq1knNSvvF/b1irZaa\nJyguOhvL3qEZH5xfIjK9Mvp7dNoIJLA793x9HaqTai7c2xB4dogWJPnT1BKz\nVv9DWA1ytwkbd5+LpPHRREVYmGIQ36y4/Amzct6pDp8ruY5qEAow2cOWyU0q\nkxsUH+GKaOrpB+k4X+bFFJ92LrlBnAkTtMzj19mIl1YdYHqkIB+7oxFte8zC\nQkLIqvpnSTVt/LjMDOW8L9Qm68LMOcgfIfr0vseKrbgNoB8aHTR767Q19x1e\nnC9/yiAo5AFqUwXHorSHaQ4H3Am2KdcpNGUq8vfNEQpq1b4bY6hiVWz2VLsk\nSG9SqdkoeEWnAB2S+7yjTOUHKzRBwF3hHRWV2HegcFpdkKa5LlEjiGaC+sNI\nKF9qrivZJoK/+URQq20E1HOdz3QgctOxmdG1y9MUbLiiYquscn/Idj2JT1Fr\nJnGPHqX6smBfmlxuLe/66RweFWgUMXUGOo78fX33VShIMUvJeFSFxtErBDcR\n7YkvNVhIYLbx5rQYcTzrSLtDiUIx5XroEbYKuKt2QVUzmXDgZs6wGxA7JlkM\nu7Sz\r\n=iCX9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.981ec9b6f.0","@material/base":"5.0.0-canary.981ec9b6f.0","@material/shape":"5.0.0-canary.981ec9b6f.0","@material/theme":"5.0.0-canary.981ec9b6f.0","@material/animation":"5.0.0-canary.981ec9b6f.0","@material/elevation":"5.0.0-canary.981ec9b6f.0","@material/feature-targeting":"5.0.0-canary.981ec9b6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.981ec9b6f.0_1578684486465_0.5913723253237737","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/menu-surface","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2810d4afd4ce896d93c4f489ebddbec0266da251","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.737da83fc.0.tgz","fileCount":36,"integrity":"sha512-P6YcNOGBpEtGDqNkLIapZtS2lDd6R0hyR0XJ+Yd6r/TW490p1t0w1CoWqXSBbh6x6lapi2ZeVugmQbcfeNXIxA==","signatures":[{"sig":"MEUCIDgIuU/+lYO992Hk4X1FH6uaEjnpOkR7js0Y6iYK2eNoAiEAoefgCrC6WcxoAn7onJpC8ODAxqYpm3YfgHqMz7sy67o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOpACRA9TVsSAnZWagAAmH8P/2/wPV59ck222dFIYl62\nYTzbSU+EIWyIwwJkeBzyd7n6qo41NK49ccHHoeS3RS/ljW4GhYYlpX8Q53RV\nxK7jtMEP63ykN2OthRnUSXjOv+6UzteO+NN2lBXG0k1Rg89+3vpYeAnDtibH\ne2ZthMoaUjeLcwgVrOSonPdFE6azo7Fn+u1rDdC0I58W3W4iM1fcvvAxeWx4\njF0pdxCnzbPW3sgy7WaORpZ+eiUov1mAiVOfh7v3Fx8VfQEy3UDCidhLyiPM\nPY0kJowPTpQYkFYnDM/7IqjQtGA0JztIKh1zLljvZRxsCl/ZPLNOwya7Asuz\nO0zWDlom8d0CCCp1HlkJRE41AateQX2zjY2gGkUtd7USQpnzEQSM6PN4Z/fA\niXdBMgVmjP5mI+woeBlAe5v/zlwgqqK1WeB7rMlNii21OSZlgsaNUfMyv4tt\njjUsCvyakqv7BJRoBPVtQRwoFNwESVAe6+6hWxcXN28P1qRaFq4xHXdL6lNX\nutve3G8qF7KW0P0ze1POtbxWGnX57BU30mz8raxZKvU/ifpLlTJPNNKAf5Xa\noq5MyBoQ7+thnG/WP5x6HSEHXquikBgZtRtQNcZIKNfw207fvUlVSvowUdxd\n3a7+GEgkUBPnomRY9YfrCL52//vpQQ/fN6QPbcjKiDjjBxlVDmBxvB9PY+dp\n7/SI\r\n=HjKt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.737da83fc.0","@material/base":"5.0.0-canary.737da83fc.0","@material/shape":"5.0.0-canary.737da83fc.0","@material/theme":"5.0.0-canary.737da83fc.0","@material/animation":"5.0.0-canary.737da83fc.0","@material/elevation":"5.0.0-canary.737da83fc.0","@material/feature-targeting":"5.0.0-canary.737da83fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.737da83fc.0_1578691136239_0.10133925040432179","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/menu-surface","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a486a8eb66bfefa3325be18d9a907399cdb1483c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.aca8e6c18.0.tgz","fileCount":36,"integrity":"sha512-mJiaG3avzx/TuaRTOjGNDKqfOssnu2ojaQGgCyql4472O9WkFYCYTwm+MvPYFqD1llpwS+NoaedGgdCO4faLwA==","signatures":[{"sig":"MEUCIQDMfhvU9tqFuh0GETXwgFpjWxSKOHnd1ZDY/WMOhbswEwIgNlfg1Dh+hB7iMgjbqxNcMkpLEiLI3tB7x1BlIrR2SR8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMXGCRA9TVsSAnZWagAAB3cQAI6+otWUdOw31xxEt7MR\n74GyQnhFwrC38Ya0qbto27IAH+APFM5EF17zdHkaBWqzQ0kCPOQvEeQWkEUn\nm2zdpJ2vjI3nqdlwHnd7D7p7JoTQrQjE4cA7s6Uo/XCKSjQnM/92f94g62ZV\nXMY/Ojul/VkN1MdYGtsjqcD2DAgdh5+uusjizTwSNQlS4aabhy4zFtUZ4/w6\nnhwOFIT2iQGP7H6IgPfIMy/MvP7GiuQAjLBEf9NaMP6eNWTKEexRmbYyO0N0\nw8X46bpXf9Vxw/6MDZi9F2fLUYeTH0NtqDTuXeboZtAlzr9wdYo5pMqk/e62\nzoDv68tpHdP6/LqddJ/FGiSsY8Bkh7alO5ZZ50pcT4prTVpZISi5kdbQMaqN\nY+MHUMCUvsj5R5l0cWWTUbQLN/6I62GCRcB9aFLdmOvOgfVps8083qSrOZSN\nYkMITKaAeDbFF7ldgHyYKb3HytGg+UKcoxA6KA+i5iOFpGaVYAl8MERcI4Jl\nYQN+QMvVQTq869X53iPxzuJXTxAeo6ahcQ4x87w3W5N/vUVg3bKjfru53fZh\n4n5flJ3ileyk94u0VhxJGxf19fPxI7U6YAD5rJg77uOvX+yGghecSt1OLKjr\nIJ3JcMdQiXbLrJbfeeILJtPB1VQNn2BUszrYQbe1HplgJWHfyAhMeUHhhLRV\niqwu\r\n=doLq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.aca8e6c18.0","@material/base":"5.0.0-canary.aca8e6c18.0","@material/shape":"5.0.0-canary.aca8e6c18.0","@material/theme":"5.0.0-canary.aca8e6c18.0","@material/animation":"5.0.0-canary.aca8e6c18.0","@material/elevation":"5.0.0-canary.aca8e6c18.0","@material/feature-targeting":"5.0.0-canary.aca8e6c18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.aca8e6c18.0_1578943941730_0.8032181837528605","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/menu-surface","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"867a01dde45b97b33ec8aaafce1a8426a7f836ac","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.c38d84e21.0.tgz","fileCount":36,"integrity":"sha512-8Egi68J2m7WuN7/OP86XH64fdTLee9NvHhktMZeYUgV8XK8Q6KTS+8REMz9Tgn//wABuW5g3zU45D5iKCiltnQ==","signatures":[{"sig":"MEQCIBcRNvSfSuEUNYSssIotNwBjmKgMQhdp9iLEb0D4KGoBAiA8KRDGV42NENSaIRDk1lC/j0RaoyPU1uiZ8GsgIQ6iGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOuUCRA9TVsSAnZWagAAhQYP/A89IbWVUbsFdJ14uDNJ\nPa1ZwSGiSgmlTI+Th9DBRPxJYstn5sbaA/KRt69ztyv/2bpOZ6cwTAs4Zfoq\nuNgLhd2k/AznmZ5jKa7nbFpy95w8MseqPRchk7YCZKEdbsJ9tdZ1pDJ0fw8k\nAEWMmV0/4rn1izI1JD/5C4rZk0v+CfLh+rlcqcHGCx9EjHpRd/NKB5/IT41l\nh7I57ixBnJaDHrZoaKB+X+XgL4LuzCOwt1CzstqLawx+1WeSn40H5XCj58C+\ncB06l6p8nsTOtCJu2wHO1qI0Uj8rAUmL/fkrJt02N0/YCFAWwJFq+dG/tfUK\niW66RJANWHCJyWx1SlUPPFB1G1dzv3MCNZcdj3ulARlR7iDNPbmW4fF24+35\nQOoIH7fStRtRM/uUPmbpTq6q7hDc6nIXPzJjnmAp/1KI8CAlyGOavxKlzBH2\ntP2hCr7XvAXtBgb7OWomsrmIHy7BX0vE1sB6qDmP9yCpjtXcMpBsYX849ux/\nl0QdcVENWzhkuf6SHFopN+ar+qjtI1SlOa2BFVLo+p9sDd5DQJ1FyPkaMW8V\nnmwmOIsYcaIHgqBTcX4396daRd+52Ixztu+UGqcO8Fp08NFuGo4edLRjb8FD\nPk8m2HIwdQt5MlEbdp1SH9j0+sMhXJdyBruyMDA8VdeTyaQlQIxxX+fM7VS8\n1uiy\r\n=wFg6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c38d84e21.0","@material/base":"5.0.0-canary.c38d84e21.0","@material/shape":"5.0.0-canary.c38d84e21.0","@material/theme":"5.0.0-canary.c38d84e21.0","@material/animation":"5.0.0-canary.c38d84e21.0","@material/elevation":"5.0.0-canary.c38d84e21.0","@material/feature-targeting":"5.0.0-canary.c38d84e21.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.c38d84e21.0_1578953620554_0.7475172286115985","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/menu-surface","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"875e0c4458477d8917bdffdc197c8a40519872b0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.a4db5fbad.0.tgz","fileCount":36,"integrity":"sha512-8/5yeKiZ9t1yT78GIju7zd5RjBpSEYbEfsBs2XkJvxuXO4fKUjgHTSJvCxiJ+1OwWyFCZ8JuzF5IeR+wUh3b5A==","signatures":[{"sig":"MEUCIQCIVGxDLGfZq40XU3weEFYzsXhd+3WNDQ1OMYhcMOqntwIgBHSfEWflOeD/5ugdSFBqpubJQP03Ivc2YGs+TSt0lBQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSRACRA9TVsSAnZWagAA+ykP/i5uxYHKItWX+V+T/YJ0\nf3msvCUMfugtEA9WoXpvnli7khTvbIRI4B33PpfsEGqAvVNJZYEkuxaIgBjj\nkb8ApJu/Dmqmu4WtLEMs9iiyclLDy0Ee4nnqwoOXzbvE08yd2C1RpSm1WGza\nZ61MtMwNTz+55NG5tYP2YVOybANPN3zg/09TtAIkTDpa+SU3Ee7x8PtXVNQl\nM+GtPcXduVzwS+q5KAYufVedWZIrNORIRcumCIIyXUoKmInaUe0voqsggGaO\n+cAZft5pfOSgJeOGtjH9bmKjwy3udVk1fDxBO0H15WaP886OYXcPTbIOoliP\nQFlGVsoNmq6PlqE1Zk0GXeyLWruj0jy/tTa7cvPBj1vo2OY5Mv5ep2UO9fjV\nx/ze1MLThVFYwlErOqQBtUscGFaAg9L47gvRHqZ17IKftfKnwtqOF3/0LNgx\nCzvDvLLvJo/+ssyMvIVJPFOHrXiUy/Y65ZgO07rE/7dVd4wlJ+WOFhPhhG1H\nwE1TVI7ytZTHxMyS2z6jhIUNR7yAVTgwpD4/m2KyZl107pe9C2DQEyugb+0s\nCb+1DS3kMeYlZdu46SkE8Mzd0VEF32WRyx2KpVZitBbFwsb/IOof7LRT64yi\naFR2OMNFJmjtcn66cATibkzbiz8/mmMFoXZ9AL/9d/PTNCPh1aYA9SyNlYWX\nI5yV\r\n=/iXz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a4db5fbad.0","@material/base":"5.0.0-canary.a4db5fbad.0","@material/shape":"5.0.0-canary.a4db5fbad.0","@material/theme":"5.0.0-canary.a4db5fbad.0","@material/animation":"5.0.0-canary.a4db5fbad.0","@material/elevation":"5.0.0-canary.a4db5fbad.0","@material/feature-targeting":"5.0.0-canary.a4db5fbad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.a4db5fbad.0_1578968128294_0.635847062745847","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/menu-surface","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a3ddd22c1df8400d2cca2da62e8bc50f14253245","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.faa9af310.0.tgz","fileCount":39,"integrity":"sha512-trpe8krWpsgnIZZTyaPeCrZxG7kXxiZPOrcK9sqDKfXyhQPOUkDDNQPZ1gthAESO9VDax08AiLDS7peYy+XuQw==","signatures":[{"sig":"MEQCIEFhcG74/f6/uJ+uGtQphZqVDpsN0ViTwKfdg/pymMIDAiBOMGjz+M1DWSrR5H8FMwhCK9cMRorzRfQ2baP9V8ur3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfHmCRA9TVsSAnZWagAAIqYP/REMaKwnt++hZd5TvKqR\nUUBQclRtQ4BqA6PH+tT5Hyn2d1pu/1uGPoFQwLPYM8fQDwd/3V6m4+BOY1fL\nrUklVyH3ppOmwvImZGTBsvYwRCMlA65d3Bo/qDnNXtjBmchfY3ZscS0KDPIe\ng5SLCyfvwG+LW/wMKwsSlAzHQiQxhyOj6r5GVyviu3Ob7SiojnkdqE2VJCTS\nJzLRo9dv6egJeqzvqIpSvGLeHSDquYyYP+maKPQIGA4aX9wW0nIqzFqaGIcQ\nnc247qFqIMyCPBlRjqclq8VsmEMxILMGmulewjsuvaqnQvrlI4VJ1XC2XpiR\nDt2M4QhUhtVhVDCQsyA/BqlWkP910lISAJVYBTxfQaw2DsXHw3pZMenJTvJC\ngHPzPxhq2F9JXyRgHv/IN1W+1uLBAwSKYCNvY3AowRio7auFAd+RiJrl+b3X\nZSNmM56+iHH949yB+hN8NB0EIoQKGW7bufP7D4OX2N+YsYl5eK/bvhd8Lcoa\n4JbHbZqKwOF1nU/wXX1slHEXEiZgz2W8NIMlsF48zRUzzgcQ3VJtq4QCgxrD\n/d1wZFj25+Q79pW7V7GgI/jsinrn0jHtm4vGDG0gK8SFnMEPa2O+vMnFuCSO\nwoeJ7MK850eLs/HTJXy0WSsh5UsRfjgrPSXUICr+44get9DjbcHowX9ABc6M\nSgLA\r\n=VFDZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.faa9af310.0","@material/base":"5.0.0-canary.faa9af310.0","@material/shape":"5.0.0-canary.faa9af310.0","@material/theme":"5.0.0-canary.faa9af310.0","@material/animation":"5.0.0-canary.faa9af310.0","@material/elevation":"5.0.0-canary.faa9af310.0","@material/feature-targeting":"5.0.0-canary.faa9af310.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.faa9af310.0_1579020774154_0.012773120112896885","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/menu-surface","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"518090ce61a08c6a252ba5956afeb6eb2c54d1dd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.60354c577.0.tgz","fileCount":39,"integrity":"sha512-K3a8xURq3lfoHSSNKGK34yzK1gjcbTzG3pxDUnxJ77l1Br2eTdFJeqqSEdIWslgjj0WhwG1ojs/PO8DcxyTtWA==","signatures":[{"sig":"MEUCIGAhkQVOnk5u2g8DUa4P+SXm9lEZt/zSjqv2Xx5tS7gCAiEA9w1X2Q/+rky+w26885tcFaEOUx/v2ioVgOWb//s/z3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkSrCRA9TVsSAnZWagAAX4oP/RdVAKYbiMhUliili0L5\nyLgewg/dk8Xo1y6ep3H1RSxZEPPWBhifAZ3lZbRjJ9B5XnjXW5HrYzpq047K\nlrGHTFI4xp3qDOiMGagvhhBdp/XAhAhsTm6n8XtzHNWr39G8xcI6UnkbSa6Z\nzxAp66p/3dZvbRneGd3EcRc1yW0PV6KNskpBZDY4jmI49diW2KIzqRXSwqlP\ncXZg36MOPbDUC7e8UEu2GKV4pANoHPeQJCeKgcs9Xvb5cqucCo6tm9vHipts\nTAs//cDVmCyvi1Tep4smwkQDlCTiHVJ3nAb7tJjYXpJFWUGzJdKA+R96TPLU\nxFfCLhs5fBXwIJyIXJG9xEpki0ASU7oR7Mx6S8hF6TJri7l1LA0YMIFWUIDQ\n6kaoeckdSJgVb/0YARBMD0CAD3bMicSuKnSLO94yoS1opCXzi/2crihJGa6V\nGSGChJQ7Z1Kf8GzophT/b/KeEvyVDVvISV8lZU7gOkYLvI4kJAbdrd+OCruU\nWyhqcHZHBSu98z3cb+wL5HKxjAB/IdEOBpXjnUGPGf1oe95nFmIKoJi4NGal\nNPLRvDrPol6HwXRHA+XoJyl5n1E4iQ2TFvVNGHeA/+Axcn3q/9SgugwZvNQj\norLrb6BUhBS/WffSOaUftAAlOZiI9P3ENAyB5EnCbF9G4QGNV2rA0iB/B3Sb\nK3n1\r\n=+Xk7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.60354c577.0","@material/base":"5.0.0-canary.60354c577.0","@material/shape":"5.0.0-canary.60354c577.0","@material/theme":"5.0.0-canary.60354c577.0","@material/animation":"5.0.0-canary.60354c577.0","@material/elevation":"5.0.0-canary.60354c577.0","@material/feature-targeting":"5.0.0-canary.60354c577.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.60354c577.0_1579041962736_0.641848234861973","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/menu-surface","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6c380a9d94f070b12be0a7760df04e22fc7cbbfc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.d07c78daa.0.tgz","fileCount":39,"integrity":"sha512-eq0mac9UON6hkwlO7I/XpNno3nue25nRy37a5fIKz/4/KQevOKbYekJo8uzx9Xeh9YdTISLQ3uRb+GUENpS41w==","signatures":[{"sig":"MEUCIQCNvP3nm+ZofjifVNsaqOI6cDVr0RPmqfsp5M/ChqypBQIgVjRvdVreKI2YpDXDdeO5wOL6XGNR3Geiw9IP3IWBAoY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlEKCRA9TVsSAnZWagAAGLAQAIdiA4+rHTf8Z0aJXTOy\nfSb0SNaGOlLSvKnM4ITd1RmsVlg0h6tbEcBBjYDX409QTfElJQSPRdXUgkbX\nms8WD1lhXNkRokZ3jyK/5BRUvP1f1I4i3VIAxX2lMA//DATaPEp4E6XnQ3N3\nwEJtC8Dxm0UYF0xDEFN35C5SEwmoNUMOSuRJ3aKtu8cmX0hCxIUdvn/yeS7M\nUeKkXiN4iVdZ4eXgy5HlGc9QtuUfSIB9ZCgCLE/SO12pJsZBzqj+VEmiNU7b\nZ7R8oNyN05PcUj90+8JOT3AmGRkd7DZThlVt7xZwyYU7uvd3JM6YTNkBDjWE\nag47XSprpa2pc8JTGO4/fFVBozCujl7ybard9Fcb86AE2+re+EmeD/7mVBXW\nzxCr+QqeUC3S4IbajWdobryVBvVMynKLgKhuJ+/QkhBKHH0kCpF2XaWuC8Nu\nYR/usqnCbT43e6VdoLGMI+EX6guBPPDHNvd/iEgk+3/qZ3ZfWVWjho9wXXY5\n4hacxSqwDCVhkY0rSzKtjrnA4gcLzrHJfIY/a5tMtwfNPPdUYO7vNm5fJm/x\nW+FJTy0OMrkhyftIJdeh+BGWhRFcw6qiA0u1pANGqdq8/ahmdwxMkGjZll8r\nURYynfVicrU2tw9PgiY0JDyANX8JaaTgNL0Tp1wRfEnY0tkm/M6bnYrviJft\n0IPl\r\n=no7P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d07c78daa.0","@material/base":"5.0.0-canary.d07c78daa.0","@material/shape":"5.0.0-canary.d07c78daa.0","@material/theme":"5.0.0-canary.d07c78daa.0","@material/animation":"5.0.0-canary.d07c78daa.0","@material/elevation":"5.0.0-canary.d07c78daa.0","@material/feature-targeting":"5.0.0-canary.d07c78daa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.d07c78daa.0_1579045130646_0.4864315088675999","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/menu-surface","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"aed826c4ee763fa2296549c1db29f3ea9facb06c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":39,"integrity":"sha512-gWwxG8dhisk8qHyp3i4GSj+WV0I0QBb7Fn4Uv+YWv8yaqFFZSlezJO5IKHmU35Vg9mUcmOZm5/7vwoIMo49ZNg==","signatures":[{"sig":"MEUCIQDxGXvONJcshY7kDS7c+5sIcaudsRmwWWroVMFst9MDmAIgBKdq01gLsaiSudt+x2eG1+CU0r8hnpGv9f1nFTExA/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm4rCRA9TVsSAnZWagAAAUQP/1K87UG4ATR57ddqoXq/\n0XwZrlxyjyPuUQo+1KLFebfv9EI0Hr34549jh5q9Dw93c5+crOp/hjuiisdM\n4RtL9XnZl8myf089e13QFQ/7mwI4xhsh3vk37kR47/ZTXRTyg2+iZxJ4WKG8\nFNvIkYJuf490uu4afa0xXkWdowm08Vhs9n7OBuY2m04T5tGLDH1NfhXM7jyu\nuV4YG7Vn9bNdv0LnAEOMH0JMR7GoJAP8P9+NgrkpmazSOQ6KqUx+jmL2437h\nm2s8/G5AmP2ofy4KFYzyoTaCl4s5v3auiJsFfwH7IDsxwP6b7jvfm/dfZnu1\niRfk96Iurx/kRxmOBC+nnRmhz4OMwEdZgWTmV4JdEUTUjwFHBU+2Nkhy1PFf\ndsudJXMAoklDQAni1jzHNpHSlcc0qH738ZmsEz0Nay/iO64UXGvbkCciE6mf\nOMStLYWDoljXQ4zKMT27Z7JLJOLeplXmwSihJM50RcBvIlEAcf0mXlL0YzMf\ncPdAxRybrXhRm2eiJcKyGZOeam033CLrSo1ab0qUM4LeyADHI6jDTkO00i75\nyZ/GUVo5pm2bQbAQtd4MubMv70pysDr8Sht3WKz+13ZIiAen1kDn0G/BsxYL\nVBSDLYhfgr0fnFbhCYOfKLK/vSfioK3FEV2ZatifwY43giuZZy2cAzv+FBmm\nA92R\r\n=d6Ze\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.8ddd5c6dc.0","@material/base":"5.0.0-canary.8ddd5c6dc.0","@material/shape":"5.0.0-canary.8ddd5c6dc.0","@material/theme":"5.0.0-canary.8ddd5c6dc.0","@material/animation":"5.0.0-canary.8ddd5c6dc.0","@material/elevation":"5.0.0-canary.8ddd5c6dc.0","@material/feature-targeting":"5.0.0-canary.8ddd5c6dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.8ddd5c6dc.0_1579052586652_0.09907659259279944","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/menu-surface","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"3bff5865b6a070f648c12db0fdf5b71a913b2ebb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.a9511d870.0.tgz","fileCount":39,"integrity":"sha512-OQO34FkBNbxELYtZHKpLEy1hFC0/wt5JcYXSDmpICmdS4K9u23zbdYEQ+JX26A7WiO88L2mJ4jyL/DrDCLSLtw==","signatures":[{"sig":"MEQCIAEqkPFDfu6o+krQyCBld4f9OU0yr7eEOyOEw1O/0QhIAiBw+RcnxelKuqq56uJiT8pXQjrsDz9UlaDjJyJHr28dNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2OsCRA9TVsSAnZWagAA0xwP/3ri/oVaoKvxCP257ayN\n29iBylNKMnPD6OrVSykXfWLzKW0D+4X/AZs4yRk4Zm8SXwCrpPdnjgpbTFYm\nSuamzMKhNs5t4mJXOue8Jl+mUx7KaDT2qg9GZDURD2dyeW5pLvdIqbWxg1PV\njr0YnCcAMOol8/Hei8FpyMjhIiB/hbVk/TAbB6KpYhMtTXs05xoc+GOeX+YD\nP5wiwBD43qydnrhvg8byUxkncxaZgRK4czCCRAreCGBKBKdSsGS5s8TsPr4q\nXG3eC0S0I+4liyBJ37fVjVx7UcW9yw53mUSPt1ya/MAn7mhl1LhJpaL6jGpi\nho8M57tZFVLBnFve97qtAxc0XI3ZmSLfKBf4k69iE3yx0ar9VoWLPHrN3hqQ\nDzrHx2dALiiSO62mBECqOZomf2+PO0+O/y7/OJwhVV181dA9YBN4Z9MGeEBZ\nau14GssUQLZ9byqog2gpPBpMps8zDGetgNBRci5wgHw1QXRByuXiEHnaZ9L4\nSFZIyOr7KfruKDwqvxKv6/Nh/6jTXMVL5TE6NwfgrA5Ww8BD9efwjcMz6GBP\nAwlybTca5SvYlFF41VOhdk6rfrO3Xk+2JgWBbPM13ppIczd/EEB2FmjtFch9\nBuWzohcV31Ox5ci6t/dtrHRWF0DyIc9plRPWGIPJikY9SxiyoUfR5sSqLXOv\nTakZ\r\n=sWHf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a9511d870.0","@material/base":"5.0.0-canary.a9511d870.0","@material/shape":"5.0.0-canary.a9511d870.0","@material/theme":"5.0.0-canary.a9511d870.0","@material/animation":"5.0.0-canary.a9511d870.0","@material/elevation":"5.0.0-canary.a9511d870.0","@material/feature-targeting":"5.0.0-canary.a9511d870.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.a9511d870.0_1579115435607_0.2138552474253046","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/menu-surface","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"f7bcd3d2da0f22a6ef4fdd5155b07863b3b1a9cd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.7c8583c4c.0.tgz","fileCount":39,"integrity":"sha512-t9f43x/oLVmFvPxsyL+SOQJNK6KWTyvTHDmMawuLm5gT9xsKTtk6PRHRPlABPHIwXAKxKxL7BklkHiTJjXQnvw==","signatures":[{"sig":"MEYCIQCde6mMJXpfiHaOynJ4waS76Mk1ZKWCapKBt6w0hTcIDQIhAId6eTZLw+14Z8O84iFhJ4lnVFVn5WhFx8mo7hz0VqRN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5ahCRA9TVsSAnZWagAAc7AP/RXnfNxhedC6a7fOlDEN\n3n6tT3GudO8HwE6p7KFkdBuf1PouyAEvOIk7fNYRl7l2/VBbR/1Q+3dHdtUt\nGR8CNjbDzfoszu26i6VFBHEnPnOQ8vDFrGKCuzw+cDhCfKzgH/vfChBCY26E\nvR2R5L1/6kOIc1gnccKfG0J8smaHEEhA/TtDHjgmQSvMoW4smAG9n/5iWxIg\nD7OgzHvS+bhKxl1gCLy3FWuxnSOl7IPDKIbIuPcR9E+AkVflECuz0r5Dm6d0\nAPTMkjj/mVIQgqeJNvLNyUXb40xcC40i/dOhf7+AbbmJsy6bGFRwswvt8F1D\nuFZ3uewbNtNtAvM0Db9M3FkjCvT+qa0JZA3qshYBBKFceNNd0B8Sjgzo3ZcC\nzpEkoDyNGB7HGiLZBgUrrtH04TatDGaPyTcs9GHnv+mKClUKvKxrQEIwbGxD\nwFzzFCLoQS6UyBC6TFy8cOGMTHg6YMdqVq9SzG/kwczlR0WnaXy/GV90P0PT\nqORPSfAboVjfTX6u0NiR6nENi/TkztIbnnoe/a+wSbusSU0d+7/ZMH74CYTk\nFHmZR7OdE/vVOUvtDc0A36DcYy2cBSGbp8IpWjCeW2Ucaa1jVBVYZSRT1SnJ\nzQIRTupOrFIr1WyqyQAU338lKLc7u9z9DoaIVYDAqDc+QBaiAJFYg4Jh9/eD\ny9fz\r\n=Bbiw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7c8583c4c.0","@material/base":"5.0.0-canary.7c8583c4c.0","@material/shape":"5.0.0-canary.7c8583c4c.0","@material/theme":"5.0.0-canary.7c8583c4c.0","@material/animation":"5.0.0-canary.7c8583c4c.0","@material/elevation":"5.0.0-canary.7c8583c4c.0","@material/feature-targeting":"5.0.0-canary.7c8583c4c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.7c8583c4c.0_1579128480693_0.27264392583393415","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/menu-surface","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"0498d7db7472cc74ff87836d438a90ed80ef531e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.5d4b82bac.0.tgz","fileCount":39,"integrity":"sha512-81urauWoZK+lRTeAG0SLPUcVYb+2ybdmkc29vkmmhrD5jeU2k5DDyAQlBAhxQ/yv0DMSNQEa9gafsNUHCwnCnA==","signatures":[{"sig":"MEUCIQC9yYsvNXKKoiiTByCYqcLkNNTQdR9UWnYgU1HABvIPLAIgSpe27kD86Wq21Sd9hU9PNHgWChrpbwVkdeKiSP47RLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5a7CRA9TVsSAnZWagAAyskP/1S0EXOtDU3kfygZmxuA\nfRS69XrwtDy/bku4iXjSR+JdjTRLufKTggCNEhoPkzkM/20ft0Tj0vFnWuSu\n3lIUfdZ4bUqJ4updigfjR4f2K6LuJm9CyoYHpfxTdZ7CAZQ8oN2a35i2DENR\nLyCtTcTIjvnbzVFt9PAXcZINb7D0uN7Ou5nQzpS0+I50qIOD15dMA9CQKhnx\nlZV2Kt7Q9YAJPq42Cu6Mje1P50NlJVo9CKybGITomU578lNPMcGfRq+TDK31\nAziRTC7GPbobE4FSD/qwGvvyl0pg7gEX6L3QDN497LSbGNMLyyb4ndYiwuxa\nE8LRNmCFBZRbHVK7sfSOrRa3PdmioelY3mEitOhLP3/8Z9Xnk18Axgx1O+H5\n9PXhahr5Y5rLK4h+4G2I0+YOF0CErfM07up5J1+0TeDA8w+4dASyn0ljYnQI\nry1t0ziPWxdx11gHq5xj9KPDLs6DMC+QK3RDVQ9l4WpqRzQfFC853SuShANT\nQcL60yz3TYGXQkLNXA33tem3uhclAe3b9v6L5NCMWjbXnZQUya/PC02bMkSo\nvyBYb+PwqEP0yU02xCF/0g35QY6wiIFlaLfE5El8ypEhkoQ79wcbDzWfUdze\nqFPUGxZK2MM8P8TKHWvRSwNN+IAA8cJtsgHvQ0zhf8yfzaBWMWJSg3KVxH0j\n+FQi\r\n=gHxs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5d4b82bac.0","@material/base":"5.0.0-canary.5d4b82bac.0","@material/shape":"5.0.0-canary.5d4b82bac.0","@material/theme":"5.0.0-canary.5d4b82bac.0","@material/animation":"5.0.0-canary.5d4b82bac.0","@material/elevation":"5.0.0-canary.5d4b82bac.0","@material/feature-targeting":"5.0.0-canary.5d4b82bac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.5d4b82bac.0_1579128507187_0.587193936542521","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/menu-surface","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"f9eb2cab263abc0d26d5cb78b8345ad8e0489b13","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.57d0186e4.0.tgz","fileCount":39,"integrity":"sha512-aFIeqATFR/a8Z0sjlDVuple94GnDFdPLI7azkZmoOljdH3xKaSC8nHvpbpHgC3OobyFhZrk/djkklCNolz9fvA==","signatures":[{"sig":"MEQCIC5qqLi1c31WaWmXhXeJPaMlTk4hQlxoMF4YkbKSM13tAiAz/Omic4CmfGRzWRHysxH0xxQEWTaMAjdu5Q9mgna/2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKjCCRA9TVsSAnZWagAAlJ4P/RJijRIX0aXehfwF3WAd\nW52lP2LEbjoAZpcl1vdgZS+yydsMGMZbOmC5MN9Zzw1VNOqhmOabgaNIAT7m\nnxrRIz3W8Bwg/DKLyOWY8JLAfByM7hVzp5IapuoiLxIFt0Yd+0H500ShuIRJ\n+WrkN191q72BaUQk9wY1kV0MPbF3p9sh6bTRt6hb8sQiKtCVEktEvLWWfznH\nveXfOZIYG8qulWQ8BJ7DXmXGdbktyuqw49GidZu+aye07j89oDquQa7VtTCq\ngyyac2pJ//xQvY3iizW6ZUprvlGFZp2KatA5PeIQZn29guF/ucQiV4bagOMi\nUeaMkz4Ifi22hyvL8SW6L+Y0gyZZHzOtrjnBqfot9ROM7WZLUiKbrABm0IbN\najcOcbkWrnbG2FTkrf2vAwWelaUzyjDi885U540C1HA1i6v8WGfajyhxpWNL\n1KE6Yhcr5tHW1xDcfNk5fIQwBlCDgSDAvGa+kD05noCbmwgo3jagXcNUWLsJ\n973YVikZeKiBakSe5258ZCpi87W9RSEcR32PFTXUNMp9nxllhWN7SmxU7BEW\ntyQ+f4PB2L/lSymFC8+gfJ/3/FBJJCDCYxvfB115d9RZvI/6OMouzDrFkDtn\n/qUujPDW8oqG6PCUGc+5HiXQC4XsygPJ9vtzgW4toGbFVopL1xqREqiH6Zr0\nJVPh\r\n=AzSs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.57d0186e4.0","@material/base":"5.0.0-canary.57d0186e4.0","@material/shape":"5.0.0-canary.57d0186e4.0","@material/theme":"5.0.0-canary.57d0186e4.0","@material/animation":"5.0.0-canary.57d0186e4.0","@material/elevation":"5.0.0-canary.57d0186e4.0","@material/feature-targeting":"5.0.0-canary.57d0186e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.57d0186e4.0_1579198657674_0.5193351086741769","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/menu-surface","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"fc962ca082baebb323717566fdfe53a919e193dd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.071a6ab70.0.tgz","fileCount":39,"integrity":"sha512-iE3SbZQr0BV5+3YzDYqWl7gA0fGKUfvZd/cmr/Pw7MLIJKLroVse0yx3jVTHEyUJhF7016JgUmOf6xVpdJFWzw==","signatures":[{"sig":"MEYCIQCJXSxCXA/RLzinah1YscMTTsTCJlktDVqV2VopsFpSCwIhAOlqdmREeXL6rIUFnY/osiDxviQnRVu0WRPA8CDE/zXl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKpBCRA9TVsSAnZWagAAcRAP/0Z/TIp3g7XQKS9oO2aB\neCzNRbphBBt16gyo7HXytTLyBaSxmWYySXuR/E4R5SdfQESFMoMNMSL4lR0p\niWOH6NkVOKkO8rMsq9mFcMcuLq9WPP+Fd2QH6PSU86xvvVdZqfAerYzidgiI\nKqm9G5MmGqsKsRMblE/tUsCK+7ouuSmDl5UBJ9uISsy+8rk3JibeAK/DMGQ2\nmXhqCjLAm+f5y2+oT4EXIQCQxWqMtm7ghRIhM/DiMp2XXQRgBJJdDCPdP5Jt\nFWTgIe5fVWB7vTQ/iYPEwfSS3pDQAKZdOZd2WcBYtXX4c0gTxoH0qXkvAWjn\nmOxWUdnUlf+iB6KFxReZx/mkER2MY5d4duKiYebqH9nu72Vx4Fbj8rrsOspx\nckdqnDSnwCDeuYEfeILvRlKMeq823zwV/jYo3EK9YPAkkF7V4n6yfDe5fbIS\n77ucvdsAVPtTy6IBc1TW8zp8i9kx/FU4SMmzVn6JMHnJLlM5K7mQGghI3SpT\nkDWHuo4BzieK7jlARZaZtYQ9vEcXyzJ+sOi/2Ikr2B6qmM2zleaTUtCgsVPM\nPlEtFT9fE+nXBo/dbtLjL2yhIDndcUsrcZkpBse0lEwkbjM2kiMk2UiDv2P0\nrX47XBpypqjBEShm6EvHk9e/nT2tX7t758LrIA/cJ9oX0YPD+bf+IHT79zt7\nwa/g\r\n=unQY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.071a6ab70.0","@material/base":"5.0.0-canary.071a6ab70.0","@material/shape":"5.0.0-canary.071a6ab70.0","@material/theme":"5.0.0-canary.071a6ab70.0","@material/animation":"5.0.0-canary.071a6ab70.0","@material/elevation":"5.0.0-canary.071a6ab70.0","@material/feature-targeting":"5.0.0-canary.071a6ab70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.071a6ab70.0_1579199040625_0.4771974966056267","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/menu-surface","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"7e271914e414acceefe4e9e3f0b3fc3fca2dd890","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.22e0cb618.0.tgz","fileCount":39,"integrity":"sha512-Mjnwyc0JsQdOPW5EVCVej2Lprn8SpjzHtBX/PjFewjK+FU+6JSOXCfQZne9VbHdgSComA58M8EbDK9Y3ZCqBUQ==","signatures":[{"sig":"MEUCIFaO3bdt/24DGWe3Q46JTIoPNDSiD9Yu4b5NVdzoCnBnAiEA6fvv3BeKWB8X8bSybtQYWCoUtMPONm3Htl5M2zFj4AM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK+pCRA9TVsSAnZWagAANN8QAKCw5RV5rtalltQUU8ad\na9eid1FMjlHU2QTC4vIhi5fL/IUzDN8fDRtCvEYWdcLtU1UTctWiZhXcityW\nUTC1vjTMB4PsP8wKp02Z2i+2oIPee6jI1+1IBVyeSXiB6S364wm+i8QV80o6\n+XhH9zDrmVmto7JIwA5QRuHxASKxdlEC3llNP04Xo4Glg4H3X/q75SoLBgsy\ntzWYBXQSYLZABwJwi66wMayA1ZrRkIk6LTeVAC9i5B6do24siRcT/xAroldZ\nBhqKB6QS4miUFkl6C/cOBzHv4PaNY1hBEankVHUAYoKowsT+QLaoND2JEcYq\nJ7d2mATGVtK0dCe9hqTtvwlCDDBA7v0T2JukVs9nAbDt0FqKdYfh9lClFIC3\nagjMczzNaMVrVlTwf/ITgt44asREEOnxR5vCMfXstvpoiVAEuqvvx0C2V/nF\nbnmKFpIgztR1HcmUg6ZPeikeM8jbg0lyy5C0zMADVfc49awVpHlM25T2SmUb\n2Njj+5FWOPFtzVdQCJqMfpg3Kh76zO0Xh59BKnfxWszI8+v4ysv5oiLMqNbp\nR5oIyu0kc3MhRdgWLjJjGTTpZkaQwYbV7585R86K9Zad54dwjNke1L+TxFsV\nZ4j7uV6VdhecE81TjyFqjD9fwwVbFBfwyizdi/7YuJNl3MPT1seWTl+d1sS3\nN0z2\r\n=OEjF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.22e0cb618.0","@material/base":"5.0.0-canary.22e0cb618.0","@material/shape":"5.0.0-canary.22e0cb618.0","@material/theme":"5.0.0-canary.22e0cb618.0","@material/animation":"5.0.0-canary.22e0cb618.0","@material/elevation":"5.0.0-canary.22e0cb618.0","@material/feature-targeting":"5.0.0-canary.22e0cb618.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.22e0cb618.0_1579200425377_0.4364458946164982","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/menu-surface","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9446ab57b23244830dfe1eb402495b06909c6c9b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.f16f15b8f.0.tgz","fileCount":39,"integrity":"sha512-kCVdlP0/09y3KFC1qFocjUFgTLnUb3xOCgVGPC3Y36SWz82BeFabLgmzDt20gcKnXcbHXq99ZWRNHhnLAeR6Gw==","signatures":[{"sig":"MEUCIBc/G/AdbGSiLaZwecZfX1s+vPfu95Gb0yjCB7wXJax2AiEAsRPRxJ2A3TFtFpzWTm48y4yDjFsYOoptFQZBUtWLmfc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPqrCRA9TVsSAnZWagAA9jIP/2C0tbCoyB1MMWtQAtCB\nD1ODWrHIb4UQdLQ1B/8OXlyCi8ZLZLBlSeEgVhJnQ9CaE2daSnEOH23FXY4a\n6DIX3iLVMQk+jRjCvLH0OGOwJR4f5c6AxCZxOX8MqiLArLCuCecfdBcTjkuO\ngOE/dV8hq49cEdDBOtsLsVzFpE4izakac+FZ9NhWlOjFCIdQdy4fjgFI45h/\nPEvO8iW5rmF7Q2rar43ipQkwBrc4rc2LUfKozRvAUIn6+L9x8oZK7Ka4BRju\nq3ZPrdHRUaGR6y8ahgPL5ZrJPI+ltAI5xQyRZ8N9CY2V3e15bLid0y4eKXHT\nmxsajTnXA7wdemldVubZvT66T6to/WguRJILyosKmyYVAdHNK3X+e88Iip8Y\n9hE6KCg94wLDgnSOdcLdpHY6b15bFY5oc9cy9CHOEB3ChlsAp9U5qh5m445N\nipvMJDtasXjaWBzKq/bl3zoJk4Q6YgxqIkQvEL1kPocr3Yv1HoiGbWhPCB/w\n5MHnKerAeK/STMp3SjysE7X3+8SdEEXDIg/L4+kBgk31chNwnzSUvP39FXkW\nn569Ch1+oGJrMRxI2enfcMpcYtXbtfHHz6ya634DZyP/YPrLK9N5W2I8uoR1\nkPVFguvCzCesbZluooP4xEmgvdTNt3zRaTAJZhwv6/BI5WLRoad234e6l4BK\ny76k\r\n=bgue\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f16f15b8f.0","@material/base":"5.0.0-canary.f16f15b8f.0","@material/shape":"5.0.0-canary.f16f15b8f.0","@material/theme":"5.0.0-canary.f16f15b8f.0","@material/animation":"5.0.0-canary.f16f15b8f.0","@material/elevation":"5.0.0-canary.f16f15b8f.0","@material/feature-targeting":"5.0.0-canary.f16f15b8f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.f16f15b8f.0_1579219626967_0.4045480995013917","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/menu-surface","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"1c7471fd5f85ccf3805a568dba3601c00e3c7623","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":39,"integrity":"sha512-0e27N1UHSUBHSr1PGU5ChHkbW6RggMcMjUE9HMluku796luIteQyjNZiiu/Gk4xAqr0np4rRtPEIGL3fGp5szw==","signatures":[{"sig":"MEQCIDN4mTiBIPuhIiRAJMCQsC9HKoYKPsD0OM+57vjSpkukAiBhvpmPPVJGOfEY6iD3MRULib+6n8eCdmK578OatBPhYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQGtCRA9TVsSAnZWagAAoNoQAJoiF0TU9XbYqCIeJaBB\nB6CluDzO2U6+Nwz8e87jbUT+XMpam1mTVxlpG6qWWYma6jfPXX6fSZHh92It\nV+UmRW8PPV/YYLfURFpX1cZHOE+3exPJPwId5AFetIF9gBEFYPYI/QNws1fu\nAgKMvwgYUrwA7oqwapEvlfgK/yBzjrDvyumNnVPgkcPEFFau/FvoFWlEjpSZ\nKz1AekoNAUuT15Z335FC+grCrdnXxCRIDjp2PBJCWBqLjTn/oUjp/92h3tHG\nJcf8z12Xe14oUNqpb3+8vLiB6EBrCOm6LQmbIDx5twFrhovyNLLLAPZvCsYU\n/wH6D2Us8Ik+Y9AhpzudHIZPlKLcqtwzdXCfyGhemBPdMEWqhVthCGcUfy5n\nqTggfR84HSzwI6VCMiaPz5ITYo4TsC2R1PA6BLEtdGyPZWPt+Ykc4kVJgmux\ngo0Lqv2VMApHEQFyK908T/7mQD4VqlNgEOX5Mi35pZbisPOhmAv8FdWUN1Zv\nvTPbfO/GsY4dfx45YVSHfxG6xyvvVKwE/ok/sO1g77hkB48ozlIFUmAeMHf9\nrSlxIt13le54DrVmf6c9V2ukjyYEI3jdp+bwkRiGU7LU3ig5KaIwdgJegMc+\nv5ez/2wbgJGN7kVQFw87kpl7VmL3KmPbsO8GmOr/LOiiJsnai9bwSD+Liri4\ndPcY\r\n=440+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.aa8e43e9a.0","@material/base":"5.0.0-canary.aa8e43e9a.0","@material/shape":"5.0.0-canary.aa8e43e9a.0","@material/theme":"5.0.0-canary.aa8e43e9a.0","@material/animation":"5.0.0-canary.aa8e43e9a.0","@material/elevation":"5.0.0-canary.aa8e43e9a.0","@material/feature-targeting":"5.0.0-canary.aa8e43e9a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.aa8e43e9a.0_1579221419767_0.11382089083912428","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/menu-surface","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"47e532efe861038fc001fc3503e520c0e91a361a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":39,"integrity":"sha512-9x0bztAK0GWLAJ4b631YkdrqOh7h9qHPbsjs1u25YZX0xEUjHjS6WMi3OgyS2P7riLwe1G1XGf5cUvpwthqyFg==","signatures":[{"sig":"MEUCIQDtcWrAgzwZbscSlf1wOj6df4pYOi/WKMrZ/RjmAkteUwIgMeqE64hmmDvX1JKNpB/ZnpTnIx7BWYAlu9g7N+/8xTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQcmCRA9TVsSAnZWagAAIIMP/RxLoSOU4rgKjYgikLkM\nxbMbEwPkqs154fJsjgYxQP7xRfAtTCxfGM+z82YTyabcECy+oaWxPe3wrg4l\nB140WzLTUKLuXHiBcKPstDXKWhlZzJggr85euwQjhM/RdoGq3Zuz7T+o+1Hn\nq0dlOQdp86sTSwhWPvzJfEdye9Z1YAYK/r2nqO5FBfnxvsd7dfSsBQTrXPxn\nUQ7eoMIB/2avAlKDzUHZxnjhv+QBIEp8khKow15Azu/47OnqitOSGoYiDSR0\n86zWOPvW1cl32gAJ2jtQvzliR036Ha4b0HKNjJIhTGxY5cm5o4SvxDWP1enc\nf8c/Uc/kE1jushJdUXT11eDqS4ExbKrLKuyzyr/tjB7msUsvfAs5UkiRvoSM\nrg5HJqNQZWT3HHfuUbHsvVrMGSUB6DsoI4aRC0SDIXQEqGUTEaghkgtGhhZ3\nCo0bfOJchiBVUx75DVNv82IwPFiU4ChoKWUL24pNSzLogwNL7Qgta5a6EWzk\nG2mniUX1XBNfDW4KRqtk4vYodukurTWmgHbqZ0I8i/Prm/dtarlczrX2Ew4Q\neblWFfe3/UGV0TqG50DuDWQ+Ygf+9+KHVvtBxIbE0UA+dc0oG+2TEtjcyDWB\nO5GMmbhdedfuWhYCJf+Un+au98PsMrkoOgAMvMRNKcVlvAeS4nty+0l5OYxl\nTU56\r\n=xNMJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.fe1f3ca07.0","@material/base":"5.0.0-canary.fe1f3ca07.0","@material/shape":"5.0.0-canary.fe1f3ca07.0","@material/theme":"5.0.0-canary.fe1f3ca07.0","@material/animation":"5.0.0-canary.fe1f3ca07.0","@material/elevation":"5.0.0-canary.fe1f3ca07.0","@material/feature-targeting":"5.0.0-canary.fe1f3ca07.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.fe1f3ca07.0_1579222822056_0.6484163938638379","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/menu-surface","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"ebb67777743b489db52bc30440669c27b52c2f20","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.d405af26b.0.tgz","fileCount":39,"integrity":"sha512-Vkuh2gdPt4fUt1KI/6up2Vlb/+1M2zDrJu6sYJ8HiNYSPjpxx697e/4VxYZp8BhfT12PmI6awakmzeVSy8TbyA==","signatures":[{"sig":"MEUCIQDs8m8ci+5j3p/lFTVh61o3cRpr+u2x5797c7oSYzhxRAIgRWLeGofdK4Wj3JmVFyw9XUAtu45g+RuXgyqUmLuk+5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfomCRA9TVsSAnZWagAADvgP+gPO81+/hhsiph6RFTZz\nVyBWf8Nr1BPcKsLq8Fjt2KZmBPbaNVsIhEG7ge/9MsxyLCwFSH0sMkDNa2FK\nqwKwb90WQLuQNs9tbTmY1miQavRur4ZjoGqh0DhLi5bcnL6R3k2U8NOZ9Goz\njQJc0ikv5GKgat2Po+vapC9jh/7gDD6k27p7yirusD54aOK0v6whma/MHq9e\nlWKqMtRU2v8QnxoWTzM0S3aPDgt6a0le8MKwp41TzOq1IcxhlHeptUbkWg77\nlgdoY1OQV7vahLPgdN4Jm7cc6cqg4qMYqPWZb59e/AqwBi8W1MpL6O9nc8mF\nsaOfopufyuzhwyG+H0sasDvlcp+TbsHsVnMLcxQqxR4CR4CMKH0g2XbKHPXw\niRag/If+smOdKaqPccAPW73Pc3h/syqAVULHwMPAuWTm9pxmXRZSaNPo9qM7\nopU/F/kI9aYYgO3DGNubbGH7J3BQ3Cot/UVFgXsnUBgJSsmCmALEUf6A8CWN\nNjK7BRycFq5d9IOUNYlYkUUVGuu5rUtY97juN4HlSuxfSo139XKSccR7Lfpc\nZ2E5Nm2KPKw5kWmg73DZmmNFyrjaObdcU2PNFxYja8QcJgqMzgTiK/PZ3R8v\nr5t0jSkSWPYi1jE3cKLeGDx82WFz87ANtpku8XNOpTEC7IopIAEg3xUWFaC4\nwhf4\r\n=HJvM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d405af26b.0","@material/base":"5.0.0-canary.d405af26b.0","@material/shape":"5.0.0-canary.d405af26b.0","@material/theme":"5.0.0-canary.d405af26b.0","@material/animation":"5.0.0-canary.d405af26b.0","@material/elevation":"5.0.0-canary.d405af26b.0","@material/feature-targeting":"5.0.0-canary.d405af26b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.d405af26b.0_1579285030249_0.021485633078424327","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/menu-surface","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"f5f79bcb385df3c4eaa6b7a12eb691a196c8b8e8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.6e857aae2.0.tgz","fileCount":39,"integrity":"sha512-Tw1LEbOQbT0C/aGIjodZdzDg7WX3DCqLTzA4Xt0Hcy21/prS7dJYQ4nTa2DEjukrCK8weQFlMx1n1jUxA0PRZA==","signatures":[{"sig":"MEUCIGvLlgIIhh1UaNJbCH4Q2ZnnrntXQF/EnrhZvpjSGjt2AiEA2ELKgxk18YN2GvG/B4TSYclYc4PjipvA+BfFzf79AME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfsDCRA9TVsSAnZWagAAqhUQAIqqDm9nS+8O5YpuNBlB\nA2GQj6xf7E9Wr72Pkr5tEgMgYvhBMy3oYUzmO963upNR1QjrI+iANy8/N0jY\nFXlVgvwj7+9GwoRAB4EJct4vVubI9WRz9CkKGgPp8ApaFhigxfXmDgE3AfAJ\n12jRp/BjcjCU/UxaOzkylqygAx+fvotllxb4j3Qe3xKQ2esa2rb708JJmfE1\nHKxLYzaCqPwSJ2h/86yPrk1ZS1Vm39Ul/pRB1Ec22NRNxLsgFGZg7vBuYyF9\nrwjL7sz9DSAvqtG4HTzYpyQ53Xg3E0c0tvv2AoKhJiAmxYupm2QWQXBiUJ55\nUgryG3biNwoxGT2sW7idILjWX3wfrfFh4MvbGC29lZ2HbHG0FvEakV9h5M1S\ns5iut+KX/feAV4H063dmmvNpUbgZZifs9E5BiJyVxkWxERvVVqijkTEUa0+N\n2eLZszlkc1vsmcCyt47iNfn9YHqmyM+JryO0rgo0hNWQwICqvC5v+vK9yhzE\nVfdc5S7QaKiMCrwyYJDy61AdrvoUpux2IvCRh8N3YhpaVrUUXeznvV9aGpDv\n5rUrjY59yOCgONjFpzVsNYXGZneUbQqsV72pFggh8Xto/ifrMzVn4h59TDBt\nFUwHME36U6i2WXxVgyqNHd1RJ3fN8Rofeld06827Z7+Y1hON1xYQ84gPKq+P\n8Ugd\r\n=b/Vv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.6e857aae2.0","@material/base":"5.0.0-canary.6e857aae2.0","@material/shape":"5.0.0-canary.6e857aae2.0","@material/theme":"5.0.0-canary.6e857aae2.0","@material/animation":"5.0.0-canary.6e857aae2.0","@material/elevation":"5.0.0-canary.6e857aae2.0","@material/feature-targeting":"5.0.0-canary.6e857aae2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.6e857aae2.0_1579285251446_0.5381976522170187","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/menu-surface","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"bcc2674b3f40f84bbf4d04573dc0013f499a2ef3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.e2e764f7c.0.tgz","fileCount":39,"integrity":"sha512-pXELbLbHxHh9e0mZqyxHrMmVb7yfOunVDXcVdMOpII1p2rqit0iwpKoLzZAPiD5dtooUqT4QS2k6pIDAakBxAQ==","signatures":[{"sig":"MEUCIQD9O80V4IgQBjjNmONG7p2liBx0CDizKrCXIYvmR8t7HwIgS1D5CA2hVHXD9BIdx3IguNuWLX22ikZDyNYFHPmZHIM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf6VCRA9TVsSAnZWagAAA64P/32CKUaxW08E7mVaWOTj\n6pDk6TQIVzeIg47J5MHyHVafajNNVRyWGZ2BZGoWx2hET9Ci89XrxunXpGUp\nH5+Q+H0UU1l88FCcG9xE3lRYP2AkrfLYEfO79E8gxYe958DAbCZ1hwP2duhX\n8lbI2ZpzK250JtL6gCOJkmP+x1Qgagly/kJB3W/4XXyZ/ogXS3IXQAHuOP3e\nItcIm0M2A691x6lCHzet+izLv0npPg0pqo0/6QFz2+ID94zzFyq/TyxZrm3R\nMC8cISonJ5Ml5oZ29Hgytet/HaV+NLDePHVfsnGdg1ghu0UmPGtKctDLH/7l\nQOR7AQn3fTS+GJAfPpxlRQ8QEcTWpKNiZYNrEL1z1Edl0feFowX7f2PAaxwX\nruVZK/T5wIeXvk5PZu8lsB+a2wvYLaNFET1u03sxq0fcGbhxVCM9gp2qqZ4Q\na6+rNF259JSXwh42sSPxibeElDqj+AZCLF1w/XadPmyk4hl6SokBIIJZARnY\np8M+5/CGXiKnViumBmn0JslmjJ/386kNrFMf5SQfzMa3+cztn/G0hEt7O/XO\n6pLlKuV8YsFYvtaC1ZyJJZ1mW40blHniWC1bV+lTjjw1sL18huKDBW4tx9Mu\nbqGgscTWodiYYsmfTCbynMrlqfqm8rUOB1mbBdtLZkoG3UgrIggN1lLIt3XO\nnQ8d\r\n=6ggd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.e2e764f7c.0","@material/base":"5.0.0-canary.e2e764f7c.0","@material/shape":"5.0.0-canary.e2e764f7c.0","@material/theme":"5.0.0-canary.e2e764f7c.0","@material/animation":"5.0.0-canary.e2e764f7c.0","@material/elevation":"5.0.0-canary.e2e764f7c.0","@material/feature-targeting":"5.0.0-canary.e2e764f7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.e2e764f7c.0_1579286164575_0.6890773504614085","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/menu-surface","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2eaa622a63c806ee4ca3eb0e83f820f6f5548412","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.7ef986a87.0.tgz","fileCount":39,"integrity":"sha512-paFDE/LEF+riJKJeo0YzZR58DL5riFk/U4Qem+zbtd8a+9Isr2MxSBejB0Q6lEEtQcdZLOIc0I0Sg+4S8N7KTA==","signatures":[{"sig":"MEUCIDzbRLH5wYChKc8Ihm5zB+kxz9oJvk7vBo1pp33dmMjXAiEA/6dsop5zrD32AiP71hIkEPF9Y4zIguxuAQpdX6DJylE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIgtvCRA9TVsSAnZWagAATJwP/0eR/RN4wINqbsNVj3ZF\n6GPAa4Zg7LA9F6fSYClr0EXMygymRv2506mOp7xyrlFWYz6Qltvh8R4C2DRs\nZ63zS5lwJDJUGyO77j+HF/r/y0OG1XIr5flPc95Mvgw+BaztA6Nhyil3rlK9\nRDi+odmCxz3rlYpxZJ0gKEOJghK2xW9jhUVSXOnJZZVBnJdoZ48VCcUJ5fos\nrIiWT2eJSJO9pELPLsXFduviZYn5hrz+Tny94uw24uMIUXxPlxkJ0wPq/Okt\nc1jN2SBiYkp11Pc8iSbmC1ScAqaz2r0Hn38iPpOpmMpvCAe3HF7TZRO4AaAn\nwv4/lv+4KB2AnCDsuT48lh+fRXul4zDFt99p2JcJ/qp30QB59ylVNeOMI8b3\n4xj2Eon+c22b+B5+4sgjrra1/JMzLxnBjY4GmgYiL+/FQjpQ8rN5aa29Oidp\nfkK3L2dtTxikrrOBdo2+VW2k2H6uQdPzaQFlJXYC/Av80CYfBPIkvx2JXdl7\nlyLMhqrE4oR/qz5qJZoeUBh2PiBMtwoji67g3qfGw8PHNE9KWrgw5mlsxVOb\nGThTHKb9boHOEQqrgAFpozuAzwZk8XxlDPy4umsF8jK+3Rk2oxJue45vP7Lj\nxB85ysUgHfH5saWJejul/gBKRY0stYoCbPrMycWl9dimIEQnLqfF6k8f5UC7\ndEOP\r\n=WqOQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7ef986a87.0","@material/base":"5.0.0-canary.7ef986a87.0","@material/shape":"5.0.0-canary.7ef986a87.0","@material/theme":"5.0.0-canary.7ef986a87.0","@material/animation":"5.0.0-canary.7ef986a87.0","@material/elevation":"5.0.0-canary.7ef986a87.0","@material/feature-targeting":"5.0.0-canary.7ef986a87.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.7ef986a87.0_1579289455449_0.13368504401382486","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/menu-surface","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"e60c67937b3ff659b09d863e397d5550d69d762b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.29402e2d4.0.tgz","fileCount":39,"integrity":"sha512-0AG7OFc827scdKTO4Sbx8zH93XKZrn6IviHnFqbCZ1J3T5gB+U5j8hxfBY/YEQssgZMSEYWa4Qn5vD9N9NOfRw==","signatures":[{"sig":"MEQCIFLEcbMtEEFncduuq0WjbeeMJUGGYN7kIuQoOM27uxFmAiBIpdqAYFPLpFiYtHnK+O4sT3cEA+ZuIMvBBI3kMuFnLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhuaCRA9TVsSAnZWagAA8wYP/1GFteSCvISYTPKVpMmv\nqavvCKRoi1eVHahdVstKx7pkFSHEuQ/PW29TmDzvKW05kV0T/EanrAm/jXwR\nSdDAunUyaASf05qtL/xQsqUIL06Tp4IDXTYXJou/Km6hMp4P7xwcyUX7Z1yL\n7T0iI8YvoqWYPxGKqLkXo6om9cOISayk8QpTLMG3I70sK3Ngj/F7DtVtLkZ8\nW496S1comcGYM6jESseTZPctwAIuWDrajV00IHT7u1Q8+KStBmVCviPd+f02\n0boRJQXtkaNbemofadT8jpMXlxBxyxhaDTZhtKq+dSp2KJX0VP8Zr7tKE0lL\ntEAkp3d447Sf4OgKdX7WBtm9WeAhqGaAEEYIyvC49jchSulMTa8i3KzyE6kV\n2mMtHKxD69xwaxfgoLgTasQtfBu+gjCT2aqz2fDukPbW2R/EJc/0m60VYXsZ\nnBt/394wdocpXyI2figZIu+YKUvwTad50qCWdw6+fuVz5K1ZeRo93PP4At48\nEgrPzdxmtslK5fy3SHhUnRnVWMqXsNjGDh83ze6qGKo2Zef6Csjle4jjM0gr\nu6B96sY6cEPda6JI9HNw4PoY+EtDRYDkI5Q4XcBGfPNss19sj/GgabLQGolJ\nQUrWu2IEISdBNq847bW0SHdrNe0c9omvxsCxSqeRGXMwDYWBWjgd1k98hg7V\nllx/\r\n=gA+t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.29402e2d4.0","@material/base":"5.0.0-canary.29402e2d4.0","@material/shape":"5.0.0-canary.29402e2d4.0","@material/theme":"5.0.0-canary.29402e2d4.0","@material/animation":"5.0.0-canary.29402e2d4.0","@material/elevation":"5.0.0-canary.29402e2d4.0","@material/feature-targeting":"5.0.0-canary.29402e2d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.29402e2d4.0_1579293593834_0.9883145863777383","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/menu-surface","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"3f455a84a87542dceeec65b35151025c4759428a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.2b3ec563c.0.tgz","fileCount":39,"integrity":"sha512-OuaUZ4dv1X5cTv0FsV0ufzma1a/MYucGO1XQMRQwWyImygpiV8rfCCZRZFic28mUCNx1WYmj+WAhFSq2mRTyNQ==","signatures":[{"sig":"MEUCIQCx/FmepeQmWVKMktPE2ybQ2Z9Nrgui3BVC/p4Avs5R4gIgJkE2cZx3m/3XMyESCsvaFmST3bagQWOON61EpHElcMQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj8rCRA9TVsSAnZWagAAr+UP/iI1RPLVmORkmE1Z3Z9B\nME0qc682Q6mhcmrIOpc54lXqzGb/iOpxMrKDdv4TzCPMSIwcp/ckHlFoiZHG\nNkKjoPngZQ19VHLoj4ymDHUnl5ITBul5jKIqZFjxDbYipOgTbXqKk+cCl2WA\nZQI3q9qwKF9T1+6TK5vBhUAnfkGsj2RylRwSnp2/YnbrTbA02Cdcr3p+wMF1\nodVupe6Bh3yFuewd7fU5QAQGAKWLzEsjzNXYwnmg7gDr2F+FmUEvQtbtP0f8\nvL4BpGAXNMMEczLZzdAGD+pkvC/JRqGPPBOCpTfY9TE6b0N6RQg2w7yA2lgw\niWMPmSqJCtECM2zWSstYvbukyb3eCALa5aucSpMUhs/WO7Udt4N7onHau3mc\n6WRDoTuAhZiw+sKUUcVOS6qZtzSt1uaNey0fqcckr+koTvPYqtvO0bfc75bH\nM+7HS/oCHXWzzGDtyCyqLcyH2PhreBumVCaydjzLauL1auPxYI2HPx0CM54a\n1krQbiT7/kJQ7IJMvLhvp6h0pTHhSavtX6IjTesgK99SQkgrFCLUEWI0+Wvf\nJ1hgkXXjVIPa2VkFHz487LbIL3B5KKbOuLnBI7oISXuPNneoMezNCMC+5VYx\nSyI3B8pOP8HNtcAyzk7UiOoK/DsDhSAgirpA62JjW7AZ2TdEnYibCxbvTd/L\nHIY2\r\n=kD3D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.2b3ec563c.0","@material/base":"5.0.0-canary.2b3ec563c.0","@material/shape":"5.0.0-canary.2b3ec563c.0","@material/theme":"5.0.0-canary.2b3ec563c.0","@material/animation":"5.0.0-canary.2b3ec563c.0","@material/elevation":"5.0.0-canary.2b3ec563c.0","@material/feature-targeting":"5.0.0-canary.2b3ec563c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.2b3ec563c.0_1579302698898_0.5563963906244127","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/menu-surface","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d3225fe760248f332c9990d0505be1d5449ad6ef","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.e8a993677.0.tgz","fileCount":39,"integrity":"sha512-qDFALz2BH5Ro/nVAME3ERbAxZrb+lwrChOjGCtks5Pk2k9EaoVfuWxCVI4/E07tlJQI7m7JgUWzLbP8+bom+Iw==","signatures":[{"sig":"MEYCIQDz9u1Q4gSJi/H77cqjfZd6yAUX2tF3VRzM34xB3Pjg4AIhAJe8kY7qAPGBy1iIQCGq0OX6X2iZcrNrWRDZEPDe2XwN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyurCRA9TVsSAnZWagAAIEoP/AtEHzxmmjihbFLtAkdC\nn8co0kni5uqm+LaxUecHwTn7zbWEGswzMwaGkSUHGqTydL/Q5x/wmLjDSY2y\nazy5zIgMB17pxE+nKA10udSgs19yjd0/PrEwEeS1Vvu49sdulxGjBF6UfQ1s\nk9O3tBuOWLmstyAcz081uGnVJW0oUc8kL+swK3AlTVepUz5IjwNJLv6nr+Cq\nT6StBszwetWfaKJEzgMMHEfXUFdxyKfSWwA1JU4cevbAOs1ohqa9wtUg9J0j\n0mHoJw6yXYG0s0xKvR7ecEMfIgNjocscp6dr5Pa87doRynKYXkvF2MYlCYVX\nqYDlguVUljSKLMQL/ouUNx1xMV/Q2u1opA19iO5L4Ky+VDga1xINy+AdETj2\nB07cOaLx3kcsuwlR87NNWzX7Nn+ROYluspavZKRuVuMcnAq0kUJV6IweKsOZ\n9rftY1bAJAw8AGruHtE3iO2uSHvSG2kOPxvnShJGubVHT4z/gR96WOHaR5gJ\nrGu+s9WHlY7O9gsjDHCSPLiWtluwUzb5RnSycazJhZL/7GPsVPumnXTzw4rL\n9+Ei51K0fJeTC77mKL27zaCYUQxiFcNWRAqPfVL6AMGE4VDZ1r8oN5CMBchr\nb5+jCAWbGszVwZa2yB/8L5H2g0vik4RFHMBQo9aTfs13K44q8gnosOmZsOiq\nLVTT\r\n=xNOP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.e8a993677.0","@material/base":"5.0.0-canary.e8a993677.0","@material/shape":"5.0.0-canary.e8a993677.0","@material/theme":"5.0.0-canary.e8a993677.0","@material/animation":"5.0.0-canary.e8a993677.0","@material/elevation":"5.0.0-canary.e8a993677.0","@material/feature-targeting":"5.0.0-canary.e8a993677.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.e8a993677.0_1579625387061_0.8653592025010888","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/menu-surface","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"526214434d0c2df43348fe844ec93ee2b3516afb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.cd4903304.0.tgz","fileCount":39,"integrity":"sha512-qitkzuCbl54xfDr5QE/7LtrI26k9ZEni3Jei23DVFwg+s/ch+XyUtW08KzLOf7a/kgLiZU43KlkgQ5H8NVBatA==","signatures":[{"sig":"MEQCIG6jlOdUHmBg/fJw4i7ehDcMLUA9roFm1mmJdtvItjm+AiA1+JpRGMoKzqtrfxMvkuZLZuUZgSCRprftq8dDaUis2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ28XCRA9TVsSAnZWagAA9iQP/3VWBBHE6pMIerNgBXMH\najGcmIEz9EbIAAyYWbMKj8+IN+vbSVG04uoRb/3bjAKu31q7qF0LDaxtbp3P\n4u1LsbUOnmXhR1TCEUhWAnoW27MzNSiDsiOHeTmHVi9p8Y6sy92EqKvh+qWU\nsDOt0XOUEExgPRF4uX0+ysRHk00aRUAFM0hWTVbE0iuxRjwZutTi2FwM9eSi\nG4G+sHNcvuGShF/m8pLuJyAvc9hTkYPHK+xuD8HPO9JdRggC2DfhRf4ZHdhO\nhvInPD1Q/6/f7Xx0UR2PskObvDy9DRt+7q23Ecy7B+N2vYGPaAK9vbld6sTt\nxRkOsZAsV0Vox8Mavs9df/Tit6GEBGEMnN3NUtfKLVe1Jv4WswYQXzWhKMea\nQNxbXCfZyvOcVFOPNMpkjRCtd5KkTjR2j3CGpIOCwebMQO99GizFl8jaX5IH\nDAyNBbsbKtjxSShs8BPqAwTGEWA5z38Wq7x7qyU9anifPBkx4rA5iOgDb6nk\nfo4OI78ZlFVyEirhhl2vq+LFMdL1HBCzqGSQtiec3A+YtH+kOeenmsKdevm0\nOSmcP91Car+oy1lCCuowA/7qsEKJiVDRQXH7W6c+Bbsd7XJEGFGVDK/GJVuI\n+QSukBP0KuY1wIO84ZW/UV48y3zNeAsd0o1CGp1l5/7n1iMQRX1xdDBuvG0S\nbbMN\r\n=Z3Nu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.cd4903304.0","@material/base":"5.0.0-canary.cd4903304.0","@material/shape":"5.0.0-canary.cd4903304.0","@material/theme":"5.0.0-canary.cd4903304.0","@material/animation":"5.0.0-canary.cd4903304.0","@material/elevation":"5.0.0-canary.cd4903304.0","@material/feature-targeting":"5.0.0-canary.cd4903304.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.cd4903304.0_1579642647484_0.629046973675492","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/menu-surface","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"7c7b4c501f821ad116966e786c6d168c324a22fa","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.7e4b04b25.0.tgz","fileCount":39,"integrity":"sha512-lOFbJ3Ny64eXzb9sSfn4HwCEqcFvMBRtwbgzUwibalQROWBwciMr+jRCBFWHWcM0WS1Wgwf/TsXkcoUv/pK6Nw==","signatures":[{"sig":"MEYCIQDL0hZGUpsWZNnM2zuH+y5uaz2R/gRgEcQ9d6+/d9/xkwIhAOYCd5gR1LsU0LDafXvAn9wsrsZDcu/KAa5Gc2wEHfiH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ39ECRA9TVsSAnZWagAA2okP/2z5PIS+6xWql1ZMR0A3\nEHEAQ0/HwmSOEJz8ttc65ta+dtIXcVS7oz3T+T+4p+6iUhQIOnWm3VWBkHAw\nGUDsBk6qUNyZz6gezMJH5iojLShSnLVb2A76GpwbOEO9dA1jTHBFWb0oU4bw\nl1f78vASTDnJ1tR3933iCjoTmeT4XuFwarOW0EhrwUbVUFhQWdy+JV/npQ6Q\no8tEgBY09E5/bJ6Lchur2Oo5z+juOHwIMN872gTcHLTUrR9TbU+BiECWjKQF\n69KvTz5mUx2uaWO8PWxEe/ALSeWJfcQTbGyGRaSciZJL5zsNhYCSFEM6AnFY\nXesCPZBQTvblTMJgrgT878DlQfyslxLSZJ517EahJar6ZuVQyfOsqXxB9nHM\nL0z9TOtK/Qh5mWqHWSMpO/5RRyeV5IC5//ArKultHRvxMLG5r3nVDFQklgK/\ntkKC2X4HCHU0btqLyFMHSrE1YxwATP2NVXurWPuU+I7KwonTOMVj1KfokCpR\ngyKgeIR3aPQBRI3sRRwkuxqXJo/01EyOO6AEy2Ko//TV11j7wVlw5Q2ONhPv\nu6u+CAoaImkiStnExT8hzGAYuGbivGreiH05bZrki30kPc6A3RT9zVpDEidT\nIcod5kaUV+NVeHp8V4f+WUzFlZDol0y90splF8jHghg/QrgU3w5/pdhlCuZQ\nM4ah\r\n=H9Wl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7e4b04b25.0","@material/base":"5.0.0-canary.7e4b04b25.0","@material/shape":"5.0.0-canary.7e4b04b25.0","@material/theme":"5.0.0-canary.7e4b04b25.0","@material/animation":"5.0.0-canary.7e4b04b25.0","@material/elevation":"5.0.0-canary.7e4b04b25.0","@material/feature-targeting":"5.0.0-canary.7e4b04b25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.7e4b04b25.0_1579646787907_0.8101730656916901","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/menu-surface","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"288408a6970c08171e6b104ca363363cfd5fa612","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.ebc296937.0.tgz","fileCount":39,"integrity":"sha512-31QOUda7cCpAs2ZwetJ9mG1UC1odZmP5lnHl2qbX2/WbFxPUuIhlgjtRxDJqYnR+ee653sxI5L/Slmc/IHfQpQ==","signatures":[{"sig":"MEYCIQD9GV3QiDEYy2Utp3NT0xRB5Nb1pH/AdM8M7xeDcMo0jwIhAMK4fpJ1C1BCZqOZomjfQk7UeYhUZtz6NiYAEp9uvQLM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ40DCRA9TVsSAnZWagAAaSMQAKK+DzKX0DTv6dqXokWa\nHpk4VAvQ6VNDc1wZ/lOeE2eYh79Z9vvCNSDI+EIv6Mt7Wu7vdCCMVoqmNaAg\ngDjTUWjkATTDq+Jo4vDYrDlskISCWSLahl74aJ+PLHpcYwnl9gwvI0X/puBU\nevi2c0h+EWNxFO9AtbaMZ73s4E4GdZ73yv6WxbVpnz4obpBxiXXhYao6DB01\niMBrVHs9mH1dt6tXAIAmaOWiAELalYUdX1rk0cZFw71LzjMTmOYNVy++aWHB\nBJAPjaQXzt7LDDXnHdI9EKEE4SLeB3GVpgtqjkgGtRBXUiXT4F5ck1FYyDPW\nkmfYY+iw7q23YhS9zgZVIcuPhgb+VY5emDkSiPJ8RvJM/wYHrTMk7ekDTMtR\nYwr6bf/SowlXuChIlkJeEsQ1FmXEbXI/qz09f2XRH8Fnoze0cfi0nsBVDTJp\nni9wYvE0Cvhe21tMoZnbXyeGqFVOuVA8k4Ju0AkfxuRJAlVzyQHajCDNqVuD\n4PxBx176yERDn9bhA/BmBGzyHhAVjhWf8KiUwtYwRqxLgUsLKHa8t2kUOzGi\ntFKoBwbfTbTK2cYeIvxARFCXQqNN4j8OLyS864gD90VULNwd8iwbTpnM4U1H\nvQ8lGkAsps5kUtAraGspK3JyJU7qh7GE73xiZqdBQ/jGVIwEeij7mWrzwZV8\nDTPg\r\n=Y4Rx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ebc296937.0","@material/base":"5.0.0-canary.ebc296937.0","@material/shape":"5.0.0-canary.ebc296937.0","@material/theme":"5.0.0-canary.ebc296937.0","@material/animation":"5.0.0-canary.ebc296937.0","@material/elevation":"5.0.0-canary.ebc296937.0","@material/feature-targeting":"5.0.0-canary.ebc296937.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.ebc296937.0_1579650307595_0.344934725138621","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/menu-surface","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"676884c738ed3bb62eb4b5acceb9285088077ec5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.cf33f113d.0.tgz","fileCount":39,"integrity":"sha512-bnfHw3IHhtYzgzSGzfuFytQ8Yyw5Vz1MNGVcZRc+zbo0t6i10nctaYDxIxAGdzVpnZSIXwcfv+rBfFCYqxgSsw==","signatures":[{"sig":"MEYCIQCMpqv+ckpF22ZpgjqGPJMFmQIrZDO8d8be36taMji8pAIhAJnqlBkk1qnzqtkYN7Ekc2usVxS1KnIFQhwnstf5/yyo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6PPCRA9TVsSAnZWagAAFuIP/3bHKTSrLkmG0ho2bCHJ\nhnlMImEZx+sZSLUtTR8Gozm9e+DGPs6qWH6BdXiBqNxMdOrOdgSnS268C9tX\n8v8ChFFtU3PApi0gw2M+RxD6tZZzrW6nio400mDC35UU2DS6bCJwDJQBKfEF\nc+ScExqh4OdH8epXXZnuUKlp4Swxi1zo0hZMV7+kYRvAvriERW13JYAS5Kma\nO/rziJQQr0EANiHKyd/eADOJ9G3IJV53OBm5j1QpCtjxfkbBtNOe6Rw5lFji\nDJBqLdIc68YOTvwrcmc7JUSoJi17jws2UB3AuS5VbIj+3r++t+nZj6KKR5rT\nUlZ04fP49jXM2LgqksVVYnlPuRUEsEXznhjRr9uOnjcpzFJlNb45AneHSAPK\nBDjqx6f9zFy2Vomdc7hyJGyofShBcb+8TEtsejLPkNK8A4wKfMkOHGafr/XN\nm2UrnCjICXAeva6bBjEgnosEzLO+W0kPs4Z5PrCQoQ4KEwH2XyF8lYl6Oeu5\nYmEdmDdSO90puCLbaxkAsFCs5dqPJki5B9FBmS+K1XGAd12J/+mNkoaxV2kD\nT1sIdLzOns+s6hU//kXuholGo65f7lRzr2fUlnoMyQca8VXQtiZvbOVnJa61\nrXL9e6secPuw0Xd8isvskWUWlUt6Jvg4rLkydyERLG4XnYxaEaqAaAPsI3uF\naAXE\r\n=eZ0A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.cf33f113d.0","@material/base":"5.0.0-canary.cf33f113d.0","@material/shape":"5.0.0-canary.cf33f113d.0","@material/theme":"5.0.0-canary.cf33f113d.0","@material/animation":"5.0.0-canary.cf33f113d.0","@material/elevation":"5.0.0-canary.cf33f113d.0","@material/feature-targeting":"5.0.0-canary.cf33f113d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.cf33f113d.0_1579656143000_0.059346591469770615","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/menu-surface","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"953c508ef70df8400c082e88eae0101c1a5d1d31","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":41,"integrity":"sha512-cC+h26jreVszfjxdBLBQFWK1oJF5iz2zQe/XYBq9MAykxifEf32iO5D5pAYOCY+Dr6zNn/Wnv63SE0tTFTtujQ==","signatures":[{"sig":"MEUCIF3u5kVg6QsbrManClTaXsMPGsrNMAFxMsTlcaPwuhOCAiEA7/QHVF/dRnEJrIw2DXGwkUcsvcAPCS7toGAnMLEnX2I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH6KCRA9TVsSAnZWagAAVAMP/iC9kU+GlZC2MJEjSXCI\nlPFdSv/OxiyOIwqRY1P5csdBQhTlE+DET9ewR8uGaZLfGzLcFNMKJQaO+11W\nJ7jDZJn/93sscboal2udnsbC0Q2d+AmtrWGE57CrpCr7KSCOhEWurG6Zr0H3\n9mevPok9tfF0+TgsKsDlz9Rj0tVKO4tENWx4oR+PzNWlvqz9AipJteaPQ754\nZ0uvCW4xMo8eu60LaOizpu3/DfbxSNBDlvJSNA3vw+EsSjHgVTxUZq4llJeI\nuIUGOnGrWiMPUyVhaeub7tnzr3GWXyxzwjrNW3tExCrvwRDmEbzVlhY+m67G\nmUjxbushLSJCWZADURdJG2iVq8hCFP5XBTMwrL8pxzhIyHEb6TdH3lO8Tn+N\n2KUyRph2tFPkT93jEgrSMwzVE2RLWwFVYo1WXVs8uv+e5nzW2o4o+81e6+wC\nk086/CX/ToyYJq6yqGTAIm/PrTarNpym6U9NtXgWEdSsdmtH/ZktxFk8pqZV\nRCGIIIIN5l37i5umR1dHbmxbNf4Ngj3WNY9VlBpNrOBon+eajOYrQeXXUyh2\nD9QH9XljyQZbGCIUhDzjexVS0cQaoz7w8V/hEnkKdN0vF2xygoUBOu2RyYR8\njPcWaJH4Hm6KzUg7nEGm4I4WCXeP+rK6jB84QLlzCt8YrD7ID4H91QZ/iLHb\nLM5u\r\n=xPSC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.e1d5f1be5.0","@material/base":"5.0.0-canary.e1d5f1be5.0","@material/shape":"5.0.0-canary.e1d5f1be5.0","@material/theme":"5.0.0-canary.e1d5f1be5.0","@material/animation":"5.0.0-canary.e1d5f1be5.0","@material/elevation":"5.0.0-canary.e1d5f1be5.0","@material/feature-targeting":"5.0.0-canary.e1d5f1be5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.e1d5f1be5.0_1579712138257_0.14293525323219147","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/menu-surface","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"8b5f24cfa51dc07fb64a54e55d0d0d5848306778","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":41,"integrity":"sha512-k0iHEFadRMlLZZgwJ6uZszGJ9L1bwtPvgDXCb/XmSjAvX91Lo2aymjPuutF39FBZBd6dEh9pAP4aWS/9VD/4nQ==","signatures":[{"sig":"MEQCIDNjKK6rCBKlTlx2EQIu7g7Mvgzl+hl2oC6d9rpm2WucAiBB7XU0TiuYpPR9UTo7feNXNXoHU8OonC+nd22d+xVcJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKI0ZCRA9TVsSAnZWagAAyRwP+wRGnoJf6uGtHmo4KYxl\nslKHV+C4npkTYVs4YfOjzUfxVKx4yr7LhWxyWnW9o4hFmnOS9+H+zo+Vt4dT\nHvz2K3SALrX5L6yn6Rm5+U0/w3wWOedTrVx6CFXTLGpVo+EpeFLVpHmU0we1\nEScXX7MbhSi8DLH/FB4u2uC1ThZpCncTPyfKty8jfSDUQWmkZu8mYHqUmUC7\nz6F6MHW4FFzhIpDXb1a07OR0MLPV3uZ50TO0377HhyVKbuK2rtPLVHkm2MGF\nl5FVH2711cMMX4DHEVcQp0i32DQ0rQGO1xbQ9gVsL5ABGrrgJ3h2Y4//jbom\nPFxe8Oo7ZVTr1ReNSU7aOT1gge6Mwfh9e6ktMHrlCWxRokpNxx2mwLqZcpJl\ndTdG4+kknEpLPs5gVLNk+DfZ2g4RHNP6cxJa6LSoF3r655X8ZJynnJMapbRl\nqRa3DWpMeMuunCdi2MVLoxgTxIqNpIAem24nOGUbQGk9+5/AKAQLr5jCpI5a\nN6mhClX7GlgeVjjmpFiB663ro1lLmoCSkRksyCnTFwH/dJzxX+/EgyVAtmb8\nkFvbx4VMlOaYlUryBQ8q4gCX7VScsgbzFLAzi9+d0UYaZouGu8h0HFJ0uaE+\nYT16CUCSAT5YCIyyzLuuEDPYmBzVhzuEh3KxZV4Bews7vqGJkN3jJIM0RxZn\nPdTx\r\n=GXbt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.6b6a4ff92.0","@material/base":"5.0.0-canary.6b6a4ff92.0","@material/shape":"5.0.0-canary.6b6a4ff92.0","@material/theme":"5.0.0-canary.6b6a4ff92.0","@material/animation":"5.0.0-canary.6b6a4ff92.0","@material/elevation":"5.0.0-canary.6b6a4ff92.0","@material/feature-targeting":"5.0.0-canary.6b6a4ff92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.6b6a4ff92.0_1579715864829_0.27738126298749566","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/menu-surface","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"ec78a33b61d462546e49a6ae4a101ff2beef464b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.6092f71ee.0.tgz","fileCount":40,"integrity":"sha512-vEH70AHC4oDWh05ppTXCGG/po+vzJWcOp8jN3TcCmivJfjb+wSdWzzkCrxXdENRonKftCLugKB5NXXEUvo/HpQ==","signatures":[{"sig":"MEYCIQDzYHQs/NwNQCtHvVPDrhO1pFTj8szOMYyjeLsEZw0tswIhAPx1PdHvJIgR143L35PdOoclB8cqHOjbvywFFdPBYdIg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLvSCRA9TVsSAnZWagAA5rIP/ixe6f8An/ziIpasEYXs\nAGWthTaqkvaGGVVPDQObEU4k5ZA40W84GBaD6XwGY23EXWDEhK+4oSbKpCCP\nDVY1oJVmyuqlVvan+E3sXKZu5m6xQNL7MaXVK/32+I/D38fTLKNDpaGE5cru\nsnM7iwQioV5gNnBIiWO2P9BrS32TBnPjc0dBuAkQxTWNU9RniHkBRZvc1RjD\n2as9tmN2WWc96xiYXrQrykXaJoGHSe4mDDsbqUs7BRcWkOOTK7/1X/DpTNix\nK3xRnheZik60U0hIAFZCs0XnpjBkuj3chqCva6FAlrOD9pbNBfGM30R0cfJB\nm9I5Hp/fMqHkoY9GYFluUYsgPvsz/I+nJFxDmiBwa2w00Q4y6UpSx3/GPXx/\nrSvmNh1GcpGdlS36FnwCgkNl+WXc4e6+s4t1yVAFLUOCsnxSzToDdjelu8YG\nySY/HZcAAZk83RB4SjDnjShJ0cWMPGLjhlNoRsdwU+vPcL77YkRi7F6kgrRD\nZrd1BFQcWFF4ElHxkKlOjYOo8l21APyoIxhEm+HbA/ddoJU38BKJgirwAUN+\nLE8Pov6HCyjLjQj2i18V7I8MwLxFwFFjZVazYQHvCzBpi/wnOjajV0aYPiEB\n8I03b605XQBX6hGZvBaUzo1+vgyQDbYv/ss15HExnENoeY0Mu1VHJwWU/A5V\nY+yG\r\n=k1+5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.6092f71ee.0","@material/base":"5.0.0-canary.6092f71ee.0","@material/shape":"5.0.0-canary.6092f71ee.0","@material/theme":"5.0.0-canary.6092f71ee.0","@material/animation":"5.0.0-canary.6092f71ee.0","@material/elevation":"5.0.0-canary.6092f71ee.0","@material/feature-targeting":"5.0.0-canary.6092f71ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.6092f71ee.0_1579727825680_0.5086945824760847","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/menu-surface","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"ee1b15fc4d5f6366be9df8efb96e71c69fc00c6f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.d8d95020f.0.tgz","fileCount":40,"integrity":"sha512-rhFZlGbdGRa5awhj4syhpVW0oBb8nLidKCR4dBgRVu2I0VYUweGhrpq8nfr8Sero48tBjqyHnjiIkvCV3kLWbQ==","signatures":[{"sig":"MEUCIQDRwllSYIOYPJOfFwoqvhrLkQnJXYc5VklBXuqHQa5h1QIgTHA3GtqxBZwU1OvSYmOub+PQHZChJbc8NCnjDpUugX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNYtCRA9TVsSAnZWagAAdfQQAJECXZC3p/b1SdIsMDdU\n8x1a41LAvvuWjSK49xPuAAWfO/U7xJs5QeEBo0ijrpefJNhV4O1Lp2Kjefri\nX3qEaRVhtXWTwsyUq3c20EesA9l1d1/UBMc9FEfIfJByCmv8MVt66xmAg41q\nxOC8+Yn6nX9WgAwMZgwDTGJ97BjKqZVaZ7OhDqebV3NvjXG+dOW32+cJJXbJ\nwdgOZ8x4YJ3+d9f+wbLk0YI9oFp1CMl2VIcfdHeut/nNvOZvFX/S+FfiT8o1\nTOCAZnqDV+q7GbfTaulpqo1ObQprJYd9so+EFyZ+I+RKmXRpdntGv5/T6tns\nsmhwO5aqTtoYwr5dZFplSvy1bJs1zy77FC733wh6WMO1YsxSPR29BWFcuCUG\nJ2nfIHtkxoKBE+yZ0KaUdvqxSF4vHM5RH8ti+PruTkTp6NpSs33IeHb8g1bk\nOyc8jS20cSHXuvb7sacZC7/uypcHAjiC2NjDMZw2qVA5eE17zDoN9ypvYDuf\n6nXVxXC0HcbKklBcajLQLE0CX35NTQrCEg5h5zCLrz4YQarJoMfhDqjJ5fx3\nzC9khLt8op+rXlkvGhS+Sw2i9c71sKp9xCSouQwuczaB44z4cFFjWIweVlNh\n2XIV8RGPNN1e4GX71dwXUUPlpjQjIuibxLIyydrmvfobMOGDKND/Yi3aoPiv\nP2m5\r\n=Z1yN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d8d95020f.0","@material/base":"5.0.0-canary.d8d95020f.0","@material/shape":"5.0.0-canary.d8d95020f.0","@material/theme":"5.0.0-canary.d8d95020f.0","@material/animation":"5.0.0-canary.d8d95020f.0","@material/elevation":"5.0.0-canary.d8d95020f.0","@material/feature-targeting":"5.0.0-canary.d8d95020f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.d8d95020f.0_1579734573052_0.7827247143192488","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/menu-surface","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"66439abb8d60719ee0635423c97ad0f73e3a8fca","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.b7facc628.0.tgz","fileCount":40,"integrity":"sha512-AKL311FVCVIxlgC59SN1yxzPv6YaSmla78OLN9dJl1rGcbcSbi1Eleh2oYiOmKa+jrutOP8jtaCeRzabNtEDlg==","signatures":[{"sig":"MEYCIQDn4AoFgKe0jKEE56n5tqfHugyWkmuETfVTP0VR+nEyqAIhAJnf25qjazVO+1X3DVdnFE7zUTNKCAr17vfh1yYxw1B7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeIcCRA9TVsSAnZWagAAdV4P/3w4iuFDnH51AeMejyQ7\nt2z/cxOMN2oHT7pTG1PcTKbUOApqWExvorSPAfwLkDYpx6ljZStlJIUourgm\nzo1wHCW1bl0u/GTmzpUp2yCogIWECrkSkuQqILIKPHz1VUFlv2kbND0Fv3B6\nDDl+lWEzO9jrVihXc1I2XMe3SrFEmcU70qVBpokXvstxecTdCWEuablED+by\nMtt1rEe+UBac9XagFkyY7zIb5b3o9t6J3sjb/FfF9rMFyXXdzvzFDnMW0nGO\nVvAeUedzx5cwWi2Cf/YnZpxoyyrf7ra78NN17YApDlwOkRBbCydtNtoZ/3M4\nRQG/HM4HHx9IcSu+iEbu6ly5pLGnAtG/Riq3fZjhavShFIXCa5L6HoB+dUAJ\nLYNrrnrPzOWnm6/3nxA2ALr6xRQGDkVVsMHQZNyIiVxLSFpZGxL4Zjo4C4dl\nBo+B45Z162qbSQZPiRgkQkm3xn37fWNVDFFKdC/hCvEpSY/rMWZjm3+BOPeN\n45o0KCcS5i5cqePFVL+ktMAwgZcWJRww0m0IVv0qbbg8IdO4LHVJIPXV5TiG\nsbi9zsNQzGxF0Usmuwv1bf3zH1ZVhzr1hbDqtP+2wy7cUWL5vR9eGCX9b7t3\nurE+Pymuv/rfMZRXkehHVs9bQmsP6vOjJ3TktvorAZwbmmV8PRXFyhS19SgD\nn1QY\r\n=Sx+u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b7facc628.0","@material/base":"5.0.0-canary.b7facc628.0","@material/shape":"5.0.0-canary.b7facc628.0","@material/theme":"5.0.0-canary.b7facc628.0","@material/animation":"5.0.0-canary.b7facc628.0","@material/elevation":"5.0.0-canary.b7facc628.0","@material/feature-targeting":"5.0.0-canary.b7facc628.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.b7facc628.0_1579803164475_0.8192705646573248","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/menu-surface","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"29fdeb4f94b32930d00ae29e7b5ee3545d7d4e01","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.63f357dbf.0.tgz","fileCount":40,"integrity":"sha512-Nfez0yMsJ0OahkE4YfPbEoPMzbLyO4zGr4fQaQKVOO4I9nJS1YiPsKLaLDXuVTdsJUMfFpetI/qV77LEF3Aa2w==","signatures":[{"sig":"MEYCIQDPmCFqMNl0CXK1C11yfdKsV6gfrwU0duuPsVpTDz/yQQIhAKqYeY13W7dJOL4THHeG39D+S07J/AzoF2XDQ84FD3GZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhZICRA9TVsSAnZWagAAEVAP/0sE59CxSR8do8nug4uG\nUnpzc+itWnvS0AZsDrxN2+qepx7q+wVMgtTiUoAsXrF/erxMg9SbrMxfI1ri\nY6ssSX9dAXmLXZEBhw1QWYD+UQlUodUBXajBR4kZH6FzxlTnngmimrkfr9TX\n7weic0VZd2JK/bey70Ain8X70Bn971HSH4jLhg4drDObXlcoSlhfTzrac6Rz\nBLBq8N2RMn6DKTQzZ/gIraIKQqDlSzI4ebSgYotL6QAmtNHSz4kMSwkfS/6w\nDxJt29yj5m//+4zP/KyDma5yucwgafUN8LxEnoqjQDFVaI1pXL/RgHv+1l9H\nkNwWOILbGBnLQK5mynTHN+PvsFoZoiUfkWeeqKzh14Norq+0kkaJVUHUx58b\ny6wZ5SVqkuGj8j3veURY0ZZMjNRozbbBwZqlnws375mI6phP8pQHr8QnwpiJ\nsnRtZW7dYX4g2s2BVtsleWG4odfxsKrSTIlAxWsn/ly9bt1pgBUm+G4n+8pC\n4wzwELBtxZQRp0T6c/v2KbN+cJrUdS8RfLlXvuKH92LkTM/hohldK5qiWWPF\nB+SQQhAaGAqNXYRtGRZKXicNVeGmqDKzrPKckysgVqWJKyg12FnOWKpmhbw/\nIkv+tSmsWkdlTUFAtqd2/hjzgg3x6dwHs4D3ulPRSJtwFBN/oEGDLJCMu0kj\nPvJ0\r\n=WkXM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.63f357dbf.0","@material/base":"5.0.0-canary.63f357dbf.0","@material/shape":"5.0.0-canary.63f357dbf.0","@material/theme":"5.0.0-canary.63f357dbf.0","@material/animation":"5.0.0-canary.63f357dbf.0","@material/elevation":"5.0.0-canary.63f357dbf.0","@material/feature-targeting":"5.0.0-canary.63f357dbf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.63f357dbf.0_1579816519764_0.21385418510848964","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/menu-surface","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"af720fe036b9bd2e2a993c25212c9dff31f5eebd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.f2426d26e.0.tgz","fileCount":40,"integrity":"sha512-uQH8Za5bdT7Gp0rPXp4tkPD1/bUb5ueLfy+NZXZAhosbFdLOGLf7RZGMTLbD69xBQl3z6+VdaAvgM0XRM6UddA==","signatures":[{"sig":"MEUCIQC8RjnfpkqA/7Ff9hwNr39NwJcF9xSDmKEn4GlUpK3GcAIgUJa2kfWKGE2uRCy8R6O89rm2O16b65dhb2KPcGhm3UE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjJmCRA9TVsSAnZWagAALowQAJy8afd2Ho+w99Ww1Qyr\nnr/iv8I/2b8prwkz6L/3gCsudWcMXiC2zehuKGsXj58F8PLNvTeU4AwuZWXH\ng4RL1t6cT9TrljFOxT+tJ1GhoBvchnCahNkIElg5r/dMseq7QxGfCY1s+x7A\nhyBaBV39C5dVf9J673jAs0nrcl6BDmdKqrhBgrUXJJKnXtQwAPmRzk8RlSvR\ntH1NiIf7f/bEGwuMNQATB5X8P//JldbodoJ+vteiSiqCmD6GHWSnZ2DqvlZP\n2t0i6OaK6yq2iq1UECFC0bY3UMpTKroyousFTSIv+gh4NYOEqG2JR74sxobA\n0c5Cht3iN5rMnugjjfTCgqkrZ0yz1M5j92L41KEv7DApyVt+XyolfcCwKGis\nT+Rr4NqvxePZTwwCLBKcJiYm+oojYvNXWL7bMuE88ZYE3d6vswdAtFrWvoFu\nNwnKUGkEG3GFPMvkwEPBtxmOeo17NRphfvNFK7D1HekIHtjnhfUMlZmynNK7\nVTNf7RsM2u4j7lT2DX4bXbZx7Ke/FtrFxHgSPLSJ5jfCqL16kchUGJ8h0p51\n9/I5B/+IetIPixml9RiwdEQO7rBzjKvHXd+Hpe74jZQiIafC+oYDYBEDc3/T\nbnOd9mjaUE2TY5h8Wb8ECN8QZxaEMEjsl1EZ7Ni0lpm9gHuQN75RYWhytyZh\nnSu1\r\n=jRSY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f2426d26e.0","@material/base":"5.0.0-canary.f2426d26e.0","@material/shape":"5.0.0-canary.f2426d26e.0","@material/theme":"5.0.0-canary.f2426d26e.0","@material/animation":"5.0.0-canary.f2426d26e.0","@material/elevation":"5.0.0-canary.f2426d26e.0","@material/feature-targeting":"5.0.0-canary.f2426d26e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.f2426d26e.0_1579823718321_0.9083417896656287","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/menu-surface","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"f024c388caad1bff459591e663b509e9dc7d9e34","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":40,"integrity":"sha512-UuGnvQqx+Vms1Jt2VdJgWntx3CLYK1noWfcR9M94QpExWrY9/rj2q7cAHncc/FzdZPTainWE1o4qKX39u4JKPQ==","signatures":[{"sig":"MEYCIQCYhFhknUIWyHji7197Z7ptrbmkl0qYxb1oXLcr1jJgnwIhALeKIHzz2+CI4d0s8LFXR+nsaCNOIAQzptz53Wfo23uk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx+uCRA9TVsSAnZWagAAqwIQAJpk9d2G9PwSUZZi2rc4\nq6i2DnWT7GcKDdhBN2+wxInLt+YhU1BAfQ+6j0BYdjjqFb6bgqdsV01TmoZo\nETzr70Mr/JitY/3mv8UI6y19Q/pkND4EFPxWDWKx8/VQZwE1yWOaW2OiN33q\nc5P0Or3ScJ5Bxyz8GC9g9BR3OvQy2dFdURMCPBs7BWyqoqFL8deNjz5VUioW\nor36AXI4prB3htBY2U9eDBVdQ3rwvuDslh1iSbVIQu38VfYZ4oZzu0xIQhRf\nDjA+UdS5LZcRDu0eOa79iAV0+oCySoYxorrqO0XCDY23FjTGlzggbQA6cNBk\n9xDQ7nzKJYJSsZ3jyDoMybvLOy1iTDPlkikZorVmzeE4L96iNW5qY8CAiBJy\ndsY9LmRXEcFSmEqAa0hs8kka7NPNC0ukpVClzsRp7tFTqLDzFf9jJT9eS6Pw\nqykBUazaVEk5xs6RpaVq1XChPpLW6WX+7sWHq2ER7hnxKdS7qhjYoY6XGwKr\ncSKvS+e43V3leLn/qlC+4vX6JxSfDNIEzAghjKptUxOAsAInuoNCK7OI5UJR\nOJkd7uT1MM9V/hylbZREpn554pGbZAMordwbN8RMFpwkG9ux6LEi/P/IJ8we\nGdS1yxo1YNajn7iPiOH8R9bhLLwtghUJHdFHqIm1gfoHTbPK7qSA3/2LPboF\nUvKz\r\n=qu23\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7f5e0c23f.0","@material/base":"5.0.0-canary.7f5e0c23f.0","@material/shape":"5.0.0-canary.7f5e0c23f.0","@material/theme":"5.0.0-canary.7f5e0c23f.0","@material/animation":"5.0.0-canary.7f5e0c23f.0","@material/elevation":"5.0.0-canary.7f5e0c23f.0","@material/feature-targeting":"5.0.0-canary.7f5e0c23f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.7f5e0c23f.0_1579884462119_0.29071846238606946","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/menu-surface","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"0723adf6459f7fa724ca776daa61371101090428","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.3fc3ab520.0.tgz","fileCount":40,"integrity":"sha512-SmRsY+Vs6Pa/RJ+/JekhUg2gi7YJLl8SDVDIfXcPDO/mDoJkazZHcwhhPLKFtOIHZEeLhT+gCmK5YM9b1KNO0Q==","signatures":[{"sig":"MEQCIC0yKFe0ZfRS9CysK//MKhgCarHEaKVZCnnOCiObogUEAiAC+gwSgWOjPr8JnPDuxjnWGflPPTVD+bsJ9Qs07s3MHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKyd2CRA9TVsSAnZWagAAoX8P/0O3zhLBRac7o35sQK2b\nj1fyGkzvT/p3qyPqRkceYf2imAOOqMHW7md6g01fKQSXnK/TRLcpC1CKlPcv\n7Qv+PlstugHABYQaFU8drFHFg0R7NWlLh7ALgV4tMF6ZpyU9YwP3d1+7HwHB\nWdC7PnHDy3NUs16/IdyBz1ims72mSO25yvUhC11fjOOpzW7c67b/yEC2mrLN\nNM6lUvcYuhJuHHuJnFehFzJFxxJqLP7q2kXK558yTzuU5xqaB5Oe0vGyk8Ll\nAnb0rv4nVswgu/eAX2ODBh5Grwbpyf+iV0dU/n937yHGW7qtExfXr9+Fnu7h\ncikVybKAhhcYnaJscn8gt1K91u1htSIfj1PRcYxyX0npuKeD4NqL33zS7Tea\nGT1MjpwuWZrINohhgnxzuV5ETLAlMhB8jTg4ggPt6nXnEcdCZT9cN9UJt+p+\n+v31Btc/bx9+USlxJjl69PdC0mVp5EMg6L4iFB0V1e1Ix2E7VQm4cViAZg5M\nLCvcerlO8V7DgoD6ZWeVLdQ0zt7XBaSIm32JbsUMB72pOMt2XWajhbKQkINw\neKCRsjn2g89qVWFYJYfi8yLUbrtK/9ivyN23/0w//RZlFRA09y1vdNJ6XSI9\nyuAm7/VyNm99yRx6qzdOl8Z9pn3y7qL9GxfPJkrtzx66nUFkaiRa6vKsZ25p\nx9VI\r\n=Il+r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3fc3ab520.0","@material/base":"5.0.0-canary.3fc3ab520.0","@material/shape":"5.0.0-canary.3fc3ab520.0","@material/theme":"5.0.0-canary.3fc3ab520.0","@material/animation":"5.0.0-canary.3fc3ab520.0","@material/elevation":"5.0.0-canary.3fc3ab520.0","@material/feature-targeting":"5.0.0-canary.3fc3ab520.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.3fc3ab520.0_1579886453665_0.3003346382057792","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/menu-surface","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6f676615e5fee910c1ac1ae8c5bc43e3782c5791","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.80a4d326f.0.tgz","fileCount":40,"integrity":"sha512-QzfvfBTV5SzbMV6pFcSC/x7GAjE6caRX2jy9prBxFY9Jfr3GqDNWyL0ZrxXz7Llxv/WqyYrPBF9R0J+owcNZ8Q==","signatures":[{"sig":"MEYCIQC6UDCxjcRIfz1oecOFWc5JjRQaWAfpOWnEkz9iC1qdggIhAJLoyqJGvVAjbQXaMadPaZ/8e7CKjNEd2GJEiY7ON300","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1eBCRA9TVsSAnZWagAA2qYP/2opRiu3zUFBle8kFDdZ\n4BY4CXaLeru6uHubetOU/0FhSqro+WaahLYOgzt+WoLzTLFPXVwA/YMwekd1\n9CjdC8vfhwLqsKe2SK+Cz+IfLkrOAcNZPXPokHLeIkyQN9r5/PaMau4WDgGK\nHEHPBvFro3TRFIt6flEXQi+3JeehxdPlkriG5LUxGE2/Lukm0qLWEniN4MJ2\nMxY4ZaufuIFvueK0rpyf5q4HowEM5mQo/UbLsofBPUBb8m8cw/5u20fIg1jE\n2LoHBZNi1xgSpmzzMrm7+n4vdafW/m4uhj1jgWlaOUOjeRJHOAVWRVooxA+X\nxloxXgMvJjf6TNq8wMdjlHLrvXMFW78LUUvAC+nJpqKwzVNV56fo+fjrZxB/\niir9pOOAGuFvav8kjwhH1VNlHV54kkDiexQCdh/4jKzgqx+f601gOFe2gNzX\nrZ7/2vMauaMoChzgUiuWdyinV3FqHCYHQIce3BvPa3RazOFw6cPL/Y8CuXyU\nmAu9mkFCe8mw/4AgO7eE69jIgQEnV1tp6JWly43S2mt4xmngyWTQd3S8j0JQ\n9aPkbcktXw/6HFG0t3j4oN9G6uxQQ+PIFo6v3yoqyJ3h8low54yZ6M6I0b5g\n31z2DEIFYRwlF5/IpizKwwD6lSLowxpET14j4ya0YRSPy1834VqjBnIWQPEV\nhFrG\r\n=G30/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.80a4d326f.0","@material/base":"5.0.0-canary.80a4d326f.0","@material/shape":"5.0.0-canary.80a4d326f.0","@material/theme":"5.0.0-canary.80a4d326f.0","@material/animation":"5.0.0-canary.80a4d326f.0","@material/elevation":"5.0.0-canary.80a4d326f.0","@material/feature-targeting":"5.0.0-canary.80a4d326f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.80a4d326f.0_1579898752672_0.6158578730194646","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/menu-surface","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2e18cb344638d7aff222bc30d180a45fd5b1e843","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.ef7de4def.0.tgz","fileCount":40,"integrity":"sha512-dlotolUZj72zGFjpwhaExr4KbssZ5FMnf7HE5nmQxQZtT6rTNgPp3ETP8/B5B0FwuXrTMGWVxa0XNm46NKZ2rw==","signatures":[{"sig":"MEYCIQDOdADJGmGFUHw1lOEcig6MfEUJ9ulaqPQ/ouCpxGG7BwIhAJI8nYuvrOUSPltU+DULOxu9ToSy19OmeEd5oHdwSHcu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2JhCRA9TVsSAnZWagAAlF0QAI8bzc+CKODOybkgmyi7\nH6nr64EEeZE0unwjQqi2vw7xjq1dGeKmSRmDF64Svf+cM4XGAsxuBTpqDuIF\n+OduV7bv29q3HEEUL+s169B+ttvoqnGwgnGpLfK32/VJT+QpH5mxM+ScMzX6\n/gZZbj+12dkdAwSM+CJ6M+2Py187VyX36dZwzwMeZfCAVttATtZuZHzcQhsf\nLQF9s+g04E3mUf6Yz+PpK6r8Av8VCpiFrEOJ7RTl2AeIlNXWK4oKZZLYfYOE\niyiATTJqHTrddm9Sz0V5EdqjSVsqTjFdo0AFPFdrZPo8DXGfQPj+KdMWbLZ6\nxqzabsEJidefH/glL3Z4DHl+sCm04Hi9IhtEGLJ5F/Q1Z85shCXZubtyzEmH\nIRYAJk10cmBmxQl7GA9eWVIM/ZUc4TE8hsdViOXiyFskFSh+LdD1M7dtOuGo\nNOnmR81P9scY9mi5O/HG+u64UhjPtDeS9kfZVHumcJ5GRnFS4ia0We1jxeiM\nYgZG/I5knv3ZWQmEt0njHjW9UIAX0sBF9Aewlk/J7oBY2/3Nwyayqsc1L4U3\n1Vm411HiSWvcnjIjDoXwGlG7wI0rUBqayzv4ZvYxibYRkxXoY630Q8lNg6sn\niklCMigUOWe2f5FIS3oytO4GkSilUYNlXXPOptg0aLISMA23QmQVtj/8XrY5\nSyu8\r\n=Jns4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ef7de4def.0","@material/base":"5.0.0-canary.ef7de4def.0","@material/shape":"5.0.0-canary.ef7de4def.0","@material/theme":"5.0.0-canary.ef7de4def.0","@material/animation":"5.0.0-canary.ef7de4def.0","@material/elevation":"5.0.0-canary.ef7de4def.0","@material/feature-targeting":"5.0.0-canary.ef7de4def.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.ef7de4def.0_1579901536615_0.6728790990010687","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/menu-surface","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9c85291671f1b13b073274cd2f9b1aee0df4a3d7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.93e2288b6.0.tgz","fileCount":40,"integrity":"sha512-RnQ3FC46BWtNcJWkRPHuL/YevyL7w11BdGW0dDClQZPymryllOkgjlCfsyvzThmcJDZGW8jfUCPYjrrA4iwj3g==","signatures":[{"sig":"MEYCIQDh83lmWPKxZW2QEzuJvxYbx34fciBP9bdrOk8j6caf6wIhAKZNK5FBPh6nuo4wZ0fJQONmTlnnLKHUOXjQGqfXdvVi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGelCRA9TVsSAnZWagAAo8UP/3Py1nfE1XOhuixGOr+J\nZlTNqeE8YhX8fxBuPiHqspZeoRmjH/TM2jDRThXJRz3IRH3ijC9WLV1JRNyp\nhrPV01mbIgUMwQjPi03v3VRVA/xSATHuxpik9kgbm5dhhCDYn9Q2lihDEGGK\nmfPveAM1fvomXsKzZ9Toq3PU0ZSUqxKJ58foNQ1vws7FxAm1S3ApvsqI8CwV\nO92NXRlE6kvi90fHyGyCHN79kjEnqWgDDltmHontToXAy+q6fHodc9b3+PNM\nMiJNBt4DaS9DKGqk/DLjFOTiZuLXKxabKjwJKUPsIf0QOp5gjg/L/n08V7n1\nRzlsfIImsjXvSIRLf5fgTSr1YSFb6N4oRxePjCesTjHbJoMSj2qrXeEbLI0H\nzo/sABXLLrNq1QcGMIdHl7EfQLaaBVkUypL+IhmIo4AkPK/0NOVUw+ptjnss\nwcQ0sR2R3CkNdShv8iROvZ3VqVJmlVCYnoz07AOJc2nvaeXHaSl1PBvKN4Z2\nSmGKb1us6+hW7f2eF3NiRuxMhOmMD+6lcFhInjtfwSOGXavulFTHd11wdp0J\nM/n1d1vDiJXMIvDuFpOZZ7p0wRUeECxbFPXpThP5uyIikTCycFO2FcQiGP3O\n3OgTExEtSnhP5vWKbnns3Hu51MfYgHIQXjzvfPmEUu6cZcQAfGE9+6b7PpeT\nuHvE\r\n=fCYQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.93e2288b6.0","@material/base":"5.0.0-canary.93e2288b6.0","@material/shape":"5.0.0-canary.93e2288b6.0","@material/theme":"5.0.0-canary.93e2288b6.0","@material/animation":"5.0.0-canary.93e2288b6.0","@material/elevation":"5.0.0-canary.93e2288b6.0","@material/feature-targeting":"5.0.0-canary.93e2288b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.93e2288b6.0_1580230564553_0.9890050449291172","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/menu-surface","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"1791d809c854c3c937d17fe79ce3064714e94625","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.34ef15f67.0.tgz","fileCount":40,"integrity":"sha512-1EsBSgcX9rdKi1C5eJi8aJ6qycGpp0qjEXVVWtVpSeEK1cYAir2yjfuGG5/4ui9eV5LrwzE7pghjkQ0OTI+PjQ==","signatures":[{"sig":"MEUCICjNcTOisJFC/4pFyoYvs5mcw5W8wWqNlVy3Fj+0PpaMAiEAu9VSjMQ0EeyXL5srwFOr+78RosJtc7JVcwJgVAS2/ww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG49CRA9TVsSAnZWagAAbNAP/03wwB9fgFfFJiMDvpJp\nQf3WRq3Ug15EnYC5EMa4rp1IdHduEiPEZFfnhydWuWvmBIyWZI6IM9Ft0Tng\ni7T8PeCiZEdDr/BWZL1kJwz5OfucqWmm42RCGMT9F8oq8I2Kcuj0PQOuqCKV\n50D1dd2efqIYk5Zc68EWHAx1jDjMSZ/vsGAhBcvX3QvOk9WUEQsYAjctUJAr\nkxWB20ucpXQ7ZLIeM7rhI4J79rEYjpwodshpbwx6hn0oyWA+uysW85aEtbM0\nDTxTfE3I/Ys2uIuCJWY+PCQO2GmzWsYj536PdR0G5rHHw0NuOPD0OTiK6b6z\nZOTPGofi3vs26vAPc8XUdOVyd7CqutZh0xWrbpoux2QdXaBTHSBNGaP8+32m\nNP2yCLDum+PF5C7hISewVJ/tHeXIzcSfpfCm8slGEtVg7wRnRyotmd47wUif\nfPykCMuWWfcIv1Yx+e2mJtUiYzD6ai21JMuefMDppEwJHr/3RQlgL85FCcH7\ncQp/8NvykFp/uXVbyoidJIfjiFAwe7aPlkUaNgvkhNTfmYm1ha3jClctl7OS\nS1gIjZbb1kNnoHdo1eJvA19m2lNZFA3PtzABapihQPiVjzx5iWQXd+o43E8v\nNCUAYTi8f3YG7qalBQOTEx5riHbqJ/sdmR+EAFvWaBx9jPfzytCp+szzdRl1\nAzSl\r\n=E8eN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.34ef15f67.0","@material/base":"5.0.0-canary.34ef15f67.0","@material/shape":"5.0.0-canary.34ef15f67.0","@material/theme":"5.0.0-canary.34ef15f67.0","@material/animation":"5.0.0-canary.34ef15f67.0","@material/elevation":"5.0.0-canary.34ef15f67.0","@material/feature-targeting":"5.0.0-canary.34ef15f67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.34ef15f67.0_1580232252919_0.8672893349484696","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/menu-surface","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"75fe5cd4e2c3f7507ddc8a5d0a09a86e5f13cb06","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.d3d176ba5.0.tgz","fileCount":40,"integrity":"sha512-jxdAoHTzUBuUjYUX2gk7ie1aHxSl/pXPa92vagj327OTjbKcshFxnoiKT7SL2tAK6EicKcAh3SNp7usfm2xGww==","signatures":[{"sig":"MEUCIQD9rJNU6Vehs+ymYXCXJSdD011dwVoO6TFtMYT7LVP7yQIgaHRURbm4DJGPBUjPZIBzi+4VreSu5BTdywMZMQKqkcA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG94CRA9TVsSAnZWagAAqboQAJ+dsZKClaTG4jdPmLuK\n6rBrjZUkJOrL1llaVvb6AkQkxHd16uuMYZj+lY1YjKgM2Q9iQOhHTZp/VN5U\njQEqnoUIWH1kGa8PJJPgcu/WgoxaiSIoq11KZGws17v8BH8reaAyyw3ZrmD0\nP1ozSES4yASxiCeS+8Av85dRQbvUd9s8h6TbOQKu2IT/RR5qdySne1OkVOvk\ng1UDDYVdcIVH63aSpgTG64MGGe1xyah2b2ZGwTKacBvTGosIeE50EuxwH4C6\nnp1bGVV30//ZC4KOKGVYiXiL1SXCIhYZrHrJQfZQCOxWh/f6XHXQ2FgmSJHK\n2iQP0f5VZToYsmIOAta5sC+Pk7zUolb3LQwjcnMhxh9TPtGRX6Xpkxy/VpVV\nQ0824BAzGmTt4sLZrNl2OW3a6qm3r95TbP9OG8JFnGiHy32KhCWUWTXk1/QD\nCVgeqggwRd5mmd5KYGz7Xj1lkfaz4nM2KQ7fq72N6G515Hb6TvyxpAWnxhiL\n+r2TV9pMUWNXhL0iuDEOzrynOUzoHZHJR3rEDGbh8lLxFK6HsdhsscZ4lZGf\nepzw5A8GsgOhOe/JrBaJ1OMX5jqOKdUenQPyldFayvXdONiGDhEt+G90tLVI\nv7vneRRpCuiuBtr76/PwITWfiZJrVdK3NN3NWFCMcbX70+Dmt9qI/unLQO/n\n0ZyY\r\n=3Ne+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d3d176ba5.0","@material/base":"5.0.0-canary.d3d176ba5.0","@material/shape":"5.0.0-canary.d3d176ba5.0","@material/theme":"5.0.0-canary.d3d176ba5.0","@material/animation":"5.0.0-canary.d3d176ba5.0","@material/elevation":"5.0.0-canary.d3d176ba5.0","@material/feature-targeting":"5.0.0-canary.d3d176ba5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.d3d176ba5.0_1580232568246_0.31539974780656777","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/menu-surface","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"32f735d359750d91f8db78e0f0a542e11561d2c5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.32c1df133.0.tgz","fileCount":40,"integrity":"sha512-ez7axUXdtvIkBNSYKCprUbrNiWAPiYCkifhUysxuj4BPR0TpF4FJ80w/1EkNRjRwDM9MYkDgmtx1I8RoSBj+ng==","signatures":[{"sig":"MEUCIQDDvGhinEglRkMLG4dEPQkDO3fmNXLTdETuUkdEqHno2AIgCeUVbDikMZvgyMQtGH2txBW7HavGGLgb6kTZGdCQyfM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI7dCRA9TVsSAnZWagAAC1QP/3ha2RE6Z3CvFCd/v7Bh\ne8rLnOZvTlZ/U0q3JntL0ghAITFsNc2Jbi/QjrxRUFAo33Vx6fHHKMPhOgBY\n7XY4PfTX9Pv9nP4Q1cbAu2SEPY2OXXzAISH3Q/vBe3y2p5TcN+gT6kiTX9Dr\n/ihAWIOyC5OBL0gIeQq0/QDnZE6A43SyFQLmdHpvP4ABWDG+HYqOM1TPqGow\nzNIdpYiRyEfaCcysMtAnSVVSo9La2ancWmhVqcazq8s3+bPhXU+i0HgCeEPO\ncI0c7odLCyyAYlDi7XmVwyd8hAfKXu7Z8cfshsEVgek/rwTA+eqPruK1f/0k\nGv+QdBRn1I1o5AfwbCmMSIYBe1XTr4ctji4iGT+HIHudN44vygQMmC7UoCTf\nf/Uy6ci37jIFP5huc9LJHJR61ajqEMf7QCKLppg4KF6bSBNVFpPsRuuPqAeE\nDT7YT5MiR9wwv0/VnicyondLnDU0xUDwT03gwiyVgC5A4UFZIvRzpx3qlYt5\nYy63oBCBZ71cs1MYhpO/PS4eHGXfC518haRGcIsLMm+mV6VmEXanzKBSM0Ej\nbjKhjEt3kMrY+3vg9M+K8+CaDe1TA9eKWDbIJtyrdFmPnEWkQ4A5m5nRD9pk\nSBJqszvnL35cEH794tMCRJHwaYt9SLjqOU+fZ2jkPrQNjMyknhV/8etmwnZh\nTNj0\r\n=gEUu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.32c1df133.0","@material/base":"5.0.0-canary.32c1df133.0","@material/shape":"5.0.0-canary.32c1df133.0","@material/theme":"5.0.0-canary.32c1df133.0","@material/animation":"5.0.0-canary.32c1df133.0","@material/elevation":"5.0.0-canary.32c1df133.0","@material/feature-targeting":"5.0.0-canary.32c1df133.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.32c1df133.0_1580240605225_0.7718797568995299","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/menu-surface","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"94257e006cd9bddca26027065c1e0fe19380dfa2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.f3adce86f.0.tgz","fileCount":40,"integrity":"sha512-CAKzAms/tAbszQYZ2fNenkQG2gFqkHulThPnZhPco0kkvMauB5zlVkRW8pYTQKvHmsWQ1CrPXrdRpt6H/7CmJA==","signatures":[{"sig":"MEUCIDZVeRgr3oWeGW33ALFmJMmjoP0xQt+SRW722+hljECGAiEA/C0zZjLED2tbma6gBIunnicJGgLN+T7qisgmkfFeXTw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKxRCRA9TVsSAnZWagAARqsP/0rZqlqDFDAZsmd/iC+K\ntN1CKONH00W/ZRqpfpxY4rdHyefNCABoerbpZoaq/ouIXRrLc9rvc7yNO/2u\n1Hs8tVXVgVnaZkawxDt09vMrCEdN8FmOJYm6H6nwNw5EltSCGbw7cgyTf37Q\nyxZRIp5OJH8V29vWKhHFUhJVPJxknK+2HFW02MlMRsFzjec+cNtNZB9dl6R5\nAUSe8V41lVxbdSCGrn/6rNCL0e6gR6kXo8mLUawEaQdawAUsXo+ztqOsL3yl\nz+urPHX6and4QclUuX24I2zaODJxAbfkt4pn4VglDXLWk8TG1cghU2TFGzR2\n9eIHoWeHDAFyzG1XZb+YH+QqbTaDHW3PtCC1QJtq53qC+7CboA9BSxkTBglb\n9/D9OxiahlC9pQARzixSHiDvD7azLJ036h/e0PKYmTq7wet+FfvBNd9hxxcj\nDlhwwHgBjYkm/YBnMyj+7sLBQsDgFFfEgs11PgwgIWqP6DogQ5FpjolZy8wy\nB+4R+t8gTxpXfbIVwDoqMr8/jeZisNVsdYpsBOWkcTNZ/+4GW7yk11NZRNCP\nB6azCY8PxOiNj1ekrbF+LFdaJgsq0Tcy+6u+UeHQMXGCBIsv16T1rMZ1g/nG\n7si6aY5HFECWNRUsesz3AetWplFrC2Jc7e2TQCvcNgOW7gI7aPVUM3QtZLFV\nhQ36\r\n=HttO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f3adce86f.0","@material/base":"5.0.0-canary.f3adce86f.0","@material/shape":"5.0.0-canary.f3adce86f.0","@material/theme":"5.0.0-canary.f3adce86f.0","@material/animation":"5.0.0-canary.f3adce86f.0","@material/elevation":"5.0.0-canary.f3adce86f.0","@material/feature-targeting":"5.0.0-canary.f3adce86f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.f3adce86f.0_1580248144925_0.3504243606997204","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/menu-surface","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"833c14c6d2914ee6151cd4661f02151f1c76822d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.a4423f890.0.tgz","fileCount":40,"integrity":"sha512-vaYTvjd6MGTRchQUKDYHo5MHHmeyJIp/kJU7EnVTHuMdTH/RLcnW946GKVQFxnFoQWbU+KiYmTuaQg0wgTRoSA==","signatures":[{"sig":"MEQCIC0EExwgDQX6hjT4DV/wCIma1j56dSx2mi4uPJpCNLOXAiBJIo7G/GerllGBDJa5cRVis7IJdLJleC0G7VHGlsFzJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfSUCRA9TVsSAnZWagAAEt8P/jYzxgT8NVBaTpbhXKyI\n0uYoR9dM6GIdw81UDANKJumXx9wKvIDrPya+J/KbQsqf8OLUbr2O2inG3aQ3\nNuUk2rC/XW9/ywfoLjt4u5gjxsdrfgvEACR/4dEmM3PL4O3sMIcRFh4yi0oR\n8D5PeA04ahS9DLRFIiFZczQADU5SVPixhuiZ9r6mAzgFAfyniuHhABrWiY/5\nkH9BhSxl9J/RvsTm/QiZlAilONBDe4knUPSu+ynt7s39xANlsNt71MeSi5ZC\nNnP/w6Xf0GvXJdl1iyiaWS9AnmeDvrGvAldtTMZZsa6/O4uoIB6SBgrdXvsM\nrwpqBOzScjqI1x6++DQWCEr0Z4bZHakKRRhZnZJBeVDPK+EFC8kJexavpCai\nsOvu4u1cqIlzqNhSkKws09KesDi4PlknjyIw6zjObxgOYyRgqeThhkMWSRgk\nJWUGeM2OJkl5qz7+2TE4INukwYLxPgz/seiaU8/hv1yDz7XWYMIcbBZuNQXu\n7C6pwopUIrpHeLeQjHizdT3ckTCouGblMSzfnPvKvqfBnt63X2s+RYCScznk\nsffrE7eVZKTZeyQ97RxBlmw7CTgAWwZ0JOrWymg5NQmwQ8Svdbh2EE+Z/WiI\nsnyEj8fVEFsm1MC476dSV/wwrfmG+KeP+92louWdtWs6X3iat2x/9wjGjdty\nWa13\r\n=q5PD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a4423f890.0","@material/base":"5.0.0-canary.a4423f890.0","@material/shape":"5.0.0-canary.a4423f890.0","@material/theme":"5.0.0-canary.a4423f890.0","@material/animation":"5.0.0-canary.a4423f890.0","@material/elevation":"5.0.0-canary.a4423f890.0","@material/feature-targeting":"5.0.0-canary.a4423f890.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.a4423f890.0_1580332179778_0.16030841900609083","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/menu-surface","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"134a28f9b4962c9da49d36c4987efd84f5ca2622","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.9351f167d.0.tgz","fileCount":40,"integrity":"sha512-KVQ+Fd5PGQ74soQDI3BNURV9jz6XdGN66nockbvw//O+F4ezqa8RNybGzj2hW+70lg0rSQc60hsn+6D0yox7VA==","signatures":[{"sig":"MEUCIEFE0qG8Lezy1VThwBZU5PASdP+ANyfXnXbcOfp91zZaAiEAyNOfC15TR/YzGvzifw0aEqSfvmPmRitmJCifXe1bHW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf9gCRA9TVsSAnZWagAA2tsP+QCmFceRkw17VSBjBNi8\n3EtxuDNJHgxOXMjORCAxMxyUX6UvXjSBTtSrTQk9O2es2eESJ/JJpkWWkU7q\norkujYV9pv45dx2IwjPt1Ze4JSzaMtgvHRYINE4AT1TpgM8ANtVmakeadnoi\nGisj6T1I8BquHYi0rxHsNWwQ4BjLWuCp29fidTwuBx68aN30NfIXTTmZPWh+\n+kILMAy4ulHHQTBKosJWpTTxytTKAzmyXm6Mf2hzgbNt+JD0WI74KdvNKcqe\n03Djf1EDL7VsuA7jTtWtIpoR7FJXjBNp4TCvtEmHfnG5PZ1PBqtzz0MRkIwQ\nt2ca3vL2H8u3RSD5f1+jMq4Kc3pKG/wHAZCbwP+2nQvNgvwVqsp49uwhipoT\n9vkqZAq24LOpwWO89mZAkDAKHwI3JXLjQwPSxz8e7KFaO0BD6ja0wX02BTEn\ngm4ViV6B1khFfgNcF19BB8fhhgJWqS4luIssZYPtN3VYegLdtvtqgux8qzV3\nJBQvjAa4kqvKBRoIywOO7d3jEejfq61Dp4AIhivcHXrDJKtC24WRNbCgENw5\nNHKJxbRqlP9rrDgeb5lU7ZJOKBJbG8cxTYCqjpPp5gh9uAfdF31GHnNO0lRd\nR44jHuGw2Yrli1AicumlbdCXvMor6/hu6HIl9pexXlqiZDBqR0ajb9Hutt9Z\nAnoU\r\n=MtAQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.9351f167d.0","@material/base":"5.0.0-canary.9351f167d.0","@material/shape":"5.0.0-canary.9351f167d.0","@material/theme":"5.0.0-canary.9351f167d.0","@material/animation":"5.0.0-canary.9351f167d.0","@material/elevation":"5.0.0-canary.9351f167d.0","@material/feature-targeting":"5.0.0-canary.9351f167d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.9351f167d.0_1580334943764_0.7655461643062311","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/menu-surface","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"336fbfad9bd88e37a3e736d4735a6b82dbe4c6bc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.29b89dbc1.0.tgz","fileCount":40,"integrity":"sha512-IeHB28fPhEKRdEvntWytD222QdgACnnqTia8bG6cWYmTiktS1pNXfwYaOIycR1Mn74HsBkKM8cNunE22GhMTGw==","signatures":[{"sig":"MEYCIQDajn34abCOvplPW6ogYA7AF9ROw5eGASl8DaTgYtJFewIhAKptyaKF9FAHyETSwssoSC3M2jZCjoM0CtQEuRvNVIKg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgRZCRA9TVsSAnZWagAAfjoP/01933lbHe3WVrqwDnSI\nPneb4xD9X9iSqcbkGTC4JFfl5C9sYPi2VIKBJAiON/X/SAjqsR6bz/f4YlaV\n2/r8bGuo9kDETQlq2UohyIMUe2f0qUTAqLNxiDk9idYFTAwYAIb5iGunEAWT\ntZijdrMAQUvkPgFUjrHjAVRZ9/Oo7mdrHNlJPF7563DLGPg8/KDkJ1lQZLbH\nmM4/VTIdBrnVnZ8WBB+7oGHASP2/GZYAXp4hvhOZsp/uk+B27mT3F7tKcCqw\nMNhDt22x8Lf+bWCyuY4C7ZM9TtfpRi32t3PY7ax+GrXLnTBqBG97qjK119C3\nhoU4JeB0BG9NCXzL0ALxgPutk8ELnc2603k9lAUT17eDai3/oM3TlpFI+gX9\nyVqgJMAY0DtPK8H7tzooBsc1zWasow2wT4VPBLOET6MfTgXPg120OqMasJPA\n/qv04XWq9TBmykfvb2llFk8hLU/MuRchPzLuNoJPf5urI3Onu320lgx6Wo4a\nt0wfPk2VnryVFs3KY7/z1oA4MJPd69DiiQtBeOpvZy/8n6zWKBDGS0QkWjqE\nVjWXym8kDY3s3n6jYHiMG0P+7UasaJHdfI1IXv9QUINTgxEUJHI6Teyp95Tt\n4YmCAsnXGROIjTQIu5B9tlpKesg8HUhY4KrRPG+7fFBQx4CNAGaaJKPMBEYk\nNqWX\r\n=DiFy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.29b89dbc1.0","@material/base":"5.0.0-canary.29b89dbc1.0","@material/shape":"5.0.0-canary.29b89dbc1.0","@material/theme":"5.0.0-canary.29b89dbc1.0","@material/animation":"5.0.0-canary.29b89dbc1.0","@material/elevation":"5.0.0-canary.29b89dbc1.0","@material/feature-targeting":"5.0.0-canary.29b89dbc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.29b89dbc1.0_1580336216570_0.4213135582829224","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/menu-surface","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"48141b22a9b06ba5e703162d3bb61463bbac1755","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.45985457b.0.tgz","fileCount":40,"integrity":"sha512-zG2WwpMSN3Dz53ZNqjDExEqUat+PdUrisdZfutIyYryT5232WTf4Kh3S1M+8gEm2nqukKdW7cBRz+HHd12Fuxg==","signatures":[{"sig":"MEUCIQC5P8Z9Y4rnxzGCPoT1LdBuTSFvAgGIok7ud5hun2BUegIgU/O1kiko/3kNfCXKl7YR2duWjzTgiJooQfyhsV9YmmI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhYvCRA9TVsSAnZWagAAnnIP/1z153IyIBVRAYkrCYJx\nU0QD6CisqY9TWTAVfH/zWQh2SiznxUyVSv9/IS33GGHVyqQ4bS9Akc1DDx40\nmBWp/GpJTMl1ScgRJO68WbxQ0YSIfjmbWe5AubtyqoNM3lW1IU9JFT7X5gWk\nNBox6fnj/aM7eMpSJO5F1LGQVPnHbQq9kUYqNEWMv0L9I2SYYl00kbZJ3sVs\n7yzkeMV8GrN2ZAWGyFnoUrutAk6iB3aKxko64M3Moly1xmPSd5FYKi6QqQh8\nrpsKRMt6Rld4IQBBYLrpYLzhemsO+nPhIU7WOewE24jKi/S9ilt4BmoTZ93d\nzAxxg4lrL+1iWK4Fk7FCSGIc97W065WXTJ/N4SiXnxkSF7FTO2vHQpYiQ7m8\nVtuEjP1pdCx27I+kLjkRz+IhGpc7rX34QJDN3jX/35mhDANYe5d8WUxq9DcO\nSUBAxRbK346iBhXCJwVYS+s1ihbPTHn/3KKVLvmVs/zDzOBfSmgISa2Gqw8K\nQRETCZKvDyS4ZH+7x6sP1AatbFIcRnjQ8XvFTpGeQFA87FnadDoGTXKJLb3B\n17DbgNmiFbdwx4za0Yulu85fxgZMVQ2M3hgATsQOWFuRreDD6s8/MvPHdsP0\nKHOzcuusqXvG/zaZ/Sxcbmz7lny/NovEd+TGS+W6QkWyz63gB0V7ElKMbdsj\nqfEb\r\n=34AU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.45985457b.0","@material/base":"5.0.0-canary.45985457b.0","@material/shape":"5.0.0-canary.45985457b.0","@material/theme":"5.0.0-canary.45985457b.0","@material/animation":"5.0.0-canary.45985457b.0","@material/elevation":"5.0.0-canary.45985457b.0","@material/feature-targeting":"5.0.0-canary.45985457b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.45985457b.0_1580340782679_0.8272046769772179","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/menu-surface","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b04eedfb6280d8ee2025c2e2de35afec01ce76f5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":40,"integrity":"sha512-BtmEI5AoJelv6g/qmY1dn8IsJt2PqUCRLNH4HeW4+Og+cSS5Gt5jtBfFm9/oJyKNaqYH8IImFmPSn2isBUTyyg==","signatures":[{"sig":"MEUCICNsBRiu+sjlNlwC//AfdkEPJb5LrxK7tYZxk+s20CcxAiEAi/zPsysdfcrQdF3qCCC21dG1lRGhJ8YzBSWVN+fxuRU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxRTCRA9TVsSAnZWagAAr0IP/3H32nB1U0x5Xtz/Ofvo\nyofnL2Ag0n05tPDfg/QlfLTz99/Dp8n3OMkZQnjyEbqD/OrqVp2aVzqUC9nk\n+weuYlIWXqVx7ojjIVaHFWL0WASb6h/FkXEAvd07KKKzCD4TnRs1k5K9A33i\n+5H0XvIVvzbzDNd19Qzlc+bc3GS0HkuklpcYoXFbrnHCdHcMK3tHKWmjsZG7\nzdUX4MPHVQ1pFHpCdL8C8oWsfn7OeuYFzLoAx2n4ZfgSlbjO15XijQlHoyWK\nHSkBcxpkEksh4sWqNDSd9wcjzB7SPrrBBBB8wZPJR2jMi6M76qBxf6egTSPl\nHC64rkkcZQpRa+Rut1Ukd1TMRrkHnKrgDl8kHEEJuisrkvCQZqZUPkd0cCmk\nW0w7aoSAb4uz2a5xjXoelvxLJJIww0x35zJwbjuZKtLpfFLudwbQQcPAzgNw\n/4GQAv3rEUXV4baMbKLiEbFEltak6P9qtRqOxohInCOz9junpTrq6Ex1Dw0a\nRHsDrkOie0wo5CuAN7do76I0g8QXppFzEaySpZ5ObWtGzrCTU2UdmQwuw2my\n2sdmQslL+ePdtr1mIVsTZeTHEKhAu37yZLlyJBY+dhDZI5Rk2skVxstMCHJD\nh/NB27vczlWPbwUxuYPBPk8pPPK8vBBm/EOxUfqj0TX6ZFwhSr4RtJobzHJ2\nlCuD\r\n=oFML\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a1a0deb3e.0","@material/base":"5.0.0-canary.a1a0deb3e.0","@material/shape":"5.0.0-canary.a1a0deb3e.0","@material/theme":"5.0.0-canary.a1a0deb3e.0","@material/animation":"5.0.0-canary.a1a0deb3e.0","@material/elevation":"5.0.0-canary.a1a0deb3e.0","@material/feature-targeting":"5.0.0-canary.a1a0deb3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.a1a0deb3e.0_1580405842747_0.3534725359737676","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/menu-surface","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9bb5fb5dc0600b6f81a15919d3b0c61eb350e46f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.181486643.0.tgz","fileCount":41,"integrity":"sha512-QHpAdRAsK7xQUxqtirxlsj2gBCRCB60MQuGmSmoPLkaFXWG8Q6rBjWL5GTy00IEBVx9WxuxT/8XzO3+wWbT1fw==","signatures":[{"sig":"MEQCIFg4v1qg12CJzt3dHvN5imW9hKL18m9ACykaafKyvSNYAiBhhNvDg6EYe3c2ymS6R67h+Mo4+3sUu3FZqjPbCC7WmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0LwCRA9TVsSAnZWagAA8j0P+wclwW+ppXkIFkT9ytHB\ni+VuRzZLkPFGnbt/zZIL0gLWxKxDH4nPK7BeW+/UywIOEVpyVAUdL+FeTjsn\ndSiWfQ0DuULCBtdNLrJa7KEigXsNPibvqKlviP4fXivPO1RWxqusLsTfr3Vz\nuy3M5BpCx3BL1yIKBQv14h9vZipa4kUyTDlGrS4CzgYHDitAa7DkAdzJDouq\nSPYOMwRc2iI9orivthK2yEx00Ivw+94W15MB92cFOISSdBO3Bmgz4qbMI+HM\niec6z2wicWNzxIF6b4g45/vFNzmAoFEmCEB8cly6DyXn/r45XD/WZprvVk5Q\nhr6RQaUIgC0iO2/TIqC434gD//uCDe0yOWt6SKXFzY1RWUlpchta8n3hUMAF\nkyqStzkOFcjQf7eEjjO5JkQpuh2EqLZtZbqIjNSC6SzW6kpWwxE5Gf7b5sYc\n/BdBOvucSxx24rSKuSxvRkSjvBTvNUrwIMDsL4pITPyXuxJGRiW/GZcBLuEn\n4oobS+i+79pIAkY58qW4JXt/UBTTa46MaaPDZyYY5ksCkp2LulNRc2hBqUaG\nC4g0MvNRO/O/iUtoqEh7iYU+4cPI19aWWhGkjoHxlQkcMPImjiBvWwXAwb+R\nkc4TNUdRjI5UDOeHh8lX8T6ZyOfT95u/z227sDM+QCfNwdLXvG2QQ+Wx7L0q\nKyGK\r\n=Rysq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.181486643.0","@material/base":"5.0.0-canary.181486643.0","@material/shape":"5.0.0-canary.181486643.0","@material/theme":"5.0.0-canary.181486643.0","@material/animation":"5.0.0-canary.181486643.0","@material/elevation":"5.0.0-canary.181486643.0","@material/feature-targeting":"5.0.0-canary.181486643.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.181486643.0_1580417775505_0.7864423062220014","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/menu-surface","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"cbe99eccc607b1e09faa28bba5455dc9f1da8526","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.3a85313ac.0.tgz","fileCount":41,"integrity":"sha512-ZUAfW+tA93oTDGgervlzHtwPzpRsuxYHOVT82dU1AILUQ0oz/jQaOjvhCguW8L0s5K+YZgpEcro8i4vmKgc/Fg==","signatures":[{"sig":"MEQCHxl7vGVQdxui31tqN6GbQ5+ZUfY8ak1OeiKXKqs0tmkCIQCKNh6c8LaD6oOAHO92a2fOglrHfFszEFq4aywJGBE4kA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFRzCRA9TVsSAnZWagAAgcoP/2Zcp1Wy+8ShPcbOnHq4\nCLjN1qx+0B3UxsZEeFl3zHWl82mRHxYZ7piX+LQ1fwE/+o0D/cJE+oYuwIx5\nlbnk2+LsQztH90MrFQfcjHtly8KA4OvM6a01olbbrl/hzNVrD+YbPA03c/HD\ntkephJW3jEkEDVdfauBmueLfuopCuU2ZFaSxM3zB1nkeJoWLTIqgeozVAZxN\n7PYWjyNH3Ikw6go9Ua2La/9P2Xq8NI5WD09myG0L0Av7n6tS6+vQ8YqXv6+S\nMc7fcn87QfKVCzJax+TZnJZAj3XLL9TIt1gdu6oYNcPNjQh/g4iFL8n0dyYn\nlFP3aHuql7dE24D1gl0pHaU3HwSjE1rysB04a7zbANxYeAZSr8emI+cpIrEi\nWMZyxc3R7KII1FzPO0I+y1PO8R1ulYBfnvfrJXx9+/Jr6dduLiqUc0VHSGau\njlJxr4fWyjld7M9xbhGrCiux9Qz2kGD+SXCe2QialEgk/OURGQXY8TMStBu3\n6KE4IXqfdvwAQ5TAo/q6dnkX5G//4YNN1l3/IW6ULIRR1NCkyBMS+i8813Gv\n7iZ9dTiAxLsVTm/CkqXfpTV5XLRovmuteBFkczztXn3MLlB5BlWFzkLqLQ9M\nSKRYhLkGQbMtzTILW2LKfI2zM9HqzPWbz177lxCAQHr7CJ2rNXhTI4QIwBDj\nLvAW\r\n=yflt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3a85313ac.0","@material/base":"5.0.0-canary.3a85313ac.0","@material/shape":"5.0.0-canary.3a85313ac.0","@material/theme":"5.0.0-canary.3a85313ac.0","@material/animation":"5.0.0-canary.3a85313ac.0","@material/elevation":"5.0.0-canary.3a85313ac.0","@material/feature-targeting":"5.0.0-canary.3a85313ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.3a85313ac.0_1580487794786_0.9998088366874192","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/menu-surface","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"46d9a28d25ede962409b0151dc9cff3fa50fa904","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.b6c7f624b.0.tgz","fileCount":41,"integrity":"sha512-XD8x94HhKobg52sCUVlrAaIhYyzz1eO/7mc5zKn2ScFxiSDk8UbtC6Gi+9UpM+gGUtIgklPPuFsfK8LbFo40Gg==","signatures":[{"sig":"MEUCIDHtIj3qnjEY9JogqCZPiHl6HLXM//fnNe9tK6Sl41VHAiEAxyvCk/1/82tOhLHd2YPgM4kCr2hlxHCVklj6YR7wbL4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF3JCRA9TVsSAnZWagAAtyUP+gJ3loB4+PkTC4iL6Mkj\nBoO8iADn+AbKdMCxVSePIeVyK2GFRpFEgGZTBCte+wvEObqBq8idewQBz8Q3\nl1rx8/hNDlHQeUqYyVobsZylrMNTp+HP4AiZNh8qLjGWX6ZKTezOUSZ+BJff\nZJGzi5uXXevo1dP1OVcNMe61fT1c6RRuKYL1v/Fsllk1+Cdn+6kLLcvu6L0L\n/Z9WF2/4ZuBiNioKO09wqpyhafmdSTpXcmanOY8lTWzVXz2dflTpETP8Mwj6\nhMtfqVbZwXQ58mYvhJIIzcGejD2SZ0w63FzJnN9Q+UJSha7SV66sKM9DDj2E\n9ZkTNHzMDzCPOMQQbIOE11oMla2a5rN5vKxD/y7EX/L/IM6Dh6GEKALxHdKX\n4zLgYwQ5v69lof8LtA+6df023+fYo8GWvgz8ryZ2mqUJgxFXT+v/rDs2oaif\nR9IJa81W3hw0R5WVkbzj4qsd2I8bojb6jMb7kfn/vBwGzmw2yNUG14FHwgQo\nKvnBipctFbhWGplelgthQCLnMa7JfUQBstRg8KbOuwurpa+9b/HMeksTqqy9\nw0+5XFxfnN0rOSMsZBCwdH7UAFJ/n4CY7wJAryvqXB9I/awQsAIECp427rFb\nP32abd5qxPOrX4ExLqyhzPGPFQoK+6nQ1XU6RAtqKftXF/B2vS3/fldt6b4Y\nkI6U\r\n=91PY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b6c7f624b.0","@material/base":"5.0.0-canary.b6c7f624b.0","@material/shape":"5.0.0-canary.b6c7f624b.0","@material/theme":"5.0.0-canary.b6c7f624b.0","@material/animation":"5.0.0-canary.b6c7f624b.0","@material/elevation":"5.0.0-canary.b6c7f624b.0","@material/feature-targeting":"5.0.0-canary.b6c7f624b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.b6c7f624b.0_1580490184872_0.20806098680869933","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/menu-surface","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"f27ef6d24c739e75b6effbdbfaaabaadbc8266e4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.b3f70ebde.0.tgz","fileCount":41,"integrity":"sha512-Xsiue+ez62ZvPrTiJf5Wyq3ucq/frdwbA/9jTa7fy3QMflzKPHdL5txxYGpIDX7cf4hryr9hJms/P8nhMoBBkw==","signatures":[{"sig":"MEQCIGw3z6Gg0flLfP4WqAZDjKJOtAMCSHM6X5DUxhmf74wjAiAmimBXIYXUfUDde2qPGS/WKE8Bj/lifHTtGU9pytaLgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNImqCRA9TVsSAnZWagAAWZAP/1cYK1k1KoSP+hR03pI4\nRTPxxRt8G5jZnkZxHfWV6d4YUY6aURaTpZQ7AGzi36N+QNCzEaIvwOEga+8n\nHYWAbB+bWQqvwRaTA8ulzkx4yngswGNFsxFuHTJh2y1zikuq4GLhLAAwkKLN\nNrEXXROMO7BElBFXerNTghjotDujWmQWn8cT0A9070Mi+3lJQrbeP6dCxiQm\nKEZ76jPr9DwN0oxvh+Gxt6IdwDldRb7n28PsH9YdOkyMzeJlU4/VfKJuAGpf\np5RseZleIqbFYQjm0ZSI5REvTGm7cGce9nam0nlagHL4vZ3vNFrWBmY46gXP\nDeLCu3zIk6Bo5Fb20yYICO/eETQvrS5mVlAuwdEz9DX+UuLrVP1IqMly8DC0\nNcfMYMzVNwmUFlUV3yJGts+NbtP2Sw/trzp3T0RfK4GLbTf8EqrlchOu2G3e\nVCBDMPEg4MI5zF0eOMbFJgpHvZsOftEgSWt+P+bPZs1tYe1siuhZWm307TJ8\nQ66w380iy9FNUIEFGeFMTKJrkMqh6zqQkP3KiP2pJ/YPQwO+i2Gden6GwoNV\njDZZjYhf73AdRPHRam6Ywp1FzqhbtR870KXpbTyQIclAbTMig5xdAaEudFy1\naMc2npxWXHnWjpkmAZpyo3ygCW8r5KPN7fMujtc/SBY+KG0pRe44KkiUdgDq\n6cbx\r\n=JILE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b3f70ebde.0","@material/base":"5.0.0-canary.b3f70ebde.0","@material/shape":"5.0.0-canary.b3f70ebde.0","@material/theme":"5.0.0-canary.b3f70ebde.0","@material/animation":"5.0.0-canary.b3f70ebde.0","@material/elevation":"5.0.0-canary.b3f70ebde.0","@material/feature-targeting":"5.0.0-canary.b3f70ebde.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.b3f70ebde.0_1580501417923_0.05487859033854803","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/menu-surface","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"8f7e22b390a8a40a7727f4df380b9e8e4b8e5973","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.3e782d8f8.0.tgz","fileCount":41,"integrity":"sha512-fZXGt3LYqFBQHAGS32uJpknd76NoVBfGAyrvIEpYmBcpV6zQWYQToxVl1gDhIXuYekoOuY9giNn2IMx0+ceBfw==","signatures":[{"sig":"MEYCIQCbALfpMR6Tjib8YUhSn+tNmNLqCWBwhm+Dox2xWQg5FwIhAO8Pvk/alMnoiGTS9HFH858D8etqCc1rHdoxsNrCI2tP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiIMCRA9TVsSAnZWagAAPgwP/2wGRbxXC3fzcXgH6Q4n\nwqxXLrNcFCuyhEqwEFB3Uc1zw/0O6A9UQVtqqXlRPB6Nb1Wx4fCbc+hrw3Vp\n91VlaPh8y8eiHQjzVqZxsCDfJMtR1FTfNM1zee3/uoXypABw+NO6ZDDJV3I7\n9+yURQF8DkwRu1e8ApAxfUsVBUU0H7Bzi8nfZbxWLRCn2hUOAQi+gKzwQK8g\nvZoW7yXtOvQcLIhaECjNvhVcuXDd/W+eMt+PZbINBZeHAuP8zaPkkxqeIeB8\nh4IFrQqwByMudbETXgb8jf//Jjx9jaUZePLr7uT/rmqqpNWQRxoxkfi1z4WP\nNitvggSMAl5BSwFQDzw/MA/0Eo3ucfMPYBALeNELk23iGoHz7KtmPRVMHN6g\nm3sCn7e+ZDvWYKADremSeZLNfkFkjNZ7APTXFfdSHxsCsbCDUHB5yYAZOL8A\nLpXkKqA7WQDyZqVPHbQk5jWAgsxRHAYVn39GrNxAU49OcxXbIXqGTViG3Mq3\nIIwWnRXt7PqRCONpbqKfwZCaFwLVBalrbn2uSw5uJf8HXG5tKBg5DLm8mYEX\nz8MEMZjbM9Bzg2tjRdDEQji3CwbOiK5mCXO1z7I5znhyJwid32urcER0YP5X\nFqu7JPwOPPbjlohy2nVfQscmIIilD8VOKJ/V6UybI1OGH+lm0ORZWiJ5E64c\nolRf\r\n=hF34\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3e782d8f8.0","@material/base":"5.0.0-canary.3e782d8f8.0","@material/shape":"5.0.0-canary.3e782d8f8.0","@material/theme":"5.0.0-canary.3e782d8f8.0","@material/animation":"5.0.0-canary.3e782d8f8.0","@material/elevation":"5.0.0-canary.3e782d8f8.0","@material/feature-targeting":"5.0.0-canary.3e782d8f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.3e782d8f8.0_1580605963844_0.465850275507701","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/menu-surface","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"be31683f608cdf20b54ac56cb50b24cc2abed5fb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.535398572.0.tgz","fileCount":41,"integrity":"sha512-zqH4B7QM+eMpeniTqneMMoFbRgoTrjVc2/KBokKyUIsLHlNHWSpxUen8eyIcBklihaPm91OJNH5Xhuiky39Dbw==","signatures":[{"sig":"MEUCIDTpE69sg7NaU40aO1IZdC62ieiTfdysC4X9IJesyuVzAiEApeKRhIUOK41s/OcJBxec9xaX8bz2YjEmaf+7GdXF99U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGJxCRA9TVsSAnZWagAAC2YP/R3UR+ZbrVjcg7krOyMu\nRuup7jvcBDVs2fitGANOqIpCY/xLHsABwVUXhg7SFdonxR+kID81vnZNCuYa\nfn4mB6WLg8ccRy3cyOj46wYuf2MAloJfFaCIMvPLgVoNVV7CStWwD36Sqea/\nLKwGDgyTXOUn78/tn2fd7OFv2+pxXQAd1fEv2OO+/0av9w8Zyn2A16s+hVvl\nw45e81tytokkV4jE05Gri6LQ0TtSWmpaA+JoCIJ2p01opIDPrBArqxfg29hm\nnS8ychWxvPg8fE5mloxpiZUlyqlyBwbD6peDIBhG0Oi29F71EiRRUj5aOxT8\nLi73Wowth3kKVhQw9x9BKdIYwTDNPQ0VT8hEDpC8Wj6r0SehoBdgXUb+SGie\nM3W412cCDvJzOHb9KF6wMfca04Gh7z/wcPjW9x8gDwsw+FM8vXCXOrhlFdbw\nVOPxILhziZypIpAMrUpW6vj24cXnsGStH9HaVL+LA8EJ5IF83JObMJSJRXsn\nqcESxH9EqaeFyOnrp43M4LdMAhn/O5ZAgcdL0KccPmXR4kNnUloOzByu4qbz\nreXrYvMF4C4LgXyo9zq+3oyu+CFsRUGKxW67demOD/WdRvXgnZOKeSQyJLkd\nEIAGB8e/+QeutlAyLCMC6iW78CvJf364yrzkS4uByALiEugxZ8FThgfo/RZB\newTU\r\n=YD0q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.535398572.0","@material/base":"5.0.0-canary.535398572.0","@material/shape":"5.0.0-canary.535398572.0","@material/theme":"5.0.0-canary.535398572.0","@material/animation":"5.0.0-canary.535398572.0","@material/elevation":"5.0.0-canary.535398572.0","@material/feature-targeting":"5.0.0-canary.535398572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.535398572.0_1580753520647_0.6764356895112276","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/menu-surface","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a0c9a0e073dea88f016a33c1c9a47a1f7b20db3a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.5ff33802c.0.tgz","fileCount":41,"integrity":"sha512-yM2BonXR6z8SsNo9/pmYFcz4zEOicdSWm1szBXIUXojR8lFB23BEi7CYGkICPHZYlKhGTJithqH9IRZh5Pc2kg==","signatures":[{"sig":"MEUCIEdyrKlZRnFfwK/FEpZOec7Fhd8XCTFich2RZv2OrqrDAiEArycEPfweRjy4+bUeEcb2GN/mlif3ex+RZisJ1cb3Ejs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObIJCRA9TVsSAnZWagAAfu0P/R7w/Oh86txVKisDXa+V\nP+BeAqvIWsTFxqHbT1UvlvppNnhxNfizTbfjqA86lAmkYrYlFOp3fkCbUjCm\nNOw7DyxNvLqg+INIrAhcIxtR4O9I7fwKxsLRakXMju/31Yn5pOu4KDmuOSnE\nZhmAVIVwIENCX+yZdSO/9YYeax9jAD610lm/C9jaIgF+xFbgkZQKtzHAQ/Fi\nn6zYmqqs6Cra3rIrGsrEGgoOyPLbjMwgtt6xex1sOfplS/BnWG80AyIa9kRV\nGJX98bzzsZIj/M6xE+0jWG0zB444B5LXlgtBtJqXkyOclmu12+7MDqOM2YqW\nRPZQUwFZtCZbQk706YRP4YoElreyu3mkFnaITjPHlzyq3R0Kwsf7AmgJg8pV\nbdbUD4X9sgD93xKZm2QbDJraZghdnhvsDw+FD8bJHUI8aG0uvhnkXv12Q1VB\nGNPmQCWzc9p3vd7iK2oz6+PTu0IDOQ8XrhGAGYO4RFuRL5rak7e5IuMlYOsI\nJihRvv7Nme9+gLnKx2fNML4J8TEgVv4cGKAXikP0wt30m6GwiJhGDXQg7SGM\nRFGPatvnVvyIf/c+7EuNbF6KNOMufccZQsUiv5SBDnOkUt6a1UG5D9xhrWsr\nNgbHPTH8sYmHrrGk7fwGdUVPCkOfuRxMER1PgqkbncS+vlqJtIxgN56RwGSt\nvCRA\r\n=/VQn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5ff33802c.0","@material/base":"5.0.0-canary.5ff33802c.0","@material/shape":"5.0.0-canary.5ff33802c.0","@material/theme":"5.0.0-canary.5ff33802c.0","@material/animation":"5.0.0-canary.5ff33802c.0","@material/elevation":"5.0.0-canary.5ff33802c.0","@material/feature-targeting":"5.0.0-canary.5ff33802c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.5ff33802c.0_1580839432966_0.7057263584617837","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/menu-surface","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6271113b9bf06fd35fb31c09a9f8b9c77e9d6ae0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.1eb29491c.0.tgz","fileCount":41,"integrity":"sha512-ycES6eGB4nanx+lWiWlD1bDd7alGxZRCJHmMAmrEigzXQ/Skm/KvUNCnO7JN68L6maZ8OTxrbGoEd0Rs+ipeNg==","signatures":[{"sig":"MEUCIApvlypeaDyXVSxNxUybC5L+iOyJUjLzqhV65xWO9fokAiEAr6TmEJwemkKAc/CRwEulhOX/FL6HLQ/ctz1dveDAEjY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOdtxCRA9TVsSAnZWagAAby0P/0Y3F8PiU/xgLFv0VNR2\nSkhV5yYtk49n5XrQhwrC7fF9CEEnFr/2cXA1pa/iXAPF1y3odKjkV0YjEWPp\nf2E9453qElOdZsVsF/6xbgF9HkQeQZHon1qVoCB1ESAp3ltIdr07mRDjn5R2\n7GnbCKJrFmotIEm4xFUpzXs+IPRshwhth1bZEe+6WXjbcYRPRmDBGh6yGbPH\ndbi967D/ZGAORo+wW/3IHaeJBtHgQquntxeGOf2J12RjXM6XujYduZuf8o6p\nWFQaRDgkySbRTftgQKymyPsyq2S28iUg3WimAV0GbIZy+8szRCkhKi0W4t21\nScAwDEpVp72QMbIO0/+Raei0vRjHAz0yefyENkBMq8fdoJLJQPnrQOwX2nLh\nHJzC/VwMJ4MDseSq2O41MOA0XXWg4F/ZrID+MKLCXk4bEXX/nP78nFa+LnGX\nolXTU4OUAdS3denCAA3JBZ4zeLJjBOwGydEH96jHCGeo/k//SVlchhb3VZqC\nCbtea7HzbigeZhPAYLFDgtwvedngK99+zcvTvGU+b6SmMHTMbzVNTUGkOJDJ\nEbYSHVeMIOcreJUriJkBpb6err920UOV1bUqMPo67tCxonYCfGgcvy3AEz7R\nMj9kVPREZFp+RzcphfT/QsloipIwAAbga/EdTJk9cdy5jt1XfvPgfCwmXLaB\nye5S\r\n=ydSv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1eb29491c.0","@material/base":"5.0.0-canary.1eb29491c.0","@material/shape":"5.0.0-canary.1eb29491c.0","@material/theme":"5.0.0-canary.1eb29491c.0","@material/animation":"5.0.0-canary.1eb29491c.0","@material/elevation":"5.0.0-canary.1eb29491c.0","@material/feature-targeting":"5.0.0-canary.1eb29491c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.1eb29491c.0_1580850032663_0.9009208147081784","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/menu-surface","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"f014d48a148bf43f7c48652c73d0a815ee383b07","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.4c7154b26.0.tgz","fileCount":41,"integrity":"sha512-OakBydT2BoONdlEoFj8FIh2a6YAaIoJ2FCjJRGXBk0OYJVl4z2qU4NP2UyUhD7+BQcvyK07q+ShQMruGxTiQoA==","signatures":[{"sig":"MEUCIQCkht2ITigWTQOIMzrM/spgYwdaUYuJ5Lnl2625PlZeWQIgcJTov8fJk548M1Le+8DCiOAdZy8hIi0MukXkG4jAHf0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOucvCRA9TVsSAnZWagAA6ZwP/iHrDInj42Cs8VoAr0Fb\numyOHXlGaQR3acKscmVoGei3JyS00yeIDPp/nNxuSWOi5QUqWS333XpbsqpX\nq9pSG+vw0B8ilsUNBlQCHP4OQMKwDiRpWkuKmV6j9QjhapgpWCgivgl1kRB5\nukf8QT877Rj97sEcSiCIbGxuco4Ah1/4VufzAFBSiWxohWalEgy7SNRSX5kb\n+k+s2AJzJ9ZkW2P+nwJy3UriLQl6Vlsp7pjgjGf6CQezY8Wog5eYdc+QI2Ak\nmfK5OrF9mCMRjlZwlCZkoX0c0Ytd/tPQomYr7hjmnWG6l507LroJR7HLdD5d\nXmLTji/DC42+d4mR0wYI3MQx44hGAUrqzkj4ksmOytuZ1swD8n2wz7N6oYpE\nPE4o1NxAuZJCfHx2Uq3+ENl8eGgxqRZRla7Otj5yK93UPaNJlHcxsQApRqfR\nOHqfDK9MuGes9fpkJ4jbFWRUT0Cz1EM3PncDA0jo70VURdpq/HCNd0H9z9xq\nKpwzhk1RrQ5pbaEfvD80moobH1vrksfmc/+9yKNNHsgQurWcrEoAyYhDKtGm\nC3smLiGHqwFmo4EINFemuSzZBCMTM0Ft1RCYKDL37qmc7wFKzSTHQw1kjGKm\nHzFTSHEU5G3l7lQh3QdhYEzBDWCuqxnUsIc3TJmHUG+PKIrwhs0EZ2dwgefb\ni/Rb\r\n=jiaO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.4c7154b26.0","@material/base":"5.0.0-canary.4c7154b26.0","@material/shape":"5.0.0-canary.4c7154b26.0","@material/theme":"5.0.0-canary.4c7154b26.0","@material/animation":"5.0.0-canary.4c7154b26.0","@material/elevation":"5.0.0-canary.4c7154b26.0","@material/feature-targeting":"5.0.0-canary.4c7154b26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.4c7154b26.0_1580918575225_0.5654752858092651","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/menu-surface","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"14d6857cb16442e365a2988b16db94de816c482d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":41,"integrity":"sha512-uXqKZKQ7vF1pnxPrw2PE6I1STvGUuYlhtDKaJ7z2jQThwCwdfmodMuSHxWeQNfG9nF13OjUFZkT8sRFIT+P/FA==","signatures":[{"sig":"MEQCICyVnXt/l5TyOwJnZTJ/6KtN3bnbRQ55RFRF5hrn05IJAiACBf6joeLKAKljnxdl8H02clq6mX8w/96OcyQdIuu76Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1C4CRA9TVsSAnZWagAA7gkP/jhbmRVgYomYHWgGireL\n3OWqVPTvjBaf80Ut2yIy5rrj4jcGLEucwrS76sYNoDUF+g/oPwiJ3Z3guuZ7\nGWy4raecuJ05R4ixOlsjoFTjHCPmLFaGlWr7e83hen1XE2hD2bnUofWXaq97\n0q8LvA4UhehKsrUJan+p4Qe1+DhvccC8KCsCP4Lqlfa6S+RfQn1sEtcCl2oy\nFxUVBk3OpAVNs3d1Y2I1ewIQ8iqv5/ZXMZndwKEZpLIbLmuD7qyS62q021g7\nYPrq6Y7riPoyORBSG01UVB9w5kz5KOh5P23WwvRq2wEH5ly6MfIMAKAhcxAV\nMbOVJfb8oAzluJVWjTYVfLPJArxfG2QISuViBJX2FPqCunmKW/xRMUEnwUIk\nuWw0yoSvZZTUbMe/UqZO/lqKlVyxyhkzkLSfEECFtXMQqVMzB9wpI+RhWCRH\n+LKEGfFTwEDC9AUSmj0wqlyMUFAv04HZMeYmONDgl5mQWyiYrkzU7ZZD7mbw\nokcmQbOui7mbA4sIeAnuWT85GFIhZj/3HFlsq2Rw6E/aRLKNBBzww6a4JeCM\n3OOjtThtwKDbMIOxbzfrZSzQY7dGeNEKi3kXMxk1BfbmldtZgtprcp3lqvNd\no34WtJ5u3RIjBZVpztISSQ3OwkfJJoKZdeOh+lxyiv43X5KB/2o1kMzvFyxv\n9uZN\r\n=ZH5+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ab5f49a2c.0","@material/base":"5.0.0-canary.ab5f49a2c.0","@material/shape":"5.0.0-canary.ab5f49a2c.0","@material/theme":"5.0.0-canary.ab5f49a2c.0","@material/animation":"5.0.0-canary.ab5f49a2c.0","@material/elevation":"5.0.0-canary.ab5f49a2c.0","@material/feature-targeting":"5.0.0-canary.ab5f49a2c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.ab5f49a2c.0_1580945591963_0.6159824106221794","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/menu-surface","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2cacfe039e808120c6d36ea9a824231c8fd1fc65","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.c541ebe15.0.tgz","fileCount":41,"integrity":"sha512-W7Lq4hS3SVqWM77W1hJH0LjXj4cTE1RNFqLzk9holm31YLP1fKrck8mkuvN9JT1r0RV/jlxghX1J3VBT6j7TQQ==","signatures":[{"sig":"MEUCID0bhkVU5/HcaT5SV0Ft6cgl1j06ZONAZW4lxWJwS9knAiEAlIDnvKgG51yPs5ICN8XdLcPEZfwPupszMXCQ7PkjxqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJNiCRA9TVsSAnZWagAAgHYP/3xu6t+dq4YPRoV8Mj4S\naTaPn0zBbsIyH9RaLn1pNcrPLxNns0mxVKpbROccHBB1Hjo2yRPYNEvxxMXo\n6axQID8nSJGmiYNPFm7tC+ulNuT4qMTqVo442ZVBAxR2dcDUh00Wue5w7uXx\nPKhnHM+Ed1Mflyxkm62PXUQkn2L+0c0/rKuKa1eIvIRn4eAFdOxFX23MnqHQ\nrsbsC3KkfHZetTIwJ9w8Jw7LYygmfMgLAzNO3jdutInD7601T8n6klHiwYXP\nN5LxSdcVHZblulS6zCgJ4IQIiErh4UMCJeHalXO3p1oXn6QSHnMPVzozmfhB\nHcsllxF32Ztr8n44xOyHUavU2lrIO5fsFkfErEprKtWT6SA2nkfn8NjQP/C7\nav12TCiXz+L43JIXSK8AM4EL/AK0KfIw7ioYHkARdTYGP+ZkW1XGVpS+Jgsh\nQVGjZF7GmY11BBPC2MsSLSHaaTIOX47YWqw6Y7ASN4p+FhpBE8fplEOPycFv\nn0v6Hs1ow8mx092dBlm2ln1zKS6GYj7Sol4mRLPUW5yt3DP7VWsP71EYBl8n\nsvUCCZApTmLn7mMe4LIhp2SX09alV7XejaWy5Lt8P0oz3M1BbC5cFomED7mQ\nQzEUaiN0mksdnF3iAOfId1KA5AWpQkctyhKWU0Ma1vURYSMgUbb7pDt+eP6J\nYZbj\r\n=WgAy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@import \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-menu-surface-ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`mdc-menu-surface-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c541ebe15.0","@material/base":"5.0.0-canary.c541ebe15.0","@material/shape":"5.0.0-canary.c541ebe15.0","@material/theme":"5.0.0-canary.c541ebe15.0","@material/animation":"5.0.0-canary.c541ebe15.0","@material/elevation":"5.0.0-canary.c541ebe15.0","@material/feature-targeting":"5.0.0-canary.c541ebe15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.c541ebe15.0_1581028193805_0.5133401510046851","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/menu-surface","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"8758857d3840bbc34f7e94d672d5ac6b57311416","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.98f7faa05.0.tgz","fileCount":41,"integrity":"sha512-0c6ItCpp1xspWaAiwBYhcGWUSSsuqXqdlBvFxWbWWCZTQllOGff0kc0IeHEHyt9RAlOHasK9MK3TUiEakh2LjA==","signatures":[{"sig":"MEQCICt1Ths62/kgOaqvt0XXd6JtGyLwL4JLhJtdfhXKivYLAiABKLCFU/uObcnqRFv8mQwnfyqPQrpx1TDOeUAgbuG6EQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbiuCRA9TVsSAnZWagAAJzEQAIIPNWTduVA7h+msmsoG\nCber3Lgb9E7mxP1WLGYzqPPNwSOS/LJifo1Acm2JgzpKZsytiFNQEmeHag5E\nL8ToJhcaujF9Bi8zIBsE/DbKCqVSikIsO9FkMvbK2e8EDbACumu1A6lj+wQz\nzei3uypI4ztldtxdMZif57/J8hXYXbKC0cFZ2ATpBA4rISnYVTJpC9Nw4/sC\n1G+8waByBfxvKiuIk1pWBj+BBM6duE3xoZsrdAzozRhLfabkPS9JStEUD11y\nnkzrxr3hLHRYmJClc/3Y87Z23PQw3Z90CRJLT1fB0nvaFUk3l3L3j50b7++J\nOINLqmZUhhmBifPCn0DA3+IVj6rgUIoQtPYAJyAM/4+9FLHxuZS100Q4Kca/\nZf8p9s2dB9O+c92oy76Yv31eTssQIqWnmUzqyTz5S6cckUBLxFAiAapcBjW/\nC6B7JyaZiLW2h86CD4o1SGGsL7eldUlbGP5kxErx/Eka3jLqeoJ/RU8LcG9W\n8ZniJQA43K/gT/t2RTcL+eiaSVpxKYRG3YAwMz8hSfZ7iBYutkABYbq6/b/L\nkhVlqfaSj+/8zwvl67gWKMQBroOxszoqoXrKyRVPFkiIv7EnxV2tqWjCxCPd\nOKs3Zy5jvgy0lARsf+/6R1pbMuHCLTDWONojDIK6XA1olDZDo8VddPWkw88/\neAaO\r\n=10UW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.98f7faa05.0","@material/base":"5.0.0-canary.98f7faa05.0","@material/shape":"5.0.0-canary.98f7faa05.0","@material/theme":"5.0.0-canary.98f7faa05.0","@material/animation":"5.0.0-canary.98f7faa05.0","@material/elevation":"5.0.0-canary.98f7faa05.0","@material/feature-targeting":"5.0.0-canary.98f7faa05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.98f7faa05.0_1581103278076_0.8258145656826781","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/menu-surface","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"bcc13d743dbd7a4182e1245bbb9dd2110f08811e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.b4727e43a.0.tgz","fileCount":41,"integrity":"sha512-gTShFIELsusyEP3kujBVvyZMLqaGggP3rAcNIn+B2ogRbEQ1IsAyAsVxY3JQpKOLEWorjE9PGw1pfT6WOyBshQ==","signatures":[{"sig":"MEQCIG65NVBuWHeYj+8EJcEJE6R5o07J3vigKBUMryOSPQAXAiAYGa7PjV0gmfXHa7vp3KfIXP985w6lENXIp3VzsMB7CA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcCzCRA9TVsSAnZWagAA2egQAJeax6F2aUDaBlf+iGPg\nwi3M9CuSsCSclHiy53q6eYuOUxv5tczgoJJ1X7hfqx1Zi/wS+u/HevrmZ+rg\npcSDVT4RJILLTR9VMxZqP1MPR4Ir+tlCnvWXbsWJxGqPx+nntNCoCh6RiRRO\ncqJF8Pls/QU5UAZgS2XYpxL18jw4pZx5EE4bIUrUvaIiJgV4urq7/FRfjjWo\nyNUA+Vz658RpOkCrinEw6SXWzotgdt396TuOyuwMojkJ3pwc1CH1mdOcWYDu\niNZAwwfNdhtm9XD/oiE85upuMnIIfGTxDEiICmV8+bl2FKXpGE8J46zArmLv\n0NAX6e08qbsTdRGyJHYERE1DtEU1Pt/XKMf0zNNRB50eavt0NH2643tkOPu0\npuaOmeHubUHN+zqQntSS4jWFLcPwpx62ZvkCQTKK5x30bjkwM8TGAcL9l2jr\nQV2FI4aAG5DfE2h+4aDtQbpTB4qkdunaXzMoCWy27UapOtKySSrFfMNhuyeo\nF/p7X813n68PgCPSmWNIE3sQ3sQO3wDAzuW9hNosVtRnvPK5lmSK1pFC8D2/\nsSJEpy6JBt1CzkH8h/9KovRfjv6XFyKaddPTkOJkra2/P6g6YNLvk/5wY5KJ\n8Q2OOWV+dHQ0+BHBU+rBuIx9dilpjwPXH4Da7BVWdLqPqKlfUFMEnsgyhVEx\nKj0a\r\n=f4AS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b4727e43a.0","@material/base":"5.0.0-canary.b4727e43a.0","@material/shape":"5.0.0-canary.b4727e43a.0","@material/theme":"5.0.0-canary.b4727e43a.0","@material/animation":"5.0.0-canary.b4727e43a.0","@material/elevation":"5.0.0-canary.b4727e43a.0","@material/feature-targeting":"5.0.0-canary.b4727e43a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.b4727e43a.0_1581105331432_0.29656637462386004","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/menu-surface","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"8be5f3e4a08fce4a6bebc19033d2a13ae6b89563","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.91d9d5a65.0.tgz","fileCount":41,"integrity":"sha512-by5mZ5PvPLe9dBpkBzoTiRqxO4uLdSyjSAC0VSzWmbZa7M+jztZ6WmkwUJtWijVKXAxDZH4NfYaFGjvznLY3kg==","signatures":[{"sig":"MEYCIQCJdfYpOFLaKgXY5LWOzdQnz3/g43kv995JEkXRwBt1kwIhAKgqnwv+J+Y8gbzgzqKauRaVO32+4cuCBvaEbFh2xvhO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePevOCRA9TVsSAnZWagAAWTsQAJcSEHPtFUKvHC3wrMBu\nCc7ePsjAwtcWis5k+F/SuKyp7sZIhAubXG8d4PJohG7G+imuLV7TyUxyWqbO\nQE7hTjRV7p207DRvjUYbCHqeK9rLa9h1KBp00RLHiSSHjaUccmv85ojfEp7t\n9BZfN+EEk8T/ruoNg1CuuUUpSAEi5DB8o6gTym9OrF/jmNnKhFzOY67tg3vn\n+N6aK1Qb6rnWEt9WOqoD3NNy/UheXTvKb+OPxohGyI6ubJhSzE6y7P4FOBiu\ny3Pzote8Tv999CJvR6hp14WxSgFbMkQqrGtgFJEZorKWwQpoI0+HbTTSGUVN\nQ9/5Yib8F1Z+YmEQzQsHMXrrWWARHk5C/ra0HobPL2igeoiqLrkNY6tsM7tY\nSSkNfUP3l41Nf78FoyesdpcDW7rIZwez/oq3Zvnsj2hR71Og5HJ7pkCF7VuO\nMF5LHAY+4DF7VkcP3W6VGtEr0YOfSmrzMZijAZXQj86m/yAhk1uniMz65Wdl\nxMi8GpctcDAqH+yBBmG1ve/NMrcjyW97GbUe99+hEU2+cvECQ7bu9bqafZoB\nACiALOiKe/F/pidj4+FDyvR4oYhh7e3f3c9srX3c3DALqs+EIx1kJ3/jckBl\np9HBZsO4wQW/jY7i8peJpN+TriE4tJ3P7n2s33deV8kgHL9swsEdNmGH3Cuz\nskCy\r\n=ls2d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.91d9d5a65.0","@material/base":"5.0.0-canary.91d9d5a65.0","@material/shape":"5.0.0-canary.91d9d5a65.0","@material/theme":"5.0.0-canary.91d9d5a65.0","@material/animation":"5.0.0-canary.91d9d5a65.0","@material/elevation":"5.0.0-canary.91d9d5a65.0","@material/feature-targeting":"5.0.0-canary.91d9d5a65.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.91d9d5a65.0_1581116365746_0.008608327780838643","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/menu-surface","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"25f1c061cc9d7fb508fec0c01271b616263c8ba7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.d5c006ed1.0.tgz","fileCount":41,"integrity":"sha512-eMlHi+hqfO81KAmY1bCaeZOs7HqreT0wcVwRQGtdVRAwSo5OxdGgmTC3F9F1ibFNv41wX0+aXxeQ+izbC5oW8g==","signatures":[{"sig":"MEUCIQDXLyIrirhVLzc6uXEZtwdCY0OODIwyr59OTU1WpvwAcwIgf3GYnT+8hKOmnZdQN44zhrfeneo65KasRUkLRdz8r5A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYlqCRA9TVsSAnZWagAAhTMP/3k8YCnOKLq5PkbWEC77\nauU6IeKKQSeqbJRj6FC8veg6JHJ0ZZGOuZxraPSsoB6DN51WC+ckQcd5PsJN\nIiP5BIkANXSHEPUu8vbzF037FECk1W5yMCMERGMIh84tImFWUV1w2h+zg276\nFFf5FBN/81ukmaBFqlvZ52GAljMi/vLyWwW77SRdBWQhSWbW5s5xf8dzbVi1\nK+HHCHz58XvbWpFqAYQyFoR8C7v4MRuIr6TpKezKcVXk8K3cQLVmzHF/8yx1\nYeqz6C1pimQDcD/CL7WUbGJMugtCnshTcHSlu3LmzpdUJ5WVCwG8Fae8JHlc\nPRSVn9qudZIuHIG5r2ToxEb/5Nz+pv4gMklRe4+FcPXdIP3S4Y4MN9ScYEv5\nRCkv6Ho8utv1VmJ2F8XFGzR9/NWfoRyHoz+c7uSTGLlpOa7+t0jhPbkVVt2Q\nj7VlQ4iTdnwE8pyGHlFGEMZOCB6avQkCGvBI1GOKfmagit8LNWfBeOiJWjdX\nSRofDnU+ZyOAQ3B2wafGchbswgqkyicuiVV1o2bQ4+mrqwezrc3K3OAFLLgo\nxguQ8MAEhTBfxjhmqY2zi1OskuouOSkKIOPK5VXKM08jA4vds8uRGGJ8ULQm\nchpmdjw9ZlyfUzvj0oPOM0Jy0Yb6mRzab+ToxR1NFY2CF9UwIniLKS1v26Bv\nsoAQ\r\n=tZrG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d5c006ed1.0","@material/base":"5.0.0-canary.d5c006ed1.0","@material/shape":"5.0.0-canary.d5c006ed1.0","@material/theme":"5.0.0-canary.d5c006ed1.0","@material/animation":"5.0.0-canary.d5c006ed1.0","@material/elevation":"5.0.0-canary.d5c006ed1.0","@material/feature-targeting":"5.0.0-canary.d5c006ed1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.d5c006ed1.0_1581353321996_0.5364482715248029","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/menu-surface","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b211853d7dc98fbdd0eb5eec8678aa639f6c49d3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.559f1a570.0.tgz","fileCount":41,"integrity":"sha512-RJzhVuhfN6QQxUS90ytBLrD19bTQa570Ppr3RzbiED72+JqBksSnBJgnZciPvgMHIeuHL+p4GqeHCCK2/z0ztw==","signatures":[{"sig":"MEQCIA3hLG+RCo4gllysufqNu4QgCe+PTlgHMr+aB7GlmZGEAiAKULK1/5kKViNS4y1e5ozGYV/LWyEoTXxp3p6eQdG/ag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZIPCRA9TVsSAnZWagAAfU0P/1LWzgq9SAt/ENgZBHAC\nDH5w9YO3QW24QDeHpU2eAZDZyrGocJrj9CLqVVbDWYsjpL2pcuiZ9TrvkJrI\nnrb/mpcDMWMrQo2Qt2zJ5vv4Hf3eeJpDsO64ukYN3Q8hi3M1fijcoBaPTmYj\nCsPCxwO/F3h7A+ZD8ROEMtWRGu+S9Gf5tTEz8MoNXVSsqgrqbbsotmJfe5Fg\nWkHRnVj9Nacg1boyrjqr1qoEv410YTSSrnk9oaQ39eEEi/0Ot9NNLteeaJrI\nmyyX3npk5WJD/8EVEg3PeetgwDHVMCg5rKptbzcfM7IOpDX9eHwh8iJ7Kvcy\nkSJduaEUU50nH4ZTFCwCbwnnZZb+vz4bO6/STK6w3nFFHY8O5UbOy/PHuljJ\nnJnkkJIr+R1KMrut5H8qmgps1lb9huBs/aCnxTM1Ew4I5BDf/UrI4rGVj40y\nZEzbZ37R1FqVkG3d/fcmobm3WpG/Z2w2L9QGRFpRxts611OCeYuBI2DF04AF\nvdFiv2O/teO2yiTuy2apoGvU3YWwPHA1OPXG2E7EZQdI8/gTGCV5diOyxEfP\nNTu1xTKGvsA2ORIszuuQeDemYLZ0B/z1EjR+ZLd5fU/CR3EYJQg0Azsb28J7\n9NPblRHuHAsSl3LiVR8+CObXkYWV9hSsDzX4TB7TsllpW6pkUeIvziQr7zuz\ni47C\r\n=2d/h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.559f1a570.0","@material/base":"5.0.0-canary.559f1a570.0","@material/shape":"5.0.0-canary.559f1a570.0","@material/theme":"5.0.0-canary.559f1a570.0","@material/animation":"5.0.0-canary.559f1a570.0","@material/elevation":"5.0.0-canary.559f1a570.0","@material/feature-targeting":"5.0.0-canary.559f1a570.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.559f1a570.0_1581355534740_0.2104341712956126","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/menu-surface","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"607ebd51781875543a5f3e3c097199a1b77a242f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.ad3bbf782.0.tgz","fileCount":41,"integrity":"sha512-8gWn5BcFPUqvw1TdTl3wHVMwuMyCEr7wkVX15jDgmlTDqUWDpsy1SSRTNEE6NDGsoKprWpSypXxk3ZednJeezg==","signatures":[{"sig":"MEUCIHeF+ihjdsr8A9aG1DMOyEW6Bf1xnuG+kLDhlGOWy2iWAiEAgXmlSDSkrfV/54Jbw6Pctc9+T/ZCF2CH92GDR5HRakw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQarhCRA9TVsSAnZWagAAvvIP/RbbXQrIPZkUvUAVvTy5\nxaAJfogCK2je7jJ91Z5UsET/+zyTIUPV2KZGZKElV5gy/ifOyp6suTpKzL8X\neZHXe2Hi1UPmYED1pU09Nj4JIM5aSbni3rNV+tGSsbTCAYlDvA1tgochpz8S\nR1SvlKIxG4BP+wE4rYKB8fZqk+vBUPH/7NgwFcb/AYHfdGYTJClbmYgChtOX\n3XAH75IGF2PMu+KtULUlf35jw6L4853aJf1FU93+7FdUj33shc2x+KcBeHlR\nmXV458rsIc7/wny2IDmrk8Mk7yBm3T42BuOuuhQJbh+gtWJXcU+63iUKB14I\nKLlmhfNO+OO3nlJBmHreJ4iYfU/Vdy065S5lTILJQTjdQoQlaB7vJp5MVvg2\n2XR6oyX8CmhDoFzaIYyV11wu8bT5zq6A0ngqnZ7RmuxOqfroVQNAZZlMKcw4\n4lH4Wy8UGnmqeFmOTTfjx+sVAVbD9FFZLzNRb1ZfhGnP68ZIPX8K2Y3mB4QP\nachnT6QXzL7mJQx7UGo02SH97BtQYnyORmk0jOVdfLEds/nk4KJ60pepeGlH\nj1t91LhQTqlkjPmQ1pCjsJJC9wqdKishMVpmwDnUfex78NwlF12gRI4SeMRt\nnIOjxBsbz7WblPwZXWad6I1LPnG7YrQoEnwonMFHH9OwOzlRsim+a+Z/WUSi\nQEhR\r\n=gs5S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ad3bbf782.0","@material/base":"5.0.0-canary.ad3bbf782.0","@material/shape":"5.0.0-canary.ad3bbf782.0","@material/theme":"5.0.0-canary.ad3bbf782.0","@material/animation":"5.0.0-canary.ad3bbf782.0","@material/elevation":"5.0.0-canary.ad3bbf782.0","@material/feature-targeting":"5.0.0-canary.ad3bbf782.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.ad3bbf782.0_1581361889135_0.4507314809111356","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/menu-surface","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"be313ae5af2efb6533a23fe1c89cb53c7cdd9d9d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.570d8e49c.0.tgz","fileCount":41,"integrity":"sha512-3lsn8LNAE+mPG6pr2SNx0OJAYxZ4+gOXy1E84+GdmVwO/IIgHpWRTGAotXZzE+M/AMwWeK+tP/mlxD9nsTDDuA==","signatures":[{"sig":"MEUCIQCLazEVwBgo9iCEW2P0wn3gq7JN8YD3iH9aadwUPvKvZwIgSIUnv6mka3bJoeN2ojhoMYWaEu0x/oDCPqk9DERuaqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcBtCRA9TVsSAnZWagAA6I0QAJVhD5boaxwuNJ8/Pt30\noAhMSFjvC/oadQk4pom4OHX4AkDAuVvN3YuDM3yTeQZRS2h2+KyH8tG9n664\n379FFa8jI6V8+5Nh9TWS+Gq6KvhEtZJA9qsEe7STf3R7Ltlo18uAZKH5UO2w\nn2/ZG6ALvTFOA7O1RMmMJgEXS9Dw9in6uG8MQYVkDqO4/SN0pY89YO4otI1M\ntmuMi0PLiSdI8YUR2PvVzduip2b90OkD9gJQ+xx0sY8abHubi/B0y517XqW3\nKp/enfs51CaOwMZeKH1G7UsM6HORiyJA0r0Zj0+t3g0cDR4tLAT6XFPdYwri\nqwLY4wW1puOmO0ryO8VKB5glR9skU2lDxs0QPVAOSj9myPZtbf7toelgk3Cy\nBnz03mvlUURoYkC9g/CEeXu1lD4FP5m/w30xszzX+dP4igM9ZwQsvZIhy976\nOn42n+A3S5qZXEDaqNwM0MlR5mXDW/XF80pG9I0mh7dkD4vGDZbfUUgj90OY\nIbbngug6R/HLz0Ow6U2sg8Xk7PlN33GbJb9YEZpr9qS1WuFIXg74ph6m3sck\nESVCSe07YNm6PN0hsdy+26pHaoB0LWTnKIensmObRNIW9BhHzAfkHV+9zxRP\nPM/PM3e21eXmY8QMkDAkvMtdROb7SW/FucSGBs9lIc5W2kgKC7TMzzbpNMew\nXnCD\r\n=BjWo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.570d8e49c.0","@material/base":"5.0.0-canary.570d8e49c.0","@material/shape":"5.0.0-canary.570d8e49c.0","@material/theme":"5.0.0-canary.570d8e49c.0","@material/animation":"5.0.0-canary.570d8e49c.0","@material/elevation":"5.0.0-canary.570d8e49c.0","@material/feature-targeting":"5.0.0-canary.570d8e49c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.570d8e49c.0_1581367404746_0.16453877003975248","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/menu-surface","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"67f004f4f6136b18661940aa3466acca48a03f20","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.48b06b89a.0.tgz","fileCount":41,"integrity":"sha512-O59+v6xH575E0ZrRLyZu+IpW0BU0C1uCxnFKzpyVKj1k6tz6I70L7dnrWKBHh407eI1l43iLPWdBnS3Debkldw==","signatures":[{"sig":"MEUCIHzDaVKWxAao4vwdhrRcdCpkJm1hxMbPApqVNyOzAzpmAiEAhdOUnpoGmotCJMF09ccR331xT1IEmtDgr9rCvrz94mc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvXCCRA9TVsSAnZWagAA/ysP/19QI1x0xhyCVG/zWzE2\nlQaPn6bryxcPStIIQSKTzYT3HWbXypukuj5iLZKoYE7BMY8bX3tSePPWCMyq\n8aV9G5WxSrqGjgj09p0Cy7V8C5OZg0k5nMcjWMmzuD0i8/cBJMba7G+oNwCx\nZOzDW7DLzzXJjx14JKZQcZr/YJNp2TjYY2h9VDQwR/KL61e+yvrx0WZc9QK8\nQOeMOtM017tvQ21mrYrxmrOPxjZ/7IsiGs3v4rRvI88lP3/vR8lezIxsLQoR\nX6jVe3agwPc1Qba8sTS09Z4QBu7KjESUm/d+VDdYPLU8ppopcOUxmnArw9O+\nljmmuhKQdAezd4kDPjMTOYsVJ6ddeKkDS2cP7DIZAJFi8yCVRQwslWmPPQxN\nVXfKu50rfj80V8tPf7h5GG5K1RgfsrZCzWZV61qe5FlH6F5K83jnwx7NVXi5\n15tCx5mo5hpII59x8mmtu7w3JrYD5byB3igtijb4YBKfZ8SFm6Pk+SYSl9Di\nFUjK64vFKYoxRxz93WKK9J9ZLwhVzqNbr8m6/cBXwLe3TMYf4ciIgbZr5I1e\n7t9Q6SD3EYZEKP2N3IdZxwzI/F0DSFhOT7D+z8gGjDycKbSYS6M3v4MxUnZa\nrePh/0bTlnGhmGrPBDVE7WXPSJoZA8MH3GVWRI+n4WB94LdO3hgRki7rQtCY\ntrz7\r\n=D3uk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.48b06b89a.0","@material/base":"5.0.0-canary.48b06b89a.0","@material/shape":"5.0.0-canary.48b06b89a.0","@material/theme":"5.0.0-canary.48b06b89a.0","@material/animation":"5.0.0-canary.48b06b89a.0","@material/elevation":"5.0.0-canary.48b06b89a.0","@material/feature-targeting":"5.0.0-canary.48b06b89a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.48b06b89a.0_1581446594109_0.27139496325294243","host":"s3://npm-registry-packages"}},"5.0.0-canary.612443dfb.0":{"name":"@material/menu-surface","version":"5.0.0-canary.612443dfb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c91fd58ed5996e700bf5217df5740c24faf52bd5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.612443dfb.0.tgz","fileCount":41,"integrity":"sha512-+gk4/7ohHUJssJ2I3OxRT9oA/EU+/jSkR4nn8vajxp6hpNArju2TduJtgLvbX5DUKgx+J141/IrAZxGS0AafOQ==","signatures":[{"sig":"MEYCIQCgBkVtEnK5/T/GxHZvC72aJGELyN9eitF/SM4TfoQB7AIhAOGYOsM0WT5TMUJ0a2zY8hYhHWe9PBkUz7Pfz55pqgBf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQwUuCRA9TVsSAnZWagAAg0EP/iZcJBP01co0vCnW8jGw\nYYLb6Jk2RB3jwGc2Uyc2OqfuGJxkMWf9TFvIUAswlsLlPN2Ne26ayPJqUgAH\nzH0rZFjI912bVCHpFHJ1iz96Se6SlRgjHyvUuiYkiGOW+n7/vXZEuR05/Rdn\nil7vhCJmU7C3NTIJY7a8s8cHWBKwc9MVdJ13Ai9NPjASg0xU3FN44Zza9nZ7\n8b/+1EEt5SrTLR+hIW/4lfc+k+pKfSB5eKm87svqiE2Y/z0h/NLsLCzvbmzi\nnHkhRa0Kn16Bv2ixqpzyHoZGDYerx2qzTObREqbIKlYrtuv8SzMHMJlP7bmQ\n8RrYlROdc48fusVsnrPUP0SMpnuMS+O2uRMiDggccxnPaT+2rohVrYOdNpVR\ngXcxBx0WDebEk//jkM2K1/iQyYjDUYP1M0ErtF8+lRs4nN2THH6vrEg+Y3Nd\nsRSg8U4zrQcIdA3evVHqBpBr+qXHM4MFvQmKLA/1WBcbHSdUgTQtJKYnbfkO\nJm9m7GaLmBmIXKceTO6+ldWRYqlwxHLD9cQbCC80RuyeWt2Zp8azpepGkHa7\nmyhGk5coFHlsybFuDGiE4Gtw9XpOKWsT9H5xIfs0cTIQaA9FtUe0GM/gJgbs\nxVM2dri9NLoYMvJhipOH4NGS3PcTK5sTao97fpijBG6jln9YMyoB+Ai/ecwa\npeyh\r\n=657q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.612443dfb.0","@material/base":"5.0.0-canary.612443dfb.0","@material/shape":"5.0.0-canary.612443dfb.0","@material/theme":"5.0.0-canary.612443dfb.0","@material/animation":"5.0.0-canary.612443dfb.0","@material/elevation":"5.0.0-canary.612443dfb.0","@material/feature-targeting":"5.0.0-canary.612443dfb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.612443dfb.0_1581450541780_0.45940009388558134","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/menu-surface","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6bb2cec0f329a37b21e56d138accf6073b1f5ba1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":41,"integrity":"sha512-/x8LRba865EpCvWcWTuFpaUXBHxofRgP8CcvLMdbY1yQiRF27tUtAeu+W+3F2HzND9sGwjHP69W9+L5jF7BDYA==","signatures":[{"sig":"MEYCIQDF9RV/Y63EB+Jc/Cb0N776y8QW5ZT3kBeuAT0LnScc+wIhALQMhNBjk157VxeqssFaZoiEoOSXTFHR6rX7Cjr6k7MH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":318012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7yTCRA9TVsSAnZWagAAcWkP/Ar2YyKTNe1OL5Apj5Sx\nJRG7xgQd+PQg1OQCq2fFS+Fd8klPagCU9Nb/mcUJT4crfbQ3FyXwON/3GM8g\nmNpjITWzPE5jOS2UV8IX8PHK/tXrVSHOw8LKX4bXpsWXPkZyXWHFyeEQi747\ntpFKVN29hJ7l+Ufdc0Df+NzVjJr945y6NQskDyRJV9ImVOd4KUGu9YardHHY\nWpbrm50RI9WU2siz9Iz0rEcVijKMxx68dB4yHYmd+n2KWGPtd9NbYIeRRIxV\nOu3d48lek2fsTBJ8y/ZSS+U398htgECQUjFkNL4l9hS3tGEiZivgGpiD65lp\nKIjgwqrvrxFziyRfMKuBCHaMRtWG6TDL4rfrIBelW7Wm+8QsblZMbETu3Kex\n3G42k+LKnCfk185GBMQrP7rklzro9UzT6LSrJ5abIzwiY7cDgfBUftENZkwA\njnz47AzHsTpy5u88IP43Ox5PYzz9CHbHiJCjpcwRt47LZW3tWacKtMq22C9B\nthWFV9m6zeiVGm9ppQGQS6icL+CC13T1O6A57k4qp1CTpXELyWoW1uHiA81S\noRQeQJZOrBy2A8Uu3vFaUSD/GZnYrm3Bbn9vkEWIsLWKNVBW3rJEgK9JlkyS\nUjXGjFizBwoHtYPN6tHwgaNrlA32QY/3VJc0OgH7PbaR7MGr2/L7DzhlVVzT\nz4wH\r\n=YsEN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.8c11ea2a3.0","@material/base":"5.0.0-canary.8c11ea2a3.0","@material/shape":"5.0.0-canary.8c11ea2a3.0","@material/theme":"5.0.0-canary.8c11ea2a3.0","@material/animation":"5.0.0-canary.8c11ea2a3.0","@material/elevation":"5.0.0-canary.8c11ea2a3.0","@material/feature-targeting":"5.0.0-canary.8c11ea2a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.8c11ea2a3.0_1581497490844_0.6781108398006024","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/menu-surface","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"453fc654c9358423716d23b6dc121eb5709e9d9a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.b2f3d311e.0.tgz","fileCount":40,"integrity":"sha512-o4RPYDJRdbOVPBOIAmv0B1DcXfKYWXaCEP3jJzaM1EeGiaslWxguhdffftpH9yRd1pypxJRk8PiovlCJRDU6NA==","signatures":[{"sig":"MEUCIQCgoMKSCTHacrn0K5sDZFARWJVHDRU3H0KnkEe3MdHLoQIgbE9vA5loO+QpmQIRtpiT2GZThu7MNmjDqFHQzE+fS+I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcMzCRA9TVsSAnZWagAA24QP/icbsDvuQ03K9ld1BRN3\nLNd11MXwUMoRYhYPZuwVAcaSZ2o7jmMGBCQ5skn1FbdL5Kk9gzAdCBSrKK71\na2mboFdeXGDnmmNv5zo8lWIheAms8THoRSW2yU+vQH0FVBgbHDC/qVf+n5AQ\n/3aJnCfFRjWyhKLYDdQhe15bjrNmJoemRbGAY4yJtASZoNZkcP6Fqr3zkr97\niMQrrpClDhBuTBZpDbb9Ovzmc0tirVBlrOV+5EAXj5B+tai4cHtRwZJ+9PJx\nI6yM0YLy9yiD4BN4KrCx5Nx9+Ys7Ft+WvUnsa+MVy8zByLxWbqcfbU/QLEll\nZ5pivowVSfeNVVMTfnmK7w4gVNfCdNRLLmxmQBMYC31IwlOHYqi41rnnsA3A\n5ssPAY169s982zHev6AjEU8WBswB9/gD83QDo894J1nFlg1mxo/gIqQpmBFH\njy/TFOh81burCEf3LIWZ+RQoKTLh79+lF2XbdhM7IlQz+v/WtwN8muptBw6C\nyqkKLcKu/w3/QgqjS9HKhWmouzapAYzTjzmK4W98XbAbO5UCNUeSPuoCYeNp\n6O83+wI7pfN3TC0lsrR6ryXd1eB80VFttNvKJaNs2PEiVWgHvUYOTsCt2Itj\nFr97ekppVK1934H2uz0nxGNkhggOauG8Ac6jU9P6kndAloLT+EmqwP0JHviP\nKj85\r\n=oY5H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b2f3d311e.0","@material/base":"5.0.0-canary.b2f3d311e.0","@material/shape":"5.0.0-canary.b2f3d311e.0","@material/theme":"5.0.0-canary.b2f3d311e.0","@material/animation":"5.0.0-canary.b2f3d311e.0","@material/elevation":"5.0.0-canary.b2f3d311e.0","@material/feature-targeting":"5.0.0-canary.b2f3d311e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.b2f3d311e.0_1581630259502_0.09834333833494968","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/menu-surface","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a45d8d8b788073fd62d3d9f0b50a34d063b0c8a9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0-canary.4f488d0ee.0.tgz","fileCount":40,"integrity":"sha512-91c4QTKLKy5dBx0YWJB5TDvZE3lhlKrETMIJ/8l4QLqsFuI0Wg99qFxrj80Iq5v+c/RT7LS0cXo12bi7/m9pEg==","signatures":[{"sig":"MEYCIQCiuOO6dSfYDF3noUhbOzMiNM9pjCIo+a5eXrokGVyhxwIhAPB3vZZlSfOpQx+NsoIEc/UAdlcV7Z5fWsEkvgKY9byA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdZlCRA9TVsSAnZWagAAm8oP/12PLwbI2tivKFBiMrYK\nJepvWaDVM1oVHsdGtXT5mqDMVaD4VKtblFfqR+kh2hA5YP9S5K7P3aKoMYt/\nmgp58VEPOPxXCVFrtZlqbfRw+gaeJsS3te/+mFdf31DGPuhiXz0pK5UJSZ+5\n7TUG4OAndeMOndYSOJIJyUuAWpyrMSKhehLxHXePzvG7KwD38j6nI39rm+Dd\n6pDwMEZGiR5tCo/TeBpeLSbxM1aZ+x9dUmgT5opFachpY6Rwx3DsU1Hjtt4E\ntygehTFdXeGqB1/77bysaKXDNZcVcq1BoJBWlQ2qfccUMEnKWx/SGXXQY9G/\n8tMnPKlooFqH+85aSNeuwE5xIYPnjxTmc+6qNXEdbC3MQPGX1EwOIuihOSnZ\nEbbLkfLkdbvdePQQcON2azxlX8bruJwIoxHj/2/QylCrHx6JAFxzr8E9ubSo\nI3sX2fGUR+aQhf3TpEXUpkOGGbiuSGu6dnfxaeV83+fUtPtdGBqht0OJ2tPL\nCbPCs94i1aug/8tG89gHiLg9i6v1butZ15kzZ1U9Vf1aEGvfWWcXvJFA/ug5\nrED/gePLvpSx5xVHTaeQ3mdthZjDLCuBpRZ0iZ7SZR72bWrr730pV22clzpk\npAKaEIqo4CwaGJRwbgpW+vvWR59VZXRjFobR2VGXswfwRXPAAjpK6xlTNav6\nslA5\r\n=q/AW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.4f488d0ee.0","@material/base":"5.0.0-canary.4f488d0ee.0","@material/shape":"5.0.0-canary.4f488d0ee.0","@material/theme":"5.0.0-canary.4f488d0ee.0","@material/animation":"5.0.0-canary.4f488d0ee.0","@material/elevation":"5.0.0-canary.4f488d0ee.0","@material/feature-targeting":"5.0.0-canary.4f488d0ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0-canary.4f488d0ee.0_1581635172879_0.3805408670929993","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/menu-surface","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a0facf50c5bd8b284e4f7b03ccb1845aa7f26f76","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.fe79de07d.0.tgz","fileCount":40,"integrity":"sha512-p+ehoROwgWxNdfKrEJXymkUKUxf/NiD5UQgQUFkP5pbbePQbtQ+/AUO/vMCdmvCDUWyqj3E6yDdZQLu869AHzg==","signatures":[{"sig":"MEUCIG5albDA4P0vX6qE5R828f9850QFw/wXXkKXn1s2Pbc9AiEA5/+yn5Tsgp9WCNTDOWC9aFvYpgmJo6zhwEz3Y0cc/SA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdp7CRA9TVsSAnZWagAAI3IQAJmAW9QW05+mJJCpG/dX\ncPuqdz259gF+gcJ2oDuQOM4+t6db2qMak8wDiiigO0DWhQGi9VHNezw1oziU\nvuTV5sCH2FttPoH1MY/2esncBmi4nWnZk2mn/6xdk3vWZxRs+JtUdOfgvhLe\n9VoOvjZUcC/8owUmnCv/DeMTjIwohJhvNeUOZ8ERnLCCqpvE0aPtB6FC6YLP\n1rz7t8hx/Fyj14KARotGEg6uTyA1jcjDASGU/+eyX++QPOxd+eKPZpEiHjkJ\nzeT6wEc51msav3du1DKtOoXKNOTN+tOYxT1NVLpzYULSzOS/RH93ar1zTNCZ\noIxzwJvXfB+LBIhmDadyVW+7XSvfsyq6mHRFCaa+P9m7t9Q/o7vjRM32r8GY\nolt3O0lnz8nPM3AEcdpytn4qVEC5NDQLa6f4V0m7bw0nMtI9CDss1xSM4w1K\nitlCQmQuCgPW0Ym7G6Ov+u3+K0johb5BTILYLo54ZSZsFnQJlEMgbnwjV/xh\np48BSD3jEc8HnPLoY4XxLF1cJVhY/ub1C5FZnnrsil6hskfpUjCT0qRvmCt3\nQLKgulMwNFtqyY7rzEidcdca7WHWqZdUTWN4pSFTjoqwdWsJZt2F8gMwenWh\nbL20n2IA+YAdIdY2aoCGD8MX3YFnNHW5O3/WEEEfb6YYnYffa39X8MmeXu7f\nEd1D\r\n=FGAA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.fe79de07d.0","@material/base":"6.0.0-canary.fe79de07d.0","@material/shape":"6.0.0-canary.fe79de07d.0","@material/theme":"6.0.0-canary.fe79de07d.0","@material/animation":"6.0.0-canary.fe79de07d.0","@material/elevation":"6.0.0-canary.fe79de07d.0","@material/feature-targeting":"6.0.0-canary.fe79de07d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.fe79de07d.0_1581636219357_0.9310174959856337","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/menu-surface","version":"5.0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6dce192bc22ca19c9edc723149a2a853d39a40c3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.0.0.tgz","fileCount":39,"integrity":"sha512-STS6nug41vpD4hG385FuGP0VWygTKlEUZyjGx5rdX02OC8sdVvROoNzSk6EzURVZA/Dxl86uqQcumryveUxhwQ==","signatures":[{"sig":"MEUCIEEEVXk/N4t73BBzRQgK8JTFdaZtzJ8e4D5Wme3NkvDjAiEA32ksFsUj5kSwhe9whqhnTNzyKfwfK3Q8bCdSr4xP5WY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReUaCRA9TVsSAnZWagAAOzoP+waO6qD332AqRfba42jU\n8ECNMDh/oHhYs21mLKGCAzPiVqNVrSMSFBAfLQueZnc/rldxMfxwia9ZhWTN\ndqlyDB5hbGFIciU1APVSdrCawTkuDkUJDynF3b7b2U4ddUoC+EYTwCiTxvqP\nVsZupCs4hMf1sARx6Dtj39y4lVlrEjLxidX4KPIXBaTE6rH+uwDzLgYBEoqX\nAioErlS/2tWDxkbVqCCacoN+qKJAqq9joaLuS0DWWxwA9ROrWQm6umVn+JWh\nxO/peOG986QkCWFMeEeacwiSFsR8nJJzJ3YZpG+a3dUJv77rxhhs28qYxUR2\nAGPv0jGq/Vo7Y46aqbIXgST5MSmGb9sM4dd1iNz62Hy5fOs2nSxoU2UE5TY+\nQLVsYtBuXM7CSSCJEWfabtNGN69fVd9IFqMsTzcmej7PF2xP9GdE9pNgRxWh\nip5c3JVhLZO0JwiZbHmnNZuup1prr47wLx/P2oIpnd3m4y/zKWeK7/RxWJqT\nsRrBWS4qry5J6oB7SCZ82jHZoJUsp7MlC/O6qY2SQKSbSnguH6RnwSf9V+sn\n/78LTtwog9vEofWm643lcpe09RmGl11Dtg+vr/82Y3P6cWKNm8jq3eTCZlYF\neMj6seDbsfrUb8bXdQXM5Ve/dnQjqI8D9VbnpNF4oc5aMVDBfvB4sVOtdOYX\n2vx6\r\n=kQAr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^5.0.0","@material/base":"^5.0.0","@material/shape":"^5.0.0","@material/theme":"^5.0.0","@material/animation":"^5.0.0","@material/elevation":"^5.0.0","@material/feature-targeting":"^5.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.0.0_1581638937612_0.546677452378959","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/menu-surface","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"19d09d29b4af74f2ad261684252065379e002c5c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.5e313b1f2.0.tgz","fileCount":40,"integrity":"sha512-yuZvmVrNprMin1qnjrlKdhAMNOqd3o/BCn4o6MX1GDJf7JcrB9MGMtaUjWCzBqrGdC4uBUIQaITiwc1DWd/ZaA==","signatures":[{"sig":"MEYCIQCKuxd7YPjTH0bgyBERnhBYFSgQgRgwIssyi01sAsCVxgIhALE4rntphzgBWzjbkfh0YNi6tAVHpSaBp0mpxfBRWzvP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzG9CRA9TVsSAnZWagAALtUP/0sLaHXqL7qAhHByIqCt\nCVat6pgNYEGkGYsI1PXKp52C6OzFfdbhkx/P16j9EoFIYgSh/FHUA1Umip5+\nRSXYLb6Exeu0VpXb/80KHhhYCBkO/nN0OHzts9FIahPzHdvzBQvmX//RpjSt\n05ztk8ZMBOr0T0eKv4A0ERhaSc8v757Bl9RsyHLxlirgLdVD1oioGP+O5hkJ\nNvKappUJqAXYDbKNn+DvYT5gkC306ILIV2bP4RqILAIjvKfDNlNvGamitKCv\nsRLTwzrW5qH5+Y3bKNR5hgFR7i30qaU9DzXhqIqVpUlJqIJ5tkFCQYOkba4t\neIVG4iuvsW43+eFZxkTX5tMEs3BEqx0i76Egf8/6IfPX1kbf677k9KxmjTbd\nfmIEy4nLYoZHTNXxXYJ7ECTTv1+jaQ8XccxrVCdiQ9DsVMqPRw/d3wA0G1tY\nK9z2rDG3CceR6aVUsL29824fdyutxUOEFVNtwbaDutIJfrxOzGkZw91SaJpX\nB8uzAScOYqV/cbwx5l7RVvzd6mMzdADDmBzN/w2A8CMPMp7fl/chJMi9bbB7\nZpWiC4IB+Ff+b4a8jiRtZs9PI5oxO+U8K1SuK2KGyZa8uOMt7xID3YV9EMDY\nAlGhuWUNY4TTwpls6FXmwFZNzPZSnThcc897osg+t2TzrFtRiVX257Ab4uYE\nGTtB\r\n=UXXv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.5e313b1f2.0","@material/base":"6.0.0-canary.5e313b1f2.0","@material/shape":"6.0.0-canary.5e313b1f2.0","@material/theme":"6.0.0-canary.5e313b1f2.0","@material/animation":"6.0.0-canary.5e313b1f2.0","@material/elevation":"6.0.0-canary.5e313b1f2.0","@material/feature-targeting":"6.0.0-canary.5e313b1f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.5e313b1f2.0_1581724092738_0.7207212829655805","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/menu-surface","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"40766d75e1fd8aa6562ae41d462ce78f93d5c8df","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.6a56f387c.0.tgz","fileCount":40,"integrity":"sha512-Jv0PASGsAZ0IE/VVsRsqzdH+AB7N9FqNmfCEWxrtgY5HddOYkDdodXEI2qwKolDibQPiHC4hB/F4l/tSRdOstQ==","signatures":[{"sig":"MEUCIQCrOavlo/IEpvCPe1KbYNykHUAFU20w4dCGILv1IAJS1wIgSe/5UYZRDdSBGwKnlZPz1brrJf3iOjGUUsqsGNJ57do=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD5oCRA9TVsSAnZWagAAXKwP/Rx4QuK6Ozo8wAhVT0Ha\nPCW9HiBmAJJb5dSNg/qxf5P75c0AawFET6cEchVDbk3K7+701bbVOn/z9OWW\nyqsW7biEsL+gJmvNH8aAE52cjinzPYhduXUPimhaVqDfPRJFhh3yH0rA1xv1\n7LQ7KiLb5irhhgURSoRNiPp0yQaBtwPrXhcpDxEkDVnvNRbIZrNcMJ8jAggG\nM/AuOwJ1dHn6unJ9n9k7NVVfGNlgQxkg9ZG6eesDmAR7G8Fc6IlNJTEAIp00\nEj86e7nBw6etifu2QzY/vGrrZWU98U8QQZTpvsWtDETfjlvIeGrFwpsohic+\n62MHA25U/7MYX6Sw1gA9F/c5KvKrHyUXD1Uh4S5ThzzOjmjLlWN5ml/h52sP\nAj4vPp8p/4lYKBtgkqNWWrVydewAtgq2td2oSuwU/vEqtAtIekV5hPODvzxj\nhjpMMpuLFXoXv+JdH0AWHFHfzG3tBkwfCihxYx4FPmHpE51tjKjp/JEl/qFR\ngnARrvUrgloxT/oPXXBfDE+9zC0Dfgtrt8WIdOYpBIFYKvnjATC6FWIK+EuJ\nUjQGthDhQucZvpQ0lr5dpBNX8BIUphDn/3DfyxEk18jmeGad3sOgP2x/VnRB\nsDv/GEr9p18hLhfEH1mxT7G4H56oIPSygONWQnsUYuNQzo9PHl9yPMgbo6V9\nB816\r\n=TL6y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.6a56f387c.0","@material/base":"6.0.0-canary.6a56f387c.0","@material/shape":"6.0.0-canary.6a56f387c.0","@material/theme":"6.0.0-canary.6a56f387c.0","@material/animation":"6.0.0-canary.6a56f387c.0","@material/elevation":"6.0.0-canary.6a56f387c.0","@material/feature-targeting":"6.0.0-canary.6a56f387c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.6a56f387c.0_1582055015996_0.9701479721786146","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/menu-surface","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"629eda99367878d9c5ace5ea1ea14ffe1cf46d59","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.bdfd52632.0.tgz","fileCount":40,"integrity":"sha512-aND1Kl2ViqyN5jbnQnqJHB9dxaRNe2ficp2whyIeoHzPoaa71YTldPySQy87SOp9uwF+KpPifnYRWEAr9EFPZA==","signatures":[{"sig":"MEYCIQCIAWxRAGdM/gPc6KTz5T2Bk120IzeOZbBX6EyNS82bnAIhAOkJTZ0RJgFlVa4MoyVlAh9ChRCQJ8qytVPs+wic0yEO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZkDCRA9TVsSAnZWagAAXskP/jdUs5ZPCDUbMQQDFQUb\nG00O7PT7wMu1zBYxdXVpkijjyJ5gsIZ11xWtScmXLydlB8/0pTOJsni3INfA\nSxPitgFQyqYeDu+ofONTV3x9w8l49POJGmxApZW43h2/zWKsrx6FbXks9Yu8\nCvxQZykedIYcqdM0LoC0o8vUe5APcB9GBpoE2c1p/73gSHuLmKWTDQzDFHJG\ntVCu3Abkw6AkipRpqFb49A0kIbY5+Ba4GjTpVAjXIkG7C3PvKrP3fgotTAC5\nkwSYR2IXcTRj+v5SYZszSVsfWwO/DsQ0tTXySlBQcigTn9IAQ2yZnCe2tOvr\ncH4kteQDr8vDgVUCwdEB29lmUOI15UqC/vl9geVuFGaNcez3fQAAGOavearx\n0vW5tNW/ExvI64CoG16QKXnCW0wEPRbqOGZHfOArSiSqaWI7y8nFobecPO8q\n9cmGz4jURsVnomsRfomPEuxDfO4E9WwA/hquVTIpiO3q8LsXVCt/GOAiM9JD\nzznY1lz4L6JaxobUKMpT9ybTQ8pt7I1Zw+bW2L95X8a0O6IJsWEZ3rMrwUsa\nuBjNGbUz8kEMOGy4tHavWLNato7nsJ88GpT0jC+qqUb7Qfo4PcLpxTnQDek0\n8Mr0OLADvBVnPIwCy5L5W9yacTq4fSzU9iPqSH3XR1g/j70AWRhSgteA9a5U\n5JA3\r\n=yIJa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.bdfd52632.0","@material/base":"6.0.0-canary.bdfd52632.0","@material/shape":"6.0.0-canary.bdfd52632.0","@material/theme":"6.0.0-canary.bdfd52632.0","@material/animation":"6.0.0-canary.bdfd52632.0","@material/elevation":"6.0.0-canary.bdfd52632.0","@material/feature-targeting":"6.0.0-canary.bdfd52632.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.bdfd52632.0_1582143747291_0.34138062439557304","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/menu-surface","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"dfd572096ac90cbc42bc276d67d9d74b0daf645c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.ad2e4376a.0.tgz","fileCount":40,"integrity":"sha512-cKyLsw58WKkYaiVD97zG/7ANxoQt+VFeAcVMQElrHNEQVdww/eK3FvGPZjCmRjQV8lz2iIj6aI0PoWqmb4RyCA==","signatures":[{"sig":"MEUCIBvl8tpTwFc1seGziQw9j3+YO7aX590AdV7JXcYTRmULAiEAjjFBndTolr+80dubYsiGn5d50rigPeLDhHuPBE2dRvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxMyCRA9TVsSAnZWagAAiKIP+QGg7CKJFlYkDut5kHti\n6T/s5yRjbyXonkZjlZOPLcD4L+AJO036DsLDTt0KB8ydpAT80IXF/rWarXeA\n+CZaD/A2NxVDYnxUOVkAVVLuCfPH0LRQulgDcDxniN8yYwLSSZmzQnQXOPxl\nDxLBZRsbBbygsTISbUrvry4RTsZi6lb0Y+uIXuweQwP9UxyLJzsX/PaBChkg\n0Oq69qjfiAcQIChr5J4zA13ZvnOQb+JELLH1jqFxqyx5YqSFCx76A6/xCTs3\nnSWLjhZ/o932K8hyEGIxJVDSGknOCvDFDaAg0wEf1XFED+y7gJJHqGhcQxiM\nJYzPXjdi5U4z2TceumT+kKO0ATkL8KY120e7B+/XkUK61Zmh78g0pz+Pbd77\nApYuQRGKJa8aEdC76+cfSWMNN0RFbEG/r3FUZaaDhKh66hhdFRydyl2p5kED\nDALCxpeKBMAhOAFvxjD4Lme4fZNOhL+UZtekaheXSkIWZN4PLUUU0riOJSL8\nGnXAbSwqpa7MK3jex/Frz+BZ+sHF8jgxtamDansy1sFkEMBSShnfP2iDgpG/\nNG7qOXkIsz7Bsinnm7Y0KMXSJf0P4OaAA5QBREOPIJbBa3KtzZTbbovEpfDr\ndpv2jCdWczDB1GDE4K9288TydaSdvq40+n3/RgIWwHSwgj0BlCi8vOjAPxkM\n21np\r\n=UjcI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.ad2e4376a.0","@material/base":"6.0.0-canary.ad2e4376a.0","@material/shape":"6.0.0-canary.ad2e4376a.0","@material/theme":"6.0.0-canary.ad2e4376a.0","@material/animation":"6.0.0-canary.ad2e4376a.0","@material/elevation":"6.0.0-canary.ad2e4376a.0","@material/feature-targeting":"6.0.0-canary.ad2e4376a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.ad2e4376a.0_1582240560979_0.9090922807856125","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/menu-surface","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"3cf04c5f1d2ef279d461dfc0b437855ebb9fc917","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.765caef18.0.tgz","fileCount":40,"integrity":"sha512-6ADoiZIouZuKhIzLs+pQXJAtbojQVpErvpeUqpuRNY52DNtS9UN5PJyiF0Td57E+AzuJ8ykyYRYm0RjMWJg3LA==","signatures":[{"sig":"MEYCIQDztVDFHZj+Juw0GkF0ZdXOwLtNfsfh0K2bTpeCt6mFVQIhAL7cQDDFq0kkwE6EU+EiWDARMCvoJybBpOwn0wrCfooO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBRnCRA9TVsSAnZWagAASAkP+gNLGxGP2F3Ny+rI4WWC\nPn6eEA/siCeVqXYZug69+n0Wxrs/RbKMmg62yWNv0qzO9/Xp3ZSPX6y8kB+a\nW0LS2R4QP9nwzXhuWC33ZPyggg3wh/5ipv6j5b35dmgcsLvVPMoCv66p2Y09\nkE+JH8AlXNfy98R34hCq29BDuQ518IHuVCDgUy2BvKjVX5TaZ225ZODzDK6o\nPbhPC0zdTV7QnayeS+mtHOqAYisSoXvCvCC4mzzxXdv/RCNTHhdQl0tBvrMp\n/TYt1vav6tkH5rZ2kUG3lXPV6IyN8xnPD0wT3IUBMcItdVyns0UkTSMmkrHT\n1bbYv2TyotNODOVkGj5gaYbvtb4sMfgpLUygr5brXX/+JKQHLmhYRL1AZN4r\nmZXQ3hRapHBYHkzKwAjCpljZRmooRtRfni5DEZFW2aPn3e/y1GLWCeA9d3Gt\n098Vv8PzV2ziebk1q1KKo2gnoTNZCDdjsYlYTbpiG5lxAnYdGb7Fz1NpEGg7\n+iLoOElHuCEHF9/UzHNo9sNlbMCIdGeJKVlSkVeHZgIIl4j+AxbTizsTTgv/\nmjAfQFNyBE2ECKhiuL341ULTGq7wuzOIdkOuUmHKBH9g60kihZXJBok8TpRH\ndPvKDjgizX622SyNfnJcFQtUOGgnCdrbyqe73YV6sPLuDgCrq7qrXZlaG/93\ncdi7\r\n=2DKI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.765caef18.0","@material/base":"6.0.0-canary.765caef18.0","@material/shape":"6.0.0-canary.765caef18.0","@material/theme":"6.0.0-canary.765caef18.0","@material/animation":"6.0.0-canary.765caef18.0","@material/elevation":"6.0.0-canary.765caef18.0","@material/feature-targeting":"6.0.0-canary.765caef18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.765caef18.0_1582306407158_0.09037360518908288","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/menu-surface","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"951c1d7539ec084c91dda3d8a91987072d18bd0e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.949562303.0.tgz","fileCount":40,"integrity":"sha512-cuVv494F4snQZKblk9IF2ZMsvMmBybgCvXGEzo85NnayhH9H+7kKSmS8isjJC+xyNqfZaxptguAHrKbxxSmscw==","signatures":[{"sig":"MEQCIChjgE7yMepgfkWIoMMu1+cp+iRj8VC3oa8tcufIwIIvAiAMCBPUQSpvSVg0KZD6tbI87h6MMqcqgydVBapSFwtJNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD+PCRA9TVsSAnZWagAABRIP/jLexCuLA5VfouilKwdj\n/KYxxhhJ00V56eh+/jkY9DFulHakFMRZcsEtZvDymAlU6Xu+71hlkHvzLP5Z\n/1IcR5O0GcDU2/chUFobXwaQTfOjpUS4VlKXctKuv5/V7RS73hKYsQlLVTZF\n8xsQA8zfIiduxX3oJ72ZtMunH4VhkxydYCVoBZAPQciCAmGy4vhwqeeScwlr\nF0/kJEX8lhKj61JSYbqyXpxsshbn+h1m9Zf8LkFHL3kGZj/yhR6o5cug35xn\nfzLY3o2ULZsLkNJdJLMLQRB/8+urKGi02FDxDPt8EffiLMwU6hOTTI4MK/Zd\nHFFHXFyXnB49YXE7+7d5YatMcJPkQGvkDFAZa7fHMATHl2ciNN7YbT2EcYGi\nOShsmJnyoqNRMu6fkuCHTCsQrDcR1sXP+fF0cSPh0XAjjv+sHnERHvpjbfvD\npDnohWJRwJ1WxN8EqXMB/0G0nY+e1+1FgUvgOXV5aIfW0y8xXjZM0vJNz6aO\n4pHJeTFh6BJZ/e1RbLSoepYxTaVex7t4/z4PyV2u56Q9/dT2ZL5ZcPN6GfwJ\nDRIDame71KMpfWrse0SjQJr8xk8zKcv/NoAns3STNzGOLzQkJ2MVGMEhvfQB\nNluLwLnvAC4NGZxWx/79txkh570mW8Q9E/IHR1dxGjrxJbW3zsYTCHmVyfZB\nXxC2\r\n=+RMa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.949562303.0","@material/base":"6.0.0-canary.949562303.0","@material/shape":"6.0.0-canary.949562303.0","@material/theme":"6.0.0-canary.949562303.0","@material/animation":"6.0.0-canary.949562303.0","@material/elevation":"6.0.0-canary.949562303.0","@material/feature-targeting":"6.0.0-canary.949562303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.949562303.0_1582317455307_0.9617160376281226","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/menu-surface","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9aa0a53785a359912d4fc2cae8f0259109f8a71a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.7ec96974e.0.tgz","fileCount":40,"integrity":"sha512-5CtygkCncrfwuBmkPjMFGv9737rJTXlAp2+/Pid7pAYhLxokk2ZpCGkNW2+doOeE9s3Y+aP79pyrQuIzxmfXrQ==","signatures":[{"sig":"MEUCIQCf3gXxVi1Vz5QUVqeoJBc/CcSeqwuLJFjMaylre9oCowIgK3oAREiY+mQAlIfYda4kB4qavOmLwlnqA/DUv5SfPCk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVBy4CRA9TVsSAnZWagAAyb4P/1xq91/WajTHmtlZXae6\nt5GFc8I4ErzTtcCm4kWXD4fguwmyXQ9LVZN90fr9HxAOSrEgnIKc7BZUelfI\njNfVwUqSMitfvEzfpn1V+XJB3VUrbWC7A3dYTQ41tm97fAhN46p4gjHyTmIU\nGFxdZrcSIuijcZknGr1pPvixTXosuwlBqpJ1oBjWQ5WhB5YTTq3tJMeqrh2s\nEDEeuU54adh/xin1K+wLb3GJBhMMW4VX0YcuM9k+nFsZuPitipU8JU+Nt1WV\n6FQI5Aw1koejd6nMJ8lAEvVw7mcpZiGUFluHS6n30wuMaSnOppYI8V+86HtS\ndTRjvuwJ7Z20Lko9S44zQIdoDwePNWkB4qn66pTvZ8sXGkttRvLyUZvfdC3E\nfv7Qr4aL6uplx22oZq9UbcC5u73IUUXkZv+tLwyTfzZPc5j+LKx9qeYLCHFT\nl6jMqH1zWbXICJEam/we+x1betRrlV8EvhsjLG4JOE+/s/kAW/W74+vAlx/Q\n41eNHBuGYMcZLFh0uCOH0AKJcj2VrNveqgAgnp6oXbZxpziBoA4B9Nm8vLKP\nDPVHNE7VHnPK5Q7aC5dc36SvG7764ehuKk1TurBlf0a76TbhCNSF+iSsW+5e\npwTwILyykdt+njg84RyrJvNoVvFVE9ex3wmY/l/3mxccA6Fk/Majgv5Ra6fk\n1lzW\r\n=bZyC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.7ec96974e.0","@material/base":"6.0.0-canary.7ec96974e.0","@material/shape":"6.0.0-canary.7ec96974e.0","@material/theme":"6.0.0-canary.7ec96974e.0","@material/animation":"6.0.0-canary.7ec96974e.0","@material/elevation":"6.0.0-canary.7ec96974e.0","@material/feature-targeting":"6.0.0-canary.7ec96974e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.7ec96974e.0_1582570680244_0.14048532252178214","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/menu-surface","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"3c03480daaa9a09d9d5439a5c616bfe4e1c45bf8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.265ecbad5.0.tgz","fileCount":40,"integrity":"sha512-QdpK94m41cxTYgJUIv494t/Ai0uSxhNxB+oxVmYR2mwGWVwmHHvopcxTM46qJu8mBCvpKn4qO4DYXrBx/muTng==","signatures":[{"sig":"MEUCIG+/F6rEcgcpiClX97Lx6pBELAtU9ApbaZOo589bI7KOAiEAjOvfXSCHeGF+7hsucBOnkspqZyU8K4Bns+uwzRmwT9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYr3CRA9TVsSAnZWagAAnGoQAILLM/Se+sLgpgMUZ//3\n0n3moyTuNL9ZxJm33669hKNLGBjt+bE1X24fyeHoyHb/wKnTEHFnW8ADs7X5\noCb4MFwIwvbup/DeCC8kaNBjiOC7vdYngE99IePolNluUeUFYvNsXO7d3k7R\nawZaEd3gZ60foJqykCVoVvf5LUxT65cCtgb9XoWOicI2rupkRCyGF6WBliKN\n7M1+TfMdakPytZNYqXiyUYPL8teUg2eZcGsN8+OS9/HFIlAr/RRV+rOPyZ23\nK+9wfEFewUBSUfq2wFeSdfOStJirnKINkvTjeHx6w55wuRmBGVvs08b3Wfcq\nUXWEkwtZM1LYUbVnA1y3tW4hT2qHKtHigvP6h0EkL+HppjjTtXIucvDmQurV\nW6ulgPH9pQxSuVpX6qWN38+tgumQWoKdI4r3OWbi0XwAhs6H1cIEXbJo/wsl\nqyQ5elOJizFtvzdT8km6Jw4rlxbbWpkKK9sKtB4kWAxTtgz+wYP3O55yyiK1\nzKjaa96bh2HbCISi+FNh1KFCFqjj6pbX8wVyMmrIix2TchmQkV5eOCcqbGN1\nlvVIvV02H7Vh0AgrtveZg+Z74Il1x0us8LuXi8mank/IJ2r9VgJ4nq2735WV\ni9bEtapLZ25UBYHeIggpgC7eOT3E6tBXo23wpFR94kEOvuLr/yqvNvAboXKY\nOCp6\r\n=qaa4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.265ecbad5.0","@material/base":"6.0.0-canary.265ecbad5.0","@material/shape":"6.0.0-canary.265ecbad5.0","@material/theme":"6.0.0-canary.265ecbad5.0","@material/animation":"6.0.0-canary.265ecbad5.0","@material/elevation":"6.0.0-canary.265ecbad5.0","@material/feature-targeting":"6.0.0-canary.265ecbad5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.265ecbad5.0_1582664439248_0.8344465678686985","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/menu-surface","version":"5.1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"008dc61e79f73deec3e56b9fdbba164ccec13759","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-5.1.0.tgz","fileCount":39,"integrity":"sha512-8EqkrKP92O4xaPVItz2841OfmuH3zyCclU1iC0NSBa39MwmYt7ML3IEaOXwOzKlcNGOcC7qPeqcpYlUsfMYX3g==","signatures":[{"sig":"MEQCIAnz7Y8BHoKXyw2ms0kcIBCyMgBW/v92yaL8dxjoDh1TAiA6ZJV9w0DbFW0uiDeAOLqu+DhCagRxUOEKSA+4f7oj0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZOxCRA9TVsSAnZWagAA0WIP/31qw9AImQR9Q4AGKFaj\nSEJ6Wk1RTuAdHsGs9nJkqlVdAzAZaW6Z+wiZZfBl9zh7vD+n8wW7oDmXZpUR\ne4irTTUn+KMu+ocbv6VUFonmCVQSItEe4farRBD3rGxsJTVvTE8MWsym+zgo\n4E6fI4eiVZSe1TfEaMnj1Sq5TaWItIqF9cCtCBD6Dz+jarZhx4mehmlR/c08\nYA9FuPLeUqwX4N0hvcf62mcHjwWV0QSF1x9C4PNwItzIxJKteVJvOwNr8JG1\nS+4f9s2f+gv2qEimpJU0C4Xz9cyecbunSYYbElMUK5nXU1mLeuIKFUP3+vrx\nZotS0+4CDevRjVF8pFKiv0ga0o9xVtUt2mfm2RCRQ6u21St1FYxGqRMcszF0\noXCoalSrfKho2Q382NK9uo/pzZ5kXJJ1Y3ynaKeB/j8LkrpFO6RudUjaSfEt\nyoBoqUEAZd4HBHYmOsYEiABirth5trFbeTzadNrWSiD2cPsxMJAJ47pDDCFD\n3vuSRtMQLypdUdof5J5MOQWl04zqUA8Su6R5IvgqKvMX4klMoR2PBgSYsHvT\nnp3B0VIwcYiWCTMwOmMPtEIoC8+zEUH16y0e1mz6i3ZJJ2ay5Ed68aAYchzv\nkvmEKC4y1KRlqfaAa0ESxzVRQhZMK5KDCabfiv2GFNViSJIVGOIZl2f45ha8\nEzVI\r\n=3Tw0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^5.1.0","@material/base":"^5.1.0","@material/shape":"^5.1.0","@material/theme":"^5.1.0","@material/animation":"^5.1.0","@material/elevation":"^5.1.0","@material/feature-targeting":"^5.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_5.1.0_1582666673125_0.17114109761506158","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/menu-surface","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"64cccddb69bca0af725c58b37cfdfffe0f742306","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.2cf87456f.0.tgz","fileCount":40,"integrity":"sha512-vmXRatkhLS7uwJvhWNxmRWvK2Buk57pKHXnPcXd1rCE8+KyDc8mzFQuG92suLtk90CQAKYTIOT0rPG9Lr7A7rQ==","signatures":[{"sig":"MEQCIFU0e3m2hwhmGCSnLCbxb1d9Ac6RC6YyvJycVq0XrU+rAiA0AjPl9cz/yfQS+JLqW02u2aowSjXmhw2sYWcCHwxPKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPqCRA9TVsSAnZWagAAHkYQAJmtLEt8PH4L7KdVLGW7\nO9AOD8h3YNvzTCFc9bJqOQK/DCOkCt9eAGGnf+QR0RePM3z5idMwy1ar/4E9\nZy7pMJ0UotyYCj9BGTbK0DS2uPlQ4+DalBhqZXBjBgmWWziUlgTXvaKOpsaA\n47Z0MDENmGxExPjtlDKoNYN2Z7VAK77gX1J010l+sQqtRdCBcwjV0ykMzthE\n4+oBkeSvzsVEZsA1L9sYWti8zOND3xb3eMQWHdU+yXhvcFEYZH/Gu6eH5mCu\n9TQI2YXDyJ6ra1Mzr4Q/pmdB3ZlfG5TyTUgGHTJXs0fCxOMJDb288+A2emO/\nC5Cu3uqlBCAPQy1GIwNgdO2D75/rBeZ7wWnVG/KGx3ifttSzMc4d75qIxwC+\n/TiO7APL0n6viVeGjPy4Isdb5SDmdaf4TH05BCgUskES0ch6wAHPgNGMoVRG\npSVxKQE84H0oviSkGoMSsRHDf+3bjT5OKl5TBln0uZqXcvczCnteUZwUwDsv\nXy93MzbBFFGJBxbx4YyxVAUL0SWnj3hMJM1gYvkhMmfX5JUxVu93ssBxhfKo\ndKWieBQlLXZYBkFYdb9fgwKLN27D/kQ6wc4qx5X8pV7OqEqBedM6+HS/Yye2\nxxqCx7PxPwXANhgqw1iqZ1M1ei+MPKQXerEFpdDHbXRaob5uANRTmGiESI4h\n3d6O\r\n=fk+I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.2cf87456f.0","@material/base":"6.0.0-canary.2cf87456f.0","@material/shape":"6.0.0-canary.2cf87456f.0","@material/theme":"6.0.0-canary.2cf87456f.0","@material/animation":"6.0.0-canary.2cf87456f.0","@material/elevation":"6.0.0-canary.2cf87456f.0","@material/feature-targeting":"6.0.0-canary.2cf87456f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.2cf87456f.0_1582666730276_0.3441232836036616","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/menu-surface","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"0f1f65111a7f344e0b4f2ca03a46457efca3447a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.781434a92.0.tgz","fileCount":40,"integrity":"sha512-KVtxv4ccKC0QqM8GZHuvjkd/JArXI/9uMHSt/IcIlchSlj7iOkiztsO0kY439CWK2LRauk1DcRUkJ/flUBHUsg==","signatures":[{"sig":"MEYCIQCK20YNX8BJY82DvUevlmYq3M/cfTE2jcNzc//MAAlcagIhAJa/yKhYw2BAYwzDH8KlqmeaqtNEjTEQyXWqNw+bUtLw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa13CRA9TVsSAnZWagAAPGgP/0lUVsRvVTLTVoGOk5HR\ngv/TTPyPEJAsfRpqOMGRvZKiW+s8t9d/68+eyYnxtGpsuCGkCehzhfV4jVF/\nh2Eu0CQY1sw22Gfyfo2Qxp491SUJrxrl66bGET28DEu8QsuOYHYZ8zp2mTMr\nRG90oZwf+TRnicoA8nngGdbvziqoegSDBjCZPYdL4YFwQr6H/smN2Te4yQl3\nqQRQVmMoDNiAjEdPsAr2kkgMJPqJdDVdZlQo4wo1kcAZwoLUDWaOfkCWR6wS\nVUFSOh5B0dcnbt40HWWB8lX2GwR8k1KGXEo4s+ShL4NLOPYPCe7RSsJK18zU\ns4oOyZGIhnGWCHFvcoTQuzOuyxDs2BfNFwTaoeCHFmwKoFNvXFtN1MHWbV/s\nj/9+jjiRQvmUTM6ui+Er2CNTR2vAOJqkskEsNV68Ho1n014f0AdtTEzbUsA0\nppCb6dAM+LUxcdiBR9L5p9NduDBH5vA459ugLPNJbTS+dLgEQnalD0NVLmpd\nIijtwO4rQMttd4k/YVVuAk2jkPRRNlQaNiWWEJXa07L1ymQ4Ao7CE1RBRNFG\nDfbDfOi5FI29ISWHfl7M6woLZvzErPMQ/1Ykusg0JKtnFy2os2e8cIXbww+S\nF/FoSp5Qz1HpG7rF5X5MNQUN+kcmzDf++HKkjPD0GgrqmqPZMxoMEKyzmnDk\n6Bka\r\n=JwBT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.781434a92.0","@material/base":"6.0.0-canary.781434a92.0","@material/shape":"6.0.0-canary.781434a92.0","@material/theme":"6.0.0-canary.781434a92.0","@material/animation":"6.0.0-canary.781434a92.0","@material/elevation":"6.0.0-canary.781434a92.0","@material/feature-targeting":"6.0.0-canary.781434a92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.781434a92.0_1582673271457_0.8194802953640825","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/menu-surface","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"bdb9d11020cc4d85c4ee71d800ca8a682e25812c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.d6f60c98b.0.tgz","fileCount":40,"integrity":"sha512-ZneRn+sJrtEv/XIcT3Rea6TDg/3WmDsrRis3Va2RUYq15IXRLm/L37E0LY1GM+MsRACLITU2D2o0lCbt2VIvxw==","signatures":[{"sig":"MEUCIQD9xoe2fDyjqcC+Z98olkm7/e4hphOHcfuvrCudRk8ZPwIgXEDdVFabE8blG0z3/jqD+g/uuN2nj2wGuoUM5x2zKno=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY4rCRA9TVsSAnZWagAAstUP/3zXu/UTgvac6lPSd/Ou\nDXBbji0VDW2FzgPrJ8gqUhsKzqyldjApEEcy0hqGkG0uGK0oOr4AMy+M5puj\nl9ff+ZJ8C1ccgaNsOcr18dTkwf/KpMZeubA+KtYsUhN+th04THwtqFWc/Y7q\nMWs+CwjNP3CwmuUoXMPMM1uEvVcMhlzOcQY/NESR3+75w/D0FrmUUKbmj70N\n/9SLSjSbdVTRIIFYg6ppRTE9Nd91ONeecyOKYVaLBN2bo6lz3n10m3W29FAk\nVmsEr0Aggd/858BXEoH+t60P00PUtQiwStO6KMtWEXIGHsSf+j00y5lb9sgp\nvl8aLoWar6vNaqQ358AOHw//wuCXHE1QDbtGwUkDzS4dhd6KGetsPbveUiq5\nGHXKqocNfaGCC6mHIcYHGsN/7eN/TEu+xTMjw8iuqLL8jsyj4Zi818/jkwkj\nHYs8xkFYsjtGYYC3U9iaTZwkgeUTPynbfpq14Bqj7sWLXJpIOKq/GZhWpLHJ\nCSxL7Ipir3r7VkJ9Ra+W6yM7BHYh/LGOS65pqLCaNZ2FlU9pyImb7lqqMsmB\nm36GBqRv4WAQCLMLY7SeNuJ/XYJesbv5tvbWXmdQvvqzPHbWmtmuC6C92kHJ\nnlJmvRo6UB2C79TC7v+c7iRG2gRUTWG+FIvLyPtbLRRFEhkLXlKcqKoWe18c\ngwFn\r\n=jUMg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.d6f60c98b.0","@material/base":"6.0.0-canary.d6f60c98b.0","@material/shape":"6.0.0-canary.d6f60c98b.0","@material/theme":"6.0.0-canary.d6f60c98b.0","@material/animation":"6.0.0-canary.d6f60c98b.0","@material/elevation":"6.0.0-canary.d6f60c98b.0","@material/feature-targeting":"6.0.0-canary.d6f60c98b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.d6f60c98b.0_1582927402860_0.19050606777402312","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/menu-surface","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"22f1968d36160868d4d21c8970f773bd96241cee","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.69edc6e28.0.tgz","fileCount":40,"integrity":"sha512-7KGG9WFGxGV6NTqcLltNs7slMmzoUzXK6owju2uvz0oJ8kpjFwjpZISVvqa6GNucCvBtElmolRD9SLKtPs6QPg==","signatures":[{"sig":"MEUCIQDWgbLbbHu8dnppKVIUOq9OjC/gnsM5z38l+XxHmbf6wQIgdxNcg2D/0TPVD0sbLsWbpY5bQSFo8BfeImfVBZJTVCM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZAwCRA9TVsSAnZWagAAHUUP/2m+1N975hKtChr2jTsS\nDKScLt2gu4FsqFSvArpp0KGZy3Gh3zeU2H+Fl4wPaMNUwCUog+0IwL5EIQUL\ngdDtu3NY60YsOynKWuvWzrfNGWklgmRHsi4Z1gCikW8zjmvTdNpPPbbl5VOZ\ns5AORSclIadPk9/JANHZxVDExem4ilK+O8jVfd85ZDMzBOdvRjRHM6RNupDt\nqazLJ/vRdjrgtQSWkaN5olv5MH/RfA4a8Hn16XIqvxwoZl6l1oTkpYYN3wUf\nFcjYChpWhWR5cQJBsOOkqterfthVpFWqqSHrDsgQKVj7Rpf7DED9Mh7KSVv+\n8+dzQT/Qk/nicUOpColI/REiBzAG0hgr4EvRf1RGt4E0HOToHfko2lZfyKyH\nZYWOjQzpHiET3sGXRJUNMDgYd/wfUj78cfTO4e6P05KiZEbGqJ0jvOPCLCTc\nnIOlaynbmT+Co2LES1p7IgtAvoIKloOJHyeCUzaD/8P+9Pr4qt7oguTF7jJx\nMGj/WSipXp76wRtspofn5ZjTMzv25oANP/GicqRm3YNRE/q8vYO7mbHg7a+l\n3u9zcdCzGepGrD4zJzJhKklOHfrRy/24vBx85fAGkv3Y070l52Kzu4i315VI\nOcsFd1XJ8SMpH3a2JwWggTS7+1DaK5z+3q0bQOZ4tpKHcYE6HAbnPr0YyAVX\nV1Mf\r\n=lP9e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.69edc6e28.0","@material/base":"6.0.0-canary.69edc6e28.0","@material/shape":"6.0.0-canary.69edc6e28.0","@material/theme":"6.0.0-canary.69edc6e28.0","@material/animation":"6.0.0-canary.69edc6e28.0","@material/elevation":"6.0.0-canary.69edc6e28.0","@material/feature-targeting":"6.0.0-canary.69edc6e28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.69edc6e28.0_1582927919416_0.46356680490212554","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/menu-surface","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"195a2b201e307f41e3ea5c0412f950cbcb826494","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.9372e4939.0.tgz","fileCount":40,"integrity":"sha512-mUtuGeAyc78StI66UzAJeaFy1R6TnH2WBZ6UUGgAjtqab4/d9BdpLdynFuX/e7klEvrfzqi07XiE8epf+F+Qww==","signatures":[{"sig":"MEQCIHB/ihpMQBWwgdy89thsNWgMuAPt3zuCXqop65/eViERAiBu31IdOdgetb6LM2KO4uZr0gsYQuQDWQ4aS2G9Pj8bdg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXqt5CRA9TVsSAnZWagAAX+YP/0ipkaeghuFZsLBjyLlK\nJd/N4AGOPDt6XaimaL40kICP/xGmMMunRWkrQjWLccsXDhNV+2mu5GJuw9UB\n56axbBNsaimV2vDUQ2029y8pgllrUQm8oALeum5yCPfQQ0iiyt9Ccq7jP4bR\nPB+l9HQ33Xg6PCOlpxA5YrHBfKI5pqxstxRqau1EX1McsYOFbPXRO0zplrjv\nCaKSlMpDhjSpXLxhcGM3o1UCQy7KKzY2P0D2fYRRfCF/iY3CKduOsDeb3qGM\nBV8w6mFA/TxUOv1F+zidRT3XTUJjWKasX2aeBQ9CRqoHNMwkDlcRp7cz/Mu9\nwcGjNsHNNG24YcP82vc/YmEW4tkRg1Ukv8QkyPqPOB3K3LGPSo0qkNrfb4Qu\n4I6KJZJOsbRH6mH+KyHCLxub3HHsd0GMjtqHJMv7FbLUKDIkatMa121rjmKJ\npaCyZVEBPwa/6LK1y3PKuS6tKUOM8P/uMgnYCb5iEYl9rP6amQQOf15GTqRM\nfBlFGdhJrIHSw7L+qsOve2dXwk/B+f35nLJ0uwCOCAbMzowGSurDgERNcxgT\n567wSD2koqkPG7ifRmqaAw1N3g59bUx1YvYQRCyDS/dREB910NdhzBJrNUBa\n/KvxrrDxG22mIkGdVGm9Yb7lY9LfGMHpPJByGB+9zOBxuzUs+n8o9Ex/F3PH\nehJY\r\n=2dFU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.9372e4939.0","@material/base":"6.0.0-canary.9372e4939.0","@material/shape":"6.0.0-canary.9372e4939.0","@material/theme":"6.0.0-canary.9372e4939.0","@material/animation":"6.0.0-canary.9372e4939.0","@material/elevation":"6.0.0-canary.9372e4939.0","@material/feature-targeting":"6.0.0-canary.9372e4939.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.9372e4939.0_1583262584796_0.22497567455610068","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/menu-surface","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"f47551125469539ff4de9f19b9af08f997288176","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.9cf5e9842.0.tgz","fileCount":40,"integrity":"sha512-6//qiBn4ON29vMRDCZlXnu6t/J6xvSB4l+wS8AjDHqQTTEKUzmr3bcdF8Lz+MHG7I1IarRo60OrDiHWvMIeUPA==","signatures":[{"sig":"MEUCIQClSedoHckAXg9woaPxrmaQ6YG1MiFtx5p+hBnPUcA9OwIgOWR+pSX+U4HUslpKq42T/Wb4imUAHBc3ww7M3qiL2Bc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXudvCRA9TVsSAnZWagAAn/QP/0wXxXZjZgMBAGQba/Pd\nYfyn0f4uN7T1NLGN1AV5wk5NpBgq848i5u5YTm/7Vg9bl6J4GccmGtBGhnkJ\ncDkczNzZAWLv/v8ZNKLL1BBYBghsG8xdtoYMEH5jIEWtIuHpgDxLMeGzJeLs\nze+ZFJujwOOcTSEKyPwK4dV5VrJnUgmbWfci1Jy6S7FrxrYPTxg3Y6MdLkzw\nDwgZ7pG68WojbgitifSqL+cNojFf/mZuwoVNEo+OGMx8x7V5tvHBykwVKHBI\nSi4h96z8Fah59GwPsxlVvhqEP6t+jfKLOIAVS4gCzAdPPS33xtujq2gQx1hw\nrFAC6jrLWKF45t1t4oKjDJvKA8hOWPLZAhWIJJWzTdgNJQt19uLBvM16MHmj\nQB9AB/SjNVCe0YwGF9e7KdjHKUHIQwAk9YV5TDmGaRm5XEuMk/sygz7tw5Fu\npk4NKSQGg0d8IyySVmlnkeOow+plfCMqdo3k4PBf4LDWkusD2s8TtmrjAI8j\nbfWCYIz3V09m+3WvBghmau4KmqVnasiLQskDBoGkSzsqZFFjSOge8XhD54Jz\nzbIGZhau+fK0YsHEcS2w+sTAkOGMIE6a6RYPy3bPd8sEsDdZ9AO08ElvM9Tt\nYFCmA1V+SNZMD1lqAjiILXaCEi0gHujwdGa3UXi+YS6FemfqigE9jXh6mqkJ\nQBHX\r\n=BiFP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.9cf5e9842.0","@material/base":"6.0.0-canary.9cf5e9842.0","@material/shape":"6.0.0-canary.9cf5e9842.0","@material/theme":"6.0.0-canary.9cf5e9842.0","@material/animation":"6.0.0-canary.9cf5e9842.0","@material/elevation":"6.0.0-canary.9cf5e9842.0","@material/feature-targeting":"6.0.0-canary.9cf5e9842.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.9cf5e9842.0_1583277935093_0.7594560369659455","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/menu-surface","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"11e805a54c523a7b4dad67df07f489a6edfdf9f8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.3657f8863.0.tgz","fileCount":40,"integrity":"sha512-S/rFi0OsRgUK+QZxLjkmGww+xEzfTIsZE0SairYpQiXy+PHWgEmyLn7NTDBlh0DGnM1HXH1uDqd6OFwJo6cNJw==","signatures":[{"sig":"MEQCIBpj/MsKGWtPgDN85r7o82od0aFOwOaeXfkpNvIqUmpcAiAIGpJJX8RBToJAi1AKQlPpOnivyu4EfzvqtPhH/oCx6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+jjCRA9TVsSAnZWagAAQhoP/j5wcJiL+RMm5GnQ5FAP\nAuJTTGCCxq/ndpXBRWUkivxcmelgeWGDOF5fl50o3YaM2ASmcRixh38HqF8T\n0XcimTNPOIEifJi6NzB7xKpif8RZfoQ9oJ9+DWnaDBOfcIJGg+mb6bajR3o8\njhd5BYlaqf9axe6CuhgGH21mKY61xzE9eYG+fDe9m1YAsWPmBHIpvnx/rWhu\ns+llzR8+aSffMHNo12mY/VC51mav12tDCP0mg5EGfPOjG/QMADxDBEMDaD6l\nZ6k/I/MAhNQbTQcQTb1GLT4H3v4vIyK1QHn8R7L1QLAjkNasS+YIlEGMUgRI\nMxoPJOrnCliiGF/Y2qP9uS4UB4TwgHa/aVU8SxvimiJkximvt8vd1ZkY+qdf\nCDDg8J65aDyId/y1FkLRXiw2+mrouJSjfAJ9+letHuw3ksuP8R9JKLpfJBmR\nTFHTBKQTZNG+bvHk/rCKZt2xgJuDHltRhHhOVyOejTfkYDfsdX5nblrAdxsp\n8gO4TCB4lL92eA5UFhtwSQ4l4tJvthX2UG+5hgR1CmIn87O+Qs0ihEWAO1Kt\nYmMxNqk4Dp9/OWiFJvMG4KkLdalwK2BIzHeApTeOy8doRCLKY7ljKKIwPphA\n9oYb1wfuJaXHmlYn1PAuF0Vbz9mUArP3pJe9lN9wRdNMGCJlDRechDE+U56y\nw/jK\r\n=DL5X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.3657f8863.0","@material/base":"6.0.0-canary.3657f8863.0","@material/shape":"6.0.0-canary.3657f8863.0","@material/theme":"6.0.0-canary.3657f8863.0","@material/animation":"6.0.0-canary.3657f8863.0","@material/elevation":"6.0.0-canary.3657f8863.0","@material/feature-targeting":"6.0.0-canary.3657f8863.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.3657f8863.0_1583343843143_0.2726538181926941","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/menu-surface","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"3d2683e6c99c1aaa0e2fde678cd7d3f4cfdd2733","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.98b843417.0.tgz","fileCount":40,"integrity":"sha512-5paYaKtmTIjDL10CTzB7gQkHAr36F801IMudqWdvxHtXELTMoyf8Q2E6tTF427V1T1OZdb/YW2JViT7hFpwCdA==","signatures":[{"sig":"MEUCIAcFzYQWY+phZL8R5GaFfIC0boF6l6huKm/THmfmtAIOAiEAok2Ka60TNR4fYeMCSg520544wQdc4J/iCK42Ab+8WYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUVeCRA9TVsSAnZWagAAwZ0P+wSL6/GsXVmuuTa0WmwP\nrafxh7P2I9/YIto1m/uxPxdi/ylcZ/+XkBZ124oYS2vSHNJZMvngTSsl8zDs\nvl5Ib1y63Me/ohVB5vLNLjM5ahixh/RRmETHUORwF18Ux0qXNVD7bd8egsEI\nnFwzD9iiApP7NXN623zaVbxje7pKhvWvZtNBsewGFm5Ogp/wReerrsv15vWS\nTrUf/FNZyq+ODRDvp2XlwYiH4TiIaayv+FwlDjkXlSlmOi3zEOTLhNMDszgK\n9qp1M7Z+Lc+NoCsKN5DFcWgS8eemcnKr+bezO2WO3H78lfOIRNJxd3ViUJuy\nJAFnkNgrnioBxWMUpGad80yukTuK/4nF8+M7+y1HDGUKWPSscxLaVe62Flcl\nRucIHCkYVomuQpd6kTLaMr6a/Ms3Q2nwMTwbY/m/GE4DYUevDwj4GgOr64I/\nEmybjQwlT5E5y2B6PsSEtkmYZIkvmgPh7SkXjxbwPpT6XFSGih5OCNcvozTl\ntwI/MJPyvfVdLtAt/MV67RKiy+ISOr3gNeaNCu8GdJE5KB/GM1kDs//5VL8G\n1wIrY1b3ozusc2XrT/A8ARZaRFhL/gdYXWcYpWd1BD7g5vb+ZWURaVpiD8PH\nZBydAIXb4od8n+sedkT+Pvn8ccpY8Flo2UKAzkT0Zxtd5IBcJgR9D950aKg6\nb8o2\r\n=M22a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.98b843417.0","@material/base":"6.0.0-canary.98b843417.0","@material/shape":"6.0.0-canary.98b843417.0","@material/theme":"6.0.0-canary.98b843417.0","@material/animation":"6.0.0-canary.98b843417.0","@material/elevation":"6.0.0-canary.98b843417.0","@material/feature-targeting":"6.0.0-canary.98b843417.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.98b843417.0_1583433054415_0.5929513717430264","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/menu-surface","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"24c80c09aa598b3cf382ed1e1d7994bc91c7c855","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.17b9699c4.0.tgz","fileCount":40,"integrity":"sha512-nzXNzLa/K0+/3bbPH4XTDnV3IrSc+b5ZydmsQoZq++GZHosynsQzqIQNyAjNNUawwvTBQLpICjke36r074i53w==","signatures":[{"sig":"MEUCIEGjNjaODLGgQ7I/e7mdxG3uW+9gGP+4MYjuDxD49axYAiEA5gsPjUOkHFXTJMvgvpf8WOxhmamA6RFdZi8HMMnJ4uY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVFiCRA9TVsSAnZWagAAtUgP/2vnP7AgUupZtmToV+Md\nSN/TYu54MalaIwpQoeg/JzzDMbox5DvhlBHA6+P8MNscdrGTxw6lwWhtPss0\n4WP87JTn49bdLbn3VdJGRRk2tX0L+0NAsMv9YZ9JIeA96gZDtHWTQ4wkPQhi\nsRVOFf9ZuGT1Pmo0c/EmUJgoyk+Q9B1WjjatGpa9151nwfO+5l0v4v8xURAC\nuTmFwFGgyOj/b14PJbXe4SIG58hJwUIzxQzHU4Y6BCXHOHdqNcRlFCSe29l+\ncJd9vhTJYDXUR713m5KoN8Dbu4QvsoH2UiXqyttXwIPECn7FsITcIyhSkjlx\nVkHXqkN8xV85RpHDsSZANjG/vwtxrbA8Py9vzfyBVnFaAFLZ1FOeLHYcM+3P\nw9CILqf449WdKFg0fJKaAI0WmY6JJfBIQdRQdvsGxkpn18L1I1fNISPEdlOA\nUAAJh1n8DNHHhfs//DKa1qdaK1Z1WWOd8CXICUVbDIKCZudY+7718D5FNH3O\nEvQVl1U9GQYRPovPlL0ogkzhNG5YRmR4WvOqoaddDPNy8LlBI0TMZJptEusA\np/dth9J9mCM0TMMDcdvpmnlIKJ2S3kQsDH0ChJGIzbuYekM4uYyWpp+6W+Bd\nuxImiNk9bIKbYmm1XRucccCWWyEgeWr61owD0sVqJFDotYuzHwJ1sbB292S9\niMlo\r\n=cBH9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.17b9699c4.0","@material/base":"6.0.0-canary.17b9699c4.0","@material/shape":"6.0.0-canary.17b9699c4.0","@material/theme":"6.0.0-canary.17b9699c4.0","@material/animation":"6.0.0-canary.17b9699c4.0","@material/elevation":"6.0.0-canary.17b9699c4.0","@material/feature-targeting":"6.0.0-canary.17b9699c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.17b9699c4.0_1583436130187_0.3450396451788129","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/menu-surface","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"812c8430ba1d30fddd7bfebd321efb8a82fd7d5e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.6ee035572.0.tgz","fileCount":40,"integrity":"sha512-iUamEBS8Tjs3TUrNGVHdgw8Blm3iah5rMw7wRVozh7BZXR2Xxc9cnhEpQOc9OFuRyadw6Yk//omfkeqT9bXuwQ==","signatures":[{"sig":"MEUCIQCR7XAs51pVtLkmMfa8Y4GE3AU18akAORRocbInJHz7VwIgAd2qJ5H/vVzbfsJuXpleMVl57MVVhduJoS3HQuNhLA0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnLpCRA9TVsSAnZWagAAEjIP/0hZPAE17DYiJrgTibaL\nfiU9TL3DowILXIkG0YxyCS7BAK9MXKaKvDODZKv0nU2fgLi9UJu4A+x04Pco\n9D1Ivf7CFloCxP7fmTJD4uNMxvXHAFVYZc5wObq/3cqMSdjgTzu2koNcoE1h\n6JMXyxCL0Pp/Xt/ZxVAwHLVN7oKfSlLOfumHS8R9udMaCS4ZbTr3IhzSUyMY\nhXKESuqgwmRDenN4OGtWrub7H3cjAYECyIUgHt/pHzNh9bteBR64VWJ9Y5S8\n24SAt40xr9+q8TtRJCQMcS0pZ0kH2IAeCzsfUuDLslYJjBD+5W06xBDSpwWy\nNfdN4xWJibS/i7ToALkQgLcR35aq5S0UG0FbOvLROBMSau9T/3XJlcVDyi9A\nzU9zjUHPp6RTwwNuch116421NK39TgyJywlOyuCMWzlmli1JsUB1KLQQwPr7\nAECYRhOkQMVTj4DIBFzB2qDXezmmEczjVZ0+5hYXYp5hNXHrTBsqdObUeEy2\nB44gqLqSpu5o+EBXdmsWxt8tc42Kn2YAhfSTZzr8/BUUXi1z0BfjtIHoXm6E\nVfGddaxpDrQZ9MIObcJXI2oxa4GckRqnSy2sVqHe0Y77Q1eBNxwQo2QJbZVL\nmZaSLDzM3dm2ENEfGxMw46lqkilAQUWkKNxXExc/jGkgBpJZ6NKIJ4EYVGBC\ndKV1\r\n=FBEY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.6ee035572.0","@material/base":"6.0.0-canary.6ee035572.0","@material/shape":"6.0.0-canary.6ee035572.0","@material/theme":"6.0.0-canary.6ee035572.0","@material/animation":"6.0.0-canary.6ee035572.0","@material/elevation":"6.0.0-canary.6ee035572.0","@material/feature-targeting":"6.0.0-canary.6ee035572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.6ee035572.0_1583772392392_0.10029541111558649","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/menu-surface","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2da575179dc0c99e187c45d0b3ead11d9bdd6763","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.bd33cb56b.0.tgz","fileCount":40,"integrity":"sha512-BX9zu31KWJt6z2FeJwsbiLhvSIY0luy/yd22nGTPvKRfjRTtCJRJ2cZAb2E2+uwDXudfKz7jju4HPROt9ZWkeA==","signatures":[{"sig":"MEUCIE2L4yMCMI0BcWHxUl5j9ZzAb7jbDDAtrTgzTTzqj8G1AiEA2HmnRAnd9zYPzZxQhbzePrHc30KWQrPNcJ8lnr5Iebc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnstCRA9TVsSAnZWagAAZz4QAI7N9/C5cPLIieGeXQ4t\nC+LwO5WFmpr+gPZ85YiAMU6oixBcwnjUut0AioEnHH5vmSVUY5fcjmV42h6+\n1X5Om5E2e1WMYjo5nKyFa9ORmqelueRsRL9cIv8LtGk9vtc9f+EtiXFO2j7S\nUwzAdQkHlLdWpmMwnbZgBa3A7bo49Uec7wqHYi3+8nEB95oWua8sL4ij7nex\niU3LDCwnPq30vE8WVS+dORa117uCJ9ggnqu1soHOJvGSArOxOUezEqQH8ANb\nM/9OrQtwhHdYLOwpTLNBZu13or8vZ/FjdrLA8M36oZdHiCIwSThv1uH6fDMW\nNL7Sh2k4syJc91avAm+UvXeJ2HVldebKetLFxOj58jPZY23gVWSB3hjwRPHG\n0D7iDzliodHCjp5aF8t+y1x4IqWbhxKpyOx5E7Emg7ZIvCaPCB/tpbkktmaw\noQUge+0gH1ISgauikH2TlhAdAipDoR+L6DfQZkjl1HEhIx4s8yS8GNs/RYQi\n9+g74vdfv6I63z6V6e+9DNUCIc5h5WxfckmeNnTU7s7/P9N4ZVMe3k3kg4h8\n7+k3Oho0BymzqXB0ZS5+KrZ60gj4c1IO1ClXSzvN7iY+6NwvN0JJLx4H5ABj\nx3etJzkmXxyguUSjXgdeJgN0MwVIdmx6Bf8jevzj0TNgt+4e5TYK1gjWg9Xa\nsV6S\r\n=7brH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.bd33cb56b.0","@material/base":"6.0.0-canary.bd33cb56b.0","@material/shape":"6.0.0-canary.bd33cb56b.0","@material/theme":"6.0.0-canary.bd33cb56b.0","@material/animation":"6.0.0-canary.bd33cb56b.0","@material/elevation":"6.0.0-canary.bd33cb56b.0","@material/feature-targeting":"6.0.0-canary.bd33cb56b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.bd33cb56b.0_1583774509331_0.17171532564671654","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/menu-surface","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"48765a38229adb7ae0fedc237e7898b64920e2a4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.26c049afa.0.tgz","fileCount":40,"integrity":"sha512-iHJqFHy/MMzAWUVQg6jfj+sIsp4g59nF5sjjGgjI9eqOD/CnfXnFjDpWwuHm0wcrRR0HOj6R4CtJQys00EzzmA==","signatures":[{"sig":"MEYCIQD4KZRPf9tXodWd2GehbI5cRlf6/xPkvioGMZUWeYhvZAIhAPiGPkhFtADzoWfApkbYuIaBvwxNVu0dXdTrXRzbgy5N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8gYCRA9TVsSAnZWagAArn4P/344X+Jz1WFCTwmGHwr8\nlN7bs6ob8avAnqjwc52JvW1vMvKnIvqMarLS2tObV6z2MZBCgsx5AVYq+Y6J\npXo3jKplujfXH+6QshlKvrK6sMN84ag4WNj0bmqAVg2dzUPS/hkonJqbMk82\nWcx5pIfYmRrEg5I7MPYIhXaROt8lfLukb/DW8nZ8QmAdYJjX0auz1mtSpXSA\nHAa4bfHHCLsG9I+53pcsmMOMCWyGUxSqfZay8SelTJVf7Ux5ewin/uNii06A\n27MEOa/v+S1DNtgQNfmtwxesvscaKlhjIqRrcKJu96iJ9gmuYT8HJi9s5KFb\nhZjjWBuJ7TNlWaCx8qpmE4zlFGubHLyhH8UzKZz2dggSc4PLmNgXeyabSD0F\n4ljglv2UnYfqb0WNbMk3C8n+qpWqMjnsxIYM8HTtlXcy4KJRAVtmUDdBVq1T\nXvxwjjxUVYWNmWDOkkYgoCDYzEA8FXTde6mfiosuHl2EkZvbCyepsxWP8Oe0\nv/9Po5viLoZ8kT8FkPtDO3DOwcHNthE1gIfzdBlbV5RRMn+8zq6ljAWnOxwa\nqX0XVb1sXIrrQk3yQToqePdLL9wbeleMlvGIpHHLw3AWqXpX9DIcwVNpflW/\nbFx74kioqTwyO9x8kzkkh4lhKz8whcuBfsLRc8+kOyTPKLxYWyAaP11lT4YD\n4IWt\r\n=Q4/V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.26c049afa.0","@material/base":"6.0.0-canary.26c049afa.0","@material/shape":"6.0.0-canary.26c049afa.0","@material/theme":"6.0.0-canary.26c049afa.0","@material/animation":"6.0.0-canary.26c049afa.0","@material/elevation":"6.0.0-canary.26c049afa.0","@material/feature-targeting":"6.0.0-canary.26c049afa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.26c049afa.0_1583859736271_0.05756766320575979","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/menu-surface","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"5b6ad54eccd5f03eaa47a35317c59a8699e9108e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":40,"integrity":"sha512-cDU0XYphiyn4In9+Y2VT85Ap3PkTekVayKQny74jJbrnJZiKGSG53p046GLrM3bO4TBegXScrB93wDKywZoCvA==","signatures":[{"sig":"MEUCIDdBj09sc69Vi/5X8FAe1qkYDL9gQP1jJnibZGyfSKZqAiEA7BYrH4O/Htvb88R7iUpTm2ETLah/o4b9jyK2+xozf+s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/pYCRA9TVsSAnZWagAA27MP/jRaEUFLy+B6/TBqHBE0\nQirJgyoPgCfxTK9ORiz+BuBRg8PDftlfVAzt/CNv/829x+GQ5L0F+mqVc42w\n5/bm5kmRR0slScxbAUP+5UfzACjPZ532NUXWNf0yh+XHT1xiA5V+wGc+0a1d\nXfWlc8A5KPWfP+GJW7eBAJBPiip3ksKBAittqHSDJVaZ/OKwAjM3MGjYvhH8\nK3pVUjIbJtu8pLqaZx6lvq1rLp2ZnG3cr3aSOu3wVVHxfNoqp1064EkU7AI9\nTjmb1ccHBr9aP+lA+UyFXDOtRUKhEUiHLHSZbBRjJOlNssuwXelAj3Ivvnli\nC8ITbjdYk0tlu5HA+MQYjsjLAG6ayGcrlbV5QMw9UvoqQK4NaHMLV2Iw6/0C\nqPjmox1Ixf38ucjnQnC1e9sCIVFHxlwl5LZFBcTjxXOboqMec76MeY7kBDCZ\nr4OGGEld5jyU8ZlAziycb2c/M++ylwmmbppgiTJ8jJwRuAGZOYimjQ+02HCx\npUguAtTTLbaHhx57zj4czi0vGBfoIj3cM3XHHGxMe7JY2eZBDYgV21c+NbBP\nTayxTocbq8dVPlX9we1zFEDmMcvXkAWFTi4JoaZfCXQxubE3lF/tcUQrbwcC\nIEn/U1R91dezq3inM8idrqZmtt3UtknnSG7CPAgt9qyaCnMT5RlM+WYkYoiX\n19X+\r\n=E1Cv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.1db5c9fc8.0","@material/base":"6.0.0-canary.1db5c9fc8.0","@material/shape":"6.0.0-canary.1db5c9fc8.0","@material/theme":"6.0.0-canary.1db5c9fc8.0","@material/animation":"6.0.0-canary.1db5c9fc8.0","@material/elevation":"6.0.0-canary.1db5c9fc8.0","@material/feature-targeting":"6.0.0-canary.1db5c9fc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.1db5c9fc8.0_1583872599931_0.33259887200332394","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/menu-surface","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"28bccbfdf4676f8db9264fb26c22cb8dc7a6a060","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.4971637f4.0.tgz","fileCount":40,"integrity":"sha512-QsZ8AbyebdpC7smVvS5NVmTHuKMdNjW21tyYfnBSKYihYlykJxWvmiOzO4eEX52IG43zZy4BxlgArK4FNV5qBQ==","signatures":[{"sig":"MEUCIGmNsb5K76AnuHhvhkj7SBmrF7Im2s2X+0hkpq6BSJKTAiEA1aZf3V43ESgxWMCZJ243VoYUtq/ny3KITNboJLy+pSY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBuHCRA9TVsSAnZWagAA0t0QAJaeCZn/MBafMpFx/LaD\n5ggfq3EPHHuBpZ6h9gS6bKTAhSVIf2QvZ2ZJtYXwuK4FjvbrRWwx/3uV46th\nNGbdY58hgYrx63E773jGQNaewc8qAStcJj98ScAItF024ohqN0hicvxtouF2\nEqyV7bK8Gd7t87ajS7Q+HzZr5EIwQyPEI3kjP04/VgaFfmH4+X6F+5lBaQtr\nBRZdceG+jvcWQwZf7a7LgPRApk/9HUcwRSjT84wmN0rEves+3rdHf7aLRI3H\nikUrMnb8U/qO43mbRZtGz2ngLE6jxh0T6WrkOEbSrm2WMYMLp5at53QePT12\n+0vbC23H1bmEKSu6bRnzVj2b82N8p50IGcGl0dgwNO1n4ZlRz5kfs4XA29KQ\nnGKGh2XyZcR70TrVY5eMKbun8xtTdIxDkslsIregrRoUsgkg8COGGxQkyek6\ndGpd+30uUiFCYzhUywDe7FAlhw7hHytnvLduzgvhNtQxQoqGSbXfAGovBByW\npamR5n1n97FMZc4Dm+zKXyix4Q8gSN2r+13IHkdR3Zqv2Sqc4N5W+hiU+gjj\nwhMH6mafp522Us43zC9DT7XgDl5s7WuJdBM0CmMJ2YjfVO2pKsrnrZGP1JSg\nfSCEo/ANJ6dkDR+QirjuhVQVWxhUYs9Zq3ES1q7ZRzMPLecmmAHLq7jSTOO4\nsn6t\r\n=KI8+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.4971637f4.0","@material/base":"6.0.0-canary.4971637f4.0","@material/shape":"6.0.0-canary.4971637f4.0","@material/theme":"6.0.0-canary.4971637f4.0","@material/animation":"6.0.0-canary.4971637f4.0","@material/elevation":"6.0.0-canary.4971637f4.0","@material/feature-targeting":"6.0.0-canary.4971637f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.4971637f4.0_1583881095425_0.3915572051417282","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/menu-surface","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a02481326fa78111adc897e858f2646073a85a86","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.1ae8130ce.0.tgz","fileCount":40,"integrity":"sha512-0RzePAeQttlUIjRVgVU8BdONNLsGvTOvmxzerLAQZ7QgLN7kDa+jmwGl13pXxzsqv/WNJcPmBN36k2r46DpzJw==","signatures":[{"sig":"MEUCIHFoQIzflxz0lOy3GUCT6SXGODM39jzHsdXYYz5F9GhqAiEA275I+sppvKPEB+t+hmMzU6CDYQeNZ3d8PfM+m8KzJg8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB0uCRA9TVsSAnZWagAA5fAP/3fRWN+0HsBX49/jlyoc\ndXD3eUfHIEiqoHY/5cpAdvkaEE+7JYqIdlgE1Qv/G93pLEEiaGjlJ8DQd38L\nI/95okFLNZshSt0lfRkkrE7ieWJ7UnKCfeOUYmU5iR5flKGqc6VJ5Qhb53W2\nc0X07kXtvjnTmy09rmyB2RIUPy3SaFefb7DbubDy+5QH383Qm6a8fQG9GQDZ\n7x444FO73nrs/M2IdKyCxI3Y/f0Lod2UMS0aD6ZhLzDtqXd64cY7FxBzMcOF\n/pT7v72/3Ar55FCsVfZKglYfI1nAGQNKxhAYUYXqQIf7E3YyqXi6POHu+GvE\nNN438yRzttpsl8Jq+iNOcy8Ihfg90i4SYWz6cbFKy9R9EdYoMTqJ5Uz3wypi\nKwPL+oCo9fbwkNl7Kc2A8kmuhpIzDJxYpeRBw885+AdwX0+QN5pdNBmBDR/P\nDBenMo8xr3TSRe8TXSbEf8k0UPA7WtTXIsXxhY5raIBoVElVl7Usm1L2HYrO\noR+G8YZHYHWT16cTjw0mhmQ8NbvzAqfmJWh1Ux60hjFV5maqjv0Bt3jRncGh\n2kXBJrHwIykDd9f3atd1NEklwMobU6knJvqksKcdu6lcMO4lDM0g3acAX7ap\nN4rUaY5tbvnXBrArkMuo2I3WVY7Q0VMXwJkmVtrBlbud05lQWJ3DlgtF/u/r\nFnLI\r\n=MwrT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.1ae8130ce.0","@material/base":"6.0.0-canary.1ae8130ce.0","@material/shape":"6.0.0-canary.1ae8130ce.0","@material/theme":"6.0.0-canary.1ae8130ce.0","@material/animation":"6.0.0-canary.1ae8130ce.0","@material/elevation":"6.0.0-canary.1ae8130ce.0","@material/feature-targeting":"6.0.0-canary.1ae8130ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.1ae8130ce.0_1583881518482_0.051894237695788936","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/menu-surface","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"ba6a28c9feafcc1ecf86b2c1f47b8f0488d9125b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.8639c2690.0.tgz","fileCount":40,"integrity":"sha512-CRuXyiUOA0bg9D0IKlKvMs5HKXpP8ODRX62LgM4jJP2/pT/NXIcQ6Lz5o6FXDOSeiMksrHG3emCLySKKUJ7ILA==","signatures":[{"sig":"MEUCIAJB3eTQfbLYT+x17MNaOseW28QeraKTPElFvFdZpOq2AiEAqzoiLtmwtzdrp07+Zdie0SxfKX9/ejs/nz7XhB5MC60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIYmCRA9TVsSAnZWagAAgJQP/3dNZNIc3O9fDqqjMjW3\nXrEh4mXJl5iibFsnS2oAlqt12WsMbzECO87oJ6fdLw0ZWcYMKO4HE68miPOc\n6s9MLTIYzZN4rTVTvKOngkphCyS/3DFR2Fms/4muzZR1+aEYMbQgbEsqxa+E\nFGSMCo7Gb7ofF6YMgkRsfPsIatMU0xk/w7VwNqEUd5E7+BWorupHnqU1n6d+\nBNSGzTtL4haqWbNW6Du+alBfBZ9ceSif3QA9J7JYp9V7fIeh31PUrAcDUE8Y\niq+eayt7HIhwrE/cN1dyYUef3TorNN8G7LQYArF+JBbG29yaCaIs+k3ma9ju\nmFwx6AdufDesbB600d73Iftx9P684uthnCgly9ASWaje+9XYU1i1IHlxUIb+\nxy36R4pRmY7ySL1UCNn/Wn8ZtJt+01DR64SF18M7/3GewXi+yJifzD4SUm4P\nOAz2HISSj4NmTLWjepRptd7LH7qMtccZQyfqbHu9WjZ7ZOOiy7GWNTKxoxvZ\n/J71mgdKeaiNPsdcwRX7VSy1N0Q0jE0RI9v9ufOGo+GtTXs/lbWxqba2oQYT\n86X2QU3X9YLLIagsWBjlKnAQbB3UfyabVPQlDxyO6PjoJ1NOPmFGfcDKhNW4\nXW7z5sgzIP1dNpqi1Ez8V683eUN9m2WVzhbzwUZ5eHe116yREGZ9uaL8C0jI\nq7oo\r\n=Y7y3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.8639c2690.0","@material/base":"6.0.0-canary.8639c2690.0","@material/shape":"6.0.0-canary.8639c2690.0","@material/theme":"6.0.0-canary.8639c2690.0","@material/animation":"6.0.0-canary.8639c2690.0","@material/elevation":"6.0.0-canary.8639c2690.0","@material/feature-targeting":"6.0.0-canary.8639c2690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.8639c2690.0_1583908390152_0.4800518574000676","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/menu-surface","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4210e5fe18f945c8d90ca89add36050636e78323","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.d5808057f.0.tgz","fileCount":40,"integrity":"sha512-EcCUDeN7WokfiwWACen515L42ASqAosJxh8oxWYaxmjhXro7wYh1YKusdR+0Lnmx61BT1RxpEezU/X6gSGZ/Zg==","signatures":[{"sig":"MEQCIFeIIb9xwdoqBwRVzjFPcHr2JfWxi4OhHBVy8peydILGAiAsbhXorqKy70dnDCZBXMWju+HLloPzDo+YJ7g8gxCQ1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaRD0CRA9TVsSAnZWagAAAD8P/j2rPG8mg73tTzbQC9dt\nbXi/9bhqE4r3huEFoxc5tjBqbtMS0shv+BXM1KiRBHOG3QoqLTma2x4zlDKU\nwWKd2s1RBeVg02reCH8LmH5UOAyIE4fSCcbA3uQ+6Op8WeuxlceOSknlUlDU\ndkFPZRNBFgH6slzoAGFBZWsoTNJd4OqxJGWAuiRr/5/fNb2YTjf0DJMgRHDp\niK4Ey3bHz+b1/7i1eKVa9oUUpKWeYe2sTcalEYsZ+Z2KxN+25yGfHW5qvQEc\nnMtGXl4Mr2wLjJb6s6v7br/agu67rUJ9LkJ8fg1ZH+ouy9GI3LxPC7gR3Kyj\nn+WOS9do9Qf1FeT2m46rCK9V4BY2fHImHLBKGiENss0Iu9By+FnoOiFWxo1x\nTsZlmNEkYACVmTuu5zAIfbMhFEo/Bxgt+kdVOmk1dD/iYgoXlnVBH9g3yRza\nDvoUWxbcaawcfEiIb8FdUzf0GjmbLg3zUS5SFFTdCch+qKcga3k54/UO3jrk\nVQP4egnLN0hEq6bygugx+xOXrYcBPqTGNhQKPpRlZg7hNE9nKCEYJY9jHn2q\ndcmmVl5c7yhrGiz+Kg4wKVj+SEdp2g8AZKwKu1gnl3Wzba8Qtvubt/bgYjBy\nWj0fKV8uSN03CLmQEi++2Fq7xCt53lUkKFpcHy7par9Sm68O7mQ5+90ZaIst\nvwr8\r\n=0R/P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.d5808057f.0","@material/base":"6.0.0-canary.d5808057f.0","@material/shape":"6.0.0-canary.d5808057f.0","@material/theme":"6.0.0-canary.d5808057f.0","@material/animation":"6.0.0-canary.d5808057f.0","@material/elevation":"6.0.0-canary.d5808057f.0","@material/feature-targeting":"6.0.0-canary.d5808057f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.d5808057f.0_1583943924070_0.306997305195033","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/menu-surface","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"fd0a9f849a2bca701c6e45a0d84d2a8b850b0fd7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.b3f58203d.0.tgz","fileCount":40,"integrity":"sha512-ufVoLoKGHB9d67MA08pB7waHeMiq6SeG8EYUqGvJi4/gqHu+GdVjLzwbde2WC2FRbVSreiB0AygxtSLzobJaOg==","signatures":[{"sig":"MEQCIBGYD/lKKRv+R4wXqtHwQf8J9QNj211Edf6OIw8K6JL9AiBgJERiExVD+BxgstGMAUTCENLJ4ZCDUcHZL1XGy2+eMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT4VCRA9TVsSAnZWagAAjGIP/R3IUWcuq4gHw3C7F+Uy\nSDcwpXlw1IyxitVr6XrJt/0HhHUqBD39XfYyxAEd9UrVx9kns6/UrwwUUjHB\nETCK6TNIYrI0uqaI+Ibt1w6nAqkGYapM6duaya+EiHc2p8OH+6ZfdG8Tg9px\nJZQiHIlSh2j3cjQKL96YDgVsN3q/rqU+ikGLyFMqMsEYIe6AyfeAijaiVMqP\nsjm32+gMq+n1e+K+J64H0nH0gw36T4IIRFcb0gvGkVYZM1XavURbB2ueoOP4\nGu1E6sRq37DjUeBjs3PBVOUHutgjUWxlbdNR3QM+EkLrZbr0sUKwCfmOemlh\nGOm2g3f/zXiPkdm07ODQ6lTOrrqi5ZrlP5Q+Hr5XKh+2ifT7FYQoGyQvGRM2\nEgJogKhW8s0QZNz30wdyrpWi+UWUhDYPk4mpN3OEkmh/Yv/KPSR6PLQCSf1b\nyDckJgDovDMFTUbqoU3V8iTcjnUbiS7BTCN9C9kUnb/yLClD6yMiA/dWvPf1\nPLh6CLNUjGG9WTOauXzIj72lm6diNhPS/tZTtWyOkGmZYvLIGGk3nHKtmzMH\nDRfdhbDNFuTtEMufNqX4ItkglulXfOYXYvBUEVuAaE5moA8rcX3G5rgUL8OH\ny/7b0rG1/yCmlXFkf0o9rFDPtLm7A4p9zFqFSiZ+AeHg5aMhksdOghmxbDfA\ng2ky\r\n=+fcG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.b3f58203d.0","@material/base":"6.0.0-canary.b3f58203d.0","@material/shape":"6.0.0-canary.b3f58203d.0","@material/theme":"6.0.0-canary.b3f58203d.0","@material/animation":"6.0.0-canary.b3f58203d.0","@material/elevation":"6.0.0-canary.b3f58203d.0","@material/feature-targeting":"6.0.0-canary.b3f58203d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.b3f58203d.0_1583955476695_0.7300413566944746","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/menu-surface","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"0abf52ebe4c656a66a111e878a2bdfa44609d260","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.bec065920.0.tgz","fileCount":40,"integrity":"sha512-uIy6TvMqDI7FGkcsmGF5aglcazaUorknXTuwYYx4ncX2gJaHHf9AzcgEH6daSZXtqlOmCeNdjZG+VtiPJCLh4w==","signatures":[{"sig":"MEYCIQCWpEu43lyxIrdR9ErDpmo3YWdkE+++bZyhq39brKfxxwIhAITVp5jF6J9abGuWjp3JsqhO0sen9rD87+TM5+/FgrZ/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeapmxCRA9TVsSAnZWagAATXMP/3ULy4e6uU9wp+bwQKKy\nerhfQoNroPobCWaB2oSqLmWMXnF+JstugTwJCaF3Xj9c6SLFDu3soK4ashP+\nD9aTy782DCMIiMuthnNoi2luLlUlxBl+eudLGV1qGEMlm2mPwiFAja3hFMvg\nsFxRalAHFR1nn5yduYt7/ZOqmT2hwD2bYCcsCX1V1T8VGevqqGXVoARjgpm9\n/xpys6YqsvoFcUpugtsI7nBp/8uWxpEm9056v9dAG4BqqHAcsBDp0Lr0ccKg\nZnzQzo7YXcSkCvOeqa60vOIuvjuD3MHAC/wH7gAPCfh9BgldHhSYVH7v8Lb9\nAQJNIaFLTBr/pGT/IhHr1JoqtuRmF3KbM/2g9aB7jjwFYJE2zN7kXfAujgEt\nMDNjrnC3PKCDyGpXsq8NQQy1sJy8ZI9Z1HFlAZ6/TsZ32bfmoMBGTEnydSg1\nKjQICbkbUBLOdpN+bx6KU/ueQrT5ULPMhcNV1V3BtYYQGNARsW1UvuCeZqiJ\nnhZGIkqXEKXGgNJHrbnU0AsU7Kog6pby6sHlTH10qIkxUisQYRYB/gJ/6fsD\nbginqRD0SQ06IBmc4G+2FnDmDvIfaGC2rE+7fWBBXEvEFL3LJ04RbEjcEKxR\nuA1Gzhn0dBgA66hQ0nm4ysAiFt/tbUcV7BqglWNodEw/lb0upvr3N72Bwat5\nYJnU\r\n=DkXQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.bec065920.0","@material/base":"6.0.0-canary.bec065920.0","@material/shape":"6.0.0-canary.bec065920.0","@material/theme":"6.0.0-canary.bec065920.0","@material/animation":"6.0.0-canary.bec065920.0","@material/elevation":"6.0.0-canary.bec065920.0","@material/feature-targeting":"6.0.0-canary.bec065920.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.bec065920.0_1584044464976_0.02186632146099643","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/menu-surface","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"7b4483a812ab4f06d9df996eed70d117cdd6a02b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.776291ef0.0.tgz","fileCount":40,"integrity":"sha512-ek6zu1w3KMpeF+04EZSreWZlsvykdlCj2U62HC6O4npfDt/LRd4xGulfZibA3Tr/ffqPH9cBoU68QiOeedIe9g==","signatures":[{"sig":"MEQCIBPl5a619R3Obb47B9DU7k35eeskfoo8C2mu8k65c+W4AiBVO1K3JPrZSn3gZ39nR6tU/OkysOgZoBqAIkCH2H9MvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSMVCRA9TVsSAnZWagAAqjYP/RvykW+oMpCQrlvGkX4I\nhYEEPa98Vl+AiREs0a1bEHK7yObOD8+5hpKy38pGaVJoXF5YFfZuHUqFo1f6\nsEVswC4CkKLLGQIBk/nJAM+GzLBLoxypcNxVjsEysgwvekTEmeqCUvdA10Eo\n3PWi244U4wQCuFMP89gCq8Hgsz5lrK8GIzf02enZGmCWIUgQKyVTWbe1W3jU\nN+v1LyUxoBRNZscQg77GZtKR3HXtpKPAt0Jlu+LR6PxnRBikjIMrmkNvgfkz\n0IASZ3B7zQs6q//9praSJAWVoNPKopV3479IErwd/7hNw/Gtb8GQ7camiFRQ\nX1uME0eKn7w+Js77ouwh2CSGVBI3ks+wphc/SFpDOKOBroKB6AUpFeSgN1rl\ni5v82BDhbDN3DXnCXZg6r1wS++bAjyj9Xq74W4R+rSvlIMlfM5zRwQ5phSIc\nKxSEFdapOB5gsZPbgufy7qf/FMTXCDNO6N3GuHLp7PwDDLnOOcykYRmZBXNg\nQkQH8TVS/tOmw6CiJREzlkZK+xAYV786KiBW+QPeyyS31J/i7ayajFJOmgxZ\ngzcQjr0K65cZQRKCZqh7aROXv7grMhL9B7nLYgzO6YqVcA0EfhfVDOLzw51E\nc9a8qd9pV0n6uVn2XjLfoMXDtB+p9uDRLbvK57xzA1k18kHYWLX75HHQHzNa\nIF3b\r\n=r0hl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.776291ef0.0","@material/base":"6.0.0-canary.776291ef0.0","@material/shape":"6.0.0-canary.776291ef0.0","@material/theme":"6.0.0-canary.776291ef0.0","@material/animation":"6.0.0-canary.776291ef0.0","@material/elevation":"6.0.0-canary.776291ef0.0","@material/feature-targeting":"6.0.0-canary.776291ef0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.776291ef0.0_1584472853348_0.2542418995449387","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/menu-surface","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"325670e7bbfc0acf9c3fa65a86475cfbd9412979","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.ece19f3dd.0.tgz","fileCount":40,"integrity":"sha512-RR80IoulbIXCNYmRhuPlWQdB1Ebw8qaoUghDxPZGmPdcT7CIFtkqR1l2zSJRr6HMYh8W1xqsknB8g5S1X8SDYw==","signatures":[{"sig":"MEYCIQC4rIF6soHSi3ipzDViFS5E/mOY4ITpFfUh2Q3cmIALQQIhANT6HpzKH6J5TtJfbn4JK+IEE+35CS1bt9mneaFoYZzm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUilCRA9TVsSAnZWagAA2rQP/RwmQ10I0mR5Sos2a6yZ\nryyVC8J47Es7v9gSHoArtIdp1BnZF7LQQbQVJkAEnhl15BoXx6joI8eOb3Hj\nYtCQu+sSl9r6spE9yS3xhiQcEIbpGr1VnrtXt00/Fah/kkxxGX/hBQcrPrh7\nhFSgEHeeA8uFpQFUYY8DnIMEfaXFFI7ltal01RHY/a+L+QBCMoCHhw/VWSh+\n+7VNNn0LUvIIovugJz1fiIfWjEAa4hvgqzWNOAmKixmr/Xh1CBb7K2eJWioD\nDAewbbnEHJCf9RhGIj37u94DCkkMmHxYkU6lArdHhOMfSswcePbXI2EJbPB7\nSHTarGOOj6uieyZO6JhUOBE1INgUuHuEn4HF32Lu+53C3ht2ogIeMMBxTP2P\n88cacUzkdF2oZD5jQu/fIhzYS0U3sNEYnlMN3wIkoMxx/Vu/SJWi22yNGD1p\nohF8JbT6o+E7JRzX4QwtqXzvPtsUslC660Xjod8MODU30MqbcTjEghyjvxNe\no/HMnrqF/Ksvp5wm7UtlU0bxBPKBnLifoK6H83l601cm9QOoURoDQpl9aOft\nqMFOflzGpr1VdcfK27PjyEHRZrg2pvEv0xSQoPJJSUuK55WcMfToLj7uqNky\nr6Q/LtcHFQ7EC+ZIr9vWCiJTUg3GiKMiQVcYdz7DAwhCio0qN/Lp0Co0GgWt\n/r9I\r\n=Oq63\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.ece19f3dd.0","@material/base":"6.0.0-canary.ece19f3dd.0","@material/shape":"6.0.0-canary.ece19f3dd.0","@material/theme":"6.0.0-canary.ece19f3dd.0","@material/animation":"6.0.0-canary.ece19f3dd.0","@material/elevation":"6.0.0-canary.ece19f3dd.0","@material/feature-targeting":"6.0.0-canary.ece19f3dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.ece19f3dd.0_1584482469483_0.9517635884514648","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/menu-surface","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"ef9a37fd5fbabd019f28a164c14aef91283b710f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.4dc45af6c.0.tgz","fileCount":40,"integrity":"sha512-z4K7bn3aN+7sgNVVWs+YNMsqphir7gdgcAacaWhWagurZLFCje+gxrlhUfoMPNRbHkrNm3kA13dZUG8ilIWYbg==","signatures":[{"sig":"MEYCIQDMn9zw/FLG9c3kIgLjS5nGO2vsmEwlZg/Q4DrRFFjtmwIhAIV/zga6BxNhotMA3l8VOmZwVSsUObJp4y9DNQE6Z53L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX3HCRA9TVsSAnZWagAA3mQP/RyXT/xlF9RTVFBz/OnY\nbhoB4XX0cQEak7SwLyFbTHvvm4qxqoWF+iiKjfrbQbUWNN4DXw+O9076KBcE\nLIWq6Hsa0AEHFAp1BuXR/1gLYXXlpzNgNlPPMKu7ImrGAYFZBr7iCceMYX2i\n+4TkU+Kf0n6JFBEJ6YFJXA4gDODo2p57eevWaZgq7yZy9/lZxn9CPzejATY9\nAAou2e8m7QWq+LTaasdxBkZDsi0Iv7YAzDpO+UPZfkWKAqMy2vUeh4Z6mhj4\nKtEc88tvEGv1RiPbfPn6W9AaPjuea9mqki9piJTfyhDp6PaBn/tcMC9UUelm\nY4JLPK9Md4ujl/RJKP3tsBOczm+FDp05YUeXv5ij9jt7W1MH8mSWOOtrYhxN\nku2ggwrzfRWCUFhjZuNJl3hHz28ptT3jb3W7t6YBuZr/mNQp8LMJe1HqANIY\ne8Czvz0Ji6m1XdCCal0SV/QhwOYak2i4Jqt06OfP6UWyBx7ETNAnAAQczUqS\nouBA6aj+3pH/JgKJ/vAVTmuwPvi5M7Uw+atEApQiM5LZRFzG/2ySzp0SOSFw\nYsgevhsYaNUqDB5rxStnbGP9rUGV5U2UneqO7qya/GI7qLL43NhHUCB4mPHz\nCO9xJq/ADwNwCTPYysvDWUmjbr97QZ2c7YX8ZOlGht6NhOKSr9x7jMVn6IdT\nqKRz\r\n=GHKq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.4dc45af6c.0","@material/base":"6.0.0-canary.4dc45af6c.0","@material/shape":"6.0.0-canary.4dc45af6c.0","@material/theme":"6.0.0-canary.4dc45af6c.0","@material/animation":"6.0.0-canary.4dc45af6c.0","@material/elevation":"6.0.0-canary.4dc45af6c.0","@material/feature-targeting":"6.0.0-canary.4dc45af6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.4dc45af6c.0_1584496070350_0.9903154689789395","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/menu-surface","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2aa762b8bf336dd7a99e0ef14d6546fbe705844c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.6b48781bf.0.tgz","fileCount":40,"integrity":"sha512-XMEMaKkJShAbmdhZZq2daXdyyEos+s+BR72EvjhaHnUJuatzwK9N46qyhhkQsGOsCyaCcHAhSveGVOV6boPxjw==","signatures":[{"sig":"MEYCIQDQaynTOyYbun8rNczbtiBv8XIANDLiD2W4k/s7SjAHCwIhAJiXjnzdT3wB82Fzm7EqrxLbjc7Vx0afTbhL0Gbdl5O0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj+OCRA9TVsSAnZWagAAaiAP/0jYxAZtbq5mmJNWOZM2\nmLDTkyYBCAbKsioPWMX8HIklWiSr0ShlzVW7lDM4eF06dKTkuLERAvDvl6WZ\ne3KFwa8ke8dt0+PBF9mWMqSL6vLfx6JK0Zdz9m9JlJ4Puehis2Lu+2wfacSP\nmfNSzvJ3iup/ARPTQOAyJml4/S0DTj05qnMyqY1/M/YcXUMcCLQf/e8btby1\nvEdTngb0H15SzwRi54ybCT5ntBlTYTvoo2HbvdF7gdV0QY6KFyEJMkfb+fBR\n6740UOFmOKeJWHCd4z78423/Mvx/fSNaexkltXkZaHSYEzvjPV3zaDMD4S5Y\nvfqVNucIHP+8OZfVnnmDKwhqITceg6prHS5s2oDr1mURTJNGnmmPRfstx7Qf\nBGWpfXGv5pke6PDg8pez8kxMkkJ0LaowvVdkYwOKFRqU6fT/1it3lJIMt2ZY\nXcQv/oerQI0PA/2g+uYXd32q1rWOUT0WOqUCJEbwL78nBly218bS1rccoWbZ\nD/64nMOBNeEPbwFWz9FqYBJN463HWnoi0omm1a6lAfVFnjWzb7tFVcCQZwWf\nKT4mNLzAfOySWgLtYshQ055rFwgtrBpbpAReREzQXO0I7XGJ6IIWRNWCdIUx\nxRA0rKpMoEin25orDt9uDBOJeTuz9xim7oDmiUnVARoObZYiVV3sNdvz36Ei\nQDfz\r\n=pZBf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.6b48781bf.0","@material/base":"6.0.0-canary.6b48781bf.0","@material/shape":"6.0.0-canary.6b48781bf.0","@material/theme":"6.0.0-canary.6b48781bf.0","@material/animation":"6.0.0-canary.6b48781bf.0","@material/elevation":"6.0.0-canary.6b48781bf.0","@material/feature-targeting":"6.0.0-canary.6b48781bf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.6b48781bf.0_1584545677781_0.21390678533663166","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/menu-surface","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"730aff29f4ad82bffe73255a083cd1632f700e7a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":40,"integrity":"sha512-xfh1x3SezcwFdwwkarTPO2JWfZ8livS6/1LjSDIr+FJBcg9AP9rSF6Ku/Rt2KZLOJFyB+m9/hp8VZGfd+InMLQ==","signatures":[{"sig":"MEYCIQD05a5AtPYO+435ZfB/rgu14hlFW21vbk/DrLC7DmH7SQIhAOaSxleMHCcbWdmMaVAhJON+1WyvkyBtXVa0MBWOVSCU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec610CRA9TVsSAnZWagAAZckP/1iomPaM64P/WxFyQFgS\nj7b48BLvvE2cT5fFAffa1MMs8UA51UJI/nVtyuykJavvdZYBb2L11/EK3/ms\n+PiiaJ/bvWGkGNiLqXEfCbGFhpq9ayfK7ZJgOx60D8SA86wHYGlphPTmIq5q\n96wtuNL1AwUin1AN4PhsnZfAzA/za19m0Wv7N7k35Qxp4y+WBpGOzWjHCsuO\n7zvGn7MNkNx/GcnbQGdxCch8wZndDr4etVPryXyksJKEQynm1PPttFYX+2xi\nebM4ICqXb73oIhi+ihPuTfu6SxdHZ+9CowbIty80RNY7nZLxjQNd7r45bsAt\nZlxgYaGcYwqQuJiPtQHiKZ3qcNw9ybL9MN+kMxP/pt78IEIrvsQ//EP5Plus\naC9xZ+S4mhZqcKxQZ15JhQhSY2DqeOHvahbCrPE0tMbSNzrIk5sMWw8WRjE5\nvxrQOtY3d6f2QiZgd6f97TTEGQ7SGyC0vcWu+GreudoRSyjNPrX/TD8qBxzA\nyMPe5sm4QtGtAbE1dpygYeaxEtTTOapOVh+0xNXBOusLjmdO0Gjs81s0UheV\niWiPUUXWGG9lyeCEdd3OcByYLmYSkVJnVFXLCgFYDf8DVxswXVxjiWeubXNw\nKXzwm8P6JWAevvXjP+0srJ5LQlh7Dwa4Oh8j4y7/miX/UvSHZdXqrGWcyf4G\n4VF9\r\n=gOTI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.a88c8e4dc.0","@material/base":"6.0.0-canary.a88c8e4dc.0","@material/shape":"6.0.0-canary.a88c8e4dc.0","@material/theme":"6.0.0-canary.a88c8e4dc.0","@material/animation":"6.0.0-canary.a88c8e4dc.0","@material/elevation":"6.0.0-canary.a88c8e4dc.0","@material/feature-targeting":"6.0.0-canary.a88c8e4dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.a88c8e4dc.0_1584639347679_0.9748062206195329","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/menu-surface","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d01f324a5a13f39b5b7257c251d551fd21534f0b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.cafe18860.0.tgz","fileCount":40,"integrity":"sha512-/OBRYGTix4ppQJ08OB4kENt/aGZytkS7W7wx25oRSVLwi7NI6GSUMtkv+tpFN7xhWDMSUuKqpmJ7xXXFhv6QKA==","signatures":[{"sig":"MEMCIGJh2Ubcx7PqVU31wxw3KYC/3oWXdc3+YmIwDevMHEWmAh82P/cUfpqrD50r9Z2KF/YAlQTWV0H3ferM/4RL6a7w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNjkCRA9TVsSAnZWagAAm30P/105UAzv/ovt+qzFIaDG\nw55Zp/2Y4giB4Q/8uRpCyG6rtnXE+oksGBqwqdobSRv9UUAe9J95oN8LTEjO\nK0H43sfepBupJBa9tb1SMf7RS1Ur4coUeBgk6Sz1RENxNAOK0bO4cozO00bA\ng3fsquR/8Fk2oUevC4RUrdvD/EXvqDrwOGDEMvDO2cF02NtWkceoSAfXBVq9\ncb8bWDNAmfM9hZ0voBS7pxf/TgTr0oG6BCwoCd2VVw0h1l5EiN2qAsCZ0QpC\nyT5KD16E8DYF4fmFFF5+LusbI3uVqc7Twki779BOK0Q+JwW8bNzvcj8DMyFN\njcbo4MJg24DkjJggwYCtK2N5D6VDJTxrW02lTKV2zt1PSl36UutTAG/6up8J\n+KxPQP3wdvuvXNcuCGyZcFiMlReO/Sr0aPRNTRt+5LTQkpvZp6rlrdH00htb\nCAMuwif4O698xZ24cbeDuhQNkqpMeQrfFxUZLly2L8d0RF9aBXSLR2a7/Do4\n5fW5ypsr4G2b9Mc+tDs3rZVKay6BjA9N4uMdJyhQtBUvpzVUdOgEEcrbkhVr\narQWgWU1Hb7u2ATqO09GjQmaye57MuwSgpGAD/ljBGS/KR34UpQMmd58hYPX\nNaInik4y3XnLEXmuweb8pVqesAIcw19qtPk+0dtL55OhU36BY0r7hiVAcsH5\nZC5/\r\n=Ahdb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.cafe18860.0","@material/base":"6.0.0-canary.cafe18860.0","@material/shape":"6.0.0-canary.cafe18860.0","@material/theme":"6.0.0-canary.cafe18860.0","@material/animation":"6.0.0-canary.cafe18860.0","@material/elevation":"6.0.0-canary.cafe18860.0","@material/feature-targeting":"6.0.0-canary.cafe18860.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.cafe18860.0_1584716004139_0.8317464044194482","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/menu-surface","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c63a7400661ed432454d7204b41d26e46c351e43","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.35a32aaea.0.tgz","fileCount":40,"integrity":"sha512-gazY2fi++swR3oG/IjBT1DHb1gru3P+qYxaGNw4N6h7zXCqECo1mv4FMeccgfSveLhLUI6djbg0HB0qTyPo0OA==","signatures":[{"sig":"MEQCIFq5eDpGMh30C32XzYKkWTPkW61PV+5Put6u9zJRPL+tAiAU6rcrAgDFs3jvGd46b4/ergHxX0xd8CIl5wBAtxVzIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSCGCRA9TVsSAnZWagAAAE0P/i7WQcfDcEf7E1HGvRyv\nhSDQz8Wk6Asz137eA3GYf+Kkfv1d2TV7xZeWtEMHHWOv+3C0H9wXcGSoQjyr\n7oBt4kCWYPU9jfKUy5UWSoLstKi/4vuD61HLINRkSI5sz0bCXJe2Tr9S774g\nNPcO9D3kcShUTmNbHHg2Xvv7U3AkIJVZYEtM8iRzJxBza1HwH2m+U6bfvWOF\nGdHP0WEXE1RFGcKLZkwrvTRj5XM6nuq844xwV89x8shfbS5QsCD0laGUlm+G\nyawxghaov4njKbmmLr1HwCP7C97u0ha6TNCpXN9sXJQ+OekR3OvGXh4A0OHH\ni4oPNseVTwJ9tYlCgCALPHEAvI3LGRRXZoJs4U+5TMXItX3LV366dMjpvkha\nnQWrKP6w4hX8r6sTWfVShBpJ/l+A4FYXT9WdUVQxLxkc6eG7zwHl9cWqhom+\nK1xqJGW2lDCOWiqTon8AVfgFATIYSXarsTza7Mcw+Qb77ExuTlh3dkgQiqd/\n/HBSY8ImEnRh1san6fS9lnEs0meqsEIrSmKYPwn0txjAwztle1x/CuhkdrFl\n5Iz1y5jdtREPTfWnkcEKlctARmfY3/H7YSqjF/sbk+wLP+2j4VHejJ6JTYc0\nP14P534pHJkcvTtSoZq1pfTrWt/I7q5cqHqcDNziKZcioFxsuTdoyM9yC7m4\nJvf7\r\n=Oc6A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.35a32aaea.0","@material/base":"6.0.0-canary.35a32aaea.0","@material/shape":"6.0.0-canary.35a32aaea.0","@material/theme":"6.0.0-canary.35a32aaea.0","@material/animation":"6.0.0-canary.35a32aaea.0","@material/elevation":"6.0.0-canary.35a32aaea.0","@material/feature-targeting":"6.0.0-canary.35a32aaea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.35a32aaea.0_1584734341770_0.6831328431212322","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/menu-surface","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d55f2cde5f0e7740aa440cab7c94300b5819949a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.e75deb854.0.tgz","fileCount":40,"integrity":"sha512-BiZi8wRTz4X1FAT60jujTxnSWBc58N2cHEYp9A6uEj7CiacaqH6dN2tumwIbFz5INnIwYneDD/Mz9RkOHp5sWw==","signatures":[{"sig":"MEYCIQC2Xaq1uL+AsJLnQCjkHRNOpsV2pwfL0LY8b3i9t5XDqAIhAM9XZUqcTK8rqC73SDk5oxRNSEynIee0duekxzsoZZF1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUBuCRA9TVsSAnZWagAAEGYP/0nnJRjXt5n/HPedLYjv\nMKs6p3RqfMtfScV6zNSdX3Mo7SHRX0xWZhlRsdT1e72cxDwMV7Yj+WYNBTgb\nIsPkQy72IgOvhJiM/HdBRV7S3JuXQyAmkpMuu1FcyS58wd8nVth4ATvT0M4y\n/NODF8RRDkECSeFdl6d/LKuA+lyHfuq2CGDGxuJk5HMTCGI2v6my4kDiLKQg\notY0eh8VwFXIe7kqmrie/diC1jx72/WMl3qiwm5q8WwKD8oD66aabuayUbB8\nHSMGUoo5b3MpEvbOswWtE8Gr0ja5Licb8+Qgy59sOfGUZV5LFJDOTq79acPL\nFNIODK3xSf1XODzk8e2KFBMMtFwWltEgdPZD+QDO/FK/QONaJFgGxMGZGJ29\nArlPvHEeN0Ajn3qk5Q6ElnU75FuvZsZmvpiDLW6bax8YisgeqSOAut0KT8/7\nNr/qsfZqAPE/9wZlGgIaVETZWpoFaNpXa+BuCl398mYHtGngU9NYooozBrdM\nYpZSYH/s5XV5vsg2GTmmjeHpaFXAs5EqvGXP31O2AS3AXslaztXFSrhL+Ree\nwsBYb9IrfdPNUdQeLuvJRuzLQcGRZBmAFCZCdhFQMIFEwq7GEMTaHJINfw8V\ng96BazMffG5VECQuWsJ/2MD+h1sVA2t4Oj9h/1lcvSN+tIg9162YUH3vGaMQ\nW2Re\r\n=nX1G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.e75deb854.0","@material/base":"6.0.0-canary.e75deb854.0","@material/shape":"6.0.0-canary.e75deb854.0","@material/theme":"6.0.0-canary.e75deb854.0","@material/animation":"6.0.0-canary.e75deb854.0","@material/elevation":"6.0.0-canary.e75deb854.0","@material/feature-targeting":"6.0.0-canary.e75deb854.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.e75deb854.0_1584742510361_0.77158977788083","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/menu-surface","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"114af966ef97601911da9f41ad87efb1d9a1e011","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.2cc6966f6.0.tgz","fileCount":40,"integrity":"sha512-f4ezFI/KtfnCXS10FEg/zrf4UhNvJiu5Gtk7fL0MBKulPCi1w5JVFbErDpmvseSr+/Gw0J8BV63tQFpmFR0GrA==","signatures":[{"sig":"MEUCIQDSGyw/sX/x/v02lz6y/1ZRb8Pot9QGYlALzz61K/ZzpQIgJcB+8ZQM/fndl0fZX3wQgM3Ba8OkUyONcX3tOXxb5aQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelTKCRA9TVsSAnZWagAAbDEP/2NWXetRr94Mf3coSWZI\nH2woIl5SvqDqYa7iPwxQdhB3b6kb+Nl7uOl+667u3/+Leo/gDbzX7oRj9PiZ\n1NOAnXh1lOn5Y8AR9TIvhH2HjqhnO0+4/32TqWtTLfeeEfjPFhmyClFcAbgl\nSMfBquu+W84BYfNzaCfBX3BTJacgVv4nNASL8TWsUXZOjN2fbqAxfBuZFOae\nn1CzBJDGg4IceiuFOhycXFIMjeorIFhvbbTwy5R2yIxaB1t2DFnO0/Kdo7UH\nVrvOQOpj9a8/Ake72gyNMPNFYfn6qSTAr7kDnbdcXJI9ZHUbi5KxDcklDCqV\ni1yq5F3GQeA9B0wiADZ1QTCwt3D4D+mYktrReKQdLV1dPg0WYuUaegAQIofV\neQ3D4SP7CvEWOqhFlKK5ynAuMS/xxEuBSVnyvxp5QLQn2eX+emRd8mxH7aeP\n/hknmXfUwPs/C/LY3Wzx77182oo8ULOpgij/2yVBqPiLi5KLHtPMluA3sqv4\nAEwkHeQUPjoEowR9k8ypfYBB6m7nfJMhWKaDBiCTLo0GwBpoNExX5ULPwm2m\npzGgzcojuCcexYd4yeT8ASrWx51MeI+ezxfg81L7FUD3DKpgLLvCC3lhsBT3\nSuBLY0vCWGGswFPWCkrfYaGW5ROMdwHYMsLF43TXEBvR349iLxvRdsnq0B5b\nqUuh\r\n=sQSV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.2cc6966f6.0","@material/base":"6.0.0-canary.2cc6966f6.0","@material/shape":"6.0.0-canary.2cc6966f6.0","@material/theme":"6.0.0-canary.2cc6966f6.0","@material/animation":"6.0.0-canary.2cc6966f6.0","@material/elevation":"6.0.0-canary.2cc6966f6.0","@material/feature-targeting":"6.0.0-canary.2cc6966f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.2cc6966f6.0_1585075401747_0.6552813632832175","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/menu-surface","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c00eb1b3b2f50892e42035c78099692b17971398","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.8707953b6.0.tgz","fileCount":40,"integrity":"sha512-9KeXmLRA+qqdv9rtWobmOq6/qnQhT5WdPrGqynjqwLz96/a2hy28hPke1OXZlxqyED44NOGeeSk0Oct3wma0Ww==","signatures":[{"sig":"MEUCIHhd/nxpiirapFRE0WOUrvmcj9H/dFAV2EurHrfQlscoAiEA7VqAcNE+HYZLgqKIMcHfIwZXtLl3EVuxZ3nP/iDUhbk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelWjCRA9TVsSAnZWagAAgT8P/1wmEb345PnTax2bn3hF\n1DczVg8dhdlvUqueVV4NqJRvM08cRCQBygkQmiWkrKyYJ8XFwRBOCayG9I0a\nUivxSBmr2+HtQ6S0EotiaOkF0GmYLwboYE5LV3rKiE1M6cRGXcoP0TkmT7+E\ngutM2nlyTpH6InkUSRHuDBObQPOE5P19KIq2HsB16uJ8CxUcvebZ/VKyl/k2\nhdssNSnD8zt82c+nh9mhmf0XgP9/hgNPt6sMBBXMXAeU31aOEZKBmxGIr7GN\nA5Cj0Nsek6RWThwasOo4qhBgYMbwMO3aIoTnEd/hmc4BCD7v/JwTzm3N4nSZ\nwVm/+/i9nxUMjILYSNHiySkcblF/5rFpYsYKvfm2mgtYfHnaApTQwShMkuuV\nwlkcI46m757guSRmuxB7/ZoMTRzy5weP227l0PjuA+GjZJnrvecSzj51zlbx\nPIYZsEmpQttDu+fmKKkFMx/h5dqS3Dg1lcdY+ES9UW4AwiRPw1EsDVwdn2+c\nE5KAxWaFRNpBQG9oxgUXfHKjPwbT9mpOywe3DwdraV0RY5p/bNv8zhKDDuOn\nJ2YgvFjwMNXd4dJHOipZByfl22I2zpq5ZZ2r0VJ9Fta8Pmkc8aXnN7HSDzeT\nZTdAnobCmPcOoxfiLF+oOKLG2GmIjB8ZysvLyeu0ZUTode/499WS3k6xf6iO\ntn/V\r\n=EFrI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.8707953b6.0","@material/base":"6.0.0-canary.8707953b6.0","@material/shape":"6.0.0-canary.8707953b6.0","@material/theme":"6.0.0-canary.8707953b6.0","@material/animation":"6.0.0-canary.8707953b6.0","@material/elevation":"6.0.0-canary.8707953b6.0","@material/feature-targeting":"6.0.0-canary.8707953b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.8707953b6.0_1585075619272_0.6962863166204549","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/menu-surface","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"ba7db296577aba2989246bfa13ade15e56c64db1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.10af6cf39.0.tgz","fileCount":40,"integrity":"sha512-q6KNSstZrxUVYzUnVV4mKQg5JaL8m/+fAGtBrMANMAtqd5C4a/nKfR75FhbeHu2B/Gnp6PWTdcw3iXW5Pe0luw==","signatures":[{"sig":"MEUCIQCheaQh5FXAF4xcTJq/BO6OYM3UZmM8JNhSJWkBnJJGlAIgNfkQFk2E2CNes4SWNK1v9TvsoWvfOWKv9w5zLOy+w4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6BrCRA9TVsSAnZWagAAEdkP/3GIEjNMzYTvJ1eHouG8\nCCBPRMH2Kwmc5WaiJJ4GhdLe3u0BYy7VaSf9Hzb0DsYMIgrGm4gLpn7n2W8d\nzvxQ3krjIikGDrSyhOB0fHKSpcpc//MuzG/eQXuSRYcO97BZ7a9b6etRam9l\nOW9TI0yXuYsIZFSn7YJIuqaXky56QvsuUOphGR6g4cHlFw4WHItV8FX1f++o\nyF4+Xoth5j7NFmaLjlR9ht3DktkAV03jfaSySdZo92M2d0rsXVUtdhkEbfXJ\nsFOTpKQXA9y/J9VBBNxZAL+LgUy6fe/R12Vl+weo0JDyQj5iOL6mtiPAkJ6t\nLJ+8NnGrhY3EGMnUUxZe4LDLpu7AY6CfpImb0QNItPDh9qzxW7+q5voO/Typ\n/v5TxRhJftBIEiRez1Fk1wiH7rWUnnSK0ZFy614PBQarSwBvltSFBTAA7DCh\ns/X2o+Q3GagQ3k2wm/044gpnEDxRHLKH/+v1CiDeZ1/7+CrHqZB5Eo4Xf2fq\nwRsxXcqDS90aju8PvRxyoZ+VXkVdyZPx8E/JiGjH74wKq/h4b5VUoPRgB2Bt\nZL8LalHT3XgkC/QmHhgzbvKRYsTQcJJOiIV/skA90vVoBhXsG+F2TrWZP2oa\nj+tQqws+kgY7wQGTw6bVdpOKL8Oebyy/WDZn5xdUsivVu8OASMFDfJ2TP0K+\nb12j\r\n=R1pJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.10af6cf39.0","@material/base":"6.0.0-canary.10af6cf39.0","@material/shape":"6.0.0-canary.10af6cf39.0","@material/theme":"6.0.0-canary.10af6cf39.0","@material/animation":"6.0.0-canary.10af6cf39.0","@material/elevation":"6.0.0-canary.10af6cf39.0","@material/feature-targeting":"6.0.0-canary.10af6cf39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.10af6cf39.0_1585160299087_0.3666571603303257","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/menu-surface","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"03d1bd4a74c21ef417d96ecb9104bd7b32ae365d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":40,"integrity":"sha512-B6omGBy+vk3uepqlCSop61IrJwWaZBjGEZraNJelBfkEIfzwhoOf58r+IGcZJGuOFhWG3AaU0WtTpG9A6IFQrg==","signatures":[{"sig":"MEQCIC56ZW64Nt8il10SssR8GYhrK07OjjzQW2FL78cjYQzCAiAUQKo0nrEoQ82Nx/4BKDan6aJWmiNqnUNZjUbHqHB2pw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkBFCRA9TVsSAnZWagAAYtkP/16uN2e+MNFWwSkWCZy5\napUehV/4aefV8truKVKxvbyyOWXgT3PgUusHJSUoJ2wuycsLHDM1nl8pIEYr\nKelgEcqafIs4k9hHvsIJ/rIzGrKOtpsQGNuM2dESL8ojrnuXCxDqCgcTQld5\nALqRUMpdbuTy5c2d5kWk52Jptg6JgH4blelOdZrptYTa1ldaE+/CB9P4OlJR\n5vjt4RkJ2K4UflUHFW8GpFJMxaKfjYwp4GL9wKt2UpYAIHIh2ZypqsfaSySu\nFjZmpGZ6dqWxl1K3fNA085Gqn6gFghv4lbs5Up/OXau1xbqFZlkJ24HGqm8J\n52PlFBgSH6RAZtYkVg+mtiXgZ8vf0qUfENDnXj9oyGWGto1fp0VQMV+jPU3s\nTpSOGxWoZYsdLwalfE67ovMlNdBiCnaVuYbYv8rKiSS5xRy2crEDC1245d7X\nG4zGU+buUWGuZhAXsvuqKJw4lR3icbEnEiFgpDc3Uy0h9K3yRlT0dEfc+YsB\nS/dtvGsJ5DHxhgwKnvXZIBgP+DUzW07bLUqF0mCdFo9hTYuozupFCiplkGq+\nnu1ij4r8c+xXqq3RS7pzTyW8dRY7o5g8H/F1TOWDcAFvfE4eqj2pZii1HvIq\nVQTyDvZFb5bjhpQWAocQiDfBrlo2oB/LcFdHzD2C5wa8joAEAS4jiHS1uNTW\niLVv\r\n=DnFH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.7d8f9c8d7.0","@material/base":"6.0.0-canary.7d8f9c8d7.0","@material/shape":"6.0.0-canary.7d8f9c8d7.0","@material/theme":"6.0.0-canary.7d8f9c8d7.0","@material/animation":"6.0.0-canary.7d8f9c8d7.0","@material/elevation":"6.0.0-canary.7d8f9c8d7.0","@material/feature-targeting":"6.0.0-canary.7d8f9c8d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.7d8f9c8d7.0_1585332292940_0.7609819109053821","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/menu-surface","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b0354d764b5b46aafb3b54ad46b949c8571a5017","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.d6315efe2.0.tgz","fileCount":40,"integrity":"sha512-D5dOEw1hXb5cSE82+6LB2+nl5MCQzwXLnIFFhF4lbatSweRq3q/jblj1n5oWfXsCNnKFo8Y23j3PZB7aAhsohQ==","signatures":[{"sig":"MEQCIBOL3PiaryOv5b21O0DBz1SrdATb+ycr8FG/XPa3ySsBAiAjVkkznCqsJhR9EIVu5O+6U56CJtmlWKxcqEAMqWw1Kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflpnCRA9TVsSAnZWagAAoAwP/11ed7IqrXflzdNgVOg4\nilcQo4UW1TmUxzksDZPT0Eg20tpOxg8e1b1wk7plO/pJRNrId0cOcoUMPUAv\nHMpmgPR9B3FgBz5LwjntlpQEoq4vZ6YnT5RsS3kP0YoxfvV05/tl+aFk4yMV\n99rEccj0I+E5QPnWj75IYZAJOJPOXC2TvJYIrWJUTfo+4VqRSdLfRpeCtan2\nZz2E5vQynKTWV/MOKeIf2XgEYNJLCH4PUdjFySqE9nNI9DQr0gTH/zVoASPM\ny5dwKXMKQKCd1picvCc4GpRlWjNst0k8gvi2XwuZrqOCLlVdpdSusB0zWOaa\nbJ+B8kU+jE1nmDx4xKKDia1j5KItF0HfWrV0cNe37M9Euq2ic8NRLwiciX3o\nqY6VsSNby0VpBYTkHFfsB/ExABlveUuRuWmk16FRuC4rfIxUMZcjNwAsrfGR\nT+q+nI0LbvjuUx4cfwDTDnwlNt1wPMfMb4EYhFT3nLEM/3BxnpjoiIIqOyjJ\nfix0wCLfF1Qk6V6X0XI6aaDSRflKsn1VCsgNzhZznkD9AztznTPbb4iR69pL\n0NvaijqQQRtYlsSOhQF9QfuoHa4yTQNt9qVsNmnOduBTgfg50Z0S3F1BLmQ8\nYCJuAZhU1X/C3mNrZvuLUBnkldESzFh2MqDT82JsGbfVwPT8kMk+WMoQaqi8\nEfdr\r\n=agzM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.d6315efe2.0","@material/base":"6.0.0-canary.d6315efe2.0","@material/shape":"6.0.0-canary.d6315efe2.0","@material/theme":"6.0.0-canary.d6315efe2.0","@material/animation":"6.0.0-canary.d6315efe2.0","@material/elevation":"6.0.0-canary.d6315efe2.0","@material/feature-targeting":"6.0.0-canary.d6315efe2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.d6315efe2.0_1585338983343_0.5608942336768392","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/menu-surface","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"46eae997eacbcb751aab512c8d0a079c67fc2b0e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.a3016368d.0.tgz","fileCount":40,"integrity":"sha512-09X8i7f8DYcOPa4X36x1M7EXcTPTYLxvN86Db+P9RKiShkKLUCzDus+DRqTAaw8Rzl2sVMzCn6L+x6qXBgaIJQ==","signatures":[{"sig":"MEUCIBkIZk85kfX9fcZ7BESudSa4H3RHnKPVtoEZ9SVkvjQMAiEAsOm9tewy0nEFJhprMwdx1wBNm6hmzuCrdh+z1kYne9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm3iCRA9TVsSAnZWagAAvWsP/275w08ST9qIpFMLpciZ\nHlQXaLO1u+VMGzN9lYZ08tlcYsC9EpH2bo6+FyU04j74jy5qU/QxvbY4tdQN\nJrS9m8/rcXhxMsQXTHo73gBxsWre2HqmhOD1JlprUXtGYKQbK3crs9gPdiWj\nDbNdEmv1J2/wBBUgwJYNx/s3Oyb//Hb7Cc4guWVCfI/3mRTNdYI5zjLwopC4\nFX716nC+JExDA79XF/lBscFJDzjtVuy212kwJkgPaGLYTjnna2CZcbq3H6tc\n2NSdotBpfPBpnlA1U6Qat6W0NmcVqtHylSWr1kvDYUyMOvjXA24GJMQ73POS\nVEmrBdlTNqzsxqVYgx2ei9N3HbfuTjVP89NZyf238DG287tGXZpQRs0WjzvC\nJ05oq8J7uEmktbrU05s/HgMGoKHXKUK1hQZxQAUZLnLxK6zz/2e/3I3hZewT\n7RDW4f5g3SkIxYa3/M5a/0Gz3PQsSa05LLhyciVKak3WGVMEnNc3Fk9D8oqJ\nRGTlBm6ZsR+G0qWlLOUp0RGm4VYa1bLkwvXhLMXpHwgklQoUHnLD5UN5ZMcS\nACrWbMzVisusAgZuxHael+y+2IIVDuesNbYv4B/IYT7hQMYVvDFlRTeGSqPg\n4H+XS0u1tzaZeV3o/Enx65AfzJWDmYOCNMp3xyrp12R9xTF5GlN6ZjKS7sFo\nXu1i\r\n=xPQf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.a3016368d.0","@material/base":"6.0.0-canary.a3016368d.0","@material/shape":"6.0.0-canary.a3016368d.0","@material/theme":"6.0.0-canary.a3016368d.0","@material/animation":"6.0.0-canary.a3016368d.0","@material/elevation":"6.0.0-canary.a3016368d.0","@material/feature-targeting":"6.0.0-canary.a3016368d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.a3016368d.0_1585343969787_0.5299087043012174","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/menu-surface","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b897afbd859640487b170bd08625822161d3f832","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.4b45b6620.0.tgz","fileCount":40,"integrity":"sha512-9oNCVSmJ2+xmK5E92LDDqDZIm7s7Vso66byOzstOQbu7ALgJHQr0VDVbhPqyBOQRYTLTKNX5vapFamrsNdIraQ==","signatures":[{"sig":"MEUCIBg2cvcZNvYsCne+KbDq0v/IUUWNVFSG4Kst61cRJHNSAiEAjQAmla/c0lE7z6BgPQ7pbIXVOlM7KH+erWHlFtF/G5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2ggCRA9TVsSAnZWagAAI4kQAJdar/l9MRuVD6gfKPSa\nJEC0YQss1/Hge34EBtPdVJ1OG7GIni24FBGe9T3SLFynT7/EdC21uF6H3CbN\nDCEYdClNKF3YpTq5TeTmumnn5JA/CMgVn/bz5iY7EUPtdnai/pMibkcHRTb4\nzAtAduEuZJViKvs6NTin7t/nUzytsZAn57oQm2uw6lmZISTSa7feD5NVqA64\nFVaoi+Zp49wM80cxtEPGfu94QFsGIvcW5du4mVUmUBSiUtzVxWgAf6LSFe/g\n47mOTtX3inPBQm3oG1PmJfXHRK3yI6vdIAOej+oXSy7KVebmWZK+D8ZX+C9K\nRzMqexrE1ECtEC9oUYUgNc/WiCqHoO21s5Avf74vN1n2mMHtxuP95c4qJNEY\nb1dMvt9L7kWL7uXPPurIebqF0J2HTDATH/aJHT9CONdvkSy/yZbmke/sNJyT\n9rO5j8bQnh40n5dTks9PY3NQQni4YGtGxwnJDHzsDdaeaYgi1mJcOgUBtzjB\nsU8Spon1jFpLj9eRnuvmGzhEDEZBbfhAi5CRYLU22dTT9IsUFaDUh4XtpTy+\n6pBZTP+/hRlIW6w7GHi8A8ldcyxSaCpb08AqK9x1itfkRwlBaQKVvnpudxsc\nUxplsGoaAJH7maf2WlLR1UhdjZjoE1tE/blQk3u01aLXCiAH1MhR2Q/kWmOb\nA+JZ\r\n=lOKw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.4b45b6620.0","@material/base":"6.0.0-canary.4b45b6620.0","@material/shape":"6.0.0-canary.4b45b6620.0","@material/theme":"6.0.0-canary.4b45b6620.0","@material/animation":"6.0.0-canary.4b45b6620.0","@material/elevation":"6.0.0-canary.4b45b6620.0","@material/feature-targeting":"6.0.0-canary.4b45b6620.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.4b45b6620.0_1585670176330_0.05588093676679606","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/menu-surface","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b5848d0beec165e6f283e420371e58d385a6d694","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.e84b9c8.0.tgz","fileCount":40,"integrity":"sha512-cnLKIhvnA+ts1Cb/zZ+BZBelLWvLGTfjzsb1Peq0bG2CVo8WcGhJzUhzqmQC5QxjuR2MfNoyZlAU2HLAB5/hoA==","signatures":[{"sig":"MEUCIQDRnfhh8xusYaZU4B6qvI9k1rKDdCRWypSI/MQnxInCwgIgJj8paiVH9ONZIpMqZfMX05z+W27gTXEh1rvXiqNP7nI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMeZCRA9TVsSAnZWagAAsdMQAJo+RPxSiTqUj9Zswjhi\nl9Sy9VPQJCpdr7QCYmiWTJz4eB+nwqnm7kUVJVr5Jx/4xSgRajlKgWynCqzK\nhz+kh2j0ybQjADERMSIIPhbdFPlrnRH8RFpxvcRhIMYoQmJxSE/8t6N09+nU\n5wzPtmkvZaliDxIx0DVE4vOs+jaj5QP32/FZBogSNiAuvj5o7lJOTWC+6SNu\nE+tv1UyFXO9eC7hRe27gFDyXEWBwVZV9Qee9JPpVtnMsz/mGdiiJGd4YCrKt\n6LK/d5Sp3pf8vYdWnWzmNXz1w9K6wVqJwh4nD6X+Zh07YULTpLAy7Vr9En3I\n0gaqkuCzqTsd/yLQ+dmIr7lfPZD9xdLR3tnVMVwbW3UrSKFMUH56/fJmy8O0\nrySiTf4O92OpOMupFJSbx8hCWKAngIBVSTchF51bNWn9jxsASmWiIp5emPo7\nRGpu36TkAMSscVAa9KNHx/rgmhsELFZuKqF1YZEqHUU/aFpZuMT29unfErB8\nnbMJWuOZ0bHCPCkwSSexD7q8SRp7MocHEA0omSzisecXQQ1yR70rc2NsHziz\n8+rDDRUewEeII9hTLA+znR2BleNXUW7RxQI47XVLRC02dOROpbFzDESJGLFn\ntIzCPSufRtQFRJAXqy4nPDwRXFvXZlgoH9YkjGRVS1jvRbwP7i7wg29khdUu\n/a6b\r\n=OFwf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.e84b9c8.0","@material/base":"6.0.0-canary.e84b9c8.0","@material/shape":"6.0.0-canary.e84b9c8.0","@material/theme":"6.0.0-canary.e84b9c8.0","@material/animation":"6.0.0-canary.e84b9c8.0","@material/elevation":"6.0.0-canary.e84b9c8.0","@material/feature-targeting":"6.0.0-canary.e84b9c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.e84b9c8.0_1585760153067_0.21836734884796516","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/menu-surface","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"fa61e05935a7f9fe009d6ad20889434be20444f4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.e33c49e.0.tgz","fileCount":40,"integrity":"sha512-/yLUxzx8l07Tn9Vbn6wAfD3DzhE2fkhaobMoZEEKN2o9/iOjkhy7kmUdcZ3eACLOhDAI4l9mb7icRMn8G1Crtw==","signatures":[{"sig":"MEUCIFx+oPfpb1tVN92oCp9QNDmbY1ygPjns+Z9ml6X8eJaSAiEAoUBA4rnSXUzjF1oVthwE5dOlKHM9aU3twTx/QwNTLlE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS0xCRA9TVsSAnZWagAA4OUP/2k/6FR/M2sYw4hXhsT5\nG8sLm/xJvAqlRAgQ3jf8IQr3/skpzYXhr3Kg+I7l586TFSYWfKPcFEETExs1\n3zI70cqB0irOpmVze3pIelLyxG1sqxnFjxYRJ13vLjqPrh4IOpM71VoKGWE0\nQcfGuSc/sTsIxVViItgRd9iTKWlaU+E+yaJqY3tbsyZKIH98fr9Dn3LBh+Am\nYrSyIGpg3sJkaEAX5wG3h2SLrucMDm+13yzc/vzWuPpaWQDQrgF8Dbr/BT8u\nNHiEqj2LvnB6V54js/hmeYAxJYg1Wr0YMqSCdADHsEh8jYOEBHn80xy2WQOq\nXMJr2aMQ6kb97eL1v4206mW8pR1ImVnoESeI4eAcklcANsqI5ApsO1a0Xs2j\nKzNvZCs5rVuJmzkYkQDhnEeVNw9Llqmd9VHvcYHQ7TsGI94rEqstmM+Rry1E\nkgI2fhmjjoU6fzG0UVhYceNj3JMiFPuljxgyqYE4PxXF1RHVBvBNl3WpzkkL\n70xlBkqSPFhl+l9bvbQemK+svUtpDKP/NSzBVINQqc7BD5+GFNlYyJb6OQw9\nIWwmUZuWwTs1bGDgdT9PGZczoVCTsXAvqO4GF5h+GKy8ojm2wLpaFR1I7GL/\nDw8ufreMMtsshp4iUflJzr8Lj/s4zDL/jesUPISkV9Af1urWhrjpt5zfiM0q\nIosa\r\n=dMYe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.e33c49e.0","@material/base":"6.0.0-canary.e33c49e.0","@material/shape":"6.0.0-canary.e33c49e.0","@material/theme":"6.0.0-canary.e33c49e.0","@material/animation":"6.0.0-canary.e33c49e.0","@material/elevation":"6.0.0-canary.e33c49e.0","@material/feature-targeting":"6.0.0-canary.e33c49e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.e33c49e.0_1585786161027_0.6537516616141317","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/menu-surface","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9386622e6e6f9c2025160d830dff8ee188ab0fe4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.f1f8e60.0.tgz","fileCount":40,"integrity":"sha512-KHEnSbxlO0yGJeCULLGDaBQx7rdUd2uuaA9Fsz4jXPNG46UNfSN9pMaL54G0UEgFmWozkhKh6cZtxYjWAabAVQ==","signatures":[{"sig":"MEUCICMxQA61t7oJNW3qAaSHkS/AtJTo3O+RYO4DBh2oNX9PAiEA+i721XGYFCeAu4O6Mk5AHYHdSrIekHp04E+eyauVTWk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":317099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjlnCRA9TVsSAnZWagAAxNEP/0eMvIMrBmfWuenfmqyz\nU79206Yw3z1UyNb0Nk22n1TjVpbEbi6K2vFlE8lEHxw2OeTz/ynSGPAnKJWL\n+h7rEN7FCYeJD+DpY9HvbZAVn0dtBwc8Cr1NeDx/s+xeXC+53b1tWzoW4hYT\nb6DMkVdr60qvg8SJNdu1u5DM9PoEhOTZbOX4O24/NAQdkjNU3V8ub22ZicXa\nz9kJho8kAZotzCKnSabh4GjKYFgFta4zdZmfNPZ9BFH4YBJzr7NQrkCBkpfl\np+hKpmAvtiuU/7qcaNzFgTMxccusjjchHffJRElQqsOtySAvoNe1ZXXwDnad\n6CO00ht6K6kXMo0P5yH2+iEhKFSO5btyyrKm7gkwPdR/wzzeA+NnRJ0iKDkD\n8lyT0sZnS8B9O+5n3sJONpbPuP6zTsbh2e8Q5WULARl5ijgBvq1Mx6rKFrfU\nm7ANhN/5B3ny4Do629Mv1Izbf3dlsu9ZC7nqNPbsYfhzzwjfHKfXJtvhZpvB\nmLYJnpEQ49TT95vlwx1sg4o6sLfNKePz+BnuX8sfB8u6dN6EMDNal9n8JkNA\nQtdVrGzyjJqjSXz745toq+U7ETm+/C83jdqZ3hC6p9kmFdHz4Ac/cQJCpvPg\nsxX+DjLQnk+2ej6S4OZS7kvuZDIkK9G9nFK/7ia2KfEkTUD6nJ+eOiCNvDJY\navwB\r\n=E5SL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.f1f8e60.0","@material/base":"6.0.0-canary.f1f8e60.0","@material/shape":"6.0.0-canary.f1f8e60.0","@material/theme":"6.0.0-canary.f1f8e60.0","@material/animation":"6.0.0-canary.f1f8e60.0","@material/elevation":"6.0.0-canary.f1f8e60.0","@material/feature-targeting":"6.0.0-canary.f1f8e60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.f1f8e60.0_1585854823403_0.05581354546367323","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/menu-surface","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"237308cada86dc51bf53d27b21b6981d4d0b4f44","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.1e17c49b3.0.tgz","fileCount":40,"integrity":"sha512-FuxUZ/lz5ryCbQKAJNscYxByWnhMTESUU4Wt3zjoOyOMjseTv0rm65xREOVI1E+XzprGMEN8rBh5zD/CYcjigA==","signatures":[{"sig":"MEUCIQDpic6Vplf/EhK7XRwm8iEpnKCH9XY/EEWY0GKyFFFYAwIgEeYqMC/J9HnAZPvsHRdvCUCdA8XHSbHQ41dwfDlswho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3qGCRA9TVsSAnZWagAAN6gP/RzWE93jo3pxtc+NXAa3\nT19CUxfZL4WyrUHGKAGBumadkSVFTgOci1ibDhFB+ajUDWsFfUMq2nj1WFlc\n8sEJxS/u9CFuks03EmVAwu7isLK9dQ2f3SVA3qWmjNYloiZHgt/m9Q5gjpQB\ndM0FzF2lvkieEPXaaddRlxK4SYv5w0s7CQnRWGzhqToEz/nmzWIXZUIFTV4z\nb3BbxvuyO5Tc1fqxylZCJdIvfMFejgIueUmBeju1zJ2DFPX/qOdsR+rLPDmG\nfoG6Bwu+EHbRqUyHPFTi27WwhmIwcaM924+WS3/t09vvwzn8fDYdrwx7QJEZ\nUDfG/1CKQcuqeDgHZQFf0ZapNt1IHaDHGk70CLrHWoSQiZTUL7GAgBW4TJPX\n473x+974wv7GM32cxBPHd1Jxf1OW1GmEvIfZotf0pJaNsPg19XwDAgueWeSX\ne8A+/ZoYXT4Ue/d3OKCrJn7HvDbYv1xkML4juYsqgYMpE1YcYbMrH1R7cfHH\nPiU4kFqHKxY/44utyu7ypBCEPj4UPlpMHjf7cCeefQ6C6baFEFK/KByGFioh\nBCyuSAaBvSNIZj+ydnFd4xJJP4z3+5+4o/zeJW1+xKxlK4NBQyKPBbFpwBX9\ny1DtX1/OJVhr3DR534x9UGzJY2g+zcXKSRdeExkf5uinG1S/lLl8sfLWRIgS\nYY2b\r\n=0OXW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.1e17c49b3.0","@material/base":"6.0.0-canary.1e17c49b3.0","@material/shape":"6.0.0-canary.1e17c49b3.0","@material/theme":"6.0.0-canary.1e17c49b3.0","@material/animation":"6.0.0-canary.1e17c49b3.0","@material/elevation":"6.0.0-canary.1e17c49b3.0","@material/feature-targeting":"6.0.0-canary.1e17c49b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.1e17c49b3.0_1585937029688_0.7755945287903472","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/menu-surface","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"7a256bf57916e8fac34b270d781d6d136f021191","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.6a40ef217.0.tgz","fileCount":40,"integrity":"sha512-c7FoJN1TzH6Cea4mrVATIJLqtsmqSDEfBkkrPtzrI6/Ddwk62vivcb9tz7zlitrbf4G3W15GaiJANWTiKnM4Hg==","signatures":[{"sig":"MEYCIQCP1OXeH21a2sHk/xPPH4kOTyN92BR5VqpvrNVcqnmy3wIhAKAdtmFLllDMEgzSUuF6v/HsMdQGs6IHtamXpZBjHq3n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh411CRA9TVsSAnZWagAA7XcP+wd1NRfW6uiXDRiB/qA/\n753mDlTeNAp5suTQKNNYOm+kSoigZLCyteHTpZ95cwugA4X0RqqtHf1INYxk\nSWa+pxRN1PW3PvsJ+HKtkbujE25J3LfAHLwHmhedN8kgN26NZJocbQZr1SQq\nyhUfzWUlKqGR3eE8nfvSwFAt72cgugJy5T1FizSAmrsB7un5mBpudhxgJzxp\nVre/PuDZ+PtOr72pIAowMIn/p1CmIubv3Tu8wppiuWvJJQHs/iDkzpn+01gE\nAT3GDZ4G0CvqpLa3Ui4o3te83ZOAqwQGFSge8N3FOYa4eXV3kRFCN28aDNi3\nS2NuOvlvbaCJ2nFHGqLm9XTLR0lzq9unKlkO9qUqgRAxmSYJq24DUj8HtTcM\nM5Uuds50SCp7CVrM4d1F+iVQBJH5rAd37Vbd1Snt2SgdyAfwRxfzoLbolAmm\n9K1s8CdSguTM+jNDe24e5iDVD+4lmeEAmCfSqROyAFL7LfzzyShhAFxlyA+5\nIkXREZ938zeelHJCK5vHGVRKIVf7ouAn2vN7l86S0M+G9p2ts+5C80r96mGo\nM8xb7fSoKBQXTyUlCqKNsvVmQZNAzzH19ihdNS+v6ZVZm8bFwexITO64LRGf\ndWcJ0mJ2dA+neP+6+CQKXc6M/w+5D6vvk8GV4sUwmC5PmpWvZ9pPl2xKWcvh\nc6Qj\r\n=uvAy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.6a40ef217.0","@material/base":"6.0.0-canary.6a40ef217.0","@material/shape":"6.0.0-canary.6a40ef217.0","@material/theme":"6.0.0-canary.6a40ef217.0","@material/animation":"6.0.0-canary.6a40ef217.0","@material/elevation":"6.0.0-canary.6a40ef217.0","@material/feature-targeting":"6.0.0-canary.6a40ef217.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.6a40ef217.0_1585941877438_0.8021752997586464","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/menu-surface","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"1e62904904bb304167209e103b190667b1b73792","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.5f24faacb.0.tgz","fileCount":40,"integrity":"sha512-vuNE3bq6lUTB+ylW84XFnDgDFL3Sd7xusk+xfSyNMKm1K8uKzLC8sj3hhhetFIWEhHePUFqQNULQhVBEI3BJWQ==","signatures":[{"sig":"MEYCIQDL4tTRO8LCV/ZmEx43r6a1U42APo0fy9+eleRmDejdggIhAI0749jDCVdNfZuiJgVSXRVUaHUTSIRMYRv1R9bAU1Fo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje9pCRA9TVsSAnZWagAAPZMP/2N4eeCLdat1Y6PGlbLE\npnIob8frkV/Lz3aeH/hVLcIXhbhq6ZXfnw3IyqRqVuPApakHGJlipjJViSL1\naC/xFZ2OyV5lHepOqYm02dZ6kNDFnrtF1i4PUSRZZLpiU63wnf4J6NRRAxRv\n2dzHbm5vFP60+1OlY3jgwiTzwlUQAVBKjqfFKwS6f22dBtbVv14o1oF9fFLP\nkYn9rXHue/6sipiTchfFPsE/HkNNktTXCmvBWYM2O4UdDMx7LMFkGXuDzS5y\nmYRJt+HEBpvTHbpCSVuafqUIOWJ4CyhpeErVsO1WXICK1GOvXZzqRyUQ+mq3\n+KcoEheikMBsQRr2EDILYiB+rWsc0EohlGMtQgGq0t9tjD8T/AjxEmzAZ/5q\nrICL7qhw+0EexN4oLfdFYG59LKukMiOLCEE1gcwFVzgWvrfpTJnWysPGTcjX\ne5SLm4RGBKqPRXfO1Avnjx/IxFiiiHXN0RowdH5WXXfzx2Uocgt4Ti4L9DSy\nqd+V+CvWK/O3Rsrn0Bs8Ha3XJoQga+z0xmKvIXQ6o2Byi9pvXzpMgO/56aCA\ngBxrgCzaUTkcQkZ8PJsiyyoFDhA2xiPIy+5JSDgqONycAhrZbG7dcaW21OcI\nCVWNFMHsqAniZFX3J0Q70bGcf4rD7FV+E+6hE5jyIdihZJzoU4V9uZIrS9ic\nqMMz\r\n=ul8m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.5f24faacb.0","@material/base":"6.0.0-canary.5f24faacb.0","@material/shape":"6.0.0-canary.5f24faacb.0","@material/theme":"6.0.0-canary.5f24faacb.0","@material/animation":"6.0.0-canary.5f24faacb.0","@material/elevation":"6.0.0-canary.5f24faacb.0","@material/feature-targeting":"6.0.0-canary.5f24faacb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.5f24faacb.0_1586360168584_0.11643043267068287","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/menu-surface","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"7f775370319498f80efc13662fb2d4dc125592ed","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.82fa986b9.0.tgz","fileCount":40,"integrity":"sha512-/KVQ1kvl1PUJ2NwY4X2qPIA7xeBA2jsYIsHCl04CY6u5+ep00K0EMy3AIWpRvMc0l+jwSQhLiloDR+7abhJY7A==","signatures":[{"sig":"MEQCIDbiTEnaalbG8+bVGPXl7BnQabQYsRWvJP+ndc5bEh15AiBFvpmBAXjwy/EP3Lc3nFWZd5zLrajP1lTbXD1BZCDmkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfCxCRA9TVsSAnZWagAA5joQAIJFw0QTMUI9A1NkRmIu\nvpPgjIJGMjNGK4rzTB3APnBrbl28oAGNTxbp4+twLVVFp49uJkf6ZyBI+1ts\nEpSiQuopDIkJFvLJDPXzFjjYioK4/gIk8sUlAeaPnlz58N7LB5tv4t0+H1Io\ndR2mSSMhpDaZkss0RPi3d0yggpm/yJXcotYa74fQRDxGEAerI23z2Va81EOG\nKJyj6rsPEawIHASL8Rf+VN42Nj9/DeMGFsEA9bNM7QDXQWO+KVNSfi3T5+48\nAcDbJX/P+c+o7ug8a8LOa74IpBLSqwrXAmvZEqmEMc9FNPrSmTNpNgSfJAC7\n7mrftrfaZ8EYYY+9N+8CXuqIWbzOAYAETkes/LUgB0dF0qCuRH5+o9ryZHk8\nK/yPHp9TegeDyCLomc9HG8UllO7vJTCCTS2un/ZZoSL9jvXB0A7mtfOd3LI4\ncZSDRn0Racbeil5RDquLdx1vXyzLFqyC0SW06sCGGytZ6BWuhf3H45mQZk4X\nYF0WfYBG9nXNmGsukT5scA2DQgsHAn3vUQW/XFPUPBgZbC+6yqKzIE6oY6dj\ntm0ZVcufCkbv+7OT6AUNaxJsmbvtkjsqEKFMu65HkEC0dN4oK+0GLocUycsC\nmy2SdQHMwnOEMz48pOK9ZDuyvuKgtQVVmfQpiflsVo07B6EcEpv4NxlxI6HB\ncvBm\r\n=6G1Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.82fa986b9.0","@material/base":"6.0.0-canary.82fa986b9.0","@material/shape":"6.0.0-canary.82fa986b9.0","@material/theme":"6.0.0-canary.82fa986b9.0","@material/animation":"6.0.0-canary.82fa986b9.0","@material/elevation":"6.0.0-canary.82fa986b9.0","@material/feature-targeting":"6.0.0-canary.82fa986b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.82fa986b9.0_1586360497456_0.7168908299071066","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/menu-surface","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"925474a34a3c97515523f866eb90830e9d519462","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.9930d9cc5.0.tgz","fileCount":40,"integrity":"sha512-GmhWlNJ8i5Gyt4SAY1Xo64xKiu7KML8DthyvQqIzD6bMWwDC5/2d2sHe1ZajcGRMGwLw1tZMI4b9GncAD3FQYg==","signatures":[{"sig":"MEYCIQDGXArmnWOZ848wTmqHDdyZ3Qsonqy4lTL7+ndyqQypZQIhAL3vcbozID+lzqaM6k/dTRtN3T09N8C6fTFgep8o40Js","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejibJCRA9TVsSAnZWagAAD8YP/ikvlvrogt/y3PApfZ8+\n3eRUBlW+UQ/6Z0ob/RSlm/bPYdarZWntUsN14FdPoE8hW3lRqL5QMU5ZEuqy\npAhrSPubM+d5WP7C2CMNWpQN/60d313CLS03RXTRuK4ZmQOVMxlA3QN2Ik2u\nD4XNagUT3L/C1ozKd2zShJ92EuWWX3WCz7B//xxbx56w0er6c4+wYX38kjWw\nMz30/tkssDInLARf+Q5QbT01j45ADcHhT2CxwugEfo55YFTAm+v8OwwppeKi\nhONwJz4QmnkWqj3PvvKQyYuOMSE4v4lUAzBnPUHnqw4R1gCYbMvkWW533bwu\nqm+7h3MLoCu4z8RnAtjr15hgFQ49UOD288mRGz+6jk2XaA53t9ptfcUf/qNt\n4p+fRP1F2IT4iAiFMGjrJvDKUjoKUREMQgG/oj0pURP9ZSNN+Tk1J6MLga9m\n5U4Z/odGb5YoCTPWJpW6640+benHotDuz7K0N7PDtUlX4b7G1ONaYZ0GbYfU\nHXJNC/SI1uh0U2VhyYQ7Kmnv56MwFI9D5UpWTyrdLSsMsl/JSdnMt+cX5JdL\n/+gmrYv3F3lYVaYYTRbNvAjD07kHCpH4Zd1EZjDAsinB3KMb6Hsyz6pgbmuG\nLrZ9yr14Y0DOA0pyxEO+EofDjK2XdXdzK/ygSkXI5KE7HprXoVHFKvYEaaU5\nZfg4\r\n=289d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.9930d9cc5.0","@material/base":"6.0.0-canary.9930d9cc5.0","@material/shape":"6.0.0-canary.9930d9cc5.0","@material/theme":"6.0.0-canary.9930d9cc5.0","@material/animation":"6.0.0-canary.9930d9cc5.0","@material/elevation":"6.0.0-canary.9930d9cc5.0","@material/feature-targeting":"6.0.0-canary.9930d9cc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.9930d9cc5.0_1586374345124_0.6733178534024609","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/menu-surface","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"fad0fdb0f8466aef8ed667c1819b07d89d4d3901","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.6601d24af.0.tgz","fileCount":40,"integrity":"sha512-a079p+0k8iMWFkXPguD3+k/ZRdZ/TcnzFjhXqIAW09a1Bhe3Vlu74FXGlnmnGsQVQrp7OkFqPjMTaDP8apaItw==","signatures":[{"sig":"MEYCIQDuSNgfgLxOD07ORSP4WwuR8r7563+OtdyWbwl7BY3qsAIhAONHxJcOZq1RxgegvN0pKeGS60uGkOS/ZQ0DALcJFiHh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmyBCRA9TVsSAnZWagAAZrEP/A5D+fr2dYL3oYV4pVTA\n3Kvvn6cpxEvszDizm2M3js+jL2WI3VJI5RZE2VoDcD8jKVhLDNPJfUYOZth7\nPd8w6K8Y8EHL32FLr/j2kmkO7Z1QIXRJ0F2WKI22l/nvZBsGBb1G3NHv+Jr3\nLFRYDjTkpGMmX3w/70lqvZdLq2e06ZJijjqI0mUgUAIzbSlGrxbMG78/lIqH\nuXeWnyKvuaJRDe1Ape0jI2S/vuR0sEKYvRQ2OgESNIL+yFHo6MWv/4ydHUpe\nXWp4Z7H5Rhck3Dbxo9wt19Qj6DUiSLNp468bk1dxbSddgKbYVe1RG2FZEWdO\nsVmNMC0oIZ7x/yhRh10MayL4zHODXGUvoKnsfE+apl1e1RoKCSvHBY95oh7a\nSFcqnyOOIH2X5t10T9xeSkiypBBVAb34SkCFnlDqtDrXrMVD8FJGPGP92pl3\noTfrIlVlqz1HmVojsfpkXF8OjOkFyLNyjMzypgWcGOzY3dcVBGVScvx1K0qH\nA31V80MNG+ZKgHc8N8Gdl0gHU1698KiAeg33cmlAuBwIx55P/ZGUT6GgSqp3\nzt0I41lkK9TdPHbs7JuRxZw+vwMTaaPZO+JnpGRQ3L6kmLyylYNVbSqlK3Rk\nM4U3xW0Klpnd1QLaEAMtAykrgt7G9Jz6Eoimp03FIg5NzrCZDPKJNKWwWmmS\nPCEs\r\n=BtKX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.6601d24af.0","@material/base":"6.0.0-canary.6601d24af.0","@material/shape":"6.0.0-canary.6601d24af.0","@material/theme":"6.0.0-canary.6601d24af.0","@material/animation":"6.0.0-canary.6601d24af.0","@material/elevation":"6.0.0-canary.6601d24af.0","@material/feature-targeting":"6.0.0-canary.6601d24af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.6601d24af.0_1586392192660_0.7328303181723892","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/menu-surface","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4403b78cee8230dcaf7229e2825231b6d800e90b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.05f5e1583.0.tgz","fileCount":40,"integrity":"sha512-4BybX7T/NpS2eTy1bsDVU6mdtZWKIEFa7FN6JICTaTZfSI7IcAE1Jrlyca+kllOKVyyYDSpTQPyoBnaUX4LMtg==","signatures":[{"sig":"MEUCIQCl3jTw34cF+KeotLU/UIDNMz4HVKoHl/wUHmGzkHZP6gIgWKOAywcemY/igTpkg1a+0h+OkpM7NYwhOyEmZs1LLTo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnCSCRA9TVsSAnZWagAA2dEP/3Qs/iLP0x82FcS0wl3Z\nFEIWSw6VQoWki3p7z3EsCP0pjE+DAHo5p3yqN1oP/bgun2fCP9/GKpqQSGNf\nUCNfxnspBnsY+LNlXLCVDMB3w/0pc8Vpg1/UA+fvuPAYOtUDFJG4Aj0jWy8L\nk5v/3FpXPeIjV5pVBgbbv6ULVn3i4byNFIgWzyZgwzbHNS8sV4qxPY4YF0bO\nUECqe1i298zoqRojdEK6HVYzcr0rRtIy4dRzWtZEccpDYPVThuNRo7uzvOY/\ne2prMcPWSJeNRUmvf9bOTNDvfXtQBA+3k0f32jKCxFbhNrsY7Y4K4AQDu8kn\nXujvQMGlxinn5I9sbx02K0nhpZFYL/u6UyrVuETGdYm6JHwzh5t5BnvRiK5M\nMYBECh0kDe5kheOI8tP7Ca2jgjEiT9h2mgTCdbhRonB+G9c/7OuTIYiHAWqe\n5CCtQyr+uZaRhK6kYsJirpvXYebWEHnBavA2SjZ9Dh8JfTImm3gbrWh8Q2/q\nE/C9IwaPhcO7HyQKajOhISS6zWNn/zjTBUXKBBALs+8BvI/Se51Q3ms4FyyJ\nEerMFf95brY+AUSK3Y3/uodVQ6QWErP/2I/NeKkte0k5rAqM0zrW8hvDX+/M\nt7KBuwbNvQfPSoLtW2k9z6WuDxf5BW2csEWRkzthsZEPmblmitKtzPgCXwaV\ngm2z\r\n=3bxz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.05f5e1583.0","@material/base":"6.0.0-canary.05f5e1583.0","@material/shape":"6.0.0-canary.05f5e1583.0","@material/theme":"6.0.0-canary.05f5e1583.0","@material/animation":"6.0.0-canary.05f5e1583.0","@material/elevation":"6.0.0-canary.05f5e1583.0","@material/feature-targeting":"6.0.0-canary.05f5e1583.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.05f5e1583.0_1586393233629_0.41581459477235083","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/menu-surface","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"378350f2d3b5516f79ac69bb72ab237c1986233d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.bce00e186.0.tgz","fileCount":40,"integrity":"sha512-vXgVdvaa1EWKcefIdj4BLeshsfY00iFLS9XRi1fdwhRbA+MLWMoUV6MNIjqU4Z7sQ38NMe6SFSZwr9VJwAQB+w==","signatures":[{"sig":"MEUCIQDmR/2h06mstjiVqWRViRTz5yaiWvmnDJWsp3qgS6vvgQIgce62hrwGT1ZwEPbj0ovsQ6u/AqLgatrmau5z4BMTwCo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz27CRA9TVsSAnZWagAAzoEP/0ZB488mFBcSfOk863NW\nmYggGE3W9sHf6X0Jp3xq3V59bvANC9kYsDxZyrFcKpDQQ0+qUsUtGxOyyV9E\nHnpb+i2bQXGTlvPKUYUHwMZbYIc+f51odJRxqWJotUBiMiXjTx3riQxipGYJ\nJL508KmCT4/UiG2UNkzjddix8Wocg+lkoObKm/Fv5tyfA5d8YgK8qVisVjRA\nJc0SwjSG8ABwyKVeK6IN2mFmlA/pyD2FmvnnufQZm3wkc3pYHJcQNKLZ97lk\nMnAGorD2DAk6YSKWsuvq3fRY1T1Dg3y8T1mSzodU9XOILzBO7+3QpnVrGjhp\n2JmkgZbxK3wYMqqSR1B36dnJYcAGplGqDaEkgbX0md/N3XTqPDwCQSncp9Pc\ngQ2I3ctQYYW2wg7WX0rwJDYsYRMJFG0F/R4mq5VxMqYXUt0grMCLCKAloTBp\nx8abV9q+P9jBKKbeCowatqXJ1cKe1u2y9qdbu+tusdhKERBRbOhWynqhZqC0\nGJH9yDfTWhLlDTDrzPINOSD+SA47Jo/RmG0T8wmQx1aw9gqw8mPXfD5HIlkZ\nCPVzhzXrW6uI8fhVAzT0YEcF5NxeO+9/SrVwrCgMoyBukHm6PV4Tzf+0rrgG\nMiew6wCpwFAqGNyLLHBA4d2YR99n9qug43S5BWufkz/vz35992b3pF45hmnO\nHq/N\r\n=kleM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.bce00e186.0","@material/base":"6.0.0-canary.bce00e186.0","@material/shape":"6.0.0-canary.bce00e186.0","@material/theme":"6.0.0-canary.bce00e186.0","@material/animation":"6.0.0-canary.bce00e186.0","@material/elevation":"6.0.0-canary.bce00e186.0","@material/feature-targeting":"6.0.0-canary.bce00e186.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.bce00e186.0_1586445755253_0.7915596842390846","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/menu-surface","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c078c0f9c93fa599fb7951d59056e2e2e7cb7ab2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.927fa902c.0.tgz","fileCount":40,"integrity":"sha512-zZYTK/FxGPFd68rPiP3qwXSiXs1zB0+Zh6UUFBEaW8wWopW2DlqU1iqqqnNCu9AAQv6X5xCI2W3t8cH7+Bh7wA==","signatures":[{"sig":"MEYCIQCx6jXAdYdF4N3zqp0u70VrUA+6qx3wsJ+h0hQET/TxGQIhAPprnuYdSwrYJl1NvyKSFFTRAWAwOri5li6JKgaWjHnk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej22CCRA9TVsSAnZWagAA3+wP/iEdN0XIaVWt6RoLXMxO\nBYw7V5OLu1Bu/9tWN3h+//YPegi5qiYQq1lUKuCdRNBRv4yqg0DdM+UAv+Kg\nhy667KqKO25IzPOiDsNdaceAUE/RNzx3v3hCe5/o2pVxsDUAYykJ/sqMJVCJ\nHfMrI76rOotJYN/fdlZOjhYSuqoKLdTNygWnnNon3ncviM0/DvCy3XINlfgx\nea0jPHcbB8ybwLt5sX3WRK39Uv4R7+/esdEQEq9M4dvpZBNQo9EED8fG0Wi6\n+n8wuPiAiAtC9UUWoH8aVixmtf38tkJgGNkIMoJsjzyf6SjoIVvnivCdiqbk\nn8AH0T5awPaqHTwpzUb5XpGga7kyIONUWolRYCYM975WjPekLEFK2rqU+MFF\nAdKHDju/mVSKmgldVrTFWLTBu3rdVLtQsMjPkasZytv0o2NIZBXK093/okMs\nT0DDV5GmwPrl5BdVIje78gUn5nfFxEK9x9hdoOGZD3RSHdsYFfYk2r9yKF0R\nQ84kR/vU5c4mnOouF4Jd7xs3czI3d+0gyyMcAL0IvdAY6cJJpYn3L1y07KuB\ncYOcyUznYDq6EjhRU+0hL0umEVVQjDWYzSPl2TZGHlsSL8AzbShxePn4lq0L\nt7QgPgKO8XECgoxMzQqXwRebOjSSp2Jmc7Ul3ekhJEMFrgYuaOWblF1XN8ZZ\nZTUl\r\n=aHC8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.927fa902c.0","@material/base":"6.0.0-canary.927fa902c.0","@material/shape":"6.0.0-canary.927fa902c.0","@material/theme":"6.0.0-canary.927fa902c.0","@material/animation":"6.0.0-canary.927fa902c.0","@material/elevation":"6.0.0-canary.927fa902c.0","@material/feature-targeting":"6.0.0-canary.927fa902c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.927fa902c.0_1586457985518_0.05260019970360852","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/menu-surface","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d7f4e26ed59536e106cfcddf1e53418b7124fe84","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":40,"integrity":"sha512-JuZfnuyCqzbHMJwjVzls/cBW14cajtIdRxP+Mt6spRO6PKIp76TAHx+W87eSShQPAVUjKJRqSlrjEn0zKJpBHA==","signatures":[{"sig":"MEQCIGfOVIKMcrhUgTXKZx3eKa+MBsCKVaCRGYxXVV8grTlzAiBoZTOXbs4O3ARLsvi79q7eHGjH3SDTDt3Alatu16nwMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMlxCRA9TVsSAnZWagAAa8kP/3vuP4i4AAaihveBJYeo\nMX293egjjnAo/RTWBFRXJL48wA+HBKmwdf2zECHGEYRJpXL4kiuPWvQb5EtQ\nzU0thqxd0DJfKisTeHMoB4aDqTq3y3ZP3NI5mpc7O69cd6ZkgozETQod70xX\nTEXEbhaQ1SNJ9ocMD+PTAsW02dPjryDq+vWD3ch37k4JWNRfaYGGLe36/raV\n6n3kIsO7/jHpttO/eHhBUtStlkhRv53HgJjnIi8IMuUGcgZ8O1zPgDY3BKoq\nXyad2qUp1pbU5FpTQZobGRn9RuIFqnnraCM6lUqs57pGacjrgpLIJlgOOjhm\nXujaHVeQV98DBJjnlJ0VYZ0RZbcVq99+MqS4/kcm/YPchwe8K+jMYMMTQyl1\nTq8rXFmyF+IsM6zdTUenG8vQ6PcPqZOTXtLF441KR5/5TGcN0y2WcxIKUE9r\n0OIgNYqfNYncQMMmQDyNSDcioHO0QVx0VxzYDJSkROt52AmZxfMDGTp8yoIW\n1QAaKhKUP7e7sA5rVe+7zQDUkjvdKVNo9nz1tBDMIYqaYy6SbS7Z1h5Yy9eD\nQhQL1N/1b1XHfOXsKiVK0+YgTITQ+p1MiXhmQU7xgmZajHEkegxSMrzk5eHT\nwlf8RcRRsf/jPkXFnwJIDUNElh00SUqcc/LCRPxcvTWzWPeJunCLFB0RFmek\nfXvG\r\n=rExT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.eb28b6ecc.0","@material/base":"6.0.0-canary.eb28b6ecc.0","@material/shape":"6.0.0-canary.eb28b6ecc.0","@material/theme":"6.0.0-canary.eb28b6ecc.0","@material/animation":"6.0.0-canary.eb28b6ecc.0","@material/elevation":"6.0.0-canary.eb28b6ecc.0","@material/feature-targeting":"6.0.0-canary.eb28b6ecc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.eb28b6ecc.0_1586547057162_0.09415209752010534","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/menu-surface","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"83c1f796f62f670348ba3c89f3103a57d9a77ff8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.816a43b42.0.tgz","fileCount":40,"integrity":"sha512-rf+TKE3u6IlmHAUC/T4slEouRiu2s75I7ntazwMNubo7Q5Cad8jbGT0geJyAUqCcm8mYQ+63KzjjiTbaHKTzNg==","signatures":[{"sig":"MEYCIQCy+0x/vyqp3ZKgYBGx/vnaB495hsktpUmYzCd304sYdwIhAI/r3+JMay+5LZpAyTPXdCRrf0dRlM41ZhOMv20lsTin","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNyZCRA9TVsSAnZWagAAcvQP/1ahkVezhMFGblyCPUMW\nLmi2Z+OlINtBdV4jy35Dl/zpEXTa6q0v/ou08Ovhm7OVOt/KKmuoq0TU+gY3\n8T1bFlbrYpSbUZch/pUU0V5ZX5u7JkYs6RjuK5iSw56ydkGWUBs4l8vJ7kyZ\n2v6orgZ4txNR5ZS6ue2yUvHD0QpMiJwdujqBhNu9PEmq47akIY+nwpIOTHxI\nijdrS8cUBT+DYInwJzKsKS2ulFXug3iJ0o/WgJTrrN/i9O8sJYrLhrLOTmLB\nvR1ZIUzZnnfxLeU+OS7eEdia4O1IeIObxcOmD43k3ZkU48TFJU9faAGyuS1e\ncgn+IGTzt5mwQuETkXgQ7pQYkLc2qsEl7WLxvazA0F8T/U6fKyU/wgC0kYdy\nu01saI+r6aay08qLwcB6eh7MglM6GMjdTYdXyUIM4q7GavlTZLSenmoihulD\nlfrG2glSG65G9lYaKGhApnuQpqg+bQlv+AyFN8hJKj0R9lXgYUK+lRN5q/Ph\ntkFGk2j8dIw2JptPD1tF8Jp8N1fmLQlmXydD/4144fbJQWcXXVe7bNOFRmmw\n5RWw78s7jgZ5NoGTlXpDG9iM6Wt5+Wi5CWCHeGX3tqP6taqHtECa9unP0w4B\ndHXKVhovVALuwmefeJP1CM/NxZZQYJ6X3nif2stXBhDSVHbpIstqSxSM1rLL\n8m/S\r\n=X1AK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.816a43b42.0","@material/base":"6.0.0-canary.816a43b42.0","@material/shape":"6.0.0-canary.816a43b42.0","@material/theme":"6.0.0-canary.816a43b42.0","@material/animation":"6.0.0-canary.816a43b42.0","@material/elevation":"6.0.0-canary.816a43b42.0","@material/feature-targeting":"6.0.0-canary.816a43b42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.816a43b42.0_1586551960904_0.39868228938343053","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/menu-surface","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"7c9f8180b4f32a091437ef449db1ab7f3c4541e7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.008c4d319.0.tgz","fileCount":40,"integrity":"sha512-s/JkXDQAjVnQTmakOeTpAS8Qn8UhcG6DKMpTHj+LaP98ORdtFQWzH0mBR8FNcb4vxfDsEYiQsHxoyIEoDzcGrg==","signatures":[{"sig":"MEYCIQCqkatuNdfJvne7IPZqyCO26+GbB+mhIPZWNjpjBuk+BgIhAMcnyI2CPoBBtYb4h8pbM6M6Fn3MM9kaW6RxK+ICsXI8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJRxCRA9TVsSAnZWagAAtEAP/3v3Y7m6433o2egpuSAl\n6SIP1eYzzGLrp2zT2OgMDfUZ7jXDuKUh8Dl4XeDSktNIkTo3iq4BCDHStrRy\nazxdpfzrrNdEUdWAfzOYhg+ZaVKKvcxz0niwkJHlM/hFSxCFi0qsdDav0Bw7\nkWGY+FWtesLIQgYMRMDNwC2eqQLll+4WTebDKeFTa7J5x+M0jaRBzSqLNOq/\nwyyL57x0Ta7OT/9SyZgo7A7/LUaC5yIvb5oGVAcozABK2V3iD2ITjS7dN8IW\nuFLgW15khcXgmhFPsazlexXZkeOoDb8tn6vvws5dI9tKcw0/P0Vhm3GmV7qz\nsVA4ETl+R8LTpDB1JfZaLG24WoBfCY0Km6QcpmiOqJ/gNUqael3Rsya0aDhw\nEj0ado2mf/+LPukpRJzgMFco2/osdPJl5hoTSlo671HSOIbEGs0HUjAHyhRe\nfVwulbgCbT8PS4y3zu2TbFC8lNUYyE503/XQyp4hv+9RmwWxqDMSkDmtClFy\ngN9IB2C12j8Q/UCti6YBUHQJnaeOfVREDIr+VUdcbSnKttjdX3x1/8tSwv4X\njI2QtqaVpz7xXNLEqfESK1IovN81IQCXphUvYE10TEexI6ROEXbj9yTv0ySp\njXJs0TE6pW+t+EGJp6F+TmHg6/VwJDELA3ysr0Oct79ubJzmPSbijamI4uib\nOekq\r\n=Suy4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.008c4d319.0","@material/base":"6.0.0-canary.008c4d319.0","@material/shape":"6.0.0-canary.008c4d319.0","@material/theme":"6.0.0-canary.008c4d319.0","@material/animation":"6.0.0-canary.008c4d319.0","@material/elevation":"6.0.0-canary.008c4d319.0","@material/feature-targeting":"6.0.0-canary.008c4d319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.008c4d319.0_1586795633146_0.9282167799984402","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/menu-surface","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"5fd95afa4f98b3e463b4d057eeeef588aba6f304","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":40,"integrity":"sha512-68PDP/k1c7g4+TDTneFANixELYugXCMm9gAqY877KZQ0e581G/X9LonOFHysVYs3VpGOJUI3vxbeAZaYEGnm3g==","signatures":[{"sig":"MEYCIQDC5k6hBfsWucBS+SZmMPewfKGJPj4nlfO+OiwUrfRGqAIhALXik6BHWmDs4xp57zfjapfHtTBcEY0vflEAvdiLaXMD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUS1CRA9TVsSAnZWagAAVIAP/iiybouvobmGSZAcZyL4\nXCTOl9+vp/uuai6zdwCFcighmX/WTNotwu4QaxqTYIQFYPH8G1wPtvhPmnP4\nzZQvjfz3F51K4TFC9Bu6PTWXiZkM0Llk/Lisfjwq8pOmj52FRvWkVfFPKIX4\nzollUGvmbF9fJ2JcJWrqEKun6w7LU37vP4GJQN6E0qPSH0G/N2lIXi7SL6bV\nhsT3JB5/cYVfsSVbgKlmHQO1yWw7ru3z7YCwwVVJgBumh0rXQtDWsIjwnd+/\ngogmWPXAjQvl2EdwXfjhPKFMcPi2a8ZwNxcefAjVo/CiHyWzaSdIogEJq9q0\nQ6t8LIODWtNAIXbNWT1FDbWgQt85Jf7+GzGF1iFgzSWQlRAM18Sz60q1FH1M\nUjfMqJsghM16ojBlluouFDLyTTZgaIhkei5MbZy2CwDes0Rq+2WzDT29n3iq\nAGJbJDqxWMA/wxe7AiGCQys1mgxJ1VXYl5GpUsDUFz/wuaqvsVZ2HC4RVg5T\nYB0voXVaIYcHdRvMiS//n6+yyRAkYh6eWogPupxGm7DBv4Cb3T1mnJm7kWOU\nwR3pWSTa87IWeSIVxNJQbCdSyUutWcRmIc2CgLWZ3FYxfEzR0VB/Y0DzP4VA\n5Ez+KG1eih3Rt5JuTNd1NAFZ+HpZ5I0Ts4V3JqNFxYNPb/HXlmWHcpSmHO+X\ntj3g\r\n=gFmd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.cbb3f28ca.0","@material/base":"6.0.0-canary.cbb3f28ca.0","@material/shape":"6.0.0-canary.cbb3f28ca.0","@material/theme":"6.0.0-canary.cbb3f28ca.0","@material/animation":"6.0.0-canary.cbb3f28ca.0","@material/elevation":"6.0.0-canary.cbb3f28ca.0","@material/feature-targeting":"6.0.0-canary.cbb3f28ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.cbb3f28ca.0_1586840757333_0.1429610559234744","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/menu-surface","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"15e7f44658aa2f5a9e5e2a9b81bff5fd740cc20e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.f172b0f90.0.tgz","fileCount":40,"integrity":"sha512-Y+ITlcpqp714e8X+bOzoqFqEfjMZ33zI/hP2T9+NajQPDWXjM7Q35B8Vy+6LXk4MKnbHiNnzi8ZBDVNFA5nShQ==","signatures":[{"sig":"MEUCIQC5bisqESd4Zp7Y4ph/nImfMAZJRxylKPTdUYYrhLffXQIgIre2RYYUhsLDdJhLt7x4+fY1qsf2dppOcrZDsROY7pI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkLfCRA9TVsSAnZWagAAVYcP/RCk1w45j5bUKPGC4Brs\nErIGZr4pzOSE7uM4D26GYe3DSNh4oXdbLH9XMpqry89clsObkllgtfMLWXfU\nG8NY5gmX0ghFHJ6WrHxS8s/kcFDhcpE7lLsaFJfUQvZJNZAea5erw+GtBn2v\naBRmoNy1tFgSILv5yAkvyKd1NC9Nn+tnAPXwdnQrcVNa+8e/bqBeZBVdof1i\na1AYAHxMIRHZ2xUQJKv087hO1xyezHjMfpK9F0PHj75Or9lZIKi3ALp1YaRY\nJJGjo8SM0SoMzibCvNQbS6mObsi6JBCQnUyJ9GoOKdMKYVPB4vSemtwMF+I0\nepm2jmrc+/KnCw5MKCet7jE+dSILiozBKxhIMeB5V2x/2Ye7mqTBsgdpZ7yE\nzy4gNKtw+hU0XfY0jWJDH6DKsBjEvOhigbWUcG4Bq3BbzCSGbZt64nUF5y8n\nSx0qR2Yq//vjgz7FD79V9czinEnb+A1J0cwTlTikSBK9jVvZbUIjvKPKyz3w\nQlmGQ2byZphFwbyxZBflRDz81z7M8HxYjvmEeVal95O7BQiwmZv/TnG7McxX\nDbXaY7118gQezDeOW25SE23m2LlidaqKE6Dw7vaaCmY8aV2FFcAy8hiDB0fl\n0hCWkSM4buD3fi0ZqreS5NBSlvZOklU631Bi3/ncUhxkgEo/brC6kuNcn+m4\ntS5A\r\n=UzgP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.f172b0f90.0","@material/base":"6.0.0-canary.f172b0f90.0","@material/shape":"6.0.0-canary.f172b0f90.0","@material/theme":"6.0.0-canary.f172b0f90.0","@material/animation":"6.0.0-canary.f172b0f90.0","@material/elevation":"6.0.0-canary.f172b0f90.0","@material/feature-targeting":"6.0.0-canary.f172b0f90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.f172b0f90.0_1586905823066_0.013545142423480261","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/menu-surface","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"ca75b1d81dcd4941baada6a7cf950f55c9f337fe","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.c02642273.0.tgz","fileCount":40,"integrity":"sha512-Q6nnt92puAPD8NR8Jk21trUEOZtm5DVV3fJwWpoKgEqiGmcmv3ZsuW6u9gnKu6Yof9Su3vrvJh6YouWgWM9jHA==","signatures":[{"sig":"MEQCIEu13G1XFieolBRBbLvenxk16STqXljnrDrL/n8f3IdYAiAM7/8obvxCsrG09s1Q5ldNj0lO04Cq4txMXIxfboZEuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":319951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzOSCRA9TVsSAnZWagAAumsP/34Iy++yXU3jY/cCmdSc\nomUDTEe65W5S090QpRzmhh+jdqICh5mEk1UtaPod1ChCPyo/dTp4t0vMgq/1\ndWge04WxFWXapNk3jybiaPfg+KIeVCzWm3YpDSvGj7Rj8CwOhQN1CLauti8k\nkjqisXSCpNHPjOUGPSwAz+W+1lzplN4D2kDz1xicH3TOV3XM2FLm3EpSRQn2\n05OwIObqryqf31qZoFcvisYCRBnIRow0iswGFQmkEOGlQODwLKMek6GxKh9w\n8EWUIGwCZ+zKhqnA13fKt3fgbs92vXYrHUSNqnORuShZnI++GFJTyIo5nWaE\nFxXAblQrNUaBhf6G4vdOfje8YWVFpRD9ZeFFg47fsh2/Ekjc9L9SR7S1iZHC\nJKyEhlkpU1L5t4T6x6DNIVhmi4idqJqGtGo580YGkm+Crpqrs4XFQt0YWVMC\ngBJ+SWKJtsLvx8DjCP1IZVi/M2hL05SMTMilZX2J73DJOOnmifkAdPL8Pi56\nnpTjggwg9bSJCBYjic8S7QG0FV9GL4D61YvtiV4yfG0Tb5tM0NCU0zGs1+r5\nP58z5XgNNfr/ihXhvsS71eSVEGl38d74zRXUQhHZet9j1H6H+ilEiKdOhtPv\naeGO2wL4OP/VVYe6thupyTC6vZkt/90v7GsQQ0/fX3wvsU/rJXYxq88e/SsF\n99vh\r\n=Ni6M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.c02642273.0","@material/base":"6.0.0-canary.c02642273.0","@material/shape":"6.0.0-canary.c02642273.0","@material/theme":"6.0.0-canary.c02642273.0","@material/animation":"6.0.0-canary.c02642273.0","@material/elevation":"6.0.0-canary.c02642273.0","@material/feature-targeting":"6.0.0-canary.c02642273.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.c02642273.0_1586967442137_0.8522524502502953","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/menu-surface","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c808b42c5ebd52c4ce9fc6f306eecc346bd8ae67","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.8a299b568.0.tgz","fileCount":40,"integrity":"sha512-7/qr6YBJduOGdAmiLTL+gGyyYmTUHqUcYkE3neM2kcvo9sWlYnC9CfkcRizRYNYLwNZFMbtt/Qk/VNqEwXxLxQ==","signatures":[{"sig":"MEUCIQCmlrSXlxPg1jFSND8FxPUOU4p9NFzvgdE4pBx3KdgqqQIgNUiMJVGuH6lNVIHZcy/3IRYlhe4Tvsr33cq5N5hQKrY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel44GCRA9TVsSAnZWagAAbRgP/3b9rPDs9HB1X2j5hIi8\nKQVhhjSQt7Mz9JBYMHtWqkFsG9KkGO0oxPqkrotXgd39wFf+CsiYnv1ndaaU\nf8cRGmCTfKG+JtANenkVszDOf5NxPqlcDsHktt5TMiCDAlVEcSP5JcQUNqmY\nSp1833E0l02+0rSS6QLyu/gTMX05aCNuFfxgGcgPvi7dFF5ojh/eJqOoTHp0\nNiC9zJaNPjxz6xDmz8LWV8ksJLiCEWQuRDjiDHB5yhfLPst/nmm5LfEn5gfb\nEVb7rPmf7VMECwlIS7y5ZcxrabHF4N/gK+t+7bWN7jv5bKOd6HxRP0llp/ja\nhUGaxQ8Wc65cDjubPQyYwNm27La+DzHDO7QghTRUKdmMdwPpaQ2D5E2QtNZn\n3H+NM7Rqf1PB1fy6nmJhBr6htyN2G4msjReVSDn9n+Lear3fdfzt6VAELZQF\nbXvxVlhPSXBoctTomfdBYkN5aEMLEjLq84+GnTcBASTZQovMZ861iPkMmZ3w\nsRJZxZb0OVIPliZ4rForCE4QkC7edCh/E3OMolwUQj8zhVg5jj82dfVqe11d\nK5echl6RPDfPB2dSkY2Rj7clhabFufsoGJ5IgdIPcRVrIUJrf1mbnie/GjmN\nhI9w1dQUqSWL4l2UDiJDMfjkuX7n4XCtBN+/ctdyXVuLJjVi1bZranQ5yLEA\n1fjb\r\n=3tqG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.8a299b568.0","@material/base":"6.0.0-canary.8a299b568.0","@material/shape":"6.0.0-canary.8a299b568.0","@material/theme":"6.0.0-canary.8a299b568.0","@material/animation":"6.0.0-canary.8a299b568.0","@material/elevation":"6.0.0-canary.8a299b568.0","@material/feature-targeting":"6.0.0-canary.8a299b568.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.8a299b568.0_1586990597954_0.9463648910470515","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/menu-surface","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d022e91b5f80243ba318eeb9e01d162d92384db0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.490fbdc09.0.tgz","fileCount":40,"integrity":"sha512-dTJtSMtsD5X6i1Hb5Tn4BlUTL8w/Mg9/Dclq3LZdlLctWsZ2DNgLVipLWmkA1b+wIJOr+LVM5ZsXAOsON/vYwQ==","signatures":[{"sig":"MEQCIC955KazNSfAjlqpRXvLw0+t42oVtrFTN+OfgbbmzefaAiAqiKyZ6HdPdjdiEw8leTnYS2M+iTIb5zF3fVMvaZ/lHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/RQCRA9TVsSAnZWagAAHpsQAIgI6hW0G6h9/6MHHlhf\niZ6fmGw629jsoH8mZjsGkYA1gsWYxO0B71FW+aoHM3QvqAPywLBtmfRBy8Mw\nVOSPTPzBuVnhfN617s1XnmNvf14NKExNcwFM5GdheiVrmGy1Oe7TM+5KwpCR\nXFeOY6lFtULAXiM8qhfXtWKgzW7L0VAC9CLajHtAWuARqNTJdHxOpuEX/jwc\nXicFwyG97xKbAbH3An0iPdHjZQvgwFjIIrLY2STqzYeqJgI2vGSIeuZ+bShO\nuaj2g1eQnqBgc63gtZvkKtb/oUZlZraZZk9a5CCcVYzZ+vRObEcYVtG8PBM5\ncSENKjbOgPaLrUxpd7U7URxvQN14gS3wH+4sp4DrjzWukdg6JgINYpFLOu0l\nSqtVWNM+9wbMjbiQ7Xm2VXjmt8BwVd6IfYCJ0+n1DU8MuT6H7AiG9kXvg3HA\nH9XA9LovBW3CVF+6Yis1h1UxMiK87YYvgpEArpsWiOraIrlVFisGDnhIs47J\nak+zySyQp4tbn86WYJNTRJdZjTAq43GNsBf80XgJHo8oSMOhHPJIV92LixHn\n2Xl1XsUbfs4CSfmTdzH6oEkc8vzC7iIDNTy5pYlewUwVopwmTkd9UsJEmbwE\nzxLCS8ZvyfOwoXSlQzAZWY8cv8z/lvhiKvAw35P4zY52Aw12ur8Hrcg3+kmd\nrGiK\r\n=ZZDT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.490fbdc09.0","@material/base":"6.0.0-canary.490fbdc09.0","@material/shape":"6.0.0-canary.490fbdc09.0","@material/theme":"6.0.0-canary.490fbdc09.0","@material/animation":"6.0.0-canary.490fbdc09.0","@material/elevation":"6.0.0-canary.490fbdc09.0","@material/feature-targeting":"6.0.0-canary.490fbdc09.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.490fbdc09.0_1587016783748_0.7527231600797477","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/menu-surface","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"81ec84102388f3fb22954d95e3e965f2e8119d05","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.f838c6e55.0.tgz","fileCount":40,"integrity":"sha512-8bQAwrGNhrE/iq6P3TpWWdX9fNvobBlghZxEUSWh2PhFLo4M6+cXp6H8EYU5O7btMtqegsKPfplB8Vwlekj2LQ==","signatures":[{"sig":"MEUCIBCcH7v4eVESfCgy4igdcwkNdLRFu4WZe/DWwLIBl4LgAiEAmJgej2rs6RR7j94a6NQ43jmSUEnDtpPI5nhTV8y+USQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGsgCRA9TVsSAnZWagAANH0P/R2j12vqTqDKm8JjYQtH\ngcXOyDZHNzm7/SjRUlDx1Ls8pN99UuNLfLjQ2S+yh3FpNOHlIOTQUgeZ0OwE\ntdDr71wB1iFNHMGZrIP1B8/rPkNvUiJiRM9+ecElGUylV/4RcVLzHHT1TBkr\nxgRts0qDW695YFGk/jYKFQYsUeZIQ0MJqcjfYqNckhi/lzhEcXWQ3pYdzmr0\n3DUth94p3SSMFlwAIiYHDp6LgnQdjVIvd5MBhtm0hOEbwdF6rzlfL3C40vC/\n5tmoyA+MrmE/aWTi5pbXN/n9sS7cZ2vG53V7dA1ZYltYjm4lHyVFflEQq9Gf\nPPW5xiEWtG7vtY6ZLksuBZ+zh7+23hhfqDUphTVQEcFf212hno4k4lHfgtBa\neG/ibLbXe2m+84v7yFHhVoq2Wz1hAB9dp/FfifwLMPkJkzxn1TXTepupXnkV\nqDAIdcxZgTxdSQG8hk6583zKpFmLgmJMexOv1GFKbaKF4ypUeV+8aOe/rkp+\n3Cr+az/6ZWumkj/ci2dULsYZSEB59UwTkwCdJ9YF9pakPjJcXPAiEnla6zs7\njiBCYIlHwM1iR6YEQZSVIArfa+jiip3fITWiawe96UDrmie0e+EKInp5atfX\nKIQMnoBmqksEnzR9X92UFzlZ5SrUGjzQKaylfhOsWBGDiJ6csAtO4k6mUeN4\n2n91\r\n=0l3N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.f838c6e55.0","@material/base":"6.0.0-canary.f838c6e55.0","@material/shape":"6.0.0-canary.f838c6e55.0","@material/theme":"6.0.0-canary.f838c6e55.0","@material/animation":"6.0.0-canary.f838c6e55.0","@material/elevation":"6.0.0-canary.f838c6e55.0","@material/feature-targeting":"6.0.0-canary.f838c6e55.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.f838c6e55.0_1587047200180_0.881405314579857","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/menu-surface","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a8ed39fa8c6f0f4ab1e4d08c529f3958df400ec7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.ce6cb7024.0.tgz","fileCount":40,"integrity":"sha512-nlzilmlf2NTt+7h7SSN9cwQuLTEL0btpVfBaDseu3I+kGQyUeRAV2XrPCgmh9CERdiQnbpixc1CNcgm0vAYwsw==","signatures":[{"sig":"MEQCIFlbObX8VlsxGC0tmtILGD0L1LSIKmmRUDxzrd8Nrk05AiATdoiEsNJNCzNwOTgidzZWC61cmuq91/uic5AflRG4Xw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJONCRA9TVsSAnZWagAAxuoP/iT7j0RM+CcSg0N0eBcI\nNZ5svGvlxx5lIy2Z5qlmb/UE55PXPmXvLDqfQ3JtUwfvvmP0LyFjr5PDp89r\nkDblnoYYq0lKhWvxKSca3k+x2dQeu/ttJuk7J5uSOPT3vfyQo29eOeOaIKxH\nBHI/4vXlMBYFnBO5HBsJNlwdioWGzP7U2I4ccUTce4q+xOtjphhNu9PvoaD6\nKWU2hyJSfFNsC8ezCIDhEmwaQ5FiicP5ypBpgf9wQ/7TYCuLBm7B/T0dRwCS\nEGXc1E1ngCG8N3f+AvIT0Bb5hsFPbjEto4nKxZtdR9uHeTCIYhsZh86Ic2MV\nk4Ge0rCYZtt+akA2kQ9qc2hcpqJNKLMxY9/Q4re6QQhlaee6ZjJhdZzjYaEk\nlHU6LXVlVBTcc7SDbtBReprhQJT424CwOzxYYMSZ9SjDgMgEZ6i3aTpgZKpB\nntPEJmjFrhZ4Vpyt8TtP/OT9rRLcok9bhHP3p2fonD4eii0JIhAtrOhQko2i\nHz5x6Q4ng9LfRwW+YMmhkHIZwXBDLexUURTtkBx/c/wVy2cc815XjQX7cpm4\nLjSatLLYo+gpO2lVUUImZdopb0t8k+vzyQJJKHC9xTbIN8pA7oTl0IQh20Zc\naCD//P9tVpB6zQanOKDX5KxuKVfgu51IVvykP6UxFj0y5pdc1dxfxZhLdSBp\nUh/R\r\n=CmMv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.ce6cb7024.0","@material/base":"6.0.0-canary.ce6cb7024.0","@material/shape":"6.0.0-canary.ce6cb7024.0","@material/theme":"6.0.0-canary.ce6cb7024.0","@material/animation":"6.0.0-canary.ce6cb7024.0","@material/elevation":"6.0.0-canary.ce6cb7024.0","@material/feature-targeting":"6.0.0-canary.ce6cb7024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.ce6cb7024.0_1587057548736_0.5629402585565888","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/menu-surface","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4acec51f3cc31357545c3e9923d92eb5a6e6e107","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.0ab62a65b.0.tgz","fileCount":40,"integrity":"sha512-9bsyxjmyQzhbBfe0PChPduMiDIi7imqziUiDE5vFTWWDa7jcfKGEjz8hUE441qY3XFC9rk6n1aoHhbRE9OAbzw==","signatures":[{"sig":"MEQCIA6q7f3zn+5HJsBOJAMYGFJJdjWSdsVUc9IQevX5S8VqAiAAppgTW5KxNuLQkHgiF7LEH3IgsguA4hGfZ+27GhU8eQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKnfCRA9TVsSAnZWagAANJYQAIbYU74wMrM3wESpN42P\nr26Tnbx0Dg9RnCZpixrWtXVqYgy8PvhpVP5tkpPL8SuY07Wdc9jxu/FcVW5Q\nRiDgMfqafHqkBGSstXbvf5PgDtruyrxbVU41SR1VPGyZIvgMlfNuWKhDid3F\nWXD9D/wiMz3lLh8ofA1gG3CQnuAx5v5YLVb8AlpW0vDBQqwnPHXE8T56mgO7\nTJdfm2K4jxJlD5SeZhIx1DwFAE+5GuxKmCH3WqbTSYEundxX6QJmngyrPu+E\nVeEVqx2jg4ClRY2r89rzc6alRa4RpjMlwTVQ4IbYehwquLRz7JSL15VZ1U4b\n7nKRaRP6QGe5Sebs1A4y0jLj9MuGTfLpsi7GoPXq6SNIbtrapQdTih9P3J6j\n1ErQl1fBWCtDUMCFUSW/UuuFPTNyy0J1wCGgFgpLXUU6Fz1m0pRfKC3vBPHt\nz5ibhZRRnMjbwR18BiA6icK+FXjNqUoBnYGQx/j1K2aGhl+srYNMnIDO1UXi\nmefqbDi+oIgFrDSnhpkeN4rgLV/jz7XzdgLrNPBGKFrNSta3q1++cyl/ienl\nPvd2r0ag+DW9nwFAi00WyyHIHbQ97/SAFGBvvtgefiJblOI1u5vUyTWt5x51\nmJv86QtBN84bxenMgH5DNqBtU0Cp4FNkwd5OLBED16p6TiEpr/s3ldKWGVxe\nHnMN\r\n=ptv+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.0ab62a65b.0","@material/base":"6.0.0-canary.0ab62a65b.0","@material/shape":"6.0.0-canary.0ab62a65b.0","@material/theme":"6.0.0-canary.0ab62a65b.0","@material/animation":"6.0.0-canary.0ab62a65b.0","@material/elevation":"6.0.0-canary.0ab62a65b.0","@material/feature-targeting":"6.0.0-canary.0ab62a65b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.0ab62a65b.0_1587063263462_0.5601509626350825","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/menu-surface","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"05834d3f74c87418b35f7110c96756114e80f346","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.ca61b656f.0.tgz","fileCount":40,"integrity":"sha512-didkzTEINteClsRJiVZM4ojrBWMEDjsw+RkPwepCk35eZV8o9RX7APwyQnevWx40yo77YYSeQe9BS0jqVymCmw==","signatures":[{"sig":"MEYCIQCSYUqWhXgmegy5BkLF7KUpkf9gpaQMw7fnPVUNDeBgUgIhAJvWswNFAP4uL76EvprgTONhqAHySJj5d/EkI1imBSWX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLk+CRA9TVsSAnZWagAAGDgP/AkdJWeeLXP+kVkYkmhQ\nY8KMFyimMLnbd5ykIX7Sm5r4sAgAhLN2r2LmD6L8K9CPHOb2JoiRNkXdmyxC\n9w3fZTsCqJ45f8wWX9f5jAQ4sMbFI7YmHi37oiKjFFzYFV/qMfzyeGlqbpi+\nC02z3o3zmFC/gUQrtNvqWMoKa5GeE9CHvLRXfJolZI6AIyeTtbm+17Fj2xOy\nOcp7jXMiP3gb408xIw+JrgwRS/MHMy2/pqcd1BeJYWULhDUUWaOqQnyDE7cf\n3qWMe8hMsTN7tzW+pjztMQ7dCeA35aHayRoX119/ms0NDlMuoTj1ZzMB4fY8\nmGZ3Ab3k/byNJllHe9YWfvPibMxCAT4D6hIa5AV9td6i51h+Hkh6N3fRzJG9\nCUpXvIitcDiRsMKMQkbfPG+zpYP5HM4mUInfM+zHV6Fe3n0CZkOY1i0hDmaU\naYj5i239IvuyqeuVrdIESjvePuaaV0cpSVCUBq62epM2p2L2tQpgF2UsKXl6\nQ1ZFsTsvAcgy3ayWDx/6LiMY5M7njiYmiCwaczcRZZJEWm9TzgnNvBR0B3xW\nRSIrxnBttoQjj0KclcTcPRofyze8n9sB5zIrZ39EOFVJh4BN69lyJMAB8kDt\nkCO0jfztLWXwTkJOl0tMQahYhFGV3a+69m21+V7ANiRjIzyPfO/FdvufjxLU\nwrmI\r\n=5+C0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.ca61b656f.0","@material/base":"6.0.0-canary.ca61b656f.0","@material/shape":"6.0.0-canary.ca61b656f.0","@material/theme":"6.0.0-canary.ca61b656f.0","@material/animation":"6.0.0-canary.ca61b656f.0","@material/elevation":"6.0.0-canary.ca61b656f.0","@material/feature-targeting":"6.0.0-canary.ca61b656f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.ca61b656f.0_1587067197908_0.16237465811851903","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/menu-surface","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a2aa11e7138739cc8574fbed6002caacf35b1445","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.45a6615e3.0.tgz","fileCount":40,"integrity":"sha512-omEokxKL1SpSsVlTX0zVNDKCXgx001V6QjTvyKzZfS2BJczS2zGUKyV1BqPSuP4YjeW4lQNfYUTR8qZMMAuDtg==","signatures":[{"sig":"MEQCIAGlzjb0PIccfyyHahk+W3LECUpYETRHmCGRf06kodInAiAlj53/S8d3J1Wf3a9sUiCQf5neBzT1QekkfzonyGbuAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMD3CRA9TVsSAnZWagAAuFYP/0l/+r75fQ3Ig/I7bMHv\n05R3HuKCcWP5Kqw6cV0Y9FlERnPjcbyr7IdarHtgZJ8P+haplAnkGz5fIdvI\nd0SVrGW6Zuq6dxoA83hXNZ7TfYmWDkhVUdtx9/kKa27MKcnsXnawQc5eJ3AY\ntH+MMvfrk0I6tsMZEuWaK7yHfSkkpymAQyPV3bJ5h9A9lPpCDOov0fPnbGQn\nT4Z5NwcP7g1RRy1Zc95nnSNLivyOsn53G4dD3riGoC2f4sQ9sxlEFHCGDkkK\n+Z7jOdla4x1rJQVHA8HqRs7WgUe4jAQOitPfeluRyNKF+04JRGVd5JutT3nL\n/YyBQ1bSE9Z6SA8rGnhSlxSuloEoUnodFbPyK0O9sbl2LYYTIgN6N73oMURs\nZv8KknLpb8NuHHpo02LTZ/RQCL1vCZ/wFb7RAF51c0NdzSI90zBcwdPRjqgj\nnLYC56IQlrD4kOUaQxJtkQVmXoU3HGMkufofAV4BX2c8eB2Ofu8rM8rOMc9/\nwnEdxxPYA+BOuzxAndBnkUtIBrewjYASuxp/JIJkHyys+df68cOWF7TA+G+f\nGFAwoYo1idnoxNtSzT8uQb6OYL0kZdonx03s4fGenxyi00wsIzBrOhITH6O2\njp1rmMtEbMhVOdEYli67Swqng/CvmbJNUAMvJFMywFD2G8e1WA1aureKKUF8\nvVJs\r\n=6Ph5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.45a6615e3.0","@material/base":"6.0.0-canary.45a6615e3.0","@material/shape":"6.0.0-canary.45a6615e3.0","@material/theme":"6.0.0-canary.45a6615e3.0","@material/animation":"6.0.0-canary.45a6615e3.0","@material/elevation":"6.0.0-canary.45a6615e3.0","@material/feature-targeting":"6.0.0-canary.45a6615e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.45a6615e3.0_1587069174649_0.8939853719993367","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/menu-surface","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c5074038a7f671c4bda54cd3f5703a5d4ba07f1a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":40,"integrity":"sha512-EeyDIkciaR8OVOvQqWYTx4EYmggeisWkQ101B8NOGXRXKxbpS/nMMU6iV3QxcCaEmVLsYgEbqeO+9/f82O8CQQ==","signatures":[{"sig":"MEUCIQCSfxSCVZUBK1qMY0FLaqO07/77XQy/us6G7VUqAJX1aQIgQfgDR6lL7+fsWO2paZsiTCCU67o+mFVfPfcoLJ1UtJ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemeovCRA9TVsSAnZWagAAIHQP/0jS6sFBlE+3CBdlRTcb\ns2SiizZuzt6824dbiArY/ZPm+OwLdiydfzPa/O3AoHKqzbKBTXpbql88PJIc\n6XozCsHvaDNttB0vfCcAalE9B4mAbJbUiZTIE9KQ4TEkOuAUkffRiZM6VN+i\n2Y2vW6r+rmCi1OaHjy6TLkvjJ4PMVkaJXHvvjbfs3MABvYzx3EwyoZCYSHvQ\niCg5mnflQQr6xSmJ1u6iqN3LNichUctnQ923J8HBbbIbZZKaXDn3st6iQRMp\ncHa5YXJH1Jd22exq4WOeA2VdxQp4JGWGcJX1BOcLVBxNIVpHj+BS5QG5X7nr\ne3oMKjpFB6QxJfUARCcTwf35e7RyKyvm0M1P5cORdfRthRVpWjjFRfyDvNE/\nhtuQsUGlOCkpgQ1U5pjZr8JjIG7jiEh0lQiXXY/wxKfKQCbdt4WD9KxfHd3k\nsW5bKD8PqQPfm03A5XsGL2wtk50JboEXhKsfL9szRuXROF72XkO7GSS6nh2/\naVXJCe0DxEpEPu6BOo4d+1oiYsgTEicmrmkSFEK6/0co3n19N7y8i4pNqMDp\n/nBbDViRyYzeMdGdxUtGlZkx3lnV2NYHXabDh5sv3SbcTbBPTkDXiQ8K8jPb\nD/FCFkchkrrcIqL9xObDj35ZAj3OOWkeIx/vxjy9Rt/hYFUFOUQewQtErL7k\npQ3S\r\n=Vt+Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.4b04cdb0f.0","@material/base":"6.0.0-canary.4b04cdb0f.0","@material/shape":"6.0.0-canary.4b04cdb0f.0","@material/theme":"6.0.0-canary.4b04cdb0f.0","@material/animation":"6.0.0-canary.4b04cdb0f.0","@material/elevation":"6.0.0-canary.4b04cdb0f.0","@material/feature-targeting":"6.0.0-canary.4b04cdb0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.4b04cdb0f.0_1587145262733_0.22706072232525698","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/menu-surface","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b18e0734a8a302614c6f55e5aea0c332cab3fbc2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.b273afa93.0.tgz","fileCount":40,"integrity":"sha512-eTmxIlB4IdALxQ8tS+9DyP0vwzH8dCAP9MFNFblT20CboAu4DX82PstbMB2iiqKkumeEin1LFZ85ZQGkTITjnA==","signatures":[{"sig":"MEYCIQC92wclyiiTJX5ICoo+fEjku6O23qzYg3qo8RReoZ5yfQIhAN8nhUmq5zktnmZB/1j2nR6XiA2So5EklGGAY/WJcwjY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjWgCRA9TVsSAnZWagAA+0AP/jh9vQkgPQr2Q+cFWedS\nrrHTLsXu9pMtlKGIcwnnWn1Y3q3Pr6caG5a0vuDseI3SIFN4QIqi/qdmTxpn\n3EoZbkbJauX40woCFIN2pVifYxeQsu6cPqBS35OVdW4D+h1cvDQ4ehInY0WL\nNHQorbjsUYySiAEc6WZ2t5X1I2WMVTS8Ozgh3YXlYYc31uUhsXILvpJyiMoq\nWPJr2URGpm/Jle1BdX0R0kFdvW2XJKjmX5CnCtJIeMJrji2hoOad4tYae8av\n+LMlTR6+08WcN9LcEs8Ag0z82AQWeVXsz1uav04LsixvjliP6cjIimDGQOaQ\n7BWONt12Fc3cUpr+fNzp+kA4z100E9XjvZjVLWBgezPaj/RuRHX6honP66T/\nYxnlzBvAUhqJyr5ps5WSrxGw0+PkTFqXPusxAbYIsjD9rAyEy5UjbzrGo9cd\nhNo1a2w5pOfHzu6QuF3CYDFEBxTxG626ZOd93a1l+S+JaloqavdfkLgxIa9w\nWbwWuxQk3kOS/urM8Uz2Kv3YUXGofQ/eWibOi1hOYjojfYtrDeH+Na8aZ5/R\ndB4JpwnuGc4MNYBe2OypXy3J7S4f+snKHGsImmtpXIXChCnzCrtJNDaVFsoX\nN99LgXmjAWjrkVA99OopIA9mtKPxgtj9CmBUpokPGusP/pGpSxZfDBleBfYG\n8l/j\r\n=LRy2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.b273afa93.0","@material/base":"6.0.0-canary.b273afa93.0","@material/shape":"6.0.0-canary.b273afa93.0","@material/theme":"6.0.0-canary.b273afa93.0","@material/animation":"6.0.0-canary.b273afa93.0","@material/elevation":"6.0.0-canary.b273afa93.0","@material/feature-targeting":"6.0.0-canary.b273afa93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.b273afa93.0_1587164575488_0.6219381273558777","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/menu-surface","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"e8ec0bfaba70e0f84e2092e9f375c0eba35aac16","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.b70bc601e.0.tgz","fileCount":40,"integrity":"sha512-Oi0RLRupEcjwn8VWAj7Rw2O0wQOwgHzka8cc5ba4z6ERH+cbQoR0Zd+v1rO5qNaBa5D9g0Xt7ATVjR2X1BZsWw==","signatures":[{"sig":"MEUCIAnTF4WVhJRhn1WixmWJS/+c7MFVPcrjhMIU9zcUeiFQAiEAw7d5elLN8CuNn25n7SBM9y96mOmTTXeWuGwtdJuWLa8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjn7CRA9TVsSAnZWagAAh3cP/161lFHoe5D+un9sHq+S\n9bKEup38WHKLiecZv3mR4vT+8rZ9Y7RD2b5qDvZiNw0RfKJWjUyT6+kYC4MJ\niKzYFoD0ZUrFnTXQkSFVL78QMsTMDXHT8wlZsNnXLtOJp9PK2ES27tkOLi5T\nBtxStpYvdOFZjR8HwbxxGYHNdv1Wg/NXIGy59oUXlD4mmPf2ggHa1QWEEPRi\n3K670TtbW8svRCHLCtNSoHWxepW68+C4DVND5uuYofQTQZdRkiT6d/GYV+U2\n4DCG7wLEz+pqmmk/vZS8SGWA55w/GX1BjHR4GFh5b5Mjgecj8wutHrTYMnRZ\nGYYQyGqRfK8rsWgiZmfIvU+5cdcRVz3wk7ikS5pcTyea8Lp92W9+XvgCx8Kn\ngIkXRbVwXG786EG+cqiNEEJrbzvkqshsQotKRMgmNzvSm0d5D8j/Gkt5ol+9\n5DJqT8m0JocxfSbxC2cSYVRZTeB3VrfGtHEdg4CKue3tQt3+qZ3//2r27a6m\nQH2gK6ipzXDIhQL+icH9uqGFs9rtUxowTYvR4wW+syxiJD8YH4PH3oxZ1tsy\nhtGoohJPDQm2+UnsShRf8RqarRGo7Vjw8A9pJHkMym8CjIm0bk3dA7Gah2zW\nnjCCMoaqybGXU50ewKC3UW22iu+8wBfQn5eXvMpUd4NW+0baIA6ht9MnburO\nPCKh\r\n=/+Or\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.b70bc601e.0","@material/base":"6.0.0-canary.b70bc601e.0","@material/shape":"6.0.0-canary.b70bc601e.0","@material/theme":"6.0.0-canary.b70bc601e.0","@material/animation":"6.0.0-canary.b70bc601e.0","@material/elevation":"6.0.0-canary.b70bc601e.0","@material/feature-targeting":"6.0.0-canary.b70bc601e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.b70bc601e.0_1587165690628_0.7324462252663602","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/menu-surface","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"8492cd4f2653b63bc1680e4aae3de49ffd18eda4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.c4b4bba96.0.tgz","fileCount":40,"integrity":"sha512-nk8QCp91wXVWQxVxjuQl4AKzGYguHTONfLqaroJYEMYWFQ0UCYt/WW/z+cXEHgGeV+SRjlYXhG+4hX9GsTa3JQ==","signatures":[{"sig":"MEUCIQDhp11VP4b0AqET1AQeOnmuf6dLV3nKWRok5tKdgoF4CQIgRe68pfybJLK0JERKDtAys1q8eAGzUaque09G6wANQ9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkc1CRA9TVsSAnZWagAAfc0P/02rhi3qDBHYJ+oDubw8\nqvvi0X/J9dEG4nXLMrvJ/ZUkv2ce8GKlrWzKO+YmjTGjI03spAsVyRGL55R9\nuZGRozq0Wdb8srf69T2+kolnhoEpfgbMm/v+0YilATxrAtZAlFDCh5m4uMyQ\n3etQyFtPim34uylxmvpgcs5a1Ds0YwPEX9S4H5XZioHp9N+95VK8u91/oI6q\ns9yGy0y75NgZCqNNY5lOxDZymBjHxpwkhVfs8xbc7v/CRmTruVrdEluu7tsl\nwhLYnLZxb4OLRlC50FWFoDgbpZ01MTCHDSaa02Yp/A7RB+FuAXcNHL8d3GJ0\n4fiC4P7A8L2TjmoJQu1xS0hcx7NCPhAwUXf3xhKyE2nhgaHP2mplAXfW2pcA\na/jyvZpa+c5sYKtp0u3/FNn3KNfky0n+9jAcQKmiTNxHNqyTw2EMmd4MVCWI\nwy13Lntl5vR7thC54D4VnfKzwWgiPnF/91sBdOiyCPhje9OwFtDrg+UuOTRR\nAVzxu+BA4U80WzEAVhvicuzoZVjXdBTnYV31qU2l32khodTp2My1s6RKVpmO\n3UL0iDURCg1nuEEd3/GzQsTcWPgMif00wPXgvC3yxdtJ+9R28j1CYz4Kf6Lz\n+lIKDuRcgON5Tby29Gv8vQ6xoQFkuN03cU4uRrHT913PFOx2ZRhhbuO2WYNC\nZwm1\r\n=luzV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.c4b4bba96.0","@material/base":"6.0.0-canary.c4b4bba96.0","@material/shape":"6.0.0-canary.c4b4bba96.0","@material/theme":"6.0.0-canary.c4b4bba96.0","@material/animation":"6.0.0-canary.c4b4bba96.0","@material/elevation":"6.0.0-canary.c4b4bba96.0","@material/feature-targeting":"6.0.0-canary.c4b4bba96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.c4b4bba96.0_1587169076635_0.875482841837097","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/menu-surface","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9599399c5673fa7a6a8998fec82cba9a83b3ab38","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.6c1ebc721.0.tgz","fileCount":40,"integrity":"sha512-0vyU8HDZWJrx50ugR7D99L9LA5hhXrRhV2WCtbtMG6e5TaMxU1HzTqggYnhIl1Et5VIPtZW1It2SA5hTHLj+OQ==","signatures":[{"sig":"MEYCIQCa3VlaS4YOP3ICCG+002mhWEWKj7BJU++UlnU7iys9wQIhAImhE8//wowWLFf6kLgtgXLbPHd+DKgXKPfl2g+HLck8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf7dCRA9TVsSAnZWagAAbIIP/RSTK8QNveNfqccDPCNb\nqZN3y+7ES/2TNNBnsrNNeAudQQYD7Cm1E+PJ/mGfXW0W5yyiAfoIQ4Ki1MgR\nsUbn23BEriFTpYlJz/2Tnne7sCvrMBUThVMyFos+iGWv0EhPEEDqDLVeQe08\nu5Wv1WHM8WpHWQnmc2Xvdhgo9kVY37JZXtSooMm2DUymgYZml+LvffLH0WmU\nmSZc0AJFHWfr+PxBhGVZXh29GaebzPF5emJw1BfHzEtOQsigF9+AHk2bv5Dr\n/BgzAc3JzWO/T9dkn6SdH/6NybWIV3qax3x952J9/4rn3aJJnNSEGOuybXNQ\nJAPCgcOVVGExH1uDpBRr2H5Eo9Xw6Mb0HbE0H0zJU4mXZAvJAUhZIEoTaoNQ\nYrrV6WsqHRbrraaHcKmw4OkCttAQyL1eInvj+ofpTcsqMWgU+n3/udeQSR1k\nw3LjVNVYM2Ah8AC/i+QUSV9sjkP5kaEVkrZdS/hx3RMPlkr8GAJ+E9EsNeu/\nsycNXLYUw2Ywue/CG17hXwLjgZ7DG1zol+Ag4s5aEN/ck6ib0wrAU+yVda+g\nzJjzd27cnHUtOYzIggPl0YYmxqszOlS9RVCkKA5aCbPfXgZcU0qLhxB5YEYN\n9ILjJLQM1qEzkkXMFyhGCsprK1l8IQNR/JJZJUMxU+CwjljzQEvLkQPTRm7y\n/fmq\r\n=MAMw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.6c1ebc721.0","@material/base":"6.0.0-canary.6c1ebc721.0","@material/shape":"6.0.0-canary.6c1ebc721.0","@material/theme":"6.0.0-canary.6c1ebc721.0","@material/animation":"6.0.0-canary.6c1ebc721.0","@material/elevation":"6.0.0-canary.6c1ebc721.0","@material/feature-targeting":"6.0.0-canary.6c1ebc721.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.6c1ebc721.0_1587412700741_0.892529549102336","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/menu-surface","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d9fe0bd5eba4bbdc094b30b7d46fa2d42d2bf772","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.9cff4318f.0.tgz","fileCount":40,"integrity":"sha512-hrxYrua2HChMhlEIrGmTmwb3VxqXDRd1kSExcgCFcS6rDPgasyJtJxMy/u7DLhJkPIeZaigFHIm+SxKN/MBmdQ==","signatures":[{"sig":"MEQCIHctjEdFwHleclWZ2d+W8N3fWugoHaWnX2BzwTRaBMiTAiA5sW1WtJYznFt1lhlaao/i5xhrLD9Z+ED2Ym2w1f1Ykw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengxYCRA9TVsSAnZWagAAQPwP/33+PHmvhQLBnmytUdtr\nNRlXo6VfqeL47FhsPYUg2ry6wMU+EiEeL2b7OohGKeCgIJco8NJecaULgUih\ndSyJIVQ+l4PPAG4sDl/2XNHFLze9jAh63WT8t0O/3PPEQCAe3DzlwlgUCFAA\nkBEGSkSenAq/AvJX9/nm6p8ZXaPpu2LGg2VnAHkbZSjKdXgKkXAF57qmCYF+\nGGFS9DXvwkR46xr6efCw+HbVsr1YhlCTKXndKVthJWkEcwAyZrJw/hrRLUuq\nDwQqq4xVSfhqKWhofGb0DAuUD6K0E3YIM8yVTFnhWttX4Rqk0MsQ9I+dkTxx\nzRAHCgAqRmE7kyQ9KQHhV2BzNekxPTAItOYUFKabaIOapusYPrxbB7BkoQgg\n9hK7ZWg7EWf9yCV2Ux6j4YbjXMSeYd1x0rBLXgtXsb5JvZKFn/jBHJG2tt9g\nFarWYDV2U99I+2Hi8vFCJIwN1ng8oL9HKdiZrEXzLdHaZAuruK3PWcidSLAz\nImD4WnU0A936o1NymIM86wC+DWbnCQI06AFTidpFsVnoNA+yaYyUp5tsf0ii\nWrxXNt+SeluH7pNd4xeux1h9qFHVv+VnNNH7oy8xXRBtXvAf3yMLZRAtqJgk\nZLZhNbU7XcIwKOr7a7YQw2q01nnKYX9LqeK9RFVveMmOJ6WMLZPK1k1/ICHf\nSy+A\r\n=NmQJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.9cff4318f.0","@material/base":"6.0.0-canary.9cff4318f.0","@material/shape":"6.0.0-canary.9cff4318f.0","@material/theme":"6.0.0-canary.9cff4318f.0","@material/animation":"6.0.0-canary.9cff4318f.0","@material/elevation":"6.0.0-canary.9cff4318f.0","@material/feature-targeting":"6.0.0-canary.9cff4318f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.9cff4318f.0_1587416151577_0.8271177588637211","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/menu-surface","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"62ef33ca2f835e460b2ba786f68845f955e019e8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.7b4482402.0.tgz","fileCount":40,"integrity":"sha512-Ats6ecumVLUDSVzUG424TcHbiUKyXM1nqn1ohc1D7ZD9Lc4wwVVcs9W+jsqPfelAWQkw8aFRJ61+kQkklxZNxQ==","signatures":[{"sig":"MEQCIHJHIRLVkkn5ej9G0Nj4+AFQZmUC5SQZH1i8V6glFbyaAiBT65qPvHegtNytoJK11C9fuC/P/P0+pJ96KeN8FsC0ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeniAdCRA9TVsSAnZWagAAlF4QAKFf8BumaJENNp8pWbfV\nYbKVqqxQCUUM6S2X2PIDnUVupKMkUet+OdmDLK8TaWMoYhm8lLK5VxyxW6mJ\nvFODZhAJbg7b+gvi0BKd6lTZ3KyvCEKwt4wMc/Z45B7eacLPGz2igS3lDuKi\nx79SQ/w/r41aXUtMwlNHZ+Wyr20zTjbzBUObGm2UrYMHulRowm9YeBcre48y\ncionWgbRVlEA9kX5/yZGNBq7KgqXOBIV6sSiJWfRI5xRVIum619aOD2ILFte\nnkBQL9/uCgxTa2I1ZK+xHU8f85GuIZON83IwcZwsOdEL7GgD9RGUMJI52Oz1\nd73vDCQFoYyoH7R0MJCQSxpmCL69Sz7Bzocor7E1Ov7wJ3n76phaOdsTXv4G\nRoYpeWQYDiaH70q5SwHVsUoPsA1YP6lO0qNa6+70EMEWGAuuhVj3QmDo1x8y\nQBNr2jc/8lXnms7m8aIXOE7npJSbQWLXa5Me+fI4Yi/55WD8u8CF75gpsXyh\n6+ydoYR0y5j5zjhZQL6i2Wzfn6Kbpwtdm8d58txMltm9cg9/pAKmpRMKWlae\nTF+TSVBpzNZpSXPKQmGVeXGEKDilmATmFgPhoxj3gRKa/q/E56BvQYYuGSjB\n4kq+87FV0I6GWdHJSF4CW0im1MkHYVn5ZE1MoJUoYN9GVgQ0ANXcb/eazfEk\ns96S\r\n=7MV2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.7b4482402.0","@material/base":"6.0.0-canary.7b4482402.0","@material/shape":"6.0.0-canary.7b4482402.0","@material/theme":"6.0.0-canary.7b4482402.0","@material/animation":"6.0.0-canary.7b4482402.0","@material/elevation":"6.0.0-canary.7b4482402.0","@material/feature-targeting":"6.0.0-canary.7b4482402.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.7b4482402.0_1587421213187_0.2568419506327697","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/menu-surface","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4b02f84b55b65a7c437ff411be68b6b35f8fe57f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.deda86d8c.0.tgz","fileCount":40,"integrity":"sha512-cvE/bvdCzJdis4GLG6JVdYzIXs6br6NM/b/YUTtUDUlDDWaIIg9wFAivsHBkJ1J3xOPxEs0O2iWX02yeUMtqpg==","signatures":[{"sig":"MEQCIA5th53QtM7wqG+08l1WZA6uewIb9CwVYSGHnrCmr1IeAiAM4uptbxpXE0RqTR77gkXCrenp1WyL137s++eLMGbToQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkkMCRA9TVsSAnZWagAAFPoP/002MoIzLfvpOmOkr7nl\ntd260x8O/0qjRjGteEtgzqeQmH1YvP9v7t5oce2bmkUJeciBTVVdqG0rh/J0\nU61AoHHNTQjOoujU+GdYHKbqJ7vWqF+EUVZ0fYSCksy0kqCVDee3CbzJ3qF8\nlt2HE1WfcsBi6egZ7jadRVB4iiXG+QYK/nn3KpnXPB4Mc+C/PoePAvoKYpmh\ni6v/crjl4gkEf+a1VuCgVyb72mAezl6dnDeCYFgQRERwZPRF0dVjf+Ey9ewG\n9HdY/T9rj5ODSQOHqALTeGw2GnYvhBePslyaR3riGf6883e7ejRdb6eO4dXn\ndXGp9cwtozRH+6gdD2/Qzp00/hKGpv9pP12J5CS8ZuoZ+uKwvGpXLrwgZcy3\nDTLyXJIg44dmdPVuo4EpmSHOW553gxXJkcYavQT88LVPAjqi0eSYH4TMTBzF\noh9RgDsYyxy66YZU8pHRddCMj3uCk+KvDqJ4h7Rd3pN7zOdUQUNzkfB3JWHB\nblLNeVQuRJTiwgKJd6gI3x3YfURk+XreilB8O4Yh91s6/vjWNDF25OdSl04o\nFjqxCHiU3Upk+hoErTl23JNTe8JmB0iYp38ikuxQQnTUYEgZMSr3V33dcsvF\nzgiweQmrO7ySOQksvZsEHBRT5Xt4HYVGt8LeyviNNyet68L1gzzlE/YtbISr\nSU06\r\n=NtPI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.deda86d8c.0","@material/base":"6.0.0-canary.deda86d8c.0","@material/shape":"6.0.0-canary.deda86d8c.0","@material/theme":"6.0.0-canary.deda86d8c.0","@material/animation":"6.0.0-canary.deda86d8c.0","@material/elevation":"6.0.0-canary.deda86d8c.0","@material/feature-targeting":"6.0.0-canary.deda86d8c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.deda86d8c.0_1587431692510_0.993514483988422","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/menu-surface","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"3fb9031dbd9a62c164cad3a34d09a775ac8724df","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.d10412cb2.0.tgz","fileCount":40,"integrity":"sha512-yTYutpWHmbMK63zFm0Z5b4YRIJQ2gTGW2vU7Z0ZS+VUGnK5veCe9OB+afEb0u+NbOXD96Af0J0tPtOFn1P9PfQ==","signatures":[{"sig":"MEUCIF1lQDCPGWvPCqNGynNCdc+VYQ/bgtPYPdCzffpeB+9tAiEAvYMasPcKCVCF0HNsGx1IKSscg8s81OPv6MyJ8aZVrrA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzjzCRA9TVsSAnZWagAAvAMP/0bMyJGIl/4EfkM3m05/\nlJkB92ICmhd8xbejSexxzBEcEJ3DPHGuoU1UAfGO2v2gRCUVwED8X+Oxd+8/\nFZ5JJT1LHhvmqA3hTlu9MAB8DmzMLa64PE44G7T0NBjnhYRfwvv31QwiAWdu\nTiM9tTVNQSqwbu2P+JG97F2qq3IuWD1Iai4+eAFqYxuf68i56O8bLCfzmRLf\nFq5pl1UiqgGcNCnDkcLYEnC+p04h/fiB1ggh0f7yifC/pI5/4iwCo7IuEure\ng5XRcBBnn6aEmw/OeGP6Zp82RWrF5xaLv/HNTSCsPuOXSHi3pKd2baiZZvum\nSC4YhIGFHdNpWoMrdNc8dijYWOS1pPnSC7kmtKlYb6WM6xZeZXdJqaL15nbh\nMINSDMAKqzodgmVjaG2/sBfW0yIwjspkB8XlymOcBC0BXtc8QaKLxBuMajOG\neCJQvIjq8njNpxyXijI/uS5DY4uSFjcGIe+NURWFgVpRjT+3B9QLktrOPN61\nklc1iN92ej6AobW+cAfUJsI79nllNyB0xegPw2l0Zg58q4hohhkTeSaSZKRm\nWVb7lg8BexTAP0v0hEFXVq1qc6GAt4Xn0D2eEk4s+zR3dW5gJHV/sCKS9z+r\nogJPOom4JnoGALEW6S09Y5ug3aTyigFu0RE/APa+DhWYWCC86EhwsRm/bIOB\nGcdx\r\n=+DSl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.d10412cb2.0","@material/base":"6.0.0-canary.d10412cb2.0","@material/shape":"6.0.0-canary.d10412cb2.0","@material/theme":"6.0.0-canary.d10412cb2.0","@material/animation":"6.0.0-canary.d10412cb2.0","@material/elevation":"6.0.0-canary.d10412cb2.0","@material/feature-targeting":"6.0.0-canary.d10412cb2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.d10412cb2.0_1587493107101_0.48762942077092286","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/menu-surface","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"506f72eb0cfdc5a436bdd679879ca0394f8e6f87","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.c141801d5.0.tgz","fileCount":40,"integrity":"sha512-GkEjuyoOs+UETxFeFFmv3xDPnV8eB4MUO3BuXzdgC4A3fG7oGOHu2yGtpUsAWHlwC9/I5Fl1UCkaOP0UjEuxJQ==","signatures":[{"sig":"MEQCIBesVJN/vC4cCjCJH6Oz3ZhAmo7J1h7wfKNekbmXMUcYAiB5CG7PnaM79R2u8k0app+8V7avmywJ3sRWKF7fOtYejA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0yFCRA9TVsSAnZWagAAxqEP/3v0gyewYPDttunAhEhE\nj/1VjJabts+tKFVHnCH9tDZzQkbKGUjVsVncHDpjCi61ZpljKsdPPHxSOfkz\nVa3NcPfsR4PamtSEZmAwUXon9Qy/ase5EKnVj78bibiHSPP4fXrFob4adoSS\nHk+Df46kkL5sr/PLAlzbguunMQ2wckWOT5tSp0efj3vgjtvk8MdLFBYmlg8l\nB16kuQv0MDX21YOsBZiBF76dfcHdirr6TpATL9IBCSQXqdYFJnWQi2AG6TGn\nKfZIzmLIvNZHzW7JQJY0g2z5u0sRku9CNyZdsjIvPzt2stbX0AlZ2wGMNhqL\n8FHx7S4/bv6GzmtiPI6WaImUMkCT+GiMHG83ikItc5ThBZXV0fWAU81eUDL4\nvpT7Wf7b/SAe6J6sztButYIrOBkKFJqU09DjEc+3aq6OV5HWu3uNOfFpnh5R\ncI+UczfLFbLQT/5vhxLUk6Tjp5DByPhTTaC7+XKxuc1U+wadpKCgUM4iTbvD\nSQfeHna0vQqa4U09y8jJKLO0AKHB41rt3iVSy2qhHPZrMk9amBX0334q15Cb\nUKZRlEKbZ5zbgNT5laAobrEMKjemUKKDrt1Xif/kFSyACsAG/D49IvBp8+kw\n0jgVKjBDgfwMd3T9WqzhyWE2Y/L2IRlKlaxosqRpj8pIMWyaMKE48UdmoZlZ\n0+hK\r\n=Bai+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.c141801d5.0","@material/base":"6.0.0-canary.c141801d5.0","@material/shape":"6.0.0-canary.c141801d5.0","@material/theme":"6.0.0-canary.c141801d5.0","@material/animation":"6.0.0-canary.c141801d5.0","@material/elevation":"6.0.0-canary.c141801d5.0","@material/feature-targeting":"6.0.0-canary.c141801d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.c141801d5.0_1587498116502_0.6354074206924265","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/menu-surface","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d08dd920c0b62a417adf0bf9c8ab0bcdced0eadd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0-canary.28d10a96e.0.tgz","fileCount":40,"integrity":"sha512-28v4FfTNxzEN86/01nUrfXIEx70p8aFk41EDW2kCSc2U35Y3F3+zovm55WIZDPaaXq1fQAxOKv6xmc5G8u09HA==","signatures":[{"sig":"MEYCIQCYnygzQig0dOUs96y36L//BrH1VShyvrFUA+sADDklpQIhAJHNt9aFW2kidYaNj5qsIhQWhVekGozQQLvxdx6YlaBd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoMAPCRA9TVsSAnZWagAAqRsQAIHRlWl6Tm5IVT1ZPesq\nkf9fmNBFm0NcJh+pDey11Gx5Il5Kgk1nRE7arFgrx8EYU6aiff6CknieDXtL\nmLFkEYgHcw8/V/ah0liNzX4c0fnUZP1KdYDoylErRbAkrDM5U4AB4+OJRQCV\no5TrvU+81Mdaq58wYCfZbk/PIjDYjb5AHOKZ/uPFxDfC/bNJdM/WJl1oxdOv\nnNZmf0ambboysHEX/yGAt3vOJd4E0ZO1sYzcyOEPJXhBb1NwzG8XEHvnwDMj\nNC9Z9p8fl0b9n37Di3+ZkmUYCYjg7LEBnR4iiciF4KgsuwJ9JBv5SOM9Auvg\nDS+oNtIU3Rg8hw13eyD4SXupc8WMZ0UOdDRqOsXWqXNkSmA9raJ5jz1b+7I0\n/86fFY3BzNzV5598hssMM4jI6+6NsQHCPnNRkp42whoGxOBN080bgM3Q14bC\n+MLLqxIrH+mmyBm6EmqPZLP5t37p8JrbLP2xSfxgG5rKVaknRYELYykrXPvV\neuu95PLuwIPmVz4LHKFKjbU7eT0xTE79Q2Qk4NAajQKH0XwG/DHZaEbHQyXe\n4uXvYNUCehmwCbSeVF3kp24uKq1L48OlRWOk6TtSq6v/NdRW2L5VxnaviQdI\nDR4Ms/ayC5RbqcWwDPcO91BDX/tREVWIHznCCHNIw/nDjxj/DbZL0eIUxHvf\nLAJu\r\n=IDYC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.28d10a96e.0","@material/base":"6.0.0-canary.28d10a96e.0","@material/shape":"6.0.0-canary.28d10a96e.0","@material/theme":"6.0.0-canary.28d10a96e.0","@material/animation":"6.0.0-canary.28d10a96e.0","@material/elevation":"6.0.0-canary.28d10a96e.0","@material/feature-targeting":"6.0.0-canary.28d10a96e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0-canary.28d10a96e.0_1587593231364_0.46681503229521426","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/menu-surface","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9ccd122e7ebdb9068afea7b4fb685b15144da5b1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.8540808be.0.tgz","fileCount":40,"integrity":"sha512-iGaoJxGJuPrYyChVzEw7mMwlKG23Mvh//k6++YFw/5oW7gw+FckNaxNEJq1FtUEwwxpwT54YNJUVz78q9ox7vg==","signatures":[{"sig":"MEQCIG47cLdMkpW+N0THMUrHhU3EG6N9a7QAF71m43zShBs1AiBWPSpBJCnjqLzeqdaI7/vteg2kus8nEOjY3i83K0JueQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc+nCRA9TVsSAnZWagAAO9YP/RTFZXvCDnqHPnuNnZTm\nha95uWB/eEZS1DBmvPtBC8swprHfgwHdOMgD/ui+9JwA0oaqo8H7YUHw4G1V\nwlq9uy0ETF6+fpgB+7NMCjKHkXcQj0l+oiZ3H84bE+cE2jAauZ3qZd9QmwTt\nuaK94hcxUrKhnmiHVu+uGKbDRX0KUXPBXUnu7sk9Rk2NR6TXt1BG2EtYYqG8\nekwLTrM8dMBv1gJqUjK+x2xk/hLu27bT6MiIlMeF9WXfXycW7NtO5YVysjKm\nIiSgiUSb9F0Fss/Q8vUqJA2uAS9HmAtl8FSq55HVzw9DOV5ggZvxcE4VndEs\njO5Th9FfioMF9Hu2QxTEuZplLLARVQYOnkPC3e7p/71SsXgAZ82V1L29uTjp\nr5GI3AOFUFy8O5AwFItVb/QQTbRRkKyvuSmv2GBDcqSqSHRBPJvGhSBeeaB7\n6Dpd9qW6I2KDICdKwPZikmki98Su/TZAaWt4eIm6Pdi50iHy1ADMYAFnsm86\nW5fbF1nJ4DOf1yiohzsbNAl4i4f4ol57f3+5Co0n20jOGBk3CPos50IMaPYI\nbkBC9ubQ7UkBW1aPsLkXKlJp9AkRi3xDPipUEjwDNcetceKuL/RioQKRCuRk\nPfieWfXlBlxb+SYtTFx50IVFs/zWVxP5nAIMqiHfX3WxtHXvgextQOykWLVq\non54\r\n=gpVQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8540808be.0","@material/base":"7.0.0-canary.8540808be.0","@material/shape":"7.0.0-canary.8540808be.0","@material/theme":"7.0.0-canary.8540808be.0","@material/animation":"7.0.0-canary.8540808be.0","@material/elevation":"7.0.0-canary.8540808be.0","@material/feature-targeting":"7.0.0-canary.8540808be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.8540808be.0_1587662758487_0.06747336131043236","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/menu-surface","version":"6.0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"aa99e5ecbe118a624c65157804fc01823cc0e7c2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-6.0.0.tgz","fileCount":39,"integrity":"sha512-Uro50xxVXn8lgesbHDlfc1yibr4elHf1tdmFv7nZMCzmDWtP2XBs47EpSzkDdf3LpTHZrkAjs7h0HkKS4UxyCQ==","signatures":[{"sig":"MEUCIE0RVe9DAmhdV/EfcuD6iLBkJwyU4fUXwmOFyBsDGTbfAiEAqYOkOpji0b0hM+PVhk2fkoeaJhVJQBPDpRsASRQpj7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc/ICRA9TVsSAnZWagAAenwP/RIAxSeY12bOr0FACQg4\nYzO9TQFd3Bfmp0GVlzj3ypIMRZDJEkXSo6+J8HD6zXWPYatFL3wk+oqzmOXP\nPH+pkVqEHxFcg6Wu3Qok7UR+TJvCZQZ1dDVs5+PzcF5rsISpwQ69V5u8nHEJ\nwyCz5CluWBtxlLplATdVy6v+EcvsqT4nHczQrl50lkRtzXaNGHi0guX6Ezqy\nrcHSZtQVcNSYkktOvbIU200sXmgc1tu27ncPhRf5Oebi9xL628d1BviJspzI\nxv42i3i/N499Yva+pgomjFMZTFfiuF/sJWPZqzK62tc5b3kS+H+69J9zxRRC\nIahAWr0PjU55a3fwGETh4KVHnNb3slFvWKmGxXCX6nQezqKap1HTwYfmXAkv\nmfdo2NA5uAGn0sghvIW5zCqn0wA8kMKXdLW2DrdjtviSolUu2t6WPDoAYyZP\nc5XURJSR++X5PleUqin7wc9Fjk4BwaRLoEDeSidT4CnKCJArhf8HLGZyafDd\n0Rs0g8nI54DguQFZaFSCHC80DNHaA8j62CIZ4HIKPsLGgOKu3kH0o5/iMYtC\ndi5seUmaDXYvjIY90cG7WgUtvXavbpsmRETQNRA6ReKoTAVARWg/J2ijS3n2\nsuaOk2VmwD2XCW4shtxauCSlhKFTV5qHElSFo3laANPv+tseBc6WQ7GcRdHe\nVFy8\r\n=skw2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"^6.0.0","@material/base":"^6.0.0","@material/shape":"^6.0.0","@material/theme":"^6.0.0","@material/animation":"^6.0.0","@material/elevation":"^6.0.0","@material/feature-targeting":"^6.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_6.0.0_1587662792150_0.927259884817915","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/menu-surface","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"82c79a4bfee816564538f6171caa7bee1e9a58bb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.2673adb74.0.tgz","fileCount":40,"integrity":"sha512-Vb6K1kJrMt14RddI8kU5vyyB5/6aG503NIGas1R/NzbTxfz2tErCiEmN2xPSEoj+2zvm9wF3C5MnsSvWG9EO6Q==","signatures":[{"sig":"MEYCIQD8G4wdX8Xc3ISUSCsRX+5TVXklRS40Lv4xyTe4zrNrnAIhAL02bpmmoipgDzZGQ/nJ9z4De59+wsPybOljXuYbW59B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohqTCRA9TVsSAnZWagAAcCQP+wfDU/0HReJwkJ5zDKYL\nUtu8qYxOtfUc4AVqyGa6wsTmQksvvXc2GnDsbClMfflKBrTjqp2CxtSR/ly0\nWe2OgMCoRWDVVoty5oQgQ6LMhmedcCrWp9KznoijmOLlVhqRCZDlPA7vcKU9\nLMcSMHw+Yq1n319MKxm9fd4Uc6hB/41OaQrPJ3/FJOwFyHElz2unVIikaQxx\nMdx2ypedpcYV/NBPs2T7kRSDATy/FFcl1BLiWhMjW2ubaM97raW/ejZnle6y\nAVRMtXDiRlZc4t9Lz1OrPoyM4D45cPbP9riQOzNZqyjA5a/PP/2AVUSCLwIB\nQrBvv0ob9+dOOGBvF8k6oFUK+N6uyYE6HQz6KqC6YF6gdOhFCvZwkMyTg6C+\nl4lVq0KGJiwzOa9ynvJCWWgDKnwKrcgoHM1j5P1MiSlZk6uCQnXXnpTB4LRy\n2nZHvXBmllN2GUkJH9dRK/iQLgHkDfixgme1U3Fkcq/0en+UJH1l0NJw1ZfW\nUPQ1JH8rBHC0ao9nn0afpIT38RIsGQJIfjI3UUtN4oQpzy7YRotlgMNXatX6\nLG1zTASRMARhLRQp2FMeh9RvWZ96FMr5S+BvXV7seT+Chw07WlgdgI7nE+o6\nRFUxTfpbRxBcHaBHb40hsSnZutDbLsEkIVEyapnN4vXeRsX5yO4toz6FWmrg\nannc\r\n=Tz66\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2673adb74.0","@material/base":"7.0.0-canary.2673adb74.0","@material/shape":"7.0.0-canary.2673adb74.0","@material/theme":"7.0.0-canary.2673adb74.0","@material/animation":"7.0.0-canary.2673adb74.0","@material/elevation":"7.0.0-canary.2673adb74.0","@material/feature-targeting":"7.0.0-canary.2673adb74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.2673adb74.0_1587681939293_0.18234777619551124","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/menu-surface","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"e992811b648efb85428cf300108899b8a0fb7f4f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":40,"integrity":"sha512-sIRiUfam3ahptcykkxj4xFnHxoIbSYc/huhW7k621Wz+EXSU47Pckdh1/uARsAeNDMyPnADiUldFtdCECNliOA==","signatures":[{"sig":"MEUCIQDLEV3mmT70dUcKUc6KEB55UxdXUM/Bw5CYsmQlDv/u9AIgcpb/sRMbrjN1tuLld7kEvHQlTyvV31Q5ttEOdy303aw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojD2CRA9TVsSAnZWagAA+OIP/0/rkFLiKWcBUn7yYSis\nC4EJRfeE3J1Bq8Vk9WDzi3tc1mzG/4QvaaefbbGm4puJfuVPRKHzR0XzeD/q\nutPVynUfK2Dubwd4GjYzmgAUWbkHybaFhN8rl4RQrXCFSp/+uhpZ4+nOA4pP\nweH2sGAr6Quljjv42f15vZ0/LqkplucBAraKx+a2Mox9dsipRk4Xu8gLdGMo\nubeojkTEer+MaS40ItS6+FoNnzlcRaqLsnyyTF1s7Eui5psQPXZdAPqo3HWZ\nfi8lYzh7GdLSVRN0xcsEfn+m323Rmrw9jsPgxJhleNyAX0YRTgWBxDyPl42y\nE447DPzoeFY378r+qA7LuP5DG3E/ErHnt1e/xiDipXkADV+eB/fSVxHwHhmg\nwlCcKyR6CM6APBIz9WagOZlK2utt1aeEgl3F+Euj0DBQeiW7ImeReztMJTBa\n74TD9CNaXN/trfRFPmuL0v6ixM5dHmJJaF+B77gWw5Um6RJCv7AQlh+1+Ndk\nUlyjjmoBnTqmh2b2s/sBd2wZjr4dc7FRzBmeItUil0VH9GkGuLHHvexVGPUz\ngSpe3TYzm5cj7mO1lD2YIXna1/JDpPTiqoVd+vI1+Fj1dv2a8a5xB1iUAAxc\ncKEMQBuLtJoMKH3ulPsLaay9v/FVIAXE4G9bml//KXecB+l4vnUc/PRm6R1h\nyG0D\r\n=rAZ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b10d0d7f1.0","@material/base":"7.0.0-canary.b10d0d7f1.0","@material/shape":"7.0.0-canary.b10d0d7f1.0","@material/theme":"7.0.0-canary.b10d0d7f1.0","@material/animation":"7.0.0-canary.b10d0d7f1.0","@material/elevation":"7.0.0-canary.b10d0d7f1.0","@material/feature-targeting":"7.0.0-canary.b10d0d7f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.b10d0d7f1.0_1587687669749_0.05723714730478546","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/menu-surface","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6d958600a68f02ee2920a8e96fbc47322ee322d1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":40,"integrity":"sha512-ymQFZlKNd610Wyv6f9YH1/OQVePWwfWPI6lPVZLc/jeKsu5uBMlDe8W2aphbQdhhUTRw/vgWtL97wp7ZevksSw==","signatures":[{"sig":"MEUCIQDsYp1aMPNOZWzo5FQ5r5Bo5jW7n7JfJNYTWrKA020jwwIgeQ6+XP53Eg7KX+cwo/LDMp5iSpk6voM6Rufxz1+13PE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1S7CRA9TVsSAnZWagAAl4EP/0c7aHLam+dUWJ1CjHfq\nq7CXVKNkesV5gM6rckxKkBbzGsIWVptELY88fhsKSD8w7HJQqRJWSs8O42WF\nrbJvAARfSPrGPzZAKpQYTlPznOkwWSAXoc0b9uq2GlNaGPV/gy8UX6kStbRK\nefv2s9nreOqGCTDm7PGe9MpkbhCquc6ckjMGMqaMydLt6bHR85UaSwykoSry\nGbHnqdSD6+bICaVumJA6bQc8YTUzd6bXTXyrr4jk/jvh6q3kMPvpLK4eO6wS\n/7hy7EYg78R9TJ8VQvgABvCg+5R+kD7PRwEsfQ6dO85/NqWrp315sLlRNb7/\nLeMeGq3YkPuy56KJyxOIz0djjFSrxleDA+1Ga26/jj3Tm/w7kMIHuImV3qzh\nc+hvLyIqmrW1ZwCPR1VSa0etRkZhT+TQulxwAy6f7wUcwsaf21TmSKF85/ZV\n33QAO/dSzY7jf417wCOwIm/bGGQ5xZSY657IM0VUXWyEPsYLJ35GecCJRNdm\niffYckQQa0xrZwNkJQDU8E87P3rRQ5rE/lamocKHzi5lHDOK+U/9IOmT4LMR\n7LHYnttUOHXsCNsPU9kO3S6ZhR2mNOddlrYBovmfBboI/dnE9JutSeYaluun\nQVQKm2KLo3d95xdDHSMWoEBlU2uTZuEWyzG/cvg5kr+B1VaEDATBti5RK+L6\n8J6p\r\n=qJMT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.3bd8c1bac.0","@material/base":"7.0.0-canary.3bd8c1bac.0","@material/shape":"7.0.0-canary.3bd8c1bac.0","@material/theme":"7.0.0-canary.3bd8c1bac.0","@material/animation":"7.0.0-canary.3bd8c1bac.0","@material/elevation":"7.0.0-canary.3bd8c1bac.0","@material/feature-targeting":"7.0.0-canary.3bd8c1bac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.3bd8c1bac.0_1587762362680_0.4784338909372452","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/menu-surface","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9f01b433116d8a28422f9ba979515a2f2f94bc2b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.b83c8dc22.0.tgz","fileCount":40,"integrity":"sha512-GaJapYxwQZ6QheMfVXD3vwwSsZpcxmJSuQQGzaiKC75IAiuftz4XszjPNpMvKliev+2is0oVNctVZgzLBbZFHA==","signatures":[{"sig":"MEUCIG1SuFqSNCuLFUkxUAsjXD5SErnV4Aapm8g3vBvBCDtwAiEA8B2At6wQZikf4BcDx9/wtEpPzJb8pjdmo8ggBC3QQgU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":332581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1e7CRA9TVsSAnZWagAAzLcQAJsCBn+2MN/FyyZRo5Qi\nvrCvFlGStS1w7PeP4wDztXloGI5Kc0rhWSwWkvUDvos/hiH91Nf6z82tvAih\nSyWTtvNU5JfObvErgKaSsmRNdCb9I15ZxBvQx8jUsUiWEsvkrKUlaQdwl5oM\n0MY4m6IFnU0J7hSmN8csO8RfftFH38rfgQoVBPBykIIHfiruYh0rRoKmqsiF\nuCNnNO187lum4rxKoGT02vtblUOugXvC1dv2C3Egi5lDHJW82hNWkwElPtdW\n2Re+nc1deuxlDPy+6N4q/X2aigEnznpmEIkrjwScMVYrL/0nZb01AF0WCKAU\n3sfSZNH/er7ZnbtH/c6kUk86u3dOXhLg63mHtlUSpFZ0TrgAb/aePzxv25dE\nrso+MFiGiTB6+5K/awlgGqqfjEYIKhWR9j2qYbLNdwHHhL4doWZESOpkU5Mr\nNm7m8E62izWr+8dvfBXWYYohv0m3NrWfnKVZtEtBjHQoQ7vIZaI5oyk3VGye\noFnyzVUIeyhFonJVpKAiFJgqGHd4eiRbOrEOE0O5Ir+2xSPF/RN9DNwVdO0x\nc4OHv9OcNSLUkZk8gNOTxGemv9jKJAvPGZmvc5XcgruxtoMsYOgPGtPqRUQR\nfNQxWnmVL0/UC4vK9F+0WQwqchBpTuZ8feeev+Ud6TTqxBDnVaRVzyaUb/vI\n+WFm\r\n=vZP2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b83c8dc22.0","@material/base":"7.0.0-canary.b83c8dc22.0","@material/shape":"7.0.0-canary.b83c8dc22.0","@material/theme":"7.0.0-canary.b83c8dc22.0","@material/animation":"7.0.0-canary.b83c8dc22.0","@material/elevation":"7.0.0-canary.b83c8dc22.0","@material/feature-targeting":"7.0.0-canary.b83c8dc22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.b83c8dc22.0_1587763130854_0.42443052869917053","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/menu-surface","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d194c681bd8aefbd3bf65aa6d8fd67827d706071","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.1b3dd846d.0.tgz","fileCount":40,"integrity":"sha512-titmYFLAkC7IR5cW7FJ+U0zkkB1EehYgJgbuUPedWHWT59FygJHMJyg4duu6Nv1V4ypbbX3mGOrMMuDMIVU14g==","signatures":[{"sig":"MEQCIAdpEIUm5SiOp/pYKSQXyIF6XBxXIyKdT08fYuDlSQX2AiA2h5STaNuNodEsUftAhqkBoSKXygJ2QW95BJ+K/4g8mg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4fMCRA9TVsSAnZWagAA1PoP+wURSDqpb++fe0BnCeIW\nzJMhi256KdWN3ED4m9nv/JrrkE686VglFHUZDJO8sHsYvX3asjY857Hq18bI\npliMxnJjMs7Z7JSkvRfSfGv7wEbDtvegYbzj0FNquOMljzy3KIQe7ObgiSiV\njwCs1EG5b9iSbdUiHJYp1+CfqlF29Ht9tJqy0K0PlUmN3ZoMLHnTFCApH3PM\nIgpH/hkFXzQQ+Tz8BeG05eHEamLEObCvY0r5KV7304JiD5WN/aSeXSNVLKiO\nnsuaVKGm69te17EKfPmkOhE6BQd8dS+FIigw8BFIGftsnln8A1s4QItvIxKb\nKBcevLjV7Hu1jFHK5eQGQS2NKNPR82Pky6oDFdQjKYxYYdbBu5gAq5sQ8ueA\nl06oVsDAsALDmQYREn/aH9ayAEy+W5FqvIoJ4JwG1NydwYokKkHpQ4bvIQOn\nUgKNGFmkbTNSsKMHJ9Sn6cbmhgm/985aloHY+EPCGPlyP2vdxqUfM87bnzJ5\nqku/GMIS0JbueC00GbeCuq5uLtEAPuPG5jp3sBb03MGbPJa2dwmFhY4Eb3h1\n23vjsdRyFvdvzYypT2LKMPK+5EL70OwXxF+ZB3gc7VlDnhU+iAAhN0Vq2dBE\nHTRkw9VhBtq5rVNyv0o8Psleo9rCZ6KZEEC/5VJZX+N+yHniQKGosb5oXWP9\n4b3Y\r\n=kItq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.1b3dd846d.0","@material/base":"7.0.0-canary.1b3dd846d.0","@material/shape":"7.0.0-canary.1b3dd846d.0","@material/theme":"7.0.0-canary.1b3dd846d.0","@material/animation":"7.0.0-canary.1b3dd846d.0","@material/elevation":"7.0.0-canary.1b3dd846d.0","@material/feature-targeting":"7.0.0-canary.1b3dd846d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.1b3dd846d.0_1587775435788_0.43994518987427655","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/menu-surface","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6f28fb8564688c97dd4c7afe9e7f231de5e6c389","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.29debfea7.0.tgz","fileCount":40,"integrity":"sha512-7Wdh+vc4voS/3ceoWspdhYLxh6Bj06Snh38PyMn4SeVQlg91pAicx4a+JkWS0WISAh5tZ0/O0/f6IGh6V/tyoA==","signatures":[{"sig":"MEYCIQCsLNjstscx7G99qIPy0HY0+eAYIHdiIkEDxENMvqsxwQIhAMyMLELRy4wGGQD5hP7zRrfKZs8zOKkDXWtmQGNg9s13","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptDLCRA9TVsSAnZWagAAS+sP/1CTJ7mFTO1URcH9l/1c\n53lud4KOLbqFbdFoBagaJBPSvb0gnU21EOHe/jyRIQB+GrxqjdAtwdyogS+j\nNcjLg9/lzI9S3MO5VWwJQOVFGmlS+Oivw1pT5+XBzMRhq/uivMVCS8WTwRF2\nArHCdf6GjTEx6x7LiWDWiB/InuTaqN/ywCLP1E6uVdpXoWuL8JRxEAEVuxA8\n/x3Q9doy3BPKcWNOkNMh7C+O0/MdOnUc3IldUiSO0gqbzrSl93Nu7VIM/C8V\nK1Rr18Q87b1zPLI0CscMxbDyEMSLbTCsAOwgE75HSG1DQLIqckdysOBvw50W\n6NN+pEb4MuvYcjjxLb7XGYlw2XdCDuKoYTUS+EzHQq4GfmvSiR4w6r/11r88\n+qPNW7elOghFvoKuQwWugkjFRxXAO0MXUTn311bdN6mtIjGCBOIlfL5PgVzn\nC8R0ab8StfRG7Eay16hWwzmnvZrfLySwSZneMlIxv6r9Q/kKight1CpeA3Cx\nRhN9sCnBPfOsdQlLRaUMyL+ME2H2/9J4dPotfzUA+rRNY3h4LLax4ncy8tRw\nvIM8axvrD7cDmLsFZRJvBPfZPJMi8+7LIR87953jjNsUoFoFirNztntb/SqT\nCK01TFsH5uiij+EGOc+DedtVLVai0Ss+uqvAKgaVwA3RapZOS4IXx3C/olzf\nTaMN\r\n=U7JK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.29debfea7.0","@material/base":"7.0.0-canary.29debfea7.0","@material/shape":"7.0.0-canary.29debfea7.0","@material/theme":"7.0.0-canary.29debfea7.0","@material/animation":"7.0.0-canary.29debfea7.0","@material/elevation":"7.0.0-canary.29debfea7.0","@material/feature-targeting":"7.0.0-canary.29debfea7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.29debfea7.0_1587990731501_0.4992920310456497","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/menu-surface","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"465f674d69d5dc738a1dd56bc4b5c973b9eaa5b0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.28d32f8e0.0.tgz","fileCount":40,"integrity":"sha512-s5V9Fx0XU0BVrLQy/tSR7GQuQyl5Sed/N9mpUyV3ZQAY1AO7Re0rlkxz/ruiG6yDhkGX1h7udRbQ3krDyZZKKQ==","signatures":[{"sig":"MEYCIQCmUnlgHILYYXkw5reUsXocJ0yvYSickMimc+uBey00uAIhAMBipIZHXypf1HBfenYBPrACLCRUc3GChtGFgPeaYAQq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepub+CRA9TVsSAnZWagAAN2YP/0IsdFzhNXAk61yCszju\ntDc5qs1FvKzZKqK8r4CapVrrqNk5jkhhodFvvQ5W9aSZTFpiPcKdaUQ5g0BJ\nRqQ6pQvuTfFcX9d+0WhooY9lUhjY+tHYb3Pa8zhGsm6yfqOTuANKEGs/KRLT\n7bnxN0V5qTa2DFW+yGiRn8jvnoyBqEtS2yenWzAl3FWpczh5Pxf3bnoGbkSn\n3c3qh0B/DJxDExmg1v+LlCNCgMGATsDchJi8j9yJrP8XwPlsMEqcMvGN0eMX\nfdNM132IsZAt/pWr/GyU2WsWaqqFi7CXe3Nnu9tFiFFvF6KeZPLiV1a1JvHU\n8yWSYosOVvBYyB8BiTuBbN4aNEeggFIW1k/ivzM1v4vUbBBVCtCFJMzh02ye\n1CcSuwxyjjc6fMANYzlo/Jk8XkWucuijsWOSJ63PCQfSFJljiECQVfo13xZa\nrWnvX4JYhBMzqttIpIpyFcAdLAlkf7X0pvMt3715kHbuQhisSMaMF2ZJ7ofC\n2+P6U4LNPP1nmZ7LK7G9fJVC/QSVrGvkPzN8YGHQPacJPgn4gLeB72c7R6D6\nmUKuAd823WkjG5mcJ/ehc78EGj9ewOkm1Jl/3+cRmRlYSsTNMqE0K5rw/SJh\nl/lnKNUrsKYBnV5b0/V4poX/EKiK87BylMv1GDZIWPtZX6Jfa1C+oeLxShhE\no834\r\n=QmpC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.28d32f8e0.0","@material/base":"7.0.0-canary.28d32f8e0.0","@material/shape":"7.0.0-canary.28d32f8e0.0","@material/theme":"7.0.0-canary.28d32f8e0.0","@material/animation":"7.0.0-canary.28d32f8e0.0","@material/elevation":"7.0.0-canary.28d32f8e0.0","@material/feature-targeting":"7.0.0-canary.28d32f8e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.28d32f8e0.0_1587996413660_0.4491772077129452","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/menu-surface","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"1f8573e53478d62afe0bd0cf2c90a51a18815231","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.af71cfdd6.0.tgz","fileCount":40,"integrity":"sha512-MVrCFpBLSgxkaOUJv7n4Gjmt5y/jG45k+UM07Kfd18YrkWSK4YzZHW+/9B/V7GpfYTZs9VH69NEJSrcwGRa2Uw==","signatures":[{"sig":"MEUCIG0lVyVDg6TQJeqQpZoE8TZ69M4OHuyn3P4NUjbjmR7yAiEA0/WWoga+XtfWZnM4VQx5OKRgU3spN3MT0gvut+vFhjQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLmICRA9TVsSAnZWagAAh0QP+wf7eO8n7T166H3XXBFv\nKuRqcKUkceqFNpTRHW1/83nEGVIfoc/Qv5a1k2rG84Z3k5pQy+wUhhZJnWj/\nB1DSq97DsdL7onfYSrfHZr/x/CZrcwaRw8dngvmgfMPkQdBiVWcA0zh2Z2VQ\nWiq8QRmMH/oqPYwjEIzAewDybWl2dK+4Qdy4i/uAw2MKcmNLc7ICod/jdBth\nXHf5fZ9Cgd+0J8Nh6nK+lx7mgl4xZb+1xOU/wuW9XObqAsKIehnFPCO2HuQR\nyC81413L1reF+hFN9bocR2hnuhFy4Zmn110QCpmZXQwxEpKd1gsAkl7BlrOU\nZqq3KcwFM1BwXi9pYxlZERluHGaTiOw0/RHEgLZiZYtS3cqciW7uk2PwkbEJ\nZUHnseLEKT0trWXzvn2sEtxPu8Vj+ARaKOAcxW0Is1dsnC4hDhPuCCe7ldeu\ntoRM+l+MZanJd9QtMdNq4kSSm1JYnVhzxxn7YPyiep9U5oXphI2U/1iRlQ1R\nldO+CGtAeFePm5MVxi1kXunShJpa63R/lakHEzOBPIc6PnAcePnICIWk2xOU\nKb/QjcOkG5pEHbqJq352snXiUxHPP/CQK/zi2gM0OMKPBznadQJH2uZ0LgHn\nQ2r1iQh/Bu7ZKjFZLhJG/g4vhe4hVB1/I68mL1sv2p3K3+pAXOfhYRB72ZEl\n1Sp6\r\n=Kh3t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.af71cfdd6.0","@material/base":"7.0.0-canary.af71cfdd6.0","@material/shape":"7.0.0-canary.af71cfdd6.0","@material/theme":"7.0.0-canary.af71cfdd6.0","@material/animation":"7.0.0-canary.af71cfdd6.0","@material/elevation":"7.0.0-canary.af71cfdd6.0","@material/feature-targeting":"7.0.0-canary.af71cfdd6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.af71cfdd6.0_1588115847706_0.8370962811934266","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/menu-surface","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"858f7be1d93896d595a53c30dca37e22d2dfa24c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.99d2fc961.0.tgz","fileCount":40,"integrity":"sha512-uSe2nNPrHnybT6COXEXN7kEeEedeB3Hsx0VpEuw5HHvNx2p6cAQR0tmcafUHsngI1ty35HJZ/yaYSux6qWs1uQ==","signatures":[{"sig":"MEYCIQCXbD+DzYXf/lKKEs5Y4bjZ9YuDqPdBJ5rJDGSivQeMDgIhAOT3uX6COonhE4QBSUTqFTnbi6q8WqznMkAR1xLdiyf7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVpxCRA9TVsSAnZWagAAw18P/0q7jykRyuddXLhARDGW\nNIq6NFNVvFnueJ7j8euma1Fg9H+AB457HyVHiytMKHmKrFgXEi9csYDVAfMm\nlkiA7uvnrAH8288Xq/k7+EUL08lQ0RK5PospbguHtWdZLsaqAooZg70HqblU\n6fGEuqSchYFP5JivAsLGKUmueLIVtCK+XRWzO4bhCMveUzW3PxeebuuZexpE\nUnlGo4VYHlASsZEJh3fDaJT76FRJr0eqcClcNs9J39N9VPmSy8iDhi6vtgSg\nEEQbw6a9ObRqc7Y1pcGIfebF2D0ZwYoxxahHd3VIBcS1G2bTz4eFzjkwiQQs\nvvyYn9wGQvDqyD2+jI3y3n5W+QMmIx3YrRCppXGe0Ay2b9FKeh9ru9HKefBJ\noK/vRYmeFU/UtWTZUyQV4q9DfJQ3qoosLVaqbIJkCvIwlP6YmMC9S+gKmpZ6\n45KuTdj9R66XT6/sQ8qd+FK/KrCoFoetq83Q4LegYYh90HbXB/ctJk5PxKh1\nf0cLfnajMLNiVDIfdverZFCtd03RXHfQEKyLN931244cTt4w5C+J8jPNvJqs\nQZnN0wFlAkKVDLh5zLqJMvUNdOyQfMYMEPVLkXCvQ/OkZ8JXa2CiP9N8fiYM\nDlXHcYXBrxBIKoHZwDozJ1bwwXB+9hYICPyfKuihhH8SXfZsWw4sU3E5/csj\nxBIv\r\n=Tbhn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.99d2fc961.0","@material/base":"7.0.0-canary.99d2fc961.0","@material/shape":"7.0.0-canary.99d2fc961.0","@material/theme":"7.0.0-canary.99d2fc961.0","@material/animation":"7.0.0-canary.99d2fc961.0","@material/elevation":"7.0.0-canary.99d2fc961.0","@material/feature-targeting":"7.0.0-canary.99d2fc961.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.99d2fc961.0_1588157041419_0.29873413007019","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/menu-surface","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"149c0d70041e34aff12e2c82ffe434d37fe92c1f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.0e052b24f.0.tgz","fileCount":40,"integrity":"sha512-3vNyZscJGiB6HiAay83xCBozjBpoHuxACWXZJNIWcfl86zJ2nOAPVhtOZ8zLYkgdrnbIiFAJ+0ki5M+G1vHa1A==","signatures":[{"sig":"MEYCIQDOlq89PTri7z8x4/cYHh+MbNgOithfCxrEEU9oAFkLzAIhAK12deDqezf43kva7+2iYv8T6g0x1vzHdRo6I1HmVL90","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqin9CRA9TVsSAnZWagAA26MP+wdPPOntZ0DoNDXFmpv2\njJAOD/sAUseNCh9I435R79ZQprsZmjFtMlWA/zB5IZY+SVMr9IHwGAotM8rd\n4S5vsuVvCcmxIQxB797YH4D1yfN+mhdFHKRVdltnvvIz7v6x55C2bWHjVMu8\nteelrBqt3xBoleY60ePY8ijDDB9WZX9IjBGTWEPxoS+cQzd+ny02wIJotTg7\nGy6rzHbISZuu/A8OdqsVARFKLUEopy/sV/YzG4xs57hihKz/xh5CDA6ebZUd\naJ4amJ3Gpz3xRKvBAsrM8DM/vKX0XItRjCQ8n5W3VuRHXgQWpeewTPbv4H9c\nYzGzZhzNtduYSQF09IaQmPc8tX8Ma8+Uv3nGPD6sh2LKoChUqZffIOEI3G4L\nYZ4zAoH0uADQzT2qExhLHNcE2wsNOaY8bL9NCyx4gtdFT8nY1ADFkT4fbwR7\nx6GNFCRCxEngpjkLGdsuZWERFlp1m8wjaoTGYz+p4OMJvhroju7X88Inz/6l\nLQL5hfx56ywqEaisTjF3fkIDu6w2PFgWO7PL7hKGskMRSZXEang2LyNHJ35y\nJukgVzgig8naV4VpB9eTlRexsf8TWlie7H4nxB1t482BbqyfAxVHL6VyfKwF\n4mVZPKewbf6htWruBe1oRwGRFHvgW10tXKYYUy2PlQpobdnTD3tNpOdl119b\nIVsi\r\n=Gaen\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.0e052b24f.0","@material/base":"7.0.0-canary.0e052b24f.0","@material/shape":"7.0.0-canary.0e052b24f.0","@material/theme":"7.0.0-canary.0e052b24f.0","@material/animation":"7.0.0-canary.0e052b24f.0","@material/elevation":"7.0.0-canary.0e052b24f.0","@material/feature-targeting":"7.0.0-canary.0e052b24f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.0e052b24f.0_1588210173050_0.518046102091956","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/menu-surface","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d3869b7c9e17c30788d46fc6c429f917144f403c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.ff4bc632a.0.tgz","fileCount":40,"integrity":"sha512-NbF2DBn4bc3ACRpWnv3QuZL8aSIpLysmC9lHgio/uq3OxQpiMxSlmhGw/wTaDGGabk3N6hXwqf+uDfDvHQ6UTA==","signatures":[{"sig":"MEUCIQD/qcjS8LrjAE54RO9LwdCD2/17VTTSYy0VTGvfnFFmZgIgJgotl78gv09YZltNzc/GUyYXcdmDvVLT7vZzI4iCabQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqowFCRA9TVsSAnZWagAAi4EQAISH5vZ5R4DKHVGVb8nA\nlVbe097S3X2YiRYfD9VfOcUEYkHZQQpYw5CnCS1ejmZkUDONDZ0cMwKMl75L\nsrpLQeWdtUu6ihv6jJWHyqM/audqRDfI0e7f6Aazau+9PzgHfrKY6q9flkgq\nDoctJKIhLJWDdcaMPvPebXDF4DNR5eAvOuT+ChX7E5vr1qz2udOxF3OxcZIs\np4Ch9wTVmv4dCAHtXZusOEuDF1Iy10JY2uer/DmRBWnT6ZyQf//JPcGld8fv\nDAZMjNWSzyGbRRTzHOeVuTm1htesv6yrpXxIFZOLU6GqVZfRxiqi6Qrcj6EQ\ngLDaK4PG/1jms9h/TGCOvW50E2sC0hauJ3WELZ6MW0jFQdjJW8k7d1CmQ1Q7\n3QDYG1EN0cbYtEi3jqVeuxjEDEmL1x3I/pJz3Yh7xdRXSjmnBFJODDwsJoVa\n4DrdTTFvwKJ4j8SN4vnU5paSbCLue+JvpNKWzx5RtLtiwG0723wQamzpwoUM\nBrwS1cesg6UYGqcHdn4URCfnpQFzigDW43ebnzkpHczcqjtI/r2kvHsIe18P\npZZIwSX5HVQe/3GNWZRNjbnrIaxUQOGW7nWm7qn8mEF+BGJn25QxFNH1bS78\nhCjamf1XMBP6LLhR8YLthCRpeijUEIpQ/oPywlTuWKsaW/faM7xGcQhJEvO0\nq4uN\r\n=DwIp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ff4bc632a.0","@material/base":"7.0.0-canary.ff4bc632a.0","@material/shape":"7.0.0-canary.ff4bc632a.0","@material/theme":"7.0.0-canary.ff4bc632a.0","@material/animation":"7.0.0-canary.ff4bc632a.0","@material/elevation":"7.0.0-canary.ff4bc632a.0","@material/feature-targeting":"7.0.0-canary.ff4bc632a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.ff4bc632a.0_1588235269324_0.5253785768711723","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/menu-surface","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"84776cd85780d441e55bb647a6b9d9163aeb2975","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":40,"integrity":"sha512-b9VUzErjILPvVK1+rxD0UvaZcoavkaFFgYg6ASShPdRL3xFjTu/qXnQv/vsOSFVi2roq1kmuLSKfOBxLNXpxRw==","signatures":[{"sig":"MEUCIFlLrzl+wDp8lDI50TdQ51cCi5GvnBjNImDTxrngd8zwAiEAlu7DNbqHu58TmD+ihPAeVwB5PMYmRpNZS5Yt2dCXHSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequGICRA9TVsSAnZWagAAgocP/Rks7K0wTTB8WyHN/5BJ\n4d8aOZ2vsm3olbISJhRpOn3ceZFQN539nyoX6J7FKL4Tu89DPWeVcA3UaCg9\nqXd2bV1/znaBAqbMAe73Ft4s/VIctmx2nOQbl4d+RrcTVavjTLB3F81QfyvP\n66zgtN6gfnHA9acgooO7eTiAKeYAArPNxkBAYJvOpd+QcFGyOgImyoMm9ok2\nu31PnXe2pviGSlvwmNUFkDY8sZP/ShGQ8/yWIoUXfXFMWStobWqsN/5mfmJM\nnrqQkvJirl+njQzYZkSXIWsltNVoop5Q0O0If72F6p/4y7Gr2ht5kTtDgCCi\nh2eblljswapsOWBQFbzS6SMHmxdu5fv+tT3qh9+ZYfFmBd9/w4WMaqRSq6wN\nlCXhZozIEvoNUSB6MWH04B2+CYS8nXoNh3vJi+WfxEfX9e2bY/21taTxwpTL\nwBmFeSdTYirPPXDFEoNy+g8XnbuO5GpVWbPkyRtozaC8LJ7ORR1CGkKxodFF\nWx4PvykS6Ba30kIjm9BUJjTfXxeVBiOCWDn3twIxDpW/hRn9fHwVfn6Xh85T\nM9eptfFehWbg6Xqzpzthjx9DZgdQ5dPKT6ZJQp+xjN6AzZAlYbGQRhWNri4K\nX9etaY4WGuo20dBZI3aB0JY2un9IrDa5wKEB9hGfYoM6BIclKG64Z1WIkhcN\nhGXL\r\n=/4Oq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b0f83d2fd.0","@material/base":"7.0.0-canary.b0f83d2fd.0","@material/shape":"7.0.0-canary.b0f83d2fd.0","@material/theme":"7.0.0-canary.b0f83d2fd.0","@material/animation":"7.0.0-canary.b0f83d2fd.0","@material/elevation":"7.0.0-canary.b0f83d2fd.0","@material/feature-targeting":"7.0.0-canary.b0f83d2fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.b0f83d2fd.0_1588257159758_0.38834766568501333","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/menu-surface","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6ea73b2615bab38fc491fbc15266f6593d54dd73","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.e59906a57.0.tgz","fileCount":40,"integrity":"sha512-NdoA+lWebYE5hkuzqhjOtFxaEmNg+qNJI5NHPrvZVqUzvGVKsf6hyQrJ6TOBvvh7pSAEd9Se1D6L3J8WZbq8Ww==","signatures":[{"sig":"MEUCIQD8zWduDdJ6TnVQvo9mw8/UeeLMkMbkWNtLlCkSK453ZQIgJVkOGFs+4qnwUMamT1sQXdGxC6cO2piMbZQukKkgfyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerENaCRA9TVsSAnZWagAA6IoQAIq/YL4HGyV7P8jmHoWy\njDONxcIWCSXSyyidY3RCTSzYAuDicpAuMl69VyNdCJWWdIYpPGLVhEwTkDAX\nmuntMx21mm4Eq+7WgpGSLM4yr6YaHwr/MU8WB6h42gxHJPOEOKcxjKE1/aQ6\nEL15QogqRaY167v9yU1Jj8bg3q+nfYgCccKl6WUpemfcvCaPnIkjmYcnOsFz\nj/dJ7zOqB6UJ+tenKkrGgrq35A83l59us8NLhNQeEC8uYm7gQHH3GX2fJ7e/\nNN9LPvQNt9+UFJOVaziwQYxjnC7oZR682DXBafUwNdJm+TmsJf+OlW1VwgqS\nJgKRNYKkYrZ1HnRsvg6rYBajO+udoc5bpME+e7HXVUS9CFY6JKMIIksxD8tq\n0OszDuL3znX6zV/IPKcUWaCOPPlWP5yB3kK9Z0KMeKVRI38xtiotcy8ag5wD\nSznycbtey27vPfpa0Nedhy2cLecyT8PTY13olRUYDKxnjboXukKg6CJByXV/\nL6Vfcjl8Kxt0EPdaxDygv/GBfNN8qiza9W/a+6up9K8k++DSo11RAkbxyYe+\n034xq/557X0NtbYSllmvthldqychCHor67ku7XYWfirUfPORnY+dpTLPsy/V\nDBHA0vCIygPGCng7QYIpZx9E4s4wdhiuJpfMT0x2BmZcfC9a1ms1ojwO8XFr\nKJP8\r\n=lDDh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.e59906a57.0","@material/base":"7.0.0-canary.e59906a57.0","@material/shape":"7.0.0-canary.e59906a57.0","@material/theme":"7.0.0-canary.e59906a57.0","@material/animation":"7.0.0-canary.e59906a57.0","@material/elevation":"7.0.0-canary.e59906a57.0","@material/feature-targeting":"7.0.0-canary.e59906a57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.e59906a57.0_1588347738584_0.2457711193059846","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/menu-surface","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"8dd8b0b2e49617ce3f6474fe140928b4fe1e832b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.c02712b59.0.tgz","fileCount":40,"integrity":"sha512-Mb6rzsRKNtNTUShNqfCG3kuTq2lKz/4ZeE0B3T6G6PXze3bhOqhcqZb/jVlTn34Ucn4H2WWUoAWpbG4gUZQBdw==","signatures":[{"sig":"MEUCIHZ+PmC8ZVJ3kzQBXNn5CR2syzdEqaKJrbTCCa0j/gC4AiEA2A6H3+DSMCrNkjQHBi9XWQhoDGbprUqmiy0m0dBOEPA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGmpCRA9TVsSAnZWagAA/ewQAIJR8ziW88VnZc/AE1rJ\nMEG9nrv9H5CKsSXdBjGp3T5kTPrki9K1voxkHrJDYsHCA8iWMxlQNHzB2g7a\niJGA3okJqpy9rEyUozyKdz3BK/MXCNBTVEup9+LQLC/xt6tscUgvLgTMQJOO\nrpbQCbYvhlgDbElPevT9OD6C1mZ+kT5LhKHLo0Ajd1BZpQDVXx/NqraEpDDB\npT1K1p17weXdVg55JKvhdK1Kf81TqiB7ImgCQWQHyejIC1Em3DTQzV7CarfV\nCg9J11Vo8lLvPpH2XxByZRYcBoFLPV/JYXCF8cD6jg9puXvTEnebwKh4LHhR\nJgeh2SDoj/TY2yMk34js+sN6NERbTtAtiXlSPZiUxTaeKwozPC0e4dn34ZNt\nzKWM4IUcEKlOT/NsHKkX8OeutPc1f8487otQlx5mdND9ZLk1Lg4yw+m4qJB6\nxhJgcykTkSNg5c8Nb1CdTs9EiYQTmv7oNdQWmJtEbGps9baDCiZK1wjS2XeP\nX6pUNyQQsLJtAECVBF5v8G63U2kNRHwJlcPJb2D2y/zbhntXxo/+giK2rp6x\n424pSkN4mcgG1ffb1C/quNTeYMKuWEOBm4JU/PTFKXtlJT75asvgMwIRuoL5\nNLxpRptdaJqp0/caVK/9IVem/mlrOv6ALLSGnDBfQpz2W6J5CBZWs6T4GjjF\n/pEx\r\n=6Vjp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.c02712b59.0","@material/base":"7.0.0-canary.c02712b59.0","@material/shape":"7.0.0-canary.c02712b59.0","@material/theme":"7.0.0-canary.c02712b59.0","@material/animation":"7.0.0-canary.c02712b59.0","@material/elevation":"7.0.0-canary.c02712b59.0","@material/feature-targeting":"7.0.0-canary.c02712b59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.c02712b59.0_1588357545258_0.9206921706697848","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/menu-surface","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"08b30e5dc84d00abae1ee8d007eea21a6c6bdd5e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.15d65448e.0.tgz","fileCount":40,"integrity":"sha512-QwASPC+ccgM7w7VqniYxMAmO0RMP1wKlaE16k8BcJgKKOgJkwxW7kvjDe78hqZkfWfNZTGZlJeh7YyT7GglsMQ==","signatures":[{"sig":"MEQCICnjCKoPbwtve4sK7K3QCV4GwJWxuFvDO3FThLVB3ZNBAiAve3gdEGvlc2KeQLSTHBZfdJq4HNLsMb8wJMB7zX1iRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHb5CRA9TVsSAnZWagAA3bEQAKE+mThpO83TBiuB1Uu1\nkghI8wQOWPxeUMoJ2QWATxol28urz4+rZBSrdCeIzFC480kz6pHVcqLdj1Un\nmXjiZU7POOYGpfK6TkAeJgS4recf8Qni2IcYACmC5n2WMNJp+/6nBuXI5s7L\npkDwtp7iyrtlRcoljeK6oBVSeVTOLfyjqidLHT3yrIJdv3oh/6pJMmBDo2I4\nTBWLkek0K7sST0Tv2J14y0UZWa5IFfdgkbefsXZIOxZmHZ2X1gaOzCSf4So2\n6PZp7r1MfiALoQh8Bl4fN87pmgZorvrpxn5K86j9panGF9VHX4p1tfBakObU\nsBXbIjcpaiUoYKep8COo7zWZCD+EK0tpGJLEUTrMQKAN3QUsnWhp5/6KMHt6\njQ67b2A81kIKNRo6fsKCNNbpHnd7xyyXOh/+BtXBg4vqhgiBA9KeJ9UE7QAY\nZbMsONaeyMPLCBePCAQs3fbfqU3O7GGHyhY382ZJfBbyG46FNOjEeZLZGDLh\nsbHn34Oy1+4ubp0xSXqPZuymp9acHIeq2SDwn1hlqXy8q37PNt6sS5NfFiqr\nkBWjuoopNv1gDZZ7lQqa7/BtsAqJKSZNbRXFaC6yzSiXU8JJxNF1PJWiBpdE\numrJI0JqNMktuuZ2P35Bf8lsp0pr6z+90hBywcNZku4BeVr4dMIdNbNH44Ne\nQY8R\r\n=3K4N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.15d65448e.0","@material/base":"7.0.0-canary.15d65448e.0","@material/shape":"7.0.0-canary.15d65448e.0","@material/theme":"7.0.0-canary.15d65448e.0","@material/animation":"7.0.0-canary.15d65448e.0","@material/elevation":"7.0.0-canary.15d65448e.0","@material/feature-targeting":"7.0.0-canary.15d65448e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.15d65448e.0_1588360952987_0.525084505652007","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/menu-surface","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"775440d2336198e59ce41a52c9f97352fa1aec15","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.142b1549e.0.tgz","fileCount":40,"integrity":"sha512-Z+FPxK5HCGzS7/c4RNlxVB9wgbi8WQ8kB38ReXIjUScK/14ZMrmkQjeQIktMAFAxTBGoeLbmlAAMKepivJN5Wg==","signatures":[{"sig":"MEYCIQDnXPvGP3Q01rGJyb+J0Bs+lTARbdUxtI+Ovqxvn6yY/QIhAL1ifv0nAbRZx6NXdMaHWHrrkuEndKGgf4Cq7VQ81orR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKRFCRA9TVsSAnZWagAAJfoP/1mT2KDnCii1tNoO/s0t\nNL4UyMY3U+4kj/Ul9lqTHH/RM+Opa6xJHkoHQjU027Vq1NQAvGk62sPTERPj\nzAfcNC7MGfC/abA0DfsmdoFFCI4dnkmrg1c0hNkxPcvZ8i43POBxXg/t08Dn\na7K0iuUiBmhRAqH3s1LD3olmSZXGQohOX5Hg1MQgWIzTBZlvEGvNk8BzAc40\nl+KfL+kLZlL/To9zQr4D1/hXxGbwlUwlffSwNmyOqpBvQobU0TZ06nMjfelU\n+5CvNJksktP3nlZLZnRC6C6YVew1SErDeeCLCk3y4CtYWJ9n9kAaL41X0y6R\np5Q35WlHWGBfCPWmJ6dn5PYu6hGF/tJN05EGuElY/eT2/QmjkqaoTIaSUP7Q\new2Npmwr9uN/MaSP5U1OA0FhamfkEFDjRll8DsTHlTJT5aOPSYYUEWoci/lT\nC8fPUTPHyBmPD7hBxTaeGtcBPKudnYQ3XwpKto23UzH/ag1AS4Khc7Ox4tZV\nakRE0vG7xqqy3j1lMN4FVUi/3IUCPlJSnbYQORnDwABBMQbZ0hCRhkqNiLDr\nXAtzVs2WVTohDGxdBUtBG4v1UW2bQkNW1f2VHQdf9LbjBJReUhlkc91sCP1H\nPPy+3ess2l7VnhmDm0QCNLqDJJoRCQYO/m6gBu74EYTavUSDiidNgDl9ZmRo\n9Yup\r\n=TecC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.142b1549e.0","@material/base":"7.0.0-canary.142b1549e.0","@material/shape":"7.0.0-canary.142b1549e.0","@material/theme":"7.0.0-canary.142b1549e.0","@material/animation":"7.0.0-canary.142b1549e.0","@material/elevation":"7.0.0-canary.142b1549e.0","@material/feature-targeting":"7.0.0-canary.142b1549e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.142b1549e.0_1588372548427_0.6930734594577692","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/menu-surface","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d73ab420b37ba3cc75635721389538e153cc5e03","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.524b7b812.0.tgz","fileCount":40,"integrity":"sha512-+jxG9SLWw8Kz7Ce+SC3yRUjGOgjBdqLStxBxpYr4y2tiqrMfluGzt+TW0+WGBdnInpuSpWY2FBYSw6Cb87w5Sg==","signatures":[{"sig":"MEQCIAs4JWl+a+MsFM6rokrrgQ0V3OdnlVPpiPKH4mFrDvF9AiADAD1yufmCHtylZoRzqF+YLOSsINXE4tL+1a5Qa0HSiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery3nCRA9TVsSAnZWagAAnx0P/3PZOywcimkv0NaOm9mv\nC9uskSVg1FdFwjwO69RlutIq2mBCXaMnivptnb/CnOzPOeTgLlIKlfDUI/Mb\nu8/598GdiA0NRM7u0LQOUMJYOYNypQC0X1CFVbwy+M8GFoJZxjdwfxoiFIFc\n8R8T+tB8syFKk6qedLnyvbt/plht5rQFLD8K2n7v6TlmihMRpOV5J8suZwub\n3iSayJY+8su/GD60LHwtl1UBxiECdeWkwPOt6qMpzYRucN3kegAirxOey7cj\nlswkTl6cX2T3V5fQ9+WPwQirHDuG0hZGAl42I6nVv19VJuljQZTGhHiN31Cf\nePS9cwkxftyzvyNOHZvgfMUYO4VJIbEYQ+ZMMikNj8VmpnZybaUwYsr55f2k\nUcu1ABkpYw8MC/1s7hTy9f3t5Lq2468OQN8SoXtWp77hQvT4hDt3GXS8hPyF\nICYk4zyXna2RIddWBdPxt75tfXIVKNarBHoK71uIdnsPYLRUCNma7jApNJ7V\nk6ZLk7CV5jcBjY377QmMctCETrV4gxK+TdLjiIshqWK8NytJofO6d1S+KaK4\nYSaCAwnnV4muTPVok12vU1gI9pmVyvoeW3X6lwbVZQihdtYPWQvm6lfljN4Q\npW6pNWDttYcXzddpfP/xLzq7RSvwfvMA1hXywcAU0YiuKiblv8cnRQw2+Hy6\nMr2b\r\n=En/L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.524b7b812.0","@material/base":"7.0.0-canary.524b7b812.0","@material/shape":"7.0.0-canary.524b7b812.0","@material/theme":"7.0.0-canary.524b7b812.0","@material/animation":"7.0.0-canary.524b7b812.0","@material/elevation":"7.0.0-canary.524b7b812.0","@material/feature-targeting":"7.0.0-canary.524b7b812.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.524b7b812.0_1588538854581_0.7736789839922693","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/menu-surface","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"92a1342780e74ac911c2eb30983177659f34cbd1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.bd8ca9678.0.tgz","fileCount":40,"integrity":"sha512-P8akzDYiO3bQw6LwuTVt24v7d6kng1eys5HHe1TeHbfX+lD4yWPxcW95AeYmKmypkO13Y9/ylpetybT3O8K2dA==","signatures":[{"sig":"MEUCIAuh7/I/+uj+p//d6XJZO2jbRlkzFuzcUSj29rfS3NJvAiEAzDvYGk/+0O4zBN4xBmFqBqbjYmKxQ9T4dQCmytUkpmU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE6GCRA9TVsSAnZWagAAxPYQAJ8EgA5emuwD1Ivd3dO0\nUX3kfGidBBgzjo+LsSzGCqIqRs1jWxDaHqWxJys45GYfChxLhPlVtsaVTFA1\n04c3GMu5Z1iFeFtOZeWdE4rHdrpeqAbUwiLwtEghj/HYcyTuJbUFU2lxaPKd\nRvIHhHXYal9or9/aerMrBswH5LU376jPIPWqd2lz22RA/5fl2pwUxgEAp1zE\nM4FwtnUPkFhtu4Lx1iFeN0m6Rt03wMR8j05uAzX+lp2yoW30qNcbmc3SKg+/\nyiJ1zMD1TzZ5JuD34JrUJ14GZeHzs+xTxyW92dylOBOon4ZsqdJsH5beITJh\nzQDcRHC0YQ23q+7kpaSxGVgn6RUR5d4oYqNwwzKieSioEB+jrB/YT5s1ZVAn\nkVrXVaZf7F1HTQJsomLE8ep//+7YcsoPiLT/P7nw52e7erbxvPUaEyGaCFNF\nh9WcrK/imvRX+wOsS6pCNryQ2uM5vphU3j8YUabULBDvD8CG5O2eSXxGg+b2\nRDyerz6ACDVBgQUZKD4ZLt1vxUX8JFl6JuySE2SDSnonxGpOw5oUZ0fiKP+v\nGPhUeYNImm3smqAtzv32KnpO2lieOn6Enj5FjqjllJy+zGqVo+SaOx8Z+ADC\n582VN19z26ipPrizeaEVWPeY8+oKtJDGE46WC/Lz1boP7qnl7ZN/Lq7OsqK/\nIByw\r\n=ux+c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.bd8ca9678.0","@material/base":"7.0.0-canary.bd8ca9678.0","@material/shape":"7.0.0-canary.bd8ca9678.0","@material/theme":"7.0.0-canary.bd8ca9678.0","@material/animation":"7.0.0-canary.bd8ca9678.0","@material/elevation":"7.0.0-canary.bd8ca9678.0","@material/feature-targeting":"7.0.0-canary.bd8ca9678.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.bd8ca9678.0_1588612742093_0.4982932826502089","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/menu-surface","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"840b77b82a6b811f7da7954d0809f5dfe5018370","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.2553e86fe.0.tgz","fileCount":40,"integrity":"sha512-gF4iwQCNqBXJXLMLdYFGfemubUFgXRelSY8L+ICGx8gLbqonLi4h19DdOGZEoBCpmsAD3sfEoDQ5ugZpEar+Xw==","signatures":[{"sig":"MEUCIE6UOpKaJ2ysBr94p5BTjotaVzVtPMPvkt/PjD4oqFsYAiEA4qHyk6Bq5DuOhxd0XHVvI6BbCdeLjyaCZAfT0tsyM4Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFFhCRA9TVsSAnZWagAATkgQAJeaWFThLC0Cdx4mB/pK\nRtXBgCmTWYTX3le1HYApGrVmNVhT0NAw81f6+Vjqofq4eGDebqGj9D0CwgWH\nh0yWnhTF9EafP9h2CK1pAn2OD0ECLz08Ql82NjFdgvDAf/Mh1ec0JveA1cld\njaJCMRqkhP8tEqB/On1Q9XnZagB/2mkhR/eZ2NVCvZw5nWkJOZfhuk8QBxXJ\nN1jiLMHZHS8WSBvVxgmDJh4f+6nTCQRcvmP+hnCAjH/aJXu9CA+wDCJysOlm\nKa9ypok18jIxUJlkL0VOXXHYEmrQL+wjJjTcFe7N+xH1Hekwa2nCcZkdDD2Q\nfBABNC7ENknZmGqQtD70OsIz7ZN6cUrC2HHVQGk8gFGa4xb0ecXVAHOKs6aR\nkDa5Snq5EUWtYwTJDoY1hMnw7aS39rfttvtt6Eynj5LUz+Yem+K9ULPyqjLA\n/aUlBB4OqsXLOqkMsycCbUW9r9hUhZ5OYrdcSlOsldi1bJd9vxOfxvhmqwhK\nGD/bYObXNquFI9OTS+aHJHJRJd/zi0MS4vj5gExqxMZl68KERVjJQWYNKRQM\nmMgH9gP6FaDz8103xdy/gcaa8FiAZCNL84ngHX+3OEvRnp1iZ+evSx0iTOms\nkzYltNLvq7XMc6iCjMYR472cV9uMxdKVQCct22wIK8viQkD8+/vei7+y9SR1\nHjbP\r\n=U3AO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2553e86fe.0","@material/base":"7.0.0-canary.2553e86fe.0","@material/shape":"7.0.0-canary.2553e86fe.0","@material/theme":"7.0.0-canary.2553e86fe.0","@material/animation":"7.0.0-canary.2553e86fe.0","@material/elevation":"7.0.0-canary.2553e86fe.0","@material/feature-targeting":"7.0.0-canary.2553e86fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.2553e86fe.0_1588613472781_0.6552449765079047","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/menu-surface","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"ee26c14bbd2b4ff2be10df9cd442b284f5de33a2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.03dec929e.0.tgz","fileCount":40,"integrity":"sha512-cWBXEu6oiwrXaJv5+g9IrF2XoPkrJYsSwnMr1YFaEQPvFJZ+Fz3eGnp5KySGd8p9DR1spit7BqonMnEbEdZrtQ==","signatures":[{"sig":"MEUCIHudGEdxl3Hx+K9kcSLQBmDQ+ZKzmpsdHrmg3iuyJEo9AiEA7qXLMRV5D81KHu+8W7P0PMgbqzJPHrDZIF2C4dIFSXk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKZiCRA9TVsSAnZWagAAXKYP/Rqk0nxadTcHAZEqz7VD\nTtgjaEjv4PVEAvCuRXyFsnp0mnzAs25CnL95xitBWBBahJKJOyC24nr6YbWt\nHMh+uTybENfmJhP6i1lbHGaAouhRW+jlZhjpF5xt09lUZU50IcoNHJ5AWGGd\ncntVRK4v78tCS9OZC9G7mbJPPmpyin2k5QtubXTJQzpWUsPaHb7SBejKSOIF\nXRnRh74+n85bAe9I0ZIZjfQaaCadWdIp6rVRoKbvjUqNi3Y/pPhskr7gbneE\nYyMbUIkO8epBfYzL8HbEPJPe8sIQ4yHzkiX3o8cZVSyEqIuR6DgElA4osauN\n53UrDutZ27udDJvjF5gnUz8jPs9Wva1R6uD59eOObJ/VtDju1PG6uezKBk8O\nJw9u4yK2y6+WCK3GR66xFBzB+glzwuq5B1LSN6T9JOVknV6/1Ws5DtZvDaBk\n+BTZGKm2uezXtANHcow96pEf/sWNSPai1sm247IxlJKJIuhoMWrLHJT31aoL\nUpla/sNrQKqu+HA4ofpkt1WkeY8+avYzCVbp+G4AdGNRV7c92N/VU9dsgre6\nhtXQGEzMPhBaGqkNVO2V2Fy6+UykQZBZBLXEJ5NinoSX5qeVzVTzX0KvrkKB\nGKDZn43jQaXoCpAyLE3/XeTUKmoqLERBg7SzDB7wgdfFAvpYUu5qV0Kpn5uC\nL8vy\r\n=omNO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.03dec929e.0","@material/base":"7.0.0-canary.03dec929e.0","@material/shape":"7.0.0-canary.03dec929e.0","@material/theme":"7.0.0-canary.03dec929e.0","@material/animation":"7.0.0-canary.03dec929e.0","@material/elevation":"7.0.0-canary.03dec929e.0","@material/feature-targeting":"7.0.0-canary.03dec929e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.03dec929e.0_1588635233568_0.17839554108338485","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/menu-surface","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"21c6b0efcc5f781bf4aef846f45c93a0c8fb7cea","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.d92d8c93e.0.tgz","fileCount":40,"integrity":"sha512-TGxf+gMy1JjBxJhVFydWYt9ikE4mrMwA1Ki0Ts3n/Og6GizYUk1nsV6QTPUVlzOgX4vHkKHIfSCh+3tf9VokHA==","signatures":[{"sig":"MEUCIQDq8ctokx+0C5r9wDrqj1xgieB5Atmaz5aGwCJge3nb5gIgb8rxZMnInIr6083KhLW2mXPAWadcqqdZKvLAcLOLjiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZtUCRA9TVsSAnZWagAAGqoQAJQ6Qk8BJj/0ya3skxp9\nascs/zMXEB7hdTQuNA9VSa92GAp2iYqXysUD42Iv0mSf15sL6wcsF5G8p8l0\nFqjPnzxsBrslSPlGYff47IrZf/9HU+WUb0EM0zDIrND23CfFhJJeuLDoagDl\nIRHRsy61q0fHVxL2KmVnfdGr0MTj1sVMM3hiv9ZRs6DHfMCsGHta4Xm37MQG\nQPNEvmgt5dHIg/GKkNOlLtrTHfm6xCAKdEBt2+JKQoZhlzB8L/MvOdJ4M2kL\nMb5lqxMOdoPZMXRYb6WXUxb/YvJA8+IPKnsq0+OIwGBz1dcQ2D6Yyqmoov/G\n5gsxqc2NHNOhK5VXsIbLq51+Ps83GTQHXOe6aVGDRkfsR6FYx17olyHKxY68\nb6KuPO4d+90VKzgdKbLzWoDaHRDvOn9OLx9JHXI/ttHU3DphyLgh7v/kIDno\n/0ACO7KwUjxVBkNEyiPN3VFOG3ojSp6/8BIgsLIqV8UHjFJ2WcMYNpvYAgLR\nbTT2GYnEn+784TbrI2a0otBJkyDf9xWcNiNm5U1taWw0MmXdtBt4J6jJJ9Q2\n/m2NcI1nwH5um7vr4D+R9vZ38r6HFx/Wt7U0yGtt5ciX+U6ZqJoeYmhIc7Ec\nFM4JJ7LlV3/pzqHciRurxZ78gTVwC7aLPDxr8yFBdHqgVy4hSsRwAG9H1izS\nhKId\r\n=PFB+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d92d8c93e.0","@material/base":"7.0.0-canary.d92d8c93e.0","@material/shape":"7.0.0-canary.d92d8c93e.0","@material/theme":"7.0.0-canary.d92d8c93e.0","@material/animation":"7.0.0-canary.d92d8c93e.0","@material/elevation":"7.0.0-canary.d92d8c93e.0","@material/feature-targeting":"7.0.0-canary.d92d8c93e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.d92d8c93e.0_1588697940425_0.5820899992618602","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/menu-surface","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"379d4f71e7c1947b7366bd4f14c25985b5dd70c4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.09f591967.0.tgz","fileCount":40,"integrity":"sha512-zAUKYOXwJpVtzzIc2NiVk3/qJDKAkYThJ/8hclIrrm7d4/42fEeMKs9zKo87nxca89KsDTVTXPIIXuOwPl7tlg==","signatures":[{"sig":"MEUCIQDCK/dwhp0nRD81PO2T/a2ur1zfKIztgpQr3nELqzQs5QIgZ0gpU0MRfhB71FDrMJbNcJ1QE2oLA0pH/HJhfa1Cf6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdTUCRA9TVsSAnZWagAAsWEP/RygdIDGnvDp0NBkAMTt\nhVJs/hDmJh7O2kw0ml/PDpPPXIITWYW9ABuduQ/ipPe9CJ3VM7cV96RbbfhT\nzpnaPCFN4dmRlLmrGoyc1W9QxamAryF4REGYFesd5dQeo2+HL6Mh9eTFSVxu\ndUeNh66RLHEYS0BghgyYi5krE0NBk4x3lfgTHNZj7V8rXPQL+bdsxTRBdfUI\nZMQcznM/hqnMSFqVBP/VFqCDE7QD0FuN+ORR0LdVxk42UEXhb/oL5KJVeU+A\n4sw3yu5SurPfKO+VBlGNxUV6cONcQPlw32W0sdVqcD5L2ai2Nlq7xAz6gSKz\nK6XczoJXwmW42poBHbtS5saVHYebz9pMVyb8eKjXOjtJXSBG7T3EtEXynM4y\nvd3iavO0HIrAfSsyboZlU05pEXxjd8v6ZqjRxS8kgoVGLMIRdt7Pu04x9Qp0\nktF4+3ruHuMNIRfKDd61NJWDiZ3vjRT1hewEa7KTAVGRtYlyCv430kFNe6z9\n7KXJgDOMI4xD6hnCKTlB2rFV89P8i/rp4vw61+4c7zIP0bbDxt583WGV05ui\ng7sfFvGZ87tte86xEvVUjj1EZhi7JvhW4WWA5cbg1gnOp8iXalxjlA2K/ehI\nhKa4Ksg8deZp1By8vD4pUp706uf52NOrabBbqsgFfpgPErCOFa4z3bQjulHC\noEyK\r\n=O+aO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.09f591967.0","@material/base":"7.0.0-canary.09f591967.0","@material/shape":"7.0.0-canary.09f591967.0","@material/theme":"7.0.0-canary.09f591967.0","@material/animation":"7.0.0-canary.09f591967.0","@material/elevation":"7.0.0-canary.09f591967.0","@material/feature-targeting":"7.0.0-canary.09f591967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.09f591967.0_1588712660391_0.42011609102186953","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/menu-surface","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"bcb369e300c06efd6c72a6ce9e4a276fc77013a1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.3846ce311.0.tgz","fileCount":40,"integrity":"sha512-Ybr6zPUjxmXk2S0iuZy//5TIfzDuhv2D8pQavI2iwpch1w5r7cLnvaC6+RmGEAHn9dPhUsvsgHHxQp38OWj0Eg==","signatures":[{"sig":"MEQCIEpVnSxzGpgnEHuCdfZzI5XFKojVaJhEWWsbhF1ubIlKAiBpvhEY1Bd1PKD8Ty1XmGnUgkydUnDC9L8aIftPc5lYhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessUZCRA9TVsSAnZWagAATRkP/0oORtGUahl5B0n3sCoL\nUglbi9gwAxcNmCDVj6kKzoF9sCgG3LMpTS25mbyJ5urXLNUdKSDtk4178mvB\nybBo33mteqQ/u+ICqiDniOAlEo+L7p/sYm4xWd6G8F+IAxiXtgnXFCG+mrFy\nh3uFr5ZZQd+YphXBFDw9bvMcXkgB3IRArX9coI3ShM2Tj1+jAOnyZPH7J9ME\nDUY1pOwRTq5WTHswaZu1UfRBeDEsnma9FOD3JnfB6fowxVDP1wQmCTbpGUNh\nY3EpGzllRqJJLmbEML63WGlVvv0D/nCJ53v/KkRkrZEMPSeWI6kX+NRZbLFj\nIPAHqssTShoRZrvWXoUbikJZcGZz8ldb7lTcLqvpkaKE+8PgJSK9Icthu+Vg\nxBjKJYtrCFCIXWLz5evG9SIpUt6uo5TQZ8v0mmRhcxKVUWHChW1HgCfxXcq8\nrRiHAkLlUC1Z+1NSgjnkgPcOLbyhmJ/Ys56C+psBiUf4RX/P3vBEHBrU6RvQ\nt2t0+em11jupDdBwqq317HoX9/aT4L8TAdYliGC7rcOZehcLh14zDNRDA/g8\nxg6UJgCsHbT3VsuuiRceJHvFtsZz9qryzddN6oFjlK7O3QO9IOzFEqYrWd9C\nGUbdb3BSlkwSVH7cE3JlNbP7npfY7naMerEk/oa/T8zIyOzrKHCYxam3os7E\nUtMC\r\n=T+B+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.3846ce311.0","@material/base":"7.0.0-canary.3846ce311.0","@material/shape":"7.0.0-canary.3846ce311.0","@material/theme":"7.0.0-canary.3846ce311.0","@material/animation":"7.0.0-canary.3846ce311.0","@material/elevation":"7.0.0-canary.3846ce311.0","@material/feature-targeting":"7.0.0-canary.3846ce311.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.3846ce311.0_1588774168938_0.9799280124728331","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/menu-surface","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9fdadf9f59e2c12b2a7b40d065b76a3a5704cee4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.ed7f32463.0.tgz","fileCount":40,"integrity":"sha512-483Uhf1nCrJs+dPb7TZ6xiaAYf6I6o2UQeJBTxnwPYvVQBpjL11bTTnWM6mZB804YvXhb4bBI+6UbNDauO7alA==","signatures":[{"sig":"MEQCIHjAPOGoRQgsYNRUsxEbZmaG1LAI9VW1G24Gwzt7vXKYAiAcmmKv3eG7wrtl8qzrBEmUmkIz5ZGQCBDm+9z3l0Hnrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuDWCRA9TVsSAnZWagAA/0YP/jAqaqlyw37xLLgjpBaH\nlUHPSUfZ9zNWLQBGnuID6OiadK0YTjnlqpLJJI4Ze2CEsFYbRS8i9TJyXnci\naEJL238qcb/WBF9MDr5JXtOq3bgYoTUjRV4A47sdSjXJ8JhZDZXzzGq2J0z/\n/JFQeJMVkJX6f6DX07XYCxff/M5phR3EEPxRaoV6wnGVKblIGRmNqOgU2FGB\nZlt8+moDJH+prmf+qF2nIuB6dXf9nqGUiEaSggs1IPuELNCK8C/n+ZWeoh9Y\n8j386L07dUlqFypNThrVdlj9lAcKtAc38c4PDl0nOizMkHl0zjniQG4nop1h\nSu1JwfRwKpGRAbEcfCacatH226Ex02O+dAALtFW3sFpyXDSOFUHU4+fh0KP4\nttcUjcBqcvnUyItpXskXWwuuue+jV3ABE3JH6RADlu3SHe5lFF/Ebk3AjKOl\n+nd9YSWr1DZBvpMysfRsbdYXA84ZQfo8ULss1cds4W6GF2wcSl3dkkC4B3dc\n8mBQf9xbVX3lxDx2vxPO2OZ2pxEZRRvVBHm2ljwzdmiCPUdg9CJ5gdxyBLrA\nLfWnQz8QgL/qYn9lD2RAFIah9vFYJFxDrO7Fz5xTqs5A4P15tcVbCVcPV8ho\nzIqhtXrBIU+hl4oP81E+jEVjheldn2wUShkhnMkFjClEcfswEvtbUXRXF1oe\nwQA6\r\n=ixjX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ed7f32463.0","@material/base":"7.0.0-canary.ed7f32463.0","@material/shape":"7.0.0-canary.ed7f32463.0","@material/theme":"7.0.0-canary.ed7f32463.0","@material/animation":"7.0.0-canary.ed7f32463.0","@material/elevation":"7.0.0-canary.ed7f32463.0","@material/feature-targeting":"7.0.0-canary.ed7f32463.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.ed7f32463.0_1588781269630_0.5838213270974217","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/menu-surface","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"5e39d1121ffd11331e81f4a2d55f4b26185c8070","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.8135cc085.0.tgz","fileCount":40,"integrity":"sha512-nmzQR4SL8XeeLZeNewxBzcWQ8GL12rlItfsr4Z8kk1JRxfL0K4QkQ8wVvLCr3l+M0m1esNK08QzeHYx/YNEvCQ==","signatures":[{"sig":"MEYCIQCPfoeu0sEALLsUsHFg6adLk+NCucdSHOyw6lBa7i8wcgIhAMlyMiNrs5tI22veC82GhKopIR4IZaoF+Jk63cIMCE33","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxYZCRA9TVsSAnZWagAAkKMP/24W+KraPfIpHEqeEdWM\nilDanmZYloOC/885EwMJ7LEtxOXMSJewi7hFj2QDEpfs30HOhboxg2hHZVnL\ntrPCtfTRbRGni88tSpD4iokZgt4kmBjsE8XHolutN5cS0NjljMaodC3PBrQx\n3AkOf7ioY5ps6YSZWOqlu0tC3F5kAaryRBHAFbsZfFEC3af+P7Kdfh5fZDsM\nPlhUuC6cv324NXOYNYLsmMNth4Hb4dObFrJ6HRYsfffRzgPTUomrJX2aP0QM\n5vYL6MHiYNuVBZU16LOkNYL9tAltdak0qzD3LVZeeet06MxpM/9VbznQQ7mY\n3w5HUUPjsMng+bjhtyrzYyRTmlkdLybFe4fV+hGjk4dLUCSh2ttvf98JgR2q\npVl6GK+g1escrFboMo91Ryt0xgDlo3zYw/OBmr0S52xxbZVhE0MMw0tJPEJ1\niIIk6qZLx+fhTrz8k2OVyrbrNW4n/49q2zgfIeDQJIJVLinNpPSMDpMLqYgJ\nD7VlQmoXA1szCmeejRtScLg4Kt2nqHbIAGW/1jGimcZ46ttMmUKZAPaJnHir\n7KXUKseZXhJx7ysITxbImNzPjmP7CZ5HGq6yhl+wdBBe0x+uZtEmmsImJ0ii\nqYanGEmJWLdKG9qU1ZSB9bMxVuoj1vboE4Gnkqwo56G9/N9b3YpWwZlInF3m\nu+mB\r\n=ISxw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8135cc085.0","@material/base":"7.0.0-canary.8135cc085.0","@material/shape":"7.0.0-canary.8135cc085.0","@material/theme":"7.0.0-canary.8135cc085.0","@material/animation":"7.0.0-canary.8135cc085.0","@material/elevation":"7.0.0-canary.8135cc085.0","@material/feature-targeting":"7.0.0-canary.8135cc085.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.8135cc085.0_1588794904772_0.3515205045933052","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/menu-surface","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d926f2014bf146c64d0ad963738e093cc5509f0c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.deb212de4.0.tgz","fileCount":40,"integrity":"sha512-s+PGpTTbhPWp6jBfBopP4kx6EKhstYb+eE5a/Y37oaEaU7jUL/emLk8T912q/c+e8whO/DQ9Wm6MASZe/l3+VQ==","signatures":[{"sig":"MEUCIQChYJO9UF93KW1M0ZPu/DiD4BmG4gF+yXY4zcWYdROxuAIgMjwProB/Xhsvcjf2dBb4IClFWKyUKPW2Ofsy1yt2SlY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszfBCRA9TVsSAnZWagAAqswQAIoHuHmmshMZ2k4D0Ggp\npYnr5g/uwlNXQRLqp650LEESTwl5/Dz+VsQZMWPPXkz1XMK1NYUIBQQRAB2Z\nbE3zp3wdZvsgX4iu1CR8Vq6FGcSn0FH4LauwRb4nSEEhTydSoRDVT0tMfrNc\nYinQOJv84GW8TXsGbZj9Vh6irxXLDwJsy75NDkhYNEdYnU+fdFeU35VU41XT\n4JW5YlAhHPzgkKbK8x+Xz1yIBMH1y7huZazuYkUpjqfIZUH/NK/ZdA1eC3iz\n9wXmqdtSJNRTwLnYoRtF5ySybbrvoQ6pyMxPfiOQ9MzRPtZIBtCY6ura+43L\nfkOexbQ9iitSVeg5JYMPMdFnbr3Gh57iaKdjRzwKMp+uGaeEIChvXsNpRCJt\nxEsNpXZ2LEbj94XdURTn+gSdHgw+YatlUnG20/ZRo2u9+dMjL6jXXunR1Jqm\nsxnSK/8Z8a8AHkUkucsH8KLRKvfXsC4SD4W0JhMe4O/3HPVT2sWgw2yUc8IJ\no5R0l57NDF2QTCZiI4l9cd8S1Z9GEAVKJQWKICMU9gDFwaD07NNm+fqwuDyW\nMhZc87RSyqnJoH0zbUQ1FMRzb6hUhimAlW4GMqqcg3RH16eEzlQKPtBfqYSB\njr+GTbMuEQlKIRUu35YzpsssWzn8eiE9k2ALmi0MkWdnn6kNnPfWqd76g8oy\n30IN\r\n=QXQM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.deb212de4.0","@material/base":"7.0.0-canary.deb212de4.0","@material/shape":"7.0.0-canary.deb212de4.0","@material/theme":"7.0.0-canary.deb212de4.0","@material/animation":"7.0.0-canary.deb212de4.0","@material/elevation":"7.0.0-canary.deb212de4.0","@material/feature-targeting":"7.0.0-canary.deb212de4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.deb212de4.0_1588803520728_0.7153753144676405","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/menu-surface","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"11ed27cd1b5f999d177eb5f8725750e709afba91","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.f83e00898.0.tgz","fileCount":40,"integrity":"sha512-TFghKZR3OYeo5Res2+QM2ncwunA6Bof5iCZSs5Zs2vMognwVr1h27xU4xzYV/OsNdORE+k5leuD0zttrQk5hXg==","signatures":[{"sig":"MEUCIQCnHJmDPJpPhD2+AbL+MpR3wSJFueKEr8GtbgRuYB4oNAIgLs/zEoXDbSnNU1i3WY7g40jojGNUzsTtOMEmpbk+DCM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDwVCRA9TVsSAnZWagAA+xYQAI5SleM80Vpw+0gOMG0c\nO61MBD/vmQWdgnkS31KCPJvtJiSbyfZphuFwthCVC6Nr0Ae0Yx1KymjsOUdG\nOvihOCAu7l2uRaV04LhZ1RAIzui1Yqlgo+RJ6o47dTN9OaFvvavt/gG7qtWT\nm4AtpGa/nD8fgzngcxN1Q6FyW8OB4vO3XuBoM86LZ4BlPC3TmEjHbuAsSsvB\nILTt3FPlE6KTl41/6WgbJ3cSQkAlzYemm0dpJx5p+XFi2JpXOAOG3manGQc7\nfOGFHgswCb+X39VOdeT0P+4JoFrePVwRzMEHXatAx92tuQMZG4AOgZGYULs8\n1UKD2t7I+u53CRoOBDzjn0nlAvtOTVpIpDEP9GLpK1LQgOBB/LdN4xcEYbLP\nVwr0BnVK/ZVN+/5VG9CKdZKnyqWul2qyqG/0EDhibxVYbcrUNfG/y/kxXApL\nBMGTeXl0Jq+lVqpMf7zgxOLZ7xetQUW+4U8mS5r7Pp28x65ST1888JKU9ZYu\ns03PVNJZ01y/nnTEVAOSHmgmE+UpZaSCJluHWDZ2amk2AbjH6Ec1NIfV/Djv\nlQsHTmLh58UWAMlQ9D0gEIT3UYd8HLoEYi3K2xUqDl9dRCz/sqQ6Ncdxo7DR\n+A4pu/6MOI+H9JjZgzJahljgkH72UzaJ6wZYn2mdSpN2pXsrjHgR2Z9LcR8s\npae8\r\n=avDZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.f83e00898.0","@material/base":"7.0.0-canary.f83e00898.0","@material/shape":"7.0.0-canary.f83e00898.0","@material/theme":"7.0.0-canary.f83e00898.0","@material/animation":"7.0.0-canary.f83e00898.0","@material/elevation":"7.0.0-canary.f83e00898.0","@material/feature-targeting":"7.0.0-canary.f83e00898.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.f83e00898.0_1588870164892_0.6255920398781345","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/menu-surface","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"879a68c839cc8f2ba6ca82cde18ad071c9690fec","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.047e6b337.0.tgz","fileCount":40,"integrity":"sha512-UP2iPIt5rjpZ0GzAmMEwyhN+Ndp7BrDTcS2wyLWLKwjtyvVNo7bmHJpYPKr8QntApnsXzyiKOBL9zXJJe5+DVw==","signatures":[{"sig":"MEUCIQDI/5cD5NrgnLcwkx4IkPuiMixGWwq4UMJxwdF61H9jKAIgUTZur6zSqmcTdKcykKnH9eJbPmSF9Osw/4t3KVU2RHM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetacdCRA9TVsSAnZWagAAMooP/17ISEumDXh/7d4CzGim\nF9poZSA6JBs4OCWyRy9/bRt3yZyWlAmr5fm+6wr81guJb4viEwISnyu2PAfB\nrofyYXsCIWOczvDblAuYxHviA+KGZglCV8NxDIF1trrr4QlRrVEEWsBtJdLw\nwb2Q3j43//StfD4oB74hAWfxbirl3X7AAaBwA4jsrXbrZi/FmxI/9SOVudBE\nK+Bu23P3idGbc94kPSKe9OP3dDokpaUKCcsukwq93ag23ZzpGgqKK45ACV2G\nINOadzrbAx6C+0w98F5syk6AUtYhNpQLRWmxaRV8X4d0HndNb9SCbNrkSHvp\nfvHj429kTlAlxBhWxkOJys3SnW8JQ5hBO8cmZlL0bwGhqKqlEclwd1twndra\nXALa2Log9AMQqDWbCsYQ68sXdlqRRL2ZSpu5Lbnvb2AbcchpA9zaYVT3qfgK\nH1seRCA4UPPI04twdi1yTevNZdcZwFrg9/MTq7Ujr1ena5lCC1tM7mPt4sKL\nfMxht/VxJSNhyK2mI83eWR51QjRahfViRyyJoR3OYHw5Gwtj9Pfpi5Mshrwe\ndn0A0yH15ewCUmchKKUHzjv+2AnP4VmJTacmc1MlZj10sRs8w4HbaBdrZuC/\nxtSGZq2eNPNppPs4YgHAtBLxirVwG6eulglTHRGLbdR11uPb3qPiisl3us68\nlUjw\r\n=bvJI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.047e6b337.0","@material/base":"7.0.0-canary.047e6b337.0","@material/shape":"7.0.0-canary.047e6b337.0","@material/theme":"7.0.0-canary.047e6b337.0","@material/animation":"7.0.0-canary.047e6b337.0","@material/elevation":"7.0.0-canary.047e6b337.0","@material/feature-targeting":"7.0.0-canary.047e6b337.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.047e6b337.0_1588963101032_0.2649521767677292","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/menu-surface","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c3e0237e2d9701450cc3981afee747230e293657","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.119e21426.0.tgz","fileCount":40,"integrity":"sha512-P0KDreqehg2uS4mNLTE4iOqhMRg+wIt15mUc6xNuKOtVxd+au7u0eXBe3gAvJ4Oevhm8CaCVrZCTOtne6JBSKQ==","signatures":[{"sig":"MEQCICXHITJA3T4uDQ+6Fsa7gdG9ybeyuGEW4xGF9J7ayOfcAiB59rEU4cVu/ZWJcBp2LXUXjLgR4YYhPtLslrc0806bpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb+CCRA9TVsSAnZWagAA5FcP+QB7CXrD1C4fzFmQI0qw\nR6WYU6MTc9kzYCuddT9RK2kdbWqbLjH0kDly3iOR8OEpZGDJl0K8olnxADQO\nCHQzAqbM9iAiXWdKuh53PfjefLhaM4+D8VbQBWaHCONbrQMmveCR5TStfBNx\nYrPbMG61t3cBw4HKSptounSZOroqTmZdTL1YfyRVoiR/dn2LRv2BJ1WM5fMK\n3GwxeCeGcxgDDXIR2otfsim7HcxWYIcs99zj/MEoCIwLPhIm1dmVmQFgRGYF\nJEA+Js85tY7ArcNoYa8jvnkeC5GBmUOdTPjtQ1jI6ELCjTlwfO0I9EHL5At9\nkuRvFZ015EdgPc6m9V4+sC0ASyjBaqq3nxwPjOd0A0rDVJ4yPx9OLQcZ6y+Z\nHARvvopCEcXUdZ7GMnNYAxoWL32ANrHIiwM1/DYvjKxaLRtP9BYu0SRxPjim\ndQ3VjxtQUynQ/r0IYflRNqdAhCsQRyKvKavIZdhK1Jvb6CcjGmg21HCcUjC/\naze2T5zMlcrQWfx10aJZVvDd8Q2af8jmniaw1fjE667kDmpcWzKrvO9pJJ8N\nqNg7nyB6M/DNec2x1/Gm0Q2Z/YA1DShavosBcQw3lNGju1ccWVb8GymG/cyQ\nQEmWfS4krUiP6d72gNF6BaC68rqP5Qcztk3ClwqrfdPew4+9r0oFaAKBdOsE\nCpM0\r\n=k3XS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.119e21426.0","@material/base":"7.0.0-canary.119e21426.0","@material/shape":"7.0.0-canary.119e21426.0","@material/theme":"7.0.0-canary.119e21426.0","@material/animation":"7.0.0-canary.119e21426.0","@material/elevation":"7.0.0-canary.119e21426.0","@material/feature-targeting":"7.0.0-canary.119e21426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.119e21426.0_1588969345976_0.9054446278782766","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/menu-surface","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"984cf35fb19a1b4781d98f545b3dc70596f04193","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.2f052d824.0.tgz","fileCount":40,"integrity":"sha512-ohi2ee+6LQpME7pqLfHVAaxCPpEeMHigrcLQd5/7/8L4dfplE5g9q5Yfub7CyrhQMfLe50BOVpRKv+OmzHMU/Q==","signatures":[{"sig":"MEUCIQCt+t6zq0KSnzUVIgUm8JjTSJi6p7uj++pWUUUDwEB9PAIgUh2Kj4PejGKBY6Kih5tHo7SyYg7TGYoRtQPoCA1AwfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcoDCRA9TVsSAnZWagAAjAQP+QFsEK78UQ0p0T4FfJn3\nnJzy+5OyDuSiy3T7YIGJIViN9+rvoDQJti3biPBMTSEq6GHJDoqDrhPbsrGo\nWSV10xi0vfTgKvZpX/9sevh+X3gDF0D20r5KewIx6UdDw/t4X3xM+WCUDseX\nGGZfB2AA75BR50NoKH9CNmdJsA1TBQjVyPo2yAYSbpyV1J3n0KHBdWAq2fqG\noX0So7bTcwX7Y5BhUI42IT27ok5ExwsaN4jdDO+O88MKyN4+m0uyGooI49q5\nW8wZ3jrtdTF1u1cncr4Gu8nBgmWqVh0/9/CfZr6FhhY0euutKXRLU077QtCw\nDqmVFTCEOKalZ0nu32zPCWGTLKKEhRgPHUaawbYhCWaGtiSin94w9gPlWXy5\nukUv+Z1oyR/y0vEOt04H6cwvmaiLrpeCAjMyWOgoqFbfQVVa1Ap8gb3OTzHp\nqKwGt1vQWKRa/05NtW9S9gGxP8aWESeoXcK+jKGC+ikpf5oPLqw+rvda/LfA\nRIIF3bbNV7PFkjIORh9K0E0hgIur8MfmPkEphP/rNIxH6Y6MDkYbeql7//8n\niZNjNGRF2oULjbKe71CBiYT8Xo9nRUeuS+wHyXxvqR0MGDg/W4X+HmLWH/7n\neOh5jaj5XCf041Wwt8cKnLwAyzjcpkrQqkP2uT/APMHVnV25KREB5+dGh4Mi\neV7y\r\n=sUZE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2f052d824.0","@material/base":"7.0.0-canary.2f052d824.0","@material/shape":"7.0.0-canary.2f052d824.0","@material/theme":"7.0.0-canary.2f052d824.0","@material/animation":"7.0.0-canary.2f052d824.0","@material/elevation":"7.0.0-canary.2f052d824.0","@material/feature-targeting":"7.0.0-canary.2f052d824.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.2f052d824.0_1588972034837_0.0818952168313547","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/menu-surface","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"35b12310ecb9fe520006df94c82c8bac33da5e4a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.e84444387.0.tgz","fileCount":40,"integrity":"sha512-imHAQ3QED3kN9aQwF16dU/7UYLw42UrAfzhaFjGSFN1EtBv8n5l/7MWtPx69/OUWvLTqVW/gdpZOSi6qj3GGSg==","signatures":[{"sig":"MEUCIGFNyr6ebbb5Ua++hobpbREGDGAlVHAT0+VuJ5ZC50esAiEAh/Ouub5uhaRlpm6+V6CB2AiRRsyb4ypmuM6+Mf96aeI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc+2CRA9TVsSAnZWagAAlLMP/0SSf8OCsjrLf4+NckRC\ne9JbGWPMU/oH8jlIMpva3kilADmwJ2Ol6rX6uJPBUZD4pwxis0HxgKNTcHsL\nWKDcNULtGMPlK1ot0ub4n18bvJuXsdICD2RH0F5Adnsav5BpvVJJMvF4BRRV\nViqVleUVh2/eGRX3scOns+I5M3iaawbdB1IXbJCd2csbkHz2O1/w8tKm/xQj\neWfj8IaSJ5J1Noa57TsKTISJmmp3XvQdGxX+5QvVrzH/axv18Eo3DNICGwh9\nnx6fVnamdQlmU5T9bL8xWh6fpJWH4gHbyeLPrBKPRHXMUdAnJrBQi8ZO6Q+0\nNMPZcIz4TjAp+bJPblRer+tSHr2NUH8BROBM4vY2zuN6dWI2IbqXgbr5QwCN\n536kjVyxFAgySl43gQ7l/Ol11RUdrhBdcC6FOt33xCyyQZBsUrs/W8Q+V8UO\nksS41Pi30vdQKqtwapt94U2EzjZMvXTQBbtG1Hz+uS7RFC1y+pCWn4mJjBdl\nKHHNpp7Rh427hzobV6QVb5wmXE37dfazqtSxIyFGyIGvznSSjb5KC8QRqbvS\n1sW0M1sVUhG/89bRs/mNkzLEc9Joq+ITpUZaU/MLLnNS+B8Q9OmZDV/xdnVr\nScznAPwMMRjmjrrnQh7392eWpGqIXIUeXWifidHIh+3D0ItQMos7lyhfX0Mc\nTrGM\r\n=tyDG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.e84444387.0","@material/base":"7.0.0-canary.e84444387.0","@material/shape":"7.0.0-canary.e84444387.0","@material/theme":"7.0.0-canary.e84444387.0","@material/animation":"7.0.0-canary.e84444387.0","@material/elevation":"7.0.0-canary.e84444387.0","@material/feature-targeting":"7.0.0-canary.e84444387.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.e84444387.0_1588973493787_0.38944978607800973","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/menu-surface","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d91a3a882344cd7ba16d3193977338d886cb7ab4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.893eb1876.0.tgz","fileCount":40,"integrity":"sha512-EzAkqQ2OfPW37mvA3KLefSSc/155Nffhyl81orGponsyllpeKgdK4b9Y0aMo7EI6M0EOF4t0LxnPp6xv98QU/w==","signatures":[{"sig":"MEUCIQDk+0L6ciYF5yZpmWjujU9IBEQchXzmKqUfLngcz6X1AAIgFKBBKUT9+2YgZDULfmfbawFIUBsPmMFC2LKnPwB6e48=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV1xCRA9TVsSAnZWagAAixoP/3YuTK/9ikxurOBcQxON\nDFhQZaQ1oQIqrTNZem10y6BCCHeRkDKloa/xrqanr+FcaUpDSD6RO6kLXHMO\nHhQfsfRQy0dLG4THutp3UJ5uSDGCKbRkIdHbntSul+/hK4YP7SKNnfOxDh7D\nhnxQQwLlvZQfriDUHCChID4Gr5yo2POwgJX5U4352dVAc+YDhcTJmP3eXv7W\nWlG6+7OBQSV4I431ga/oDJ7lWBFjCAhxXdYP8pSIvjkwbJDUWQOdSR0JPqU/\nXA03A8yejlBkxbFiT50CQJMWjZfQjj1lHrB7IIxPyXeVRPmwYRMsdVurgrRv\nYhteNd7XlrNQt9/Ud0bVrMhc2k14TaEeWQBhYwtjxKZIEKz3aSwH+jHdCdQ3\n3vqkKfKyZwIIGwVJDu9G3GUx768JuqzJTDdwyBegIsH+4c4uPBNKvCr58STH\nZ9EhJGwoEfdnocbLNx18bUWsqwf1O7BUQ6zH/j7N5EafV868AsPtqzv2UKm3\n2GpW03uSu/81hw9Mx7wvS2S0U08T+YS44dgPYuw2QAoZ+N06Khbqc8GuFQ7Q\nzKRnl7scOc7gi90bZo/xy9NYXVfUbp5Lyb4b+0+A/g1dKioBEBreH0kln//z\nFLlX4bMNb+vBdpyl4uPwzrmBYDMgnJf5Zd9TI73INkv8xBMBd5yFOijHSWUK\njS3V\r\n=LYcc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.893eb1876.0","@material/base":"7.0.0-canary.893eb1876.0","@material/shape":"7.0.0-canary.893eb1876.0","@material/theme":"7.0.0-canary.893eb1876.0","@material/animation":"7.0.0-canary.893eb1876.0","@material/elevation":"7.0.0-canary.893eb1876.0","@material/feature-targeting":"7.0.0-canary.893eb1876.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.893eb1876.0_1589206385077_0.10329568146457757","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/menu-surface","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"27672e2a5a6b11e48f2b01bf7535f89789999fb5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.a5aeb3001.0.tgz","fileCount":40,"integrity":"sha512-mrUKd4uklWeHGB6RicYLauozKbRyge7acqjPvEBnGl/rGOtspDOuGYei1NhEtqfQQohb/3C0tem1AjFggfgKdA==","signatures":[{"sig":"MEUCIQD/GTmZzaOCyDqNPj5GnYFDkwTMhsKNAxPuUMOjL2RCiAIgW0uX0/DQoWVklZtazV1cAm3eZPC5CywhMLV/SDb3dH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWErCRA9TVsSAnZWagAAMOEQAJ0FAUBGBv5C/1MPYTrw\nSIGfD04z7RfZw7VMKlGX5Up4PdnrUY9QhH3VYogLLNXE2ZlY03ftZjApnYTT\naV1TvAIveOgDGrDZl/VCaS65id2lYyTsY9QFqromchYRVXk+K/q4HbaRRPIh\n2wuUe5CnWxql4Y3oqI+SC/Iah0PxDBT5Y27pW1vxfR/n1WnRx05YQltXMB9H\ndQu2Me3NBC7cj6kh6GMfHT3vOQJ5Uc6v6Au/JqbvRgiR++UkF7tchxi0eD/P\nW7bj68r/v6u2GfgpbU+cqbOTjn76PlxoHsvmWGPzQ/icpBCZEQdQsrRCTe7W\nI/JmtA4wWXvAsu+SleuvlZ92w4RDMpLf9G7K9O9mO6mEnL879W82uoRxqBdl\nEOl+y3msofofLwA5PE0l5lXiK9t4uwZ6OZB0v74L5E4lOygMvWxC9E2zfXW7\nsAlytmiMfgoDxqnLqkY3lxsZG+4ZtHvqLw0dWBqFAG3gNHD6b8onSii2t9T1\n0d7wJpyp0BfGO5HDIN3p4cnv8zt75PQmrSsq8BJxsDL6AHczz8JLpa5wAllC\n409LyrjbP6z+YFSSnzBbP0z9UUfCGNaAWDp0X7FiNGUJlVU6Kb9WbEIpPaON\nKGzxTB6zmtFFmXx9aszOEl8oo44VrxbZOt+ZxOAsWmBg3FGkLYOowdH3T2GZ\nfujZ\r\n=BWMd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a5aeb3001.0","@material/base":"7.0.0-canary.a5aeb3001.0","@material/shape":"7.0.0-canary.a5aeb3001.0","@material/theme":"7.0.0-canary.a5aeb3001.0","@material/animation":"7.0.0-canary.a5aeb3001.0","@material/elevation":"7.0.0-canary.a5aeb3001.0","@material/feature-targeting":"7.0.0-canary.a5aeb3001.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.a5aeb3001.0_1589207338731_0.9075150697866774","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/menu-surface","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9e782e0951ed835ac52ae995b46e90d368f99359","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.610c68d97.0.tgz","fileCount":40,"integrity":"sha512-O0MvZrQCeLBVNKMtTUSNoS3e85t0VmwFm1p87t8bNR14jLcjLPxftyzJbKI9zPUUIlq+NRh/BXn7grZeBkIUZw==","signatures":[{"sig":"MEYCIQCcUZOF8SluCb4bZtMRsC4ZxPDL9loedb3lC7BNpwnFvgIhALJ7ZED64QPOzZYM7dybLEYeOlqjC8HaCRKBFafrxZfM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuahJCRA9TVsSAnZWagAApyQP/jCoZfvh2v2dUpKv0sc5\n11uPd8XBqvsHS4NQv+P1Ua1SBq2BcwjkmOXmmcDzWmYfSOllH1S/Meqe9lrV\nAkkWvkF3Iqa84HIEShehZbn8LWshP+ixRlv4ksW0LuDbohoHVabFVkIffQ4R\nGnUcdXALRBzNJtFBo61l2Bm/ENDN8RFkhXVGiWAEVgh3OyXY5fkecSWthz79\nAJ7xonrB2eS/hEnMH4eRwP0SgV0FNkfX+UKUOiKv4jpD74TzOzHYoE8Ec+1M\nniEV6QsHD/OAz2Q+UURtfZjetNfEJ5QUm0rRUycjwGs+mL9bVZ9VpHl1gQCr\nwwkLnIUfTZH3LOoCRiqXwzforCoXM33kv45w529xOS6KSGnI3X2LqyLiEz/I\nR1BnWLdEO93/oikU2iJILsVFDYazkcbTd61XurXe3uSYMn8nr/536NbzmYUh\nVga9X9WyAj6V9GMYwhtv2+UYz+i++cbZOxrey9fy5/nvsH4Pj/eQrnLoRtdd\n2I5jF4cZE0z8pqdF4wx8pFu/O37gPcefSe/6MVX3FkN0XAMoTzJ7l3rs+IVY\nSSNjUXy9ViElrdhrMK6xCjC6FstMWRdO3Cx6PeKYq3MeEkTk8lyM71+8P0If\nCSMD0rZU+6j+9rQetr/FYvwD2qtzH4adQsrTgSflYbcRjzSC+RpsHdHlnfxH\n3+0E\r\n=vTFM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.610c68d97.0","@material/base":"7.0.0-canary.610c68d97.0","@material/shape":"7.0.0-canary.610c68d97.0","@material/theme":"7.0.0-canary.610c68d97.0","@material/animation":"7.0.0-canary.610c68d97.0","@material/elevation":"7.0.0-canary.610c68d97.0","@material/feature-targeting":"7.0.0-canary.610c68d97.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.610c68d97.0_1589225545427_0.8685052918900706","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/menu-surface","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c83907097d4c0989b8fdb0eaa072a8e6cf57eef7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.ed52af767.0.tgz","fileCount":40,"integrity":"sha512-Pudz0B3Z0ufc7VZJAfpszSy5BtxpEIgPK8CVXxio8VaXVAHQ+Ui7zZumNw4Di2AsLNDxxOuE8Irf8pFHoXVmWA==","signatures":[{"sig":"MEYCIQCvY3AtTFtXZ4jvNUpe03K0wpYzvKdqI9eFlvsM7vrffgIhAL2Gko5s06JzASAymK+NGBzeU8Hv3TGjye0rVQY26hUA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubUgCRA9TVsSAnZWagAAkEkP/3bX+7aQ5O/QrGBQT3LR\nVD51aDsXB8dZvZbE0NDzhaWJeeBn8AxuI2HKzkl2S73eNBgHrrfOVoRVGYwH\n9frL2zgRIGRcirq4GnctxyZ7lwTXJzu9kFzWQSs9Nx7a3o7skrrYZJrMo/A5\nbER1JPAjRebAyoWPhWGFZcnGOZLfGy3E8XLoFDmKczya+0Xor5EvJGRUKf4g\nwmS76DGhkLt3hWfZ+ESzc0My+LHjQ46ZGBBMjtl45sEiThy6uZkeaMMiEA5C\nEwUSXDN08yFPzTbL86cPSAbRgzyGO39YfOIh17TONIFd9QUWNhJ+uuzrBqX3\n/M3/DDLBc/0gMpirSUV/jAB1X495qLro9IkpSn0OMu0maJ06qGPSCdK2xrlv\nI5ZTfV/nhoQTqYIcfEFWqjQA+gRZLpeEbNCWrhsQt87i3LsBTbBCEaXaFBTW\nlSiBVQSkyRr/Z3GbFTABmLgs28UawHff7u8gZOK/b+XapIgASDnILLTx0j8q\n4vLel3VrRGvHxKIJ2lRC8cYRkYyOORd57Eo6tQn2XBRTdQJA9oau4yPx7MPO\nxT114AH78QCP0YPZT9oEUalRHvQ31cvOlhy49OY3dW7j328HzvROz3nDFkby\nSZsU7BrUEXzdgPoYyibFir0UiWCKUW8FaXboirdrPsuVtVuXjLyJd423wK+y\nMzx3\r\n=3Gk9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ed52af767.0","@material/base":"7.0.0-canary.ed52af767.0","@material/shape":"7.0.0-canary.ed52af767.0","@material/theme":"7.0.0-canary.ed52af767.0","@material/animation":"7.0.0-canary.ed52af767.0","@material/elevation":"7.0.0-canary.ed52af767.0","@material/feature-targeting":"7.0.0-canary.ed52af767.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.ed52af767.0_1589228832119_0.8687020938995911","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/menu-surface","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b73714f384e0cc1136b73d2f7be240b271ea9cfd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.058cfd23c.0.tgz","fileCount":40,"integrity":"sha512-iPwQP42YaAg16W8jW/sKXTmao+yj58edEmKvekwcKNCYvVb2UklfSbtj5nj/mEKd1MhP9Od55iejaIzwI/wvVw==","signatures":[{"sig":"MEUCID0nSy6wfxUznelecxsC6jvMAGbx7DWLDSUhXT/JBQrCAiEA5KQnKhVZF9XxN+vwZ3xQtzt6Z/mthgeuXLtF2rA0/8I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucKvCRA9TVsSAnZWagAAKgwP/3BPt0FF0L2SQd6paWgw\nWh1iTgr9vh4Gq5H2Rfq5VRYyKBjFiTkB/maMgY4RuEULlYdkGABjmrCrq1EW\nc0QrNwLTgaHd91eMs/WkD+doqNfh0wk4HrSTD5T7ElhrQzX8Ul9UxK4oxFcS\nsEfE2PVhkhVbKai5PtaKsgxC0KjnoB0uuvmaV4DweCoUmDhbOJhaWAJSq5HG\nHPoXWIDIur4gqShyFO1ttDLFQ8kcQGc3oRVtxR+DwKdiOU0o0ZIDt1okptzb\n+pzNvYedEt6Cx9ErtHBj5ar0L52IyVHi7O2rpz0BecCazWMWeUHpzYfW2GUK\nPqEMWLZteYynmO6WrD5B6CI6Qh1lcv4i1uwWAQrFeQvxmf9VKWsAAkFsFFoC\nSg2oto/zSCQg0+lnufyH8s2e8RQkLRBJMEMyRa/BeYZmrRy2GnGEHxlhuS6n\noOR4qrjn1pZW+N9cS6CuReh+eji6MMya7musD39L/LCfMgDCkwGxqDcw5MuN\nZ5v3zPWZeE6D+PFlu7jJ/Cr4U9G9j70bqGw0rCTZl7gsrc7UK3l9ioFvGBpV\nrdGFVfKPJtJUM7k8KGaYKSMtTiDbeVwlkZtEJGggvu/6XdwrAp9emXaLdVZu\nTt2SFrFyNxxHdtiMGa1UXXoBxBGOMdg38xNg9Y4b4manC5FJ9hVxA4363ckT\n+iu4\r\n=N+NX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.058cfd23c.0","@material/base":"7.0.0-canary.058cfd23c.0","@material/shape":"7.0.0-canary.058cfd23c.0","@material/theme":"7.0.0-canary.058cfd23c.0","@material/animation":"7.0.0-canary.058cfd23c.0","@material/elevation":"7.0.0-canary.058cfd23c.0","@material/feature-targeting":"7.0.0-canary.058cfd23c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.058cfd23c.0_1589232302641_0.02357942387480394","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/menu-surface","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b48ae9aab90906ae68b657f5324d5d48e2958947","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.0a371b4fe.0.tgz","fileCount":40,"integrity":"sha512-eTrQYLllmYbOpfwEm6ht0fZkJcJeyIWj1OEc65xEwCI6zqxchTchf90FbN5bdpZK8zFFPLdorSSEahCu/I1m7w==","signatures":[{"sig":"MEUCICGrGlhwkhgyisqdgKL2apARv/6/d3ZxNcJoPHR/5Gz7AiEAvRjgrWH8lfkY5eSG3kY/110XgKoG5Nl80+zkgBP8/pw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy6tCRA9TVsSAnZWagAAh3oQAI5itTwfoQvKOliQfJMf\n6s2MQYth+yZdZEzNW10zeojiyyr/BT8ZhCN8oTjhQb3h2B60kosVk44HSZt4\nmLIgNZnqQJzTCRSCl5o8L7iq5uSuvz5PaVaejqWBrYg9kSHDPUB0R69SPdNS\nrE/UQgox+dHSKbig1BtxJXqdoCO9Q9l8yCbedfx7RnYOVl8fdJ8Q89nYByQJ\nzr4KMoEaEhQ0CINwX8XibCvVzViPyFyrk2gjJDxKXliEAhsQ/hyIx0G7EFgS\nPXhow8fsdiEUzKoSNZ5UWjJ8IsXBupgjbZZza9/w1d0/yH0prO4kNhk/MjGA\naL/k+w6w+XZwESO4hXAgMzg6zkAyoGhwxXGHqm6PBwyHeWPt/11OM6GQuPe6\ndpZ49j9I+szhnD1FlvyWUurklUk7Nh+Hl+CFR8Lew0yIt3lz+PNO/b+PpyXi\n5IEkAVMeot1460OSdXJRMEqQk185IRLoBqOayUiIAw7hx5M+zTxlJURHU1/5\nDBhSayWkzpxHKs5ohoIDggtHRAgWwAJp+dt3C3/rVlj84MC5mMGwRVIOYeY7\nJbZY7EQPZ1EGxzSd/VrQhYNsdIhm+ohJ9s8ft5IQUaScbn+rydjVJw2fX9PI\nIF+qEbgNq+FmL9fExPsKDrh5rDhj/4Bcw0Fw+pjxnK7bO8IMpJTKy59cn0qE\nvwdV\r\n=Xp0c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.0a371b4fe.0","@material/base":"7.0.0-canary.0a371b4fe.0","@material/shape":"7.0.0-canary.0a371b4fe.0","@material/theme":"7.0.0-canary.0a371b4fe.0","@material/animation":"7.0.0-canary.0a371b4fe.0","@material/elevation":"7.0.0-canary.0a371b4fe.0","@material/feature-targeting":"7.0.0-canary.0a371b4fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.0a371b4fe.0_1589325485274_0.5628598615096247","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/menu-surface","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"e0c9bf97826403160648adea2abf5e71a56dfdc2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.2139200b3.0.tgz","fileCount":40,"integrity":"sha512-2zc16W3GqEZGzktXi+RX8HA7cfOAoe5dVFoPfupeoxnWG9N/WDewLvx+i71PoEvYfg5cSMh8nhE7bGKuglsy5A==","signatures":[{"sig":"MEYCIQDlM+2JMC0Q3dxgWQeKuJES3CA7Z/UbwUSDIXRhkM3t2QIhAIT3UNGs/mVQWNCdVAuPvTULc3oPKe/XUrDjqquFf41+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAhvCRA9TVsSAnZWagAAt/EP/3Cuq9WjxOT1y9Bn+P69\nHPNvkR1ijn5M0/u/LO7HGf7cVb7OJMO4Y8RNe+FT3VitmOzqdK5xd4tzlmDH\nfbQv4IZBhQOgKdzYtoisu7gDhLl49zyk4iekVaPGzNDi2zAtcNgsn6g3VaFh\nc/qSeiNOOxSTFpSKqK8cZLEFQKAnQOhFRhkKcszBoFMYNO+G2YAAQMUOb6nP\nQ2/931fpeQd72PmBEfeEy5TijrL849rM82Qpaw9WvevN5TOZTGBbAXiMerZF\nsYnrZZ0AVS5aWbo1dX3rf/IN7ksoyyfhpi/qixq9Jx+ZZeC9Kg9PlNeDcumV\nkldOHMlKfuM+TkXb6Bi44hhSkiispZTtdoS00mY2jLlQAg5fNF3BAWofXVWj\na6cjkhqxo8BAyBDXrq3nFvRohWbpJ7QJSUqpPmaPjSajA8HfyVw6pzJ8ll5c\nnZFwEi/nZSvdnqf1yB7zS4Jk3WMCZ3WqygxXlYsQHmRStCuZayjkILzoFKFE\nx0IgC0KaueYDEHPshetIo0St8HReLFcBzhCyhTjJ4P5i888UHF0l/Xg2nnyc\nOYmIs7yvUew6n/tAFgrah3YQ2gttVxRlwLPPZqAp0CrZCKXN2fEUNoTYeht/\nIfND7zMpO4PkBEUj+TZlEX2pXJwr/kGxQkpPky9Rg6/HRp5mHxhH5KJISYMF\nRTRs\r\n=OLy5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2139200b3.0","@material/base":"7.0.0-canary.2139200b3.0","@material/shape":"7.0.0-canary.2139200b3.0","@material/theme":"7.0.0-canary.2139200b3.0","@material/animation":"7.0.0-canary.2139200b3.0","@material/elevation":"7.0.0-canary.2139200b3.0","@material/feature-targeting":"7.0.0-canary.2139200b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.2139200b3.0_1589381231199_0.20752583368560074","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/menu-surface","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"e1d5713fc18314a7420fd7f330c165227549d8dd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.744d751a0.0.tgz","fileCount":40,"integrity":"sha512-9xQ5JTHOcHZpDiMQRFzIb1vfXoMQvB8ZfFNA9VZVoj/tynO+/Im8YYLRN+FyM3NP3IR1oCghnOQDt6HkKNgiZA==","signatures":[{"sig":"MEQCIC0q25dLZHeeQ3LcyEid8sB3SBG12/+DdadKG8nZ+vL4AiA4hO4axegLr8Spn1RdOlvTOQuzYwR97rGO0lJw8wYxFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMxECRA9TVsSAnZWagAAghgP/jrDyo//JVqmNkAyut9T\n8En9Faot51lEKFMeU17YW5Hy8609mXu9pPLsI/wwUjdz2gLjRVa2sK+flqwB\nmjeTdhMV4dpN0OolKarxZmQwwW16/Mc0Yuvg9fH4dR/fF0lmDSWR6gZd2lz5\nCIr1MGjs//pURs+2+gUL9KMVsY5G6eA5+dyLrYW8UB1YnJ9BeBDfZ33Q1QOp\nKOXMxnGVmGoE0gXL2qkepDM8y1a5Vn4aGXI+n1vFbsRd32JNg3W77NkZPZVo\nrkDYoXprWkBgImRVD+LUWXZrtX7O9GyIzznh5Uhj6pgmdBfmGNvr7HhQjVkS\n1jje5m6YEbOF/nvikTN1kkuMX1SzPjQLPTlllrXVIwm1+TMeLT0b6E9w5VAE\nI+RSA/VBmI6yCdyddnR0ofxYar7KBrWkj+Klu0CwEmbPlhoSM3Zw4l6ta/gt\n66gj5VTp85hKFO+iEpG9fosIOeC3xOhbTB51d2qPpBLlYebQmqOQ0zAt5XAh\nQgRuBI4ZqVL0aCw07bq+v1kek36GgN9N1vbYk1LkPocEXkp8b0LcFLNH7OyC\nW3pZ+ggXfYtZ67izEAEv1Vwdnb0BSydJrJjJ6NQpp3ZpxgCc3/gy2NxJRVvN\ndtPuie+3HU5epaHCBajeUaTY+1pBhkHJVSNoAW2U8i9p3PvxEFJKYQVwueeb\nXLVe\r\n=wq7g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.744d751a0.0","@material/base":"7.0.0-canary.744d751a0.0","@material/shape":"7.0.0-canary.744d751a0.0","@material/theme":"7.0.0-canary.744d751a0.0","@material/animation":"7.0.0-canary.744d751a0.0","@material/elevation":"7.0.0-canary.744d751a0.0","@material/feature-targeting":"7.0.0-canary.744d751a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.744d751a0.0_1589431363485_0.2672482177496385","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/menu-surface","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"22e700c4b655e987a3f738b57ff73a3985d9f45b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.ad0c0c103.0.tgz","fileCount":40,"integrity":"sha512-RtNAylSRIITIHwn08KBqMSeEgzb//mcRPHRQ6fQ/Doq2r0gGQe/vIQh+IDZJZ7b6WMulto03BaaAJeLxwywEfA==","signatures":[{"sig":"MEUCIQDy48BgojLOLL3O7YA77n7I86ua8YkYlLbV2I/RB8PNjAIgDQde/NkrU2E2pxigMqTtDsmokg/LIVWL6P/70L9TZQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVrtCRA9TVsSAnZWagAA/fIP/jeoxRiNd7n7GYTML3JJ\npv7fK4yBqOs2HSJafrI6e9Pwt9grNrHvOT/7LzQ9Zyp4Gs6g2Gbj5f6Xk+/0\nrq976SPprHjg33cTxZZ1gbTjJAIcZjkGTfGOjYkKb/ENf7n8rExRbkNDsQCb\na3GnKGrA1qd2075BWADIkzNJZKm9q6HUn8YA0IW3xmNWAl8UxkJCBpBLR0oJ\nuD9wEktNUVwm14cx32Be+pVxCtxwkQ1RMk+6Gkn7Mz1ozLanIixEPEG3sJI9\nPbn5QzOXbVZzrV0any8MTUgrriILOqUusKtTWpY9elPHpbw4Sf1ykU6Y0Q/z\n4v0WBZ2oh8DgwA/JjpMdE3I/9PI87lTACnUNREceBTBo1xfGXolKrTVhhX/S\n1+rIBqPS5fArGjVjnFCsG+7tRoprPzXI0FHZiLypF3fCQygGI34jG8BhGJcc\nTQrCNRbN6SpPZzcElUVU9HueJs6soFkRoypExuDmwWOPRyu1Tc4EE2MOMGng\nF3zRLtSM5xq11SQsAkgly14JK851wbRJfUoFjYA4PDgWm36GRNqHSJSaaTjN\nYKhvYSehhFZuBvU2/KtatS4ygdj2Drfu3B3XCZsRqSTQLwZcM9LY1wTxIeJL\ni3rnS0rIWaeLN2sAgSKUult2ufhjP3z1oHAqKvAbhKw7EboIs5weV5fut7ZV\nDtpe\r\n=UStR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ad0c0c103.0","@material/base":"7.0.0-canary.ad0c0c103.0","@material/shape":"7.0.0-canary.ad0c0c103.0","@material/theme":"7.0.0-canary.ad0c0c103.0","@material/animation":"7.0.0-canary.ad0c0c103.0","@material/elevation":"7.0.0-canary.ad0c0c103.0","@material/feature-targeting":"7.0.0-canary.ad0c0c103.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.ad0c0c103.0_1589467885141_0.9050406179547326","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/menu-surface","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4c194777834bc915a96b469cf8f1488359db5b6b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":40,"integrity":"sha512-zxk5lgO+LhNKrS0KZDo5dHIxM+lkGgmn8A5Yvabi4b4Omu1J/MjvdxSXm96N1CisDjvppF5CGHpbcMWgQOiBrg==","signatures":[{"sig":"MEYCIQCyFmw0FxGgK/QKshVrBAX7QLlIzjoiDia7uKrK+czqkAIhAKhk/EUDqxJEXQ8tgNE/JG9ATr73QmkSdyPt9rhkHqz8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsueCRA9TVsSAnZWagAADmMP/iFmKRw5H3Fj/5vBM/OE\n8uu5iHz0Za6SK2xBK4791JIahoTf+L6PNnKD1+w/rzzd1T8bYQbsx4fcFQCQ\nfV9Fg5mVigbhUvXv4TxYs+TAz76zx8hN0rEwzJeXcQisqInZxas+NAa557Kt\naD+z8lb4wm1ODPupo/FLaI9YnMEl8nK/vJMZZkWK/INqDz9ZKBwHdA6BpAZY\nS5vcnodz1ntGNfXVNOrcySEHC46r+jv8C/uaXp7Mf6qUipFmS8atTfFY4ixv\n97vFLPPFE5bZhweF+gXPkhAVjZYEPz4lqtrRiaEntfRfpnvFy46M+/LKrHHQ\nPchlxRzRQm5RUtCKdIw8/8EV29+V/KHb7x0wt323MQsOyWoTZyLXRSP9Zmpz\naZ8gP3z3L/PUE4niOgR5SYyKZB/ePz/e24g8kxBwgGpIXWPJC3sfIoCfwb+r\nqbMLOVytY3oyYIcHD//YRyRD+NgHkMirbieMLtib/9ceVjfh3MAnPPXve4v8\n9zxlSprE8yyVUz8kABICHGuOaGl976NzYMX6vaQkJn9jmX0yvnAFINMN3fGL\nfClORnYluRMOwJD6UgImtmEAsPUK6K6PT0VAVhXfTjuQGw9azL+T3JuPCJdB\nWuFYN5gBBXHCOsHOH8HT6bnLqtyq2h41vRIo1F6ipIFzz2Aq4o2q6yGrATcb\n4UPC\r\n=d5g9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.fd8f8f2b7.0","@material/base":"7.0.0-canary.fd8f8f2b7.0","@material/shape":"7.0.0-canary.fd8f8f2b7.0","@material/theme":"7.0.0-canary.fd8f8f2b7.0","@material/animation":"7.0.0-canary.fd8f8f2b7.0","@material/elevation":"7.0.0-canary.fd8f8f2b7.0","@material/feature-targeting":"7.0.0-canary.fd8f8f2b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.fd8f8f2b7.0_1589824414223_0.5748604704732507","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/menu-surface","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"ddd6b7507ce592079aa334e48c0226e2b76950d0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.730920fbb.0.tgz","fileCount":40,"integrity":"sha512-ySVdytWREge6hbtYRV6kDYP5uocmS3CJoqyW0qM59ZnwHV9+Y03ZD+AL+qCFv/fV9KlwTjsi8eyCzg5NZygSng==","signatures":[{"sig":"MEQCIEhNSq+krtjlG9HaQTaGuRvzPuJzq65SSJBlKjyyv+MLAiAZRBO20O9wCLF85Pf3s2OWX4HxmoTjZ58BwRmDu59m+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuWDCRA9TVsSAnZWagAAQ/oQAJIC4XEeNVrhyvdBSlXs\nB10do5MeAscnwgEBzrEAr1ldbhVzaPWzD/Gwvi5FtIBhCP+z+e0JHSjZJP1M\nPZp64gDN5BCWYKMBwrAANjLEIr10A1mZuMNGWCDffH0YDIyU8Z1phs19fAWB\nw93zjyvnPEcYDO3X3JPvNvxcWobDhcyzSiPBNcVHW8VESiGK8P+xxgxmmRde\nzMUj/jjxGedm8rceaS5c14UsJIn14M/f4PL+1Xmf2sbpGl4bgvfCOkrubrO8\nP1jsVnG0xg5BxnYQ6UE7gnDLfzhFe/3zPw1zvIM675hz7FMpIJDvanxgyhh3\n3RJkp1p5m4TMLExNJE7gqPUjD6t2QtyUbfOAWX1ALARbLCy7Oe7EwLJk6fRa\nMuSnWZJhGlZZG2q2osXzZZjTnyN71lKcROSq5ogOxidYd8zUmqX/BCvFIj5g\ngVBpJwD/+umvBcDddnn2UdH9khTT6QYTlqIKLctDxmU7ZYLSz4EDlbqw/ask\nV2HaV61EYCjjLunVBfEovpX2CMUqZiKPVTBH7nNICOs2dCae4Bbg/2LyNo/u\nf5x2cj5OYoA2YNimdUykZ7TOBf4RR7neLaY7ThjlRazTKPLk+cOHWgUhxZHS\nJSPPsPpDwVfQUI9LVHisCr0cpHxH5HI9pfqUdwPi+v7SR4RA8pnZf+LeblUv\npZbp\r\n=hkKP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.730920fbb.0","@material/base":"7.0.0-canary.730920fbb.0","@material/shape":"7.0.0-canary.730920fbb.0","@material/theme":"7.0.0-canary.730920fbb.0","@material/animation":"7.0.0-canary.730920fbb.0","@material/elevation":"7.0.0-canary.730920fbb.0","@material/feature-targeting":"7.0.0-canary.730920fbb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.730920fbb.0_1589831043019_0.2464843625768396","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/menu-surface","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"3a047f8971e5a7add343b1bcb68ae3f480329a2b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.bcdad99bb.0.tgz","fileCount":40,"integrity":"sha512-tS/ztM8i3PgMGpPjTFmIl+BGhza3Qpeb2SoPXZITWzEFdoxr9yYdM2fAT0qVg2FP4xLygVVlUIv+h3fpt9xg0Q==","signatures":[{"sig":"MEUCIQCxrfc55y9wzgcG1HuVEIb54Vt3QjiDk5wECCGq9cbONwIgbjFzShX42TgiVC/Ds+NrByQq2SLPIhFKOfjYNHMBby8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew0/mCRA9TVsSAnZWagAAPJkP/R1+8+6o6LdiFrquwR2Y\n0FeXLLId2bIFDg8fxqXi3ku/gqJ/g+kwI5hWrVTto0wEqbx0CzLaV4nkloab\nTeLeEPwoqgFKmroIUN32lD4UvK7caRcnpvm0ILEeVcCaur9vXys7wV1u9kW+\nW4mk17dT0sbOk8UkHRfZvEJ91RjVE3SaHQTarnZlOyuZEduSFxsrYRGnEmtp\nUlYAgaxBBIUdZ0VAxQtuJA1BA88/c9XsUjyH9OUg71Cg6Aq0G5m1yBX4Zzne\n6piQHBhaC4wQ1FrPI9FwhFzx9JurBFZt1B/TWWbwoIbACBphswVJN4ziR0jG\n3HNygJIXPy4jvGyANIIbs/mfzrXg2FXcybiB87MvLbGfQ6EGmhSraheW/q/6\nej/0YKg7N4k2/9HeZEOszn4jLdjomJSw7wU2ZSNmzU8pBtabJh0TtbinnZmp\n8LWHjWSuMOjvn3DA9pCh75lYfzQLi+yRI1NCQmurMW1n6UND0dz+flI+RKI1\n2G00VKlXnHXLAmYpDP/ddpM/83TwZeykVcZdOvFBRu7jxI6ja+edKXjg0PHb\nd3WOMjb+Mm2+1kcxog+99lsijP7kYaIARxl4fcxAZteO4fxDI+/LRGqseKIG\nv66DUFGEjJ/q1L3uUxqxt7U5rtNXafCsRMDG15UC1nnVFqBi/5irztPfONus\nzFaM\r\n=sDb/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.bcdad99bb.0","@material/base":"7.0.0-canary.bcdad99bb.0","@material/shape":"7.0.0-canary.bcdad99bb.0","@material/theme":"7.0.0-canary.bcdad99bb.0","@material/animation":"7.0.0-canary.bcdad99bb.0","@material/elevation":"7.0.0-canary.bcdad99bb.0","@material/feature-targeting":"7.0.0-canary.bcdad99bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.bcdad99bb.0_1589858278394_0.5164302171836943","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/menu-surface","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"e3227ae2710308a5f31b61f1f6aab28b5ac860e3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.4497b86ed.0.tgz","fileCount":40,"integrity":"sha512-cAMxwoeLU2J6vgpXH52AT0ts4v+5nEyTMbetao/pQ69/XufEmAhL9QXNPd6sZ8DJ6sfojFW9A4l7/fP380Yb7Q==","signatures":[{"sig":"MEQCIFF5sM3ws7BJIAaBmhkKeXxnd1Jqhxc1vbgq9Pkw6xOUAiBXJMd/DpJ2q0T7dn/tMh27JWVlIztj3MVAaiQYpfLF1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1eSCRA9TVsSAnZWagAAqMAP/jkhqLJ61rHgfDR/gCgv\nKRMKs48PtTtP8kF8mfkIwc3Zku1SMImPTlTU+aS7SCKI6sMwWWclIMYDklzN\ndJn8KRsH2H1KDsc4n0RH2B7O/N+MmahcNJxXp6scXQJFn1jy3VslZ4/Roqzv\nzs75MXrpkggzVcVogzNzxnQZG0Y37v9KxY9Yy/9m07z5sm+nHxDBScUE9zXW\nEf7IUKDiR4Oc2FlQmBlIAJpnB14FDAigQZtfmOUACCxLpA75RU11bfZIp7pV\nszjxEHMRnfNUa5HMxaB1R4GyvGgOCDoLmz1h69LTmaujIfdBJu7BiYs6nhKe\nI6YFQu5HY7ZeAZMNAfkHm9LHZ3JZvQW0JLLma48Kdqp1IODaJFSer6g457Vk\n5l2CeHzye79CKziSTD7rM2t11wdb6Q/ZGv4yKePaUmJtirW2P3FdkMW9xDwr\nh5Wobrg1tiwGxuo7knNdOsaHgzzTNio3xWn5ta2mNgECZsnkHT7hwJuEk9A5\nK2QN/jHr8Rdoak3U7htTN26oGRoBMagN2kvu+BI5E3tJUcK4pddwIqfzFyBs\ndjMSHD/7DzwMkr/CP0soNgTyaIuLxR2/Spj9HLQ2cSQbywSTpiXtutgpxn0O\np1NtLUsRSWc0Qyb5oKqV+r7wPKRzvkj5+cvViNUiIt+RQQ0tqvYqOgqa+D/N\nnJO6\r\n=D6pE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4497b86ed.0","@material/base":"7.0.0-canary.4497b86ed.0","@material/shape":"7.0.0-canary.4497b86ed.0","@material/theme":"7.0.0-canary.4497b86ed.0","@material/animation":"7.0.0-canary.4497b86ed.0","@material/elevation":"7.0.0-canary.4497b86ed.0","@material/feature-targeting":"7.0.0-canary.4497b86ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.4497b86ed.0_1589860242342_0.28691895891736463","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/menu-surface","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"39ff1861c1561d6622e074c884dc9e0a8dac04c0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.2e60575da.0.tgz","fileCount":40,"integrity":"sha512-5IUe1cQaDY0epNSX41EmZ6ws9WNJHiFuvbUS7K9CBtWJ5UzAjpgF7FzslBN4luryAaLkS7qGTbzeCYqa5L39uw==","signatures":[{"sig":"MEQCIFj2s29K1uupmMRuAOlxqLVwyVacQQr4etrZlyWvu4ebAiBNntebq+mdhsJMpGNDRqIG+Pnp2OuN/k6OCm2IGorydg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexASsCRA9TVsSAnZWagAA6D4P/AnE6OvSJXLUp0nV7ybf\nzwBK0Hd7jO8rjvwC7SX5dP1+rsr7oe8vHQis8Bv0SlL/5fgqZT/VzOrDKdUB\nMxuIaDsu9JfDOjEY5XWLTVRj2gdtT6NwAZvIx27ne1ULzGGjsjiJRfEdiiT+\nRD+2EJMpwk0Ny4qbZ2+hG1rgGUdopgsz7l+kNTrY9wXH0x3sqC3oCqZdsInX\nl0rp95b6eUJUEU6jDdnlrCOs63sqiqecECyJfzvKUTnaFOXS7Xau6PURcjI1\n9fHKc43/bmMsaIVWQcYwfO/0KJtSMbmle+nNAEb8w75So9LjHIkgDNruWLDQ\nQ3A+xpTTerffIG5mLLOXdebgo6aTbTMAVze3uDkkeqfYp5S4pH8Cl3e2zQkd\nYqVCIev+cV2KDwoQoIXDlR/xuUGxbISlY3f1NcmPBio+zWVTER033UiGu8qO\n/KRVZ6st7nS/PYA5zKlOduGqxJKGCX23ZinNZFr1B+OpVi1fduJSherMSLoi\nCTtJrEphlNKcyILh6AA9DrpPbLzBnhbbcEiQWI6tWG1SlcP5L+sAg9KziTCk\nGE8p2OJ5dOxAcdRngmlqMFOpUMMVEAfPkjPQ+ki4NrM0L1Uc7aYVGWdPDyrx\n6NFbqGRmLriaO0FFuRcerPIH6DdfGvN97j4o5ehW6zSnImibMe4lZ3NXm7+x\n+wNG\r\n=Udtv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2e60575da.0","@material/base":"7.0.0-canary.2e60575da.0","@material/shape":"7.0.0-canary.2e60575da.0","@material/theme":"7.0.0-canary.2e60575da.0","@material/animation":"7.0.0-canary.2e60575da.0","@material/elevation":"7.0.0-canary.2e60575da.0","@material/feature-targeting":"7.0.0-canary.2e60575da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.2e60575da.0_1589904556008_0.22989532445011074","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/menu-surface","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"e3acc22f56f5b0a19df284b097686bcd847fabee","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.e3eacefcc.0.tgz","fileCount":40,"integrity":"sha512-PsgddtIzeiLdFvjwlAxRfVuO4CmUeqXSlzLKR69cYnkXeJKzqcspLw1ZsjrgTCySIdVS5ROR5NVTXyI2aBKHWA==","signatures":[{"sig":"MEQCIB7XVEflUZMm1MVQoJZccuEGlVfqnW7aJp0SrwY5jeP1AiALz6tmwVYcTYrzE5EUbcIp/DP/1/gZxqifDND/fiPcnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBl9CRA9TVsSAnZWagAA/LIP/1Q5xKREqjYel1P6yeST\nUeY0v0s3aenC2jMcCCdUPGOcngHgxCKU8G8eiZDpfU8u1lFb56FJpilZaZDz\nYM3BP7RbkMQW9qFZ9YoO88pxnU+KziZhsDdNsk1V29WNtPvMA92asYWsB4tI\n1hIrJLKeD+yYaVNwdf4vT93rp+dperzKTU5Lrgwyh6g8xiJavZdQnxYBRH1O\naTQJrIH0J/bjx17aVU5mH7/B2LtirDgF9BKJpqqEj7A0EkID3qUl7nNLhdmX\nqLv3RgU5Z+QhvBj/1yISzRr1J0uLAScEMuAzFiKf1BvYlyUkQtoH/IkpOpy4\nCSG2S/KZGtKtPa5y75f63NAhqsc5eIl7fa1GaoYxYvEfTqmEurHHUqsymfG+\nuFgLM9T88TPQmaqhPv+S3P4n1FVQebbWKwVr/5WfQTxDhdzJDqWTt60S7fDA\npXE6BzezLYp6kLX4bwvdSFQ+BL4RNa1DvX/9Aj+38vufq8XO1qGqWrmBZhHO\nsS12o/3nO+i7TIhk1zd4NkIcwBzAa8TfvTp8J9BOvB6JsoU4tIWfRwPVP/EQ\n+/joEW08JCUNdO8ezXVANdY81i/cD5iNOgeyCwrfuN6S5n+Owqocj/ceJ4jk\nenBD5ydme/1JMou/P96Pz9lDkKjbZk28mqPgZ2pjxu5GnFoZ0i8Ne2mt3oxf\nE/p8\r\n=seeV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.e3eacefcc.0","@material/base":"7.0.0-canary.e3eacefcc.0","@material/shape":"7.0.0-canary.e3eacefcc.0","@material/theme":"7.0.0-canary.e3eacefcc.0","@material/animation":"7.0.0-canary.e3eacefcc.0","@material/elevation":"7.0.0-canary.e3eacefcc.0","@material/feature-targeting":"7.0.0-canary.e3eacefcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.e3eacefcc.0_1589909885342_0.5831069781198643","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/menu-surface","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b4c46ca101b361f4cdeb55cc76cbf979c22f6ee5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.b065a4d2b.0.tgz","fileCount":40,"integrity":"sha512-9b6NEaxIWX2MfadN8xyncQwZw2wg4oelJxKIw3C6W9PyVKIWrS2l3ykg7TFJCiBM+FOoyh6AVrgqzTodMngrFg==","signatures":[{"sig":"MEUCIQDBl0SX3/D2O7O9gXp0O9P8KS+aYfGVyFnA5kTK5eCuwAIgIWhqEMD4fBRQ3scgp7rimwx2+Ma5wC15H4EJArAOdWc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUBrCRA9TVsSAnZWagAAgQgP/0XyvJeLLmooyGHUYR+B\ntIRNksnEhjSZE9+CS3JKvJv19HE9So2rXNGyuklnTMavoYGTkKZ3bBOx/SSm\ndiw/EjwrRKn6jjWlu5jMvyLN1YHto/UZ789seBsD2X5B6CptcveGuNtsGkcl\npN674NqgNiXsJ+1LxKIhGXJD+sVl20pu/zf9Do5BslIj+DYucR7lvF+iJtqN\nhc57h+4mTxzO4mQ+H5VJYDlUYe9Tke+NNPcCg5qyN3BiOX2YqowHljIGX8oa\nx/HFjGnLZLLS9+CPCXgtq/EyYqoAc91zSDAS5/DQZtgsrfFQyQVN56ytI/Th\nrB1jJ+XOzj+h+i7nHDU3mmg3AhkySysiYWW/GdTHAXNbA7G1YEsjQK8YERJi\n1vtoR/1xyxHaDD5dvpY14qOeRmFyD4unlIpoiOT0L5YCGcMU51/TDqyjt9xI\nI+oB0mmkD0u+cOclJyHwryYm3k+7bxsEQ56akMHFt/7eky8u4Pfe33KcnYNr\nfBllS966ee/DFrMkNzb2HfE4/Les0z6yyEKAdiz9mqEVjxXTViTlZ9PjK4Na\nUHx+rnHcQ9j7uLYtzsG4cdeBEx+xWqXg+Z2DHjRRdCifn4d3BGiGdPgtgc+c\nNBOUeyyxRupCZzMntdteic3usi1z40/0lERxwI4B96iiMj8UcZqkgKADilgL\npsjo\r\n=xNyp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b065a4d2b.0","@material/base":"7.0.0-canary.b065a4d2b.0","@material/shape":"7.0.0-canary.b065a4d2b.0","@material/theme":"7.0.0-canary.b065a4d2b.0","@material/animation":"7.0.0-canary.b065a4d2b.0","@material/elevation":"7.0.0-canary.b065a4d2b.0","@material/feature-targeting":"7.0.0-canary.b065a4d2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.b065a4d2b.0_1589985387421_0.8318068552203797","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/menu-surface","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6fac7934936efd70928da7ff754dea539190cf80","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.4ebce8d78.0.tgz","fileCount":40,"integrity":"sha512-j6msnw4rHyzyIx1OrX4aLpjgPRD+moQG80mNpQCiv0qYwB4JvOI72h/ADfvjkM/jA4wba+IqNJ8zqJS2q6v35Q==","signatures":[{"sig":"MEQCIAD/2t6Lpzlqi4NC/9cabkdDlZxkQ//N3VLFjyn16PrzAiAZuwgsoZyrbAErmejzhD/RrkT8fDOgtialhx3jQuOnmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZgXCRA9TVsSAnZWagAAt/wP/Rz4aAgbIFgWf88cqT8i\nsAzw+h9kbW+tsSFLbXactPyhvOOK1xX74hqAyviibi0Us1ZRd4J2IbpWG8Cv\nZpRC0ky4r6NGbiO9VwzABu07jahJ4ZvrlCNHo7VppYEpBh/80lf6fHn2DW2w\neCsQNWikHP1s7OGbPBCehpxDVD5UT2V8oMXFgktuA1hZECzOi6f4i8jxblgD\nAzMXsY5tqfANX0xb6dOfDsI+e+mr5HpfUK8Gkd/cyReyR2m2IDSKTSIFWGlJ\nEa0XzdNpESGPh4FO5aJu7F4kAJ7JPNSSJ8Y86LHsjrSWxEUN6HfEiEIXZlk7\n5H029A+0AeUVidg8NcyQwPoveIVI7h351Mk0le9C0+b8Lwr0b7D1+uRgbVjx\nMX7rrWZPebDKCbSoOIKCPDXbeVKsL3P5CFDIBpE1elIW2pYccISQEyWWiazo\n3bZheseXYcmMBNDMYE1A6zeWLB4n+xnKPlPQvukGMi3UGHCnSDziK/cRg6LR\nMhpuTdjbUa8jVn/epm+NSnDau/xzeqJAHiWWcFs77NamvMX6VAM7cH/Z5WE7\n54RuPQA8mY77mTA7fIicDYMSv+wwRQE9qxfhz+n91L6oaRC8WmxXhsXUDMqL\nUjvqUYDUBix04gLUh+DuG0nl/y2JTZJ5mMw1Efh3w+duiZYI1iEkEa4/+RuG\nYQCX\r\n=yeqI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4ebce8d78.0","@material/base":"7.0.0-canary.4ebce8d78.0","@material/shape":"7.0.0-canary.4ebce8d78.0","@material/theme":"7.0.0-canary.4ebce8d78.0","@material/animation":"7.0.0-canary.4ebce8d78.0","@material/elevation":"7.0.0-canary.4ebce8d78.0","@material/feature-targeting":"7.0.0-canary.4ebce8d78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.4ebce8d78.0_1590007830801_0.47702405294326966","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/menu-surface","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"1df325145396370ff6a85ed84930c7f24e494124","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.b0fdca492.0.tgz","fileCount":40,"integrity":"sha512-/gtFGJY3iMIvLuURnP2mJU+VWgbZJ09nIGjhP9hwrY9Zv0u9DWvBL/rDRuC56DPyD8f7+O/o1u/olFeUGGnhoQ==","signatures":[{"sig":"MEYCIQCzYKhj/qc/QrHFxrvBhT2F+4sn6ksPZBW7Gmdv5Kwa6wIhAMRxM5w5S+A8gUdUU8JhasS8DoUeWyNANYBIhbwVn3qg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbcXCRA9TVsSAnZWagAAs+UQAIKKEZOvwQ7i9AEw4oRe\nwyLfsJxP2N/2F4MTX0RsPen134qNb1yAv/0tWv7y6UwmXGHmrGi7INsT/kQa\n8uucdCzJWTVKfz9dwc9uIfDUiBdEH6pJ3V+1gK1LSHmebqFzsx2/QoIk/hBB\nKcIQtQiO84IbHbBgf09ZMcREepx035JCf+kfrn/vh/SzgsCCGpl9dwOOa6Xs\ntuXq5Lw5w79x4wa+rp73TjfG0nb2O52AN6JbUO8TAqgPrL4wvyfORKQw+8Td\nUPpPR/og+YBSYUy5J2E2jZPA/kgYTPLn5rPvaw2tyuszwfBqPu6CS2/NyYX5\ndtj5dS0XZxXdaSojzi5+VGh3sQnOIFYrMa72S9Y9zZJzpwVn17XfHqY734VM\neEblo24i3CpA6389m2TBO1OpAGKq8Se81itclWTAwzne7LS/enW3tfMCyh1d\nRFp1tjc2WLcf7h8Rb7HlCGOg5nu0mrBLzDdXZONwpcp6jawdCLTexBAN0CWN\nleyiazz2XKDlmtgj81gEvKap2dtijZAJg7HjiDOdXoLteqb9XpfQzeCkoRVZ\nO4fOw3OQ0Ebvd+/gbpXEdAw3Ga6yBbUnMScKCzBuf847ISSPbfRkWZqEU0gj\n4lCG+KDXLVBAK32k3PGuoa717ohIViKrRxwu6dkz1axtq4CePDM+En9Ha5L4\nw1S2\r\n=jio0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b0fdca492.0","@material/base":"7.0.0-canary.b0fdca492.0","@material/shape":"7.0.0-canary.b0fdca492.0","@material/theme":"7.0.0-canary.b0fdca492.0","@material/animation":"7.0.0-canary.b0fdca492.0","@material/elevation":"7.0.0-canary.b0fdca492.0","@material/feature-targeting":"7.0.0-canary.b0fdca492.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.b0fdca492.0_1590015766954_0.7319001221426353","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/menu-surface","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"05d9a8474665d387abfd8e3a32d0b2307529ba8a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.c67667e8e.0.tgz","fileCount":40,"integrity":"sha512-z1pl9xFhUy/JNpG7P9IKAD1uBV0XOMFCTEQawZFEza1b3Kr3bLHnCnv5S3uK2y3vBZ8ap89/sRr3QR8wlrzAlA==","signatures":[{"sig":"MEUCIQDX7HNeudWdx5Gu4WoUpZ1gl27ExnNs15KxB2Uc7XazLwIgLqDJoP34x6G4k6EtcFHtdTGJuk+jA5VWDXm8FEWux4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexoxbCRA9TVsSAnZWagAAMO4P/RIanLZqT3cNzTJdBzzO\n90jg5+cbB+GZFyCJ5yu1v6vA0a91w521dXj2lQRPd2vF6/9pw8YElzCF/N2O\nJUrIrRt77+yeEkX4rex4V1SX+j0MzPqFSw33ZmdjcnRiasjSCn3QrxuIiiKw\nhJ5z+6j9/oq0ocKALiiQDxrBHTq+sQ24BLXDjFVo/CsITdIj7mHFVUosY+QS\nCr6F1C3tIoz/5cdpWc9yvslSuPVLDrh23ZleMCoefssFyAzkvBHEowE1DWL4\nlyJ2B86C9/tvPIFwtCdl8viGJa0S4L4wbgy7yCumK21xZi+GcFGl0q8cuBRx\nMms9P89cnh+XQ0yHRdwiNqbJcyWqexFgI+ryMKuznTrGcYAsCKJNes2IqXEt\nh46B3PGd4/IRoSqIkYvk9oH7f8IEBOuLTZNw2rn08R++BNZljN+mtt7Rw/En\nASC7n19V+xzC4VTumDsTlI2YmjyyRb1CM9Ty+h+iIdbbZFCKllN12eGWtp0K\nwbg5FGCIbZI1dK6r6Q4gr9yOv4hspIB3qXbZoS1vbZckQZqhJzuv0Og3T+Cd\nvCN4rTxDq30ZzEfQWB2siCfcCfnBAyXESZvFHtFwbNcuMwtIyF2Ub7j9UZ2n\nvjtFDRSFuhBvnpiG7vzwurpKZteTHDTHtVbDWgmRemWcUJyJ71ixDuZJJS59\npNrr\r\n=KWO+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.c67667e8e.0","@material/base":"7.0.0-canary.c67667e8e.0","@material/shape":"7.0.0-canary.c67667e8e.0","@material/theme":"7.0.0-canary.c67667e8e.0","@material/animation":"7.0.0-canary.c67667e8e.0","@material/elevation":"7.0.0-canary.c67667e8e.0","@material/feature-targeting":"7.0.0-canary.c67667e8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.c67667e8e.0_1590070362334_0.3139202104358969","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/menu-surface","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"8dfb1b9d9516d8b609dc48b4497d5a032a0c2a97","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.62b5f37db.0.tgz","fileCount":40,"integrity":"sha512-pnWRvooD8GXf3gp34H+d4ycexu+H5lgOpznV0ZbVYY5bNVp0+TQBbBknmeJbjKQB9vQ5N5bfgSc/T94qhM/4zA==","signatures":[{"sig":"MEUCIQC53NTAJCgDYtR/262DaQGnb1pGOX9bUncJjR9Iun2rmAIgDvGkH/x0TFw1bUQlzmqarDj+eF8jp3eBnBIDESmRZSk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq8lCRA9TVsSAnZWagAAgP8P/0AaLMCkaCXBDv4krQvZ\n6NpPYcGlAXHjLvUFTZ5nuonfuOjcThb+ptNFrX5xqfI8pbGlKIztZoXrrJ0u\nP1XL0mX4AA1oqkxF9cuk44a2cT3hzNwQ+IWwW2XmUas5dJOYt4C2lErTqflH\nyI65TR0VtHmR8omKdMNVsa2j4uXQIbx6z2+JfOKLeQf0i4qgNPAz6Vd8sdxS\nbZx5ktBvI6iFDmd0eCoHlX9WoklCL0nDy7FvJqP1SQOi3xpjCVO96GiQnJLT\n8iCgWW5vP10RDsgxdaaf8bzfRKISY40a583IEvjYfX8zaun2LIZ+WzwbvdD3\nwlxEiYiT5L7aEliNicR4BnTO2OjjgoO1wLlxciv8/Ey2Qb3R6IDXslDjTSUr\nhxxfeCb2UkGQHyVlPxB571vCBGgd+hyYWJE6WTRahqK4TFanjGRJTtQnqRmu\nBp1ag3uXfBrbOXeAZ/FZJTLIy3npfawZ8XwbLJVYSf5HZdZ5SpDYHS250h/u\nrBf/tceUjOREAq+W8dtccqJ7Oa2a180T8U25kKqBOPMFDcubP1LZwxChREe4\ngzN4OCiRdTNU1+J1Tuw8/YYNduBo92SeVdZc4nVjfCw/SbhF5h2o+9QgCKlM\nuUvosDRnNmdYDFdWm2HXr2UoIv+wKOVSi6GIR0zCsfgeVNEFhAUYemJ4GJ0X\nfuR1\r\n=XIqX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.62b5f37db.0","@material/base":"7.0.0-canary.62b5f37db.0","@material/shape":"7.0.0-canary.62b5f37db.0","@material/theme":"7.0.0-canary.62b5f37db.0","@material/animation":"7.0.0-canary.62b5f37db.0","@material/elevation":"7.0.0-canary.62b5f37db.0","@material/feature-targeting":"7.0.0-canary.62b5f37db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.62b5f37db.0_1590079268516_0.4843744812694497","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/menu-surface","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"580f8b629590f3c203e26574a338fe8b77767519","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.2e218dbf8.0.tgz","fileCount":40,"integrity":"sha512-qwLS1/qMoiEEh2aaybboYU1ygYPby3jGoDxVSdaSOkOnOwWkwm9dGVU369TrtQxZmE4EhpfV79sNv0JBmi0BLg==","signatures":[{"sig":"MEYCIQCwafOB5rtogu58thElKSqUjNf9WaBAMUGoKAiXpXeQxQIhAO9HkJQWCKl+zLAr+Xdj7VdhZhN/nlWQvFHYVng7Yfam","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrQHCRA9TVsSAnZWagAA+A4QAJKq43PLVOvGKQalRRs8\nSCKnDBlC4ClO/UMECzg9tveIdg4gzlHV5Be9I5gBWBWbZ/YuTUPVGnQoQRLV\nsngzVrrG8HmMswzeHWrvtLyKXEvGpZVXU968cB8WOWp9Vp9ubAqqZzfF8ueG\nTohcJDlFrN2rH/MXI1qkHHPT/1CLbXdwJ7OZ5V/W4lNpBiSoxhz+3CMNsCxO\nF258zdtOSa9lXItAsjq5yl0AlpJmOLlba7sF84t9jcL4Tg2Wf6/kAbFeqqRc\nw1SI4A/7nqC6yxC+MLs9qarsD4FEMnLb4OF2ehsQV0GBf55ezrTO01Tn1RnG\nOXi3gWuNrjwdQrAljnig6O0QMJpAkWej2qGdUkt8WWk378jQFtLKei+i4wsd\n+Jl1QOdR3OtLiUU5zczxRv24wrsdcZK5PWJ4+5zTOw/06oXU4bCfXXTucwsF\nUgnqYirHlid80z5AJmwIKNzlxzz7QamAQTNfhLjnD7lpeYcecEdffrEzn0fW\nWQn3TMcHsKoW6KmQU3Eez8KLEMTyBHy4U58P4EAfP/ipEaU2m8whT6xBFGAo\nn23pLDBfJqB3KVCuROfAK/+n0NrmJU9zHDVNysbuUHhmdc0C+0buN9WNVj2P\nPnbCIjl6AIGLISP7eDeIv6mhRzgCuD3iQ3MaGmcpbOpUS6iUoET+Hg0S09yV\n1w4/\r\n=VDem\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2e218dbf8.0","@material/base":"7.0.0-canary.2e218dbf8.0","@material/shape":"7.0.0-canary.2e218dbf8.0","@material/theme":"7.0.0-canary.2e218dbf8.0","@material/animation":"7.0.0-canary.2e218dbf8.0","@material/elevation":"7.0.0-canary.2e218dbf8.0","@material/feature-targeting":"7.0.0-canary.2e218dbf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.2e218dbf8.0_1590080518943_0.6804250277079573","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/menu-surface","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2914f94acd491612620817c76aab53ee8e4e77a1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.7fd792bb9.0.tgz","fileCount":40,"integrity":"sha512-QFvcDOZDyxlheBLmR/3b51eX0U+0YelNGOocoiU95MCo560SNVpUbLs2IL0y8O51M6IKe0I890ckcoDngDJr9w==","signatures":[{"sig":"MEQCIH7n6jhXhYaqUfZVf/oK6YB/jewOyoNYmMDUrvOA8aEPAiA/iizGkul7jIM02CxiKpiJ2gQ6kfM0I9G9vfM1a6kU3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrb3CRA9TVsSAnZWagAATfwP/11Wblt6ym0eJmssfJBG\n5fE0U1IgZY7u6HPakYN21jY2EQ7fL07hZUJObPH5KzFj2NeMRkKL/56Utgh1\nj3yflXHF2lLC2NZDsdqBpyn3LcrAHUClKzxfi/gJ5C9BCc9h2VpqdbXBW29J\njv5GBoNGq4Zfx6dVAqZhzbkYE36iEab+hg4dQISSYBytm3ARCTdo2iYVoLz3\nEIPHhZ8BG71hpDa2InH6FDIMZ59dlE8d9ysaGlLNOyH4V/yNAbjiqW9fGv43\noWhR3+wbD2lKsASI2F0R9CQw4fg1pNZaO5JhbUy9jx4D+FddL0vLsmTbYeBM\n9aO+fpDZISR6hRxYiIbiAc5nDv5N3joJV8WyX9qWclVAhV7LJTS/XIQWSBuj\nQMz3UUhaDYHIoACRSsFX4uHGxXI2ylrudPMKPLOBHIB7CdSXeUipeLI5pEKQ\nJ5msZg722QO1dTz4wK7YF9uCE01wy+6aHCt3qbIK/47ZFPm5d97VxKROVL7O\nuiWgLcOxLmKYsWN187aUZa/5JW5we4WHbAgslRr3Mtuw82D9iwuCGywH6uuo\nWiFbFqmPL17EgixsFJ2Kd+fSHCXdERFcvZ2MkwtCrSXwGKR9qQb1u4Xwp5DT\nnqCpcFtfRGTUHC66deSKNYtpZhzxIg40Bo1WNkfoJ0KTYiK8awFc6hmIdHOb\nHIfa\r\n=n4uU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.7fd792bb9.0","@material/base":"7.0.0-canary.7fd792bb9.0","@material/shape":"7.0.0-canary.7fd792bb9.0","@material/theme":"7.0.0-canary.7fd792bb9.0","@material/animation":"7.0.0-canary.7fd792bb9.0","@material/elevation":"7.0.0-canary.7fd792bb9.0","@material/feature-targeting":"7.0.0-canary.7fd792bb9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.7fd792bb9.0_1590081271122_0.9881544490753649","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/menu-surface","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4853f3541d7281a174ba1cafa2de28f078273f18","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.a66493cd8.0.tgz","fileCount":40,"integrity":"sha512-mJiGxelp39R/OC9+F1SBRaXnu4kv97DV8A5MrU8Kzzk4gSthiJLBVtPc442sHN377CI+j/khh5cseYgSaBBbRw==","signatures":[{"sig":"MEYCIQD+aLHlvOILgNdlcgDPfJzSfQADuVHKp6X9s5aELBnaBgIhALpyD7ndAhZ2RV6lx98ZVlHYnMH5rfOKmLD+qwCRsSuT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrfSCRA9TVsSAnZWagAAcp0P/A0cD/dPLniozSoMHomV\nl9BQKI4+MSKstEyyzzFLE2U1v37madC8w7FYMuy4bijuTU/RrBOb3XDE87Ts\nGwbl298MP/zz5eTxra99QZdywSNYFlX60hnsArry7M0oc5I7E/TvkOBSe21R\nsWBGalejFPQ/VGaq+thhCVbP8XoiaP3CargBbDl0vVCqmsWk/0dp4f0JYSd3\nbd11oy1NtgZeLRTILllMQY2GL2ZXyeT8KEjnmSm/x60kk+GsxmTqPIcK098R\nYzLpzfF9RQfo9P2AmOnCfCC+nv2pSloCOs1MbuSVfzhnEYwFxKEN7VDmEfKm\nZ+mvO6YKqgwPKudYHqjjrDSg+6aw0AnWI3RahrJVMYhEb4AqE3AtfLfynQoK\nEly62gynomq8VCIcfdj9qQnq7edhBus1KwelpAGD80ygCyoawgv9qr2X5V1i\nSaF5z/jEF5+OzsWSNvPVVS14rXdJdWYiePz1fJOhu9ozYLsjic4zSXvB+cmg\nLKIXTulOjhtUUv1LOUM4ahagPBG8BDARNzSWcmgnFObbsckHCOQbb0IMtQsR\nlzWwPy0sqsjclIA2g4Et4+gBaRMmOYkEA9rNBNw+EOx5TGeuPw8f/NbOL0yP\n58s3Rp6nYmQgcgktznT+DniARq3XcUrVYCAZuBYQ6JIyptVLze1syoctLJwK\nSr6i\r\n=33uC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a66493cd8.0","@material/base":"7.0.0-canary.a66493cd8.0","@material/shape":"7.0.0-canary.a66493cd8.0","@material/theme":"7.0.0-canary.a66493cd8.0","@material/animation":"7.0.0-canary.a66493cd8.0","@material/elevation":"7.0.0-canary.a66493cd8.0","@material/feature-targeting":"7.0.0-canary.a66493cd8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.a66493cd8.0_1590081489580_0.45060535109255206","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/menu-surface","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"7e9bc30842961a4ba25bba649ae154ca4001abcd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.da05f66e1.0.tgz","fileCount":40,"integrity":"sha512-wSUhacOhNOkJVNoEV/huZrXZZLH+jv0sDZaeHp1EJtzTDiVgJoVTYThtToT5b1byCvCC1Ij3rMpWG+tz7qWv8Q==","signatures":[{"sig":"MEQCIGYCq3FhzRVKezUquhee/jwGhhVotWT0pNTJ21+9Oa4gAiA+3H+ux0RThsa4I7sepnBclYh10LC45brP1IZ649Kltg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrg+CRA9TVsSAnZWagAAd4EP+wS2ZU57OEUK1e/kipa4\nt0/yQxBDsHrt3K1DWkySy+DnvZcdZD6ZkTQI+5RNZEkZ1HDI+GpYzLhUpUai\n3mI+dW9PEVUSe2as/mlFjjFnKqTjCpAXCgyutmBPqU4g7alnUkgywEwdUxHh\n8MDCDG/wbyIsAoxpqqJiIFq6qqjH3b1810HGxy/kBNpynA36pKOtJIdn7V+4\nXczrW1nPyxS8Qun/iamWoeaVVDnwwzHnNfn7/TxgavERF4NRa/OrQmsmd1Jr\n2A5W4gzzAuMnxgDmk/OSJEoAcQ1HqZfTn26sTBWvoP1KSgDlnjgS3yjBfWfC\nufewxHHOZkBXR7w0xfrYfmsvO1zb4Kr5oNbJpHa/mpJDtmUU4BY+0hfwAWaj\nx8U5N2jc6CzNIZpy+LXwr1D/xD+sBy2mQSZyArcoxG4vp4LMO+ArSLZ210f+\niDfkd8wdUsZusur2UrTJUzUZDeHEaCdQcLFYs2rTMa6yQ0Cn3THqbstOO2Zu\nCxOx3q3aBkdIhsgTRNek3S+YPm9vyWPObmpEJL31tpPfJo0DdfU6dBzr/Kys\nbiiR+TXobgJcfaYhZ6tVyk0n5fdzJfpZnx5K1AG5EVu/QgQxWjdvXPssW94O\n6OQnzg9aOrDOHTUg+hhCMBWITF82aI33jQ33a6wfiiHTNSD9DbeOW+E75c78\ncX1I\r\n=PhVj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.da05f66e1.0","@material/base":"7.0.0-canary.da05f66e1.0","@material/shape":"7.0.0-canary.da05f66e1.0","@material/theme":"7.0.0-canary.da05f66e1.0","@material/animation":"7.0.0-canary.da05f66e1.0","@material/elevation":"7.0.0-canary.da05f66e1.0","@material/feature-targeting":"7.0.0-canary.da05f66e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.da05f66e1.0_1590081597808_0.6753814280471395","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/menu-surface","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4e7df734274f556c94ed956a08363d10478fbb7e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.740860e78.0.tgz","fileCount":40,"integrity":"sha512-bL578wgiNzgBcEUPd3EW+Hf5GzB71P+Ij1Ru/JYGhkqvUMA5PT5EKWmSc7F50wkJPu2RWq6plbN3Nc6TVmg6UQ==","signatures":[{"sig":"MEUCICCLuYqoWqFIe1YLLJY5q1FK/YzG9/WuS+E/0Rg8ONvLAiEAzZZJZAOedAdJj3dnSUaMEsPoVScZgMTn06P0VwURNdU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrnOCRA9TVsSAnZWagAA4vIP/RR69eT+sLjNFMpnBegw\n7HD5Btl6cPI0IEsKgjam0LhI2MdB6Qjl8h2I5rrzFGb1kh3GphReXyC58VO7\nT4yYXzmpBD1Aq6Oybksp1Am5WarZPHjlb/IEi5x2kB45wob3xNSf5HceFxP3\nZlK3eoLcfS3kBYo1SybmaRmSchdYHIDNtgUg5pDmZ6TszJXhUaqhilhNln8N\nf3e+4v8ePTQt7jJSMCrrvyt7/7K2KQfs18C6+78O7exXXqNawCyYxf8S1XoK\nkWXNYMeegh2DhUD6672G1fABNKgh2zO30fJBMHigPIOjIfqnrmfsOW4BH6bc\nLE2lYVwjwrk75Vg1fvqONx7oUBkBmrrAgqQ/LpPo6dEaneClE9wgUkxkobGh\nvdj4sHJoHWovMDBJASCdsOnBnQ+sAhfqTehDFZpv9q2h8qwy3V7llm1vSwfY\nNs0mviFPZUmlOidwmfzLyS/OdVAHtMqhboSK2D/1MA7cbEVGLu/WjcxlQx7U\noE44JRfKq9NP2ve6GaHIvxSRT5oc/KoDzQ6V6xXhlFBV935c5xArsKDqaMzd\nQi/4wmLTN42NUrwsxNgrCDwMlIlFBCSgoAz/t6OrIMdN/pPht0iOxxdWrB7T\nIg3F3wO1JsNumoYvuZOiJbTMfDTpjEHxSieLPfm70cE/zsn6R3LLt8blSnM8\nc+Kf\r\n=vgdR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.740860e78.0","@material/base":"7.0.0-canary.740860e78.0","@material/shape":"7.0.0-canary.740860e78.0","@material/theme":"7.0.0-canary.740860e78.0","@material/animation":"7.0.0-canary.740860e78.0","@material/elevation":"7.0.0-canary.740860e78.0","@material/feature-targeting":"7.0.0-canary.740860e78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.740860e78.0_1590081998177_0.012153760575760009","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/menu-surface","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"f3bd05b0d134fb07a93d0eaa42e20fb1e244b646","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.5cea2610f.0.tgz","fileCount":40,"integrity":"sha512-z6Km07gGWh9c9kkQlmm1nhuOJseOhUnHvJgTXfl8Ul0mjh4t9URyBYlnT9v5xSH/1zRQ5yrXyTXOAS+B9Vq1wQ==","signatures":[{"sig":"MEUCIQDQj9unXfZld+aANAwB23i/CIuz7lqCtPUkIncVacNnXAIgJIkXRXwb7pm0r+5myYma69femvHQY/vSCG9j5sqZHh0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpHCRA9TVsSAnZWagAAMGUQAJuc7QPnMXQlRSZn+ibk\ngRplzHcRzVpRe2GYoCcC+sv8tcSRGht2HcYRVaRDNxGBMSKsTeuKY2iyvfIO\nGgrHTDIwIkAc8L/eIEllebmbnIdA1sKjYPYSrV/uRc8jbI6ahdTiV4eBf3XQ\nvi9okiWIsIDCIZmynJ5IAOWp/5hvSkYNISCyVvOXoPPVT973TkUQlNO6vxG5\nM1kZeJOuMKnc7Q9Jjquz3oAkUm0O+Y44TpJqT+x7jYh8587uC/p8skkagT1y\nZeYRPQO/YWkRiifZu/YZuPbgdwrqZjy256gy/fkR3frKB+f3/9OggbepS6Pv\n/JRolLGR6aAdLH6Mi6bcf7vIVxEoj6avLPgp4yUYEG1jsZvxU1GdBhWBddCS\nvsbzNIS7czCbaSz82iHmte2L2pU1qohBQLtt0J0ZPfVkNX7Vpez+rtTxZSZZ\nLf1HXwp/exqlgXIcnNlQYDkLiFGJ78N6M6aA75ybFvHozaGZ14g5wG6tYJ8D\nbMEOhZN+RLvqvJ1g5W6Y4Vbl6fsb/KQOfc6Oo6fG1bVCB7df3gP9kQOQ86W0\nnY0FM22VPnFwDl6ALIdvLKDV6gbx4KCUoKvld0g2kHBlJFZLzlW7y8xb6M7L\n3fiFhYuIZzMKWJ2u02wphXHBbGr/3IzjfA1CICqq8dAZW1uLVTYMLQCnQKhT\nliVO\r\n=GQaJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.5cea2610f.0","@material/base":"7.0.0-canary.5cea2610f.0","@material/shape":"7.0.0-canary.5cea2610f.0","@material/theme":"7.0.0-canary.5cea2610f.0","@material/animation":"7.0.0-canary.5cea2610f.0","@material/elevation":"7.0.0-canary.5cea2610f.0","@material/feature-targeting":"7.0.0-canary.5cea2610f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.5cea2610f.0_1590082119117_0.9363387310861289","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/menu-surface","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6a70ff6e120d819f41252fd8b994c15834a0e1bb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.cf7747ef7.0.tgz","fileCount":40,"integrity":"sha512-ALtOumF/KmrVJv18p6G1NW0LblN9Z2c6/O9aY8UniRnU2UA3z/s9C2/YO7xDvnegf9RRZuM7OrL6mF539cRZMA==","signatures":[{"sig":"MEUCIQCtGB74vcWJQTe62R0Nsp0swkEDi9xivNyAHYZor+t9xQIgK4ikM0OVj85jqNHnrcyppBy9R/UQeap+IrVkxBAxmEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpcCRA9TVsSAnZWagAAaJUP/0a97deZLTGsv8W3n5x7\nS7hF65Vn2lb9Sd2khg4hsMM+jVQgn0Qy4SP0JbHYRQ5x97PGERWEnpwbsjKk\ny53LN67mYC07kZmx7Pa+hjt7enKmTfk5rlJGVjKQQzrIommm4JX6pFMKXoe3\nqOlddlvJmT6enKES+JOhRXrnDhAi+zVNbi2QoYuhueQ42MhxnB1E4zA0X6AY\nm4vR+KkQLjRn816x7xpafx3Z9ihVyJB/gW+zXn2zlM1glq/r/j8M13DYiAyN\nGNacHXgiEhawfsCBv8IPd5HpxFWHUFQ7hy0PEWditMTy0kUmWWzfpwpp0wma\nW384upXsu7MiZS9vVxOiKT4cohf1i9HTj0KTt5Ywf2YZvsD7oESk0fkUR0ED\ny3mz6OKR1AGmkRvW+RQxXSZ6jfXL5z+3iDtlSEQ4BnsRWkpg+6p/mP7FDrC5\nDix8GiJSZqhzDewnNHFAMNwORYAL9dd2DyExZISz5KtZJVDplWI0p+zFMcDS\nKeYqb1OBKSmRXbRoIB5KPjtdi/R62osvp3Wq/MRZma5ZavcX9QuxpuM2eW45\nwhHMwLvH5lWGkPR7wWG2CswpbfJhMpyELYlDRY2AqlzqGOozoztR2FWHyhaS\nlkad36uOKQszOFhhNf10V6n3GC6/fdV6FhMr7lChePwq0TsRYtsnxaebilT4\nmvJb\r\n=GF4F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.cf7747ef7.0","@material/base":"7.0.0-canary.cf7747ef7.0","@material/shape":"7.0.0-canary.cf7747ef7.0","@material/theme":"7.0.0-canary.cf7747ef7.0","@material/animation":"7.0.0-canary.cf7747ef7.0","@material/elevation":"7.0.0-canary.cf7747ef7.0","@material/feature-targeting":"7.0.0-canary.cf7747ef7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.cf7747ef7.0_1590082139941_0.3417322815217567","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/menu-surface","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"680142830e14003baac6faff7d2114b0545d8625","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.862d0d7bc.0.tgz","fileCount":40,"integrity":"sha512-PBj7dYXBzobyps0EEguNXv06kes/592hOCOxgodQWv58mmK9U/fO/VnjeuB12k/4qkVTUt2Yre6+6MEfsNzlmA==","signatures":[{"sig":"MEQCIHGRJztPAOENBkKSVBXEJA4GM1HGH4l4R1Udexxgg+msAiBm1+S/s8GPSttgKpzoTeEc3U6Ww4EWU5rQPqprZ8AdaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrr/CRA9TVsSAnZWagAAR/cP/0NZF327jzy/HvtTJ17c\nc4cVRIypBC4Ck8+dBcwHkkwRkghi62YutaaIW8EF0m1sMBQj2qJFSumL2Xbr\nSXV+rCGHQHuziU6J5HdYY9uVMhtRe0AB6dhbhJ5KTRGEKoDlIeq6fzAyPd8i\nRHiQkCOL7vSUYfVL+UyFKghckLByi9RzUkiQRF0LQVeHylr4Qt/2k655bHOS\nKbMcO/YCAdpIcKmqS1V8yW2tZYT7b6QDwoJLu9cIIFjnCmr1wYQzckd19Pj5\np4EjpoinnhF/GDeDMb4pafuoBc9z39NXmqWPdU4JjzvA+oNsTfVYxa3ai1Cs\nbUImOopYP0TnkiFCTiwBHjfJkGK033+cHmhAIr483wi+zzd/9aqtxR0cWHZL\no2gv5sjMlJowudP1At8VNxBBtyJOoKtm8urCvOsob3NkOnLGKCttiYqPSlgN\n4SB65G8p6G54viowqYqEP46VTUsK08m69Gajs2ikF2+jMO8ywSWlAAgmPycB\n2la8Kz8nwN3Zm9gyR0w802bCv66jm1EZhFf0hUpCfWMLLZKLJnVcP67fCxOn\nN8qloel+H13NqsDR0VjmJYpYma8mHUfwv5dfUOHyDIzfBVw53chIYr7VPAyz\n2cbDDEX6uo0LSy13WDVQmePhsxd9O7Kaq1doPeoEKTq8yVfOLec2N2Gi39sc\n+tSz\r\n=LVBz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.862d0d7bc.0","@material/base":"7.0.0-canary.862d0d7bc.0","@material/shape":"7.0.0-canary.862d0d7bc.0","@material/theme":"7.0.0-canary.862d0d7bc.0","@material/animation":"7.0.0-canary.862d0d7bc.0","@material/elevation":"7.0.0-canary.862d0d7bc.0","@material/feature-targeting":"7.0.0-canary.862d0d7bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.862d0d7bc.0_1590082302062_0.2532934993531426","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/menu-surface","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"34c66178cba344dc5ad10ac01f5700a5cdc8caba","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.0008c8a91.0.tgz","fileCount":40,"integrity":"sha512-lLbyYZCwlh4wqc/5LrVAT/54elwz3zoWSNPXmN4plB9UCt1qmmJYuc9yBk4ECWrR/7U9eRiz1b9F9NEnsZUvzA==","signatures":[{"sig":"MEQCIA6EofXXP1NrVaVP0lrdLkVgVAWYFYY7RJZ43TK8mxwPAiA3HyJen0Xr7LUyLlF+6Ak/EzWMuK57MWNvHGdJBzF2LQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextdwCRA9TVsSAnZWagAA7FsP/1INqkEkpT7A7fIRiIoo\nEesA/HoF0KhZ5GzhNlmtGeKJB2bZmwJmifKGU2tG329x31ZWsoIDcua7xgjA\nYv2Sw4H6E9SmWHts5HSTqAhgWd3wwsQtfZuLx1+iVQngRel0crz/F36QF0zi\nlauWrQnYnj+Jf7EWRzZZAt1C99KoLW4qoIb/yjibZ8driDHXApHNCJtvtDNE\ntN9gZ9qNTPiVN0g+c+dkjmE0SzMnqq/K9hRRrbU/MSVHIUM9n0Zib5xzbPEq\nQvyWHFkHInzDrAjnCSetyeFDbO/c0VgyG3i/G46TvPpS8eB4Ba8r5V0m+UPF\nOi+45vGcPmSLydu3vK1ZoShGmGQKXImr95ioYRIY+Fh9Q29uoqyauUFl+wRx\n1757t/8DZMCPeiUfxHotziPX2AmLY1iw8vchF4Bkf2l20ghoUUuwV90jZkjn\n89STibfm5ltOoyILeTzRSs//qHz/873TPMQhebvpEjlG8nMRHamJVbua130J\nOUrtNJO75X76LzsuYocJviY6+WwpU2UD2bXsV/lENQucsLH4BjndxcxDyLtq\nj4rgT+45O4j1sCdjxUez8PM211d4BbAV3S+tyAHu+jxEsyuAkMqulkyuqwUZ\n2qoYSN6KZ9q8NsXAbPbuoXhhC71Q09aIeAXdVoXNOjaPucggORNujiwod3D7\nMFtk\r\n=YX4i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.0008c8a91.0","@material/base":"7.0.0-canary.0008c8a91.0","@material/shape":"7.0.0-canary.0008c8a91.0","@material/theme":"7.0.0-canary.0008c8a91.0","@material/animation":"7.0.0-canary.0008c8a91.0","@material/elevation":"7.0.0-canary.0008c8a91.0","@material/feature-targeting":"7.0.0-canary.0008c8a91.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.0008c8a91.0_1590089583673_0.8818049767769087","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/menu-surface","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2c7153eb1b0bc3d50939f00a1f982f87d542edf2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.541638fa2.0.tgz","fileCount":40,"integrity":"sha512-EB8nzazvvKi4NadFySlwXw8jXOjXr1z/ZrCuLtUZyGOpc0AgaVcCLGf52+SMMrgLh1ORYcS/DBguMAAzDS2ghw==","signatures":[{"sig":"MEUCIQCmrUqZnZN2rGlWOk+phrBcmJ/ZunyfFr8jq5ygRODq4QIgKTzkNSZnG8JL+xBBKW9haXExkCcUdOn8Btu9n1zUFOg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextrvCRA9TVsSAnZWagAAXHgP/1MGIhQKBcgKaSMQsOZk\nHj7div5Mwi6QUXGcjjhIYIA35DX0HPaQSGUpo5se2inixWoor/tFO+LfYOVu\nKSG1k52oP+5+3714vm6/4V36jNpq6tW7HvCKpw1mJ3VpUAcM9zWxp0LxZHOb\n3D8rtvXVFFC5XkIGT2aoxKqVEe970nFhlhQ58CSdeBI62ayVrcbutRg2e3t2\nKf58CLVIW3Gw88sYa2bKAAiMuvt5MT1X04dEMgesj9JI/Dc2+vkf9F0usK2G\nw6aEGqrYvdg0HcPmVw+QeK7FenFOPlaBBfJmJAEBe/sXdy/ktZ3w6rgY8Hue\nnEXN5CToQEt0IGpOmDDZqKpLYOp5JnUXNcSS4UOadWolqNQguy+vU15miCHQ\nt/GMajdcYSxG2KUlDlVgiW2RraOIz+2jvN6zBnrXELVv6ZuNDYx+Sl46YuOx\n99cymozUDTROeelrfBGIaaO8lnnmwm7MoJACMZpfZlm9OpDIB3Tmma1FZgfK\nDJjGs+Vqvk4Y5xV1hC+IAWI6fD9IMTzvMZdY/IXrYhmbrUQn4D3QtRsNrpKA\nEZFBzUNDVyiEMIyFIYW8Kxn19UBFOkYWqNkRYZE1os+zowr4PsACIeOGyThQ\nESwJ5PEc9qNDrf8cutCiPEx6Ndg5XPxldTLt0xuleQbilRpfI2DW2IFopp3f\nSSNM\r\n=OlqV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.541638fa2.0","@material/base":"7.0.0-canary.541638fa2.0","@material/shape":"7.0.0-canary.541638fa2.0","@material/theme":"7.0.0-canary.541638fa2.0","@material/animation":"7.0.0-canary.541638fa2.0","@material/elevation":"7.0.0-canary.541638fa2.0","@material/feature-targeting":"7.0.0-canary.541638fa2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.541638fa2.0_1590090479300_0.7684386586936727","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/menu-surface","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"3e19e1b0743ae8f61a4e8e6246b4a7788c3b4748","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.6167cd075.0.tgz","fileCount":40,"integrity":"sha512-WfgCFZsi3mnMPjK7rAWbbg6FwAz0DOidH3rOzs/qZRWkYvlQLzigS8aEJDNfmJmNYydTEnCkitMv3c4JQ8B90g==","signatures":[{"sig":"MEQCIBYH2I1XIq0EuJ26WH/4lbA2rnw1QuWQ7ymHNwfIVvIqAiBHAwPyMgdC2gweGaxynGSC4le55oMsZy2B9Ynog0Vrhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuKqCRA9TVsSAnZWagAAPpIP/ijCmN6B84OX3CV1QdDq\nWwJKb6inCS/ZILh/3wFPMVqfTAA0u/NbpRa0JafH/VBpqtQszNAHNRKCpL09\nESF8m/qglXV4TEnm3lMCy9rwzOZEFAKgm+6mZnC8xINbau3i4afLnHkhVhIw\no65PjeZLKNnyB3fmR2vwrX5Eh+Y7aRstBSHfx3QCLOxZDEJp6Cc4ya8br5OP\nVu/Y4XZbAWtN4Eg2Duwiaxjw2CyaXzGZSDtO8gtbZgYTD/XMaaqm8bKkdf82\nyBC/+aHuVWY+KxUjVAD/Nal6A8q5VmOeFERodY96uGx3r4ykAX2CUMLr3GqT\nsVSsbjeCTDgr39AGMV5oZnfgGUtaU3cbjH6k9u/yg53x1rqqtvhIerZqHdiC\nbUiS6Nxej5wm8AmBG7AK1m3w3pMfJGUrKldDaRKg3iGNxY7VADtJNAD1dWFS\ndlcyyrvNHW7NaRvoXRW036p7sjaAVeeiRj2Slt9m//w9c2L15vsfS7OsPtYp\nqYsmRHOzxFabj6l44JRfuHsp4zxaKN+/VRkR5L+Y0eu2s5QtHPwSrUZSWsiY\n0y/A1xr8Kdq8xgEXHH9L5vJOSceGq0rkOB4e1D2KjLrg0xcZesxT3sbIJpOc\nbEhgdEcggkYG9Ff489WAXegObBskjj07QrN11WUGGPRtVyhqv+vjYDL9aM44\nX1us\r\n=TSUb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.6167cd075.0","@material/base":"7.0.0-canary.6167cd075.0","@material/shape":"7.0.0-canary.6167cd075.0","@material/theme":"7.0.0-canary.6167cd075.0","@material/animation":"7.0.0-canary.6167cd075.0","@material/elevation":"7.0.0-canary.6167cd075.0","@material/feature-targeting":"7.0.0-canary.6167cd075.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.6167cd075.0_1590092458334_0.792608792192218","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/menu-surface","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"763997e4189a8c94cce37beb1e2acea9d92fb9cc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.863ac1b0f.0.tgz","fileCount":40,"integrity":"sha512-6H4VuhZ+CV30BV7F4y3k5XO0Vcj1wVGCjguLmjK6hm+0Z3Y2CFa9hzL94y0dEBUeyxXwcqyla5b2xlO8SS51aQ==","signatures":[{"sig":"MEUCIQDYSm82FxNOHdN7ur4oFI89yBkBbP2/bwuEOnjXXiWlZwIgVjOBBmmtmhfCuiM9Mi4Z9awi4hm1Hl2FGNQ0YrsAN4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuvFCRA9TVsSAnZWagAAdNAQAKJc8vWwz4dPlIinOM/k\naSzfCrCqEeUa6jxt3Enwmd1KUhHk9lINIU9hxJWDTRMNI9JqFr4DjBWk/uL1\n57na5+XYhrNhFCwGC1k6mxYOONdTK7UDjZSSsROAmwkqv1mn7b1CgRdYwySm\n6i9iiZL6Imcb0A5G8stTf9P3DQiqzghosMnByU6DxB20YoeWoAazit+MZX8D\nmCROkN/qaAC0pTpLgt4VsGi5gft6CCtriqOAu0xp7pSUvQ4d2qiqRrOINfA5\nzTr3Y00EET5hGbxRArRc5eDLC41K1XTHSLLG5jbl3IKXra6Lpen9EGEXp1vR\n3ZuHNbNtRkmT3/wwDYa4jLgC1u5skGaNvja1TG+3TcBBMU0G/nDZKaqJNSVo\nuudJVnvcYlyNGRi3/12zGcEdYa5QFAPa1bpwkp8EFsYvN2FA5uDdQcB2kZOQ\nDpayYQxv+j0FGEsx82T9es3OADH5lbWk+XACDXN1xv1WsbvyWZMrj4fypBaI\n2jpIKeEuRmR1ZseEz1NV359T4iarYAu739dJgmXTb8Za0IP4KxE9Xi4qctAN\nMu7k1v9BYSmy0H310cKs4sEViL+RPSeFtgbndOTIoyA/fRkBiXWGvpEnlHSt\nYyx6XFLHXls5IxskmJ0G21E27C6VL0XI/Cd1/+vVTO/g/MeC80vIHRP4kr3P\n/N+A\r\n=Z4Oh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.863ac1b0f.0","@material/base":"7.0.0-canary.863ac1b0f.0","@material/shape":"7.0.0-canary.863ac1b0f.0","@material/theme":"7.0.0-canary.863ac1b0f.0","@material/animation":"7.0.0-canary.863ac1b0f.0","@material/elevation":"7.0.0-canary.863ac1b0f.0","@material/feature-targeting":"7.0.0-canary.863ac1b0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.863ac1b0f.0_1590094789155_0.4777774623395836","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/menu-surface","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"82117aa0dab09b963588b59e40db191aa9686550","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.d30a214ac.0.tgz","fileCount":40,"integrity":"sha512-FwDwlE0+4QdF0XNnSUHJcdXLBPeZtEZtQ2dh9mD3YxnlRlHdJecH3puiWdLjlTIZZtBwuJqn+Gdix/tER0EPZQ==","signatures":[{"sig":"MEQCIHHOQ2kqgAlS4OOGYQQpuLjq8+hskscFV7Og070EYiocAiBBLB9ON/bfkcH+Jr2jWPrlXlziQIY2c9osxODIsxdOmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuy7CRA9TVsSAnZWagAAL0MP/1Jeqq/YVj/MmJxdDXv9\nw2VaAWH39Vh7dOl9I23QzuK3nZwFSBX3QCeMeogCUaswCLP7oBTHj5haaB8f\nNubrglYmxbynkgowocUhQtirdnlvPrLGdxiZEEWRCCDsF782HhjOGQgdBtok\nV6XoqCLXwbZk1tr/ETvjSfqcGA6t7yiZANFy1F0qtvSR6thWd23DtMJHqwtv\nrTiJU7kpmv+DpKzgXa946+xD7z8eVI6Xm6EQ7Ejn19Zjg+Nw55vdSwSUAffJ\nOJNJH8Fkfyefry+ZJu7aBNAZJgOvV9d6wBBfb8TkgOI+ogQ0OfvObaY6vMnb\nH8MLg4LAutHuyr8GdHLp2ORlkjPi2lhMfrvxR16Chm5S6UvTW1CCrtHtRZC9\niSW2zbMTjtZU0/84hnAjPnYxy3xZLTDctjI281QfC8J0OITeQqemoBQ1b6Kr\nIVHH/gOuKHmdaMEuPcBC+foZEhVkmMkl3gCedt/s0tdyhGHgcFl1QOrIDBRq\nMDytgjVWeon2G7rfBGJHwF+4Xc8YNyVvaNg5JTRFm+ifOJsmuzPib9GjIIeR\n+6qSEdnw8mXEE9zjsxtdGUZp/CennhSVH1qS2G6w+d9vmanqfUiGmipNGBG/\nP3lCBM78Mgaooq4EjGvLPkVGk9fHJt9ogPwhb1P4bvl5ifpRvsKharPLq7lY\n7vLD\r\n=3oza\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d30a214ac.0","@material/base":"7.0.0-canary.d30a214ac.0","@material/shape":"7.0.0-canary.d30a214ac.0","@material/theme":"7.0.0-canary.d30a214ac.0","@material/animation":"7.0.0-canary.d30a214ac.0","@material/elevation":"7.0.0-canary.d30a214ac.0","@material/feature-targeting":"7.0.0-canary.d30a214ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.d30a214ac.0_1590095035430_0.23738263427384654","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/menu-surface","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6fa4ac1687fdb7f5e1598bb2f383c72dcd288928","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.62abbc8d7.0.tgz","fileCount":40,"integrity":"sha512-mRNzQjLkNTMBdigxDns/XcDZ2in7YOdTn7iRSI4yXk4h+n3abQ5R79xX/pj5u9j5CSifOvu1FEBXdpEKGDfCqQ==","signatures":[{"sig":"MEUCIQDUL1NhqCbQ7tQb4tqkDiQR4vw5MLQ1dVk9jDWXh0T5UAIgBA8DsI6NGszizesyYD9Uvd5BHN1f5KBS5g32xVo0oxQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335919,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvKCCRA9TVsSAnZWagAAZF8QAIwa8Q8L7gwMbsn3Ms36\nJBuwYwsAjSDewqxx0U+IirUCq+Mk3rItjVm+v6cLV2IGB54pp6ii5Sz5TFl6\n4RxEl+otYsfa1G5sd8DQhZWrUTmi2zFGJ2Kv7bQI1d6ONtcaiTbJdSvzpMuy\nDF8JfJarefAZjjUmHuFBCTJhDvHmJq3yYOEif0mNUnnKgnjSDHvp9piMMbkj\nR4tQv7g3LV8tuEAYT4seFF1HOx/PrzHMI/s02GJE3xL0upa/kKtCjbgjZ5L/\nBNTJjJ77kH9D+16z0AMX4sBfz1uYfQcuHnkQINjgfCbzhpYQ3g1gDsxNOZSD\nvAliFQK1+JddUx5lGXwCSnhHTetSOCwCtdKytj0I5uJrp268RtdDb/eRQIw2\nDet39cHp4lhe3Q5i3DpOJgGc59DE9xIW1b0tfQr5E+4dHtQPlbTwXgeYjS9W\norCgDiqLCcu3jEcTXi9qR84LlOn4HkHMdLj3sDjM+ZMWIYDtrGdsm+zPcvyY\nS0tfDt40TLpnvwTSwdw9socBax0u+/VKXQ5YU8tyNDEYBCGpQPF5YtHN12D2\niu6CMlYBH/4szC+wUODjjpuH2YL1mTerXBrshCyNERJfQdXk/l7Xj4+AL5Qg\n3LyGbYi0SOiSFcDC5afgSRY0Q5ihaEyTu0Jhcjtyd/G4tTx7wNK3BofWs5n2\n29hr\r\n=Qqqb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.62abbc8d7.0","@material/base":"7.0.0-canary.62abbc8d7.0","@material/shape":"7.0.0-canary.62abbc8d7.0","@material/theme":"7.0.0-canary.62abbc8d7.0","@material/animation":"7.0.0-canary.62abbc8d7.0","@material/elevation":"7.0.0-canary.62abbc8d7.0","@material/feature-targeting":"7.0.0-canary.62abbc8d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.62abbc8d7.0_1590096513654_0.010932233370487099","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/menu-surface","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"99bf517c5b7a9b499dc367d38eefd3b3bf51bebf","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.49bf31d5c.0.tgz","fileCount":40,"integrity":"sha512-tSceDIV0tP6bQYJptCFVPrWXtDBH1KKZzYa8BNzvHiN0/Y+wKCml6NZwbqHeCsyyCqqPHMenTpwAwGFS7zj63w==","signatures":[{"sig":"MEUCIGhrPwzCAxzoxjesrLgTcBUkSM1s2oc6gppuRfcfpUg2AiEAnD7w+NaE0aq55dlKYWjEmsT0BJ8LVSh/Vtl0clI12R8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335919,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvNLCRA9TVsSAnZWagAAL5oQAIt04equ8oNANMcQwM8d\nPCc9ZOA2Jkx1dYoaUyDb2m9yIqtSeYThVNE6/SJotgrnjGbPOJINKG9xWCA5\n7FGeUlv5an7UNTpMgG083SDxR0zBG4UIThZZK/1DPY7v8u1eY/x6MAklpiVS\nfP6cKfGstwTJZvZVgY6XXtYP9NyfGYgDERNMNcwlAawSumgBBUyU6xHk0hat\ntEWaYfnwV7w8SNVpYjfQG8rshdOo1dBtdYJ3I/9lmP0Ko5wSgl6TUyuUAluf\nJB1UnAzBB89Pt63HhtnbrLuh5VxuTpamcO+lAzg/Mf2jhJSk7nj3BmJBX2tt\nyrBglpNwYV46HnkduCxKUS7G9B7xu8gFn2JISJdIhU2EFyVQ6vEv5hjrPNHL\n0URaGtqcK+GM9X3mRtIMyGRj/NHdcYjJ+Cea3h3RfQflubO7RzAmGmzGWKAx\nasuERuJlHcTG3RAU1VO0jxOvHANbYGk7jT++xhYjVj5j9DghGFlUbSYnT8l+\nzqFObiP4PDRmlYTwCYsq9vWjclsDB3LdqFltC/px7apbQT3I+/EJW7RBwdLR\nOF/YxBfVwD3AGHW+qieO03Y9iERmxzDV8xX0UcIdN9xDptivqrzmqgJKo6/L\nWH91mPnSAx1+O9ioHWtJ5Y8d9ElG3yR/EfsGcc9faC+vnFd6QQDAUIG0cJRd\nfLaw\r\n=/ImG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.49bf31d5c.0","@material/base":"7.0.0-canary.49bf31d5c.0","@material/shape":"7.0.0-canary.49bf31d5c.0","@material/theme":"7.0.0-canary.49bf31d5c.0","@material/animation":"7.0.0-canary.49bf31d5c.0","@material/elevation":"7.0.0-canary.49bf31d5c.0","@material/feature-targeting":"7.0.0-canary.49bf31d5c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.49bf31d5c.0_1590096715056_0.40110358850388983","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/menu-surface","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6df8772314bc2b5ef1af3bdf1ac91832ff043ecb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.8e17857d0.0.tgz","fileCount":40,"integrity":"sha512-XgvNiTIVUYS6LpJnAfNXcFE07sWFWr/A4MKiG1D85otkQ45PHjtYD0fye/hKNxj5VFM67mvdM/C5+DUSLUAR4w==","signatures":[{"sig":"MEUCIQCXA9ns/IpVoD1URmvPxlJA3BubZz0JQRm1VOeJfouL6gIgTSM0tBJt7z4OBh0dLRS6KLERFdY2cvWO7KFUHJ1S+2o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335919,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvOFCRA9TVsSAnZWagAAVa4P/j9sjDzeVsKotRFOFSbG\nVGjH6up4JNo3IgstOfu8Tg3N+yeAh/SlzMgSCOT4SJa2qi7/B63tzk7Ualft\nDWJ9Dtd6PpGyF1qskhlZ9ed1NoyG4fgYltUuoq3vWIbElGYpz1VmaDJFKpDr\nWC5j2YWn5QFxTn8TJ+Cu/MPzJ9ZAYh5eb/u50DTkvG/agdcFIOA4v2sqEu1B\nSg9aNntH5PJ9Y4b5zUI1HOibKCghckrzi8SEMWQK2rDJ5vrt6Q8G7caARR7x\nOqUIizVarxhSYSlgVzOOw/5svPrg881IXvPHRRUnq7v/4+KSstMoPiVWHeb8\n1Zvq8Iohmh69cO12vctrdUsfY1aq7/1wj+dS2SD+PCY2Kb1F28ESr3YZG+Ly\npCkZXtuY2VuCMzMlOU9YpBQ3ZgGTi8d/DVLKAM1fJX27QQPsut4b31ENnwDW\nLUSuL56plJg4jyp08eKlL7/y5gp2TXFmrwo0oPn6bNvazMsnqvrRgcY8zZJS\ncnRd6A5PkRmPb2567D2rXFXXGx/ietMY56xM7Fr1+u0HEOOLx64MWYnF5fnk\nRg/KDKcl38hrof1x6Xf5zO4ELjMv/rynpQI3QwuIKRER5NlFRVzF3S4LCpNR\n8i8SmQn+8fYsycCX0dbGxYUdMh7v6x3Femu4MzJhdTHaMbEmPDrr05DopOig\n5QUY\r\n=PWbn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8e17857d0.0","@material/base":"7.0.0-canary.8e17857d0.0","@material/shape":"7.0.0-canary.8e17857d0.0","@material/theme":"7.0.0-canary.8e17857d0.0","@material/animation":"7.0.0-canary.8e17857d0.0","@material/elevation":"7.0.0-canary.8e17857d0.0","@material/feature-targeting":"7.0.0-canary.8e17857d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.8e17857d0.0_1590096772876_0.39538357439116756","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/menu-surface","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"7cffbd31618153a0e145ba6ff36c9f685619bfcc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.c113fc942.0.tgz","fileCount":40,"integrity":"sha512-Ld+lfbCy/AX/FeW9lc9/X0NeWi/EuKfUCpn2GudmjkzAert3xjaTFa5wUxE+FzNXv5THfD99zRzEHgiQzUBo5A==","signatures":[{"sig":"MEUCIQC7UGn0DYkTLL5e2lsOorVcMKPBDpZ9hKm71ffTtmLWnAIgKaujQfOMrbyuhHSIRoFxUewUTr14vUr5b9C6HAi5tQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335919,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwS6CRA9TVsSAnZWagAABUoP/3GXgoPF4LoaMwgkBsQY\n+0RXJuK5ejQCHD4rMdUwVFdOSNhLKIeRAo/Yfo5XMDfCPwfl3BqilfANwad7\nLkQfBp+OgvzeaJ5kkFwyDaKPwtTR3s/+enuAjVEHMKPsgjA7y0Xf4ZEOxvzm\nQKAcNKMfnGIIwrVB94sgkWA1LO95ibUP0QDP+Ed459hWHVgURpoUKOXV03qs\nSwZ15gNlyTh302nXRslvZqbpQSCAMUwjWpWtlLl97aPHPg3z459sVFjmU0+j\ngoNYp1WjffAWvZWtOjOWOIEm0+nm5z7IzI5yLrBIBeYlXZ5x43jKfuXh1u05\nnO+SYcfmvBKqXq/62Y+yh3AbC2T9P5YwPFlQ0xKRUhiaVhVfIS/yI1q00JYZ\nAbccyxdev/2DEejUzL0mQ/Ukjo8EvgMfGsKgKKi7eE3i0scVzc5usTe7OQbq\njzzK3jACtcErVMSYjB22R2Si7aeuPf/J9i+zipE5/bntEJs/OuK5yWUpSCyg\n4UzepJCMfYgAjOFIhNrgXluGitbcI1BScFgfaBOXSy2+c282yLNRlwDimT4y\n19z/yfcgatJ+Yo/eie+t+N+2pnvS3Kg6wAYuHlPZERl0sM+7lbjAL+wDFw1B\n0dTaz3pUBTsL9Vz7CCPsbrnw4sd+n/8KjZIzzdTSQO3Vedeo1Y0m9Y4QuPP0\n5yRM\r\n=Nj/I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.c113fc942.0","@material/base":"7.0.0-canary.c113fc942.0","@material/shape":"7.0.0-canary.c113fc942.0","@material/theme":"7.0.0-canary.c113fc942.0","@material/animation":"7.0.0-canary.c113fc942.0","@material/elevation":"7.0.0-canary.c113fc942.0","@material/feature-targeting":"7.0.0-canary.c113fc942.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.c113fc942.0_1590101178542_0.9489843663070827","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/menu-surface","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"3d607781c9065d145e460f6a655a1e6f21b558cd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.912d9021d.0.tgz","fileCount":40,"integrity":"sha512-zPQ7QIY9v0NsT5rCviwXDp0O7cHdG7+eePAhcs+pjJq/aS1E1qfyCiRc6vQOQin2jXtM02RrGOHHm56t6VgpYg==","signatures":[{"sig":"MEYCIQDnMJwV1KKYDrmV0Y8VVUyTCC+mi9txKGI2SfYUHqUtbAIhAPs8sKnMP3LW04tKbIaq+zLtj/AmOSC4eZ6ngu98/Z9F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":336716,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWO8CRA9TVsSAnZWagAAhxoQAJNdH6atzolcEb9Rvl6I\na37CYJ01bEh8ZqG699D2peH+ryAh5D5M9bh8oCa9pALlT0I1wGDGfTpFZJD+\nqLyDQKciu5eTntA97hn5pcgpZlgqEHGr0CusOzwJqE0w6Gh4ahWO98S2Cmju\n7Q/e3a1S7ZtGOlKDDTtEWFzl5yzYmLRFm2jnucM2TeQ+97V8wWlfUwGbEkn1\nkWU6lJP55XQ5UtRG+2HqGYHDk4ozseAuhaVkOQxZH6oodHrPybh2XtS+Sd3M\n6Df2Xl0YPHl6ceFU6jh/oq3vvk3NJPFKVFWv6Wxr+Tlyxc2ItVAW4A7zUKqp\nzIJ6GyFnNCty1hrR6WSNDMW0OvZ06v9EeK6fZtJ24G1ChdTMGv6PCq0F2HTL\nyfrL+v8uJBPHu8CcEi8DeD6wkUqzcfTwmFCbEpHr1rD4Eus2LJQGny6NE5gX\nxS2Uzt87vjUK+Hs5Sodox4SRS/vHvtmpGpEYlaRahpvC3fzQ1WooLfDfSl9v\nKyF5qQMKx8UysULeIrupqKrw3cf9bJyGP1L4JyoYny4PgBJrA1rsBN7QybWd\nBlj2/gNBeqnJ+4ScR0dTKCflF3gqozey6hxaxev9rZAjxfAbgHARZG+HzfPC\nxofECiozjfVb0irbQL4m2UstP4Xr8jELIy4PvWcylLAWUvSqDkcEat3uxTQR\nOFkU\r\n=Ia7V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.912d9021d.0","@material/base":"7.0.0-canary.912d9021d.0","@material/shape":"7.0.0-canary.912d9021d.0","@material/theme":"7.0.0-canary.912d9021d.0","@material/animation":"7.0.0-canary.912d9021d.0","@material/elevation":"7.0.0-canary.912d9021d.0","@material/feature-targeting":"7.0.0-canary.912d9021d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.912d9021d.0_1590518715899_0.3122612275848793","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/menu-surface","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"e334855ef2caf820187119fa7b62234878d2fef1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.68a2af131.0.tgz","fileCount":40,"integrity":"sha512-4Gb4SPjv/ixyH9CFXKCb7QwlFMtRg+LN/riy2ktkXI+5u0yWpBRAIgFpVoALW0rp/TUzD2vQpgztO3cjGoehGw==","signatures":[{"sig":"MEQCIDIgClnFr/vB1wruMKKXCIqr4YKOwW/g2GmzhBZUOhCsAiA/unz55840rpql3qVbCBG8HSgUe62lgRJAHPe3fl57Yg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":336716,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWjwCRA9TVsSAnZWagAANKkP/3aIneCwyhp3dCDsDA4F\nMRSRloUEdA0Beh2Pe1AuKi5Mj60wZ0shuf5A4jVLjOSM1zPKjqs1p1BhvRCe\n3jrma5yLTeNjeui+wA0gJuvM5o/h9mqVtsAbFDL/TFKzX377F4Q/E1KC7Ed/\nhIu+PgTSEXeDGpao+ngaidZcjcgpn81lJt7sJMn/5bOWkmvUqir6AIW4Powt\nS/M0NvO1vWprXkypCdLRIHiv1u4k+kxYRVrQk3I+5fgQ4grzvypXFDqLxtie\nih0bKuH9sonszUD2ZmOYF6jAcJWkV70xw0dJRRq8g3uuAaexwjEVUAiRpg8V\ngG5HgYV7AClu0yPqV3v8SqupEp2vNDIWok5QIGZVCEwcj4YTl3qCXCajGVoL\n+Ovxx2SU8tAyaMMH4EC1Po8YKQUjjpYz44my77X+nK3JAlu1fXgQ5RCLOi4H\nk1p5Ies/IhsU1JjWOKB+v+hEVNn++F5YQ30zbQpW80opxdVeMN53Nn3c2xqr\njRfdZJJxvK4VN7j8zLNz/iAd5g8vj4naltdaOq5hjUWjt11j1rcxi59v7ubR\nRCxu1uWeCTsrniIrzdBYK5ao+vfj61mdrSYJwFUp5PzdEU+/LaN0PFp9csqs\nrW2ZOjCnysKRy/M5NbYkagMX0W6zyr61r847S63L+WsIQ7SBBZrFx9YYLH3+\nUnlF\r\n=oLOV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.68a2af131.0","@material/base":"7.0.0-canary.68a2af131.0","@material/shape":"7.0.0-canary.68a2af131.0","@material/theme":"7.0.0-canary.68a2af131.0","@material/animation":"7.0.0-canary.68a2af131.0","@material/elevation":"7.0.0-canary.68a2af131.0","@material/feature-targeting":"7.0.0-canary.68a2af131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.68a2af131.0_1590520048265_0.9711624013291638","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/menu-surface","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b9c3830fad56642dad40dc4a41b16f9ad9f62735","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.01de07011.0.tgz","fileCount":40,"integrity":"sha512-gowcG8FyULWGh+fetJBtwo6jK1oe5hsMpiiNK4fRppxCDNsxvtXEKo43ogJ1GPclvs/qgN2vPX27zPP3nSa0MA==","signatures":[{"sig":"MEYCIQCvKmTXWBogtmXgbp67NluQWA/4kvHivEn4YQBeYFp3UQIhAIitMEYIvNK/Q/TVUiduspyhn+FIfDRlrHbhM/HW5lk7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":336716,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXOBCRA9TVsSAnZWagAA2AMQAKSdcUXof1AjGOg49mbp\nb6w+wlJWwOlRTltxZ+JGI+L2HSbvxfDHjErjBKWQarHhQXbbplulaeJV7CQf\nHEPVB+T1/Lxwm/SxXqadi0QIL7Nk98BUOgWrgMuBsqpbl//gnvQFfBwtZn0H\n2aBAN0RgfNIi5/2IaGFWYybF5r+y2ynN0Y0eWa2temN3N4fT1XokRNi2Lo6w\nhf1zEFsDI+hwgit06Xroz2b0mtSMnq7Nj4r0+bwIsSRjOkyiTfFCd1JYdsYB\n2y0MSLFZK/IcawNSXa6iKA/suURXXojNPUaUiE6sezIPgcK9t149Htm2XlUs\nDvrLwMa4O0cD1HQEKZf6x0+YvTHfoJEkcoKVWF04pmxMwO3oqtELp+zqVuVt\nz6AepgVwGsETPIRo3jIBFSLnAu7HoGMlOwjHGiEF35Gl2Y2a2F8fTrn/ekhJ\n2s0/tN3x57T8o90wd5dR8MNsrF2+abu31szGnws5subnYR+6nhUDmbH5LTRe\nFQUj7w6UBTfyYEkbAmkZ101b0N3KkuOU2sMSVHXCzpbeKpCyx0AsTM6u6KPR\nCMzOy3B55wsT9tygmE0E9XSz+0gls+iIvn+H7yDp6h301WazXQ0Ntlo/h0K1\nA8Y02g+SRkwv0Jkdz7zyxzhy0L+IWQO3Em3JxD153SERcn86PJUcr0tZ5I0u\nj3mT\r\n=dj/C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.01de07011.0","@material/base":"7.0.0-canary.01de07011.0","@material/shape":"7.0.0-canary.01de07011.0","@material/theme":"7.0.0-canary.01de07011.0","@material/animation":"7.0.0-canary.01de07011.0","@material/elevation":"7.0.0-canary.01de07011.0","@material/feature-targeting":"7.0.0-canary.01de07011.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.01de07011.0_1590522752969_0.05759484640047363","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/menu-surface","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"59558818a2e42e1c7c4a643275b1fb1db07eb2c1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.51d4535fe.0.tgz","fileCount":40,"integrity":"sha512-zBgILXI26BtS97yLoMLjH9E+6Y+Bk/27WFcJYjD6+2QmaqrSRBoLqc/URGZyo6MQrrSOGPREUyBp4sMJ6aDiCg==","signatures":[{"sig":"MEUCIFrefnwubSUK9fp4/ROCJhC/qjZCVs5oie8se9cNTa6NAiEAg0jVX9gJKam3ybDylBYuEoYkUm310q415rbrNlznTiw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":336179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYt+CRA9TVsSAnZWagAAhaQP+wRP3QhHqhPnngJLe+vo\n7TFwmqq73QQOYLmxCNgrnu1ViGK3tH6pX3sQJqg0aIgiC5ZeynlJNO7m7QVw\nvNwzHmHKciciVI3r8K9TPK7reR95lNzkPCXrEcEXb+L4NhZAFtVTVA6PI6qW\n6ApHO+LyaiHZte95UkNKZI/ukEQFtNLlsF8psWERzwJYcOECt5qjZbZD962/\niqyXJlzluVCVv0bxUUgUdeMgm2U+JiNRxnI4r2vHP7eHbxOgcp0kcwZVIbsJ\nd27Lkqv2hFvboCYcXPAAmLZA2FL/VF5WaFizDlhpihAxnEbgnfmNziIPP1Dw\n90RszUssgTk+IQk4qtG5+8JreP18Exohd0lubUnCmpaTKHC/3Ox13Heehpor\nlSGWZ4BMkR2CLzkF9qfvZVot32RK8WPGRN3xXONShirIyHY9P62b8FqoVBJL\nFaDPyjJ+54T36d8h6VAmXt84PEefi4u2olBHOexW9VxjRvwlGFT7W+9xBo+s\nEaV3HtbeFQICrBTwl5F9x/bx75C5kMe/nbsUSDp3XlzCnSfl6ci/lF3gY5Pu\nQM8nu388BjgfW6STx3Ehf/Brp40T9C0O61YjF/adVj3sddrUH+Y2nXuvmlFj\nFhPSHWlWwYEyhgXjJ8bwX1M7xu1cMDn4spTFsQLPbFU8eBmCY2p94nf63awn\n9hDj\r\n=P6iu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.51d4535fe.0","@material/base":"7.0.0-canary.51d4535fe.0","@material/shape":"7.0.0-canary.51d4535fe.0","@material/theme":"7.0.0-canary.51d4535fe.0","@material/animation":"7.0.0-canary.51d4535fe.0","@material/elevation":"7.0.0-canary.51d4535fe.0","@material/feature-targeting":"7.0.0-canary.51d4535fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.51d4535fe.0_1590528894470_0.5855883155909447","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/menu-surface","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a36c25932ee12329e59f138d533680bd9183e781","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.b86d826b7.0.tgz","fileCount":40,"integrity":"sha512-opcpXymuZxIbLCVYKS52g1dEvW9ItJ4JJExVWoMI9bK8jkBn+mqMdsg+DJ2bXvLxmylG0ZyVyj5nDjaKs8+Gbw==","signatures":[{"sig":"MEUCIDxiAISowpst7hWZpNpWelyw+qdqxc9ikItxf9TcmmDzAiEAstxV4W9a9wlnPUqD1T6iJ+tvuRGFv7lJsI6iGK3jTNE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":336179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZSTCRA9TVsSAnZWagAA3hAP/A7PoFfiLcVa85xVGFDO\ndNEMyuaplzVWOCwxBnv90TpoCWga9D1GvLaAu130/fGARBg0Ea/t3qMAAoDV\n6bfuxzllVsVFLymzdsj6Wy6V52xmsRpOf+zEgRcEqRDSLs2+8NOA7og0VrgS\ndVCkicvGgjF3YKiXrSrSkFenq3wXBpMCXu39RQO5vHSQzCRGVCxDXdEut9dC\n0108058pnhQI+0sk4srhB+ygK230j7SQ+BDYIHTIJuCKjxmNS8KaoWF2dQYj\nDh4g97DYHPIvrneA3oEqM75/TZU7vWPEUzRCSACeX4yy3jncGJIqcWGhFlL4\nDMT4S0hlN0TDscm12AUPMXyvoY+ycukTnOEB7WZnZcoSyx1wEFpReoJJw1U1\ngQD2ezSMqgVmJ1wSHHIZzkIsDNrucrTjBBAk3VrROBIZHCMuzRYTqZkcV0Oi\nvYa/zpl2fwwp9klxUd64W3XpMyhHV9EO3p1Uc0Yg0HbRzMZW2gnz1QqkRVXK\nGuTyLfd+g0opraQKzDFDh960VkyseBo/U8sv8Q2XzPaHTkB/Ve6p3BoaqGKA\nMeYjOmG+T6Srd+Yv6Brn1aYjTposd6r/wG383aVqCHYxXG+D1UH1pTvLw3my\nk/AXp2wYt06Ydlt0Sjb+N898iV6+1eCrnkcjLFKqnf11s8pl5J0WObURmI0D\nwwG3\r\n=wT9z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b86d826b7.0","@material/base":"7.0.0-canary.b86d826b7.0","@material/shape":"7.0.0-canary.b86d826b7.0","@material/theme":"7.0.0-canary.b86d826b7.0","@material/animation":"7.0.0-canary.b86d826b7.0","@material/elevation":"7.0.0-canary.b86d826b7.0","@material/feature-targeting":"7.0.0-canary.b86d826b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.b86d826b7.0_1590531218783_0.348441356936686","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/menu-surface","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a0c02eca938be9c794c8cea6a5581039d1580fa1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.d91794c7e.0.tgz","fileCount":40,"integrity":"sha512-0LRRSbBeCbhv7uh3OwkR1YMzftIb74U9z2Bd04+lf376I87+zuDlXeUdvSXKa67kADPRPFf9jBkpOP1V8nwQ8g==","signatures":[{"sig":"MEQCIGlII/7u8oG+UELPvYfggDzfBm7ZS6aDAuzgYwZSrKk7AiAxY8hL25Dr6zPtTQ7W1okMTYDANvbKrVKuST92uvcrfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":336179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezaxMCRA9TVsSAnZWagAAZXIP/25xK3ETuWLw8tHvshU8\np4teQMmGoxrps+9RwDHg5JTpfE8RWmj/H6qA7md7FZckdhmsZkqkrLgOedDD\nKSwUOQisUeVohluIsZk+jk8U/9O7MZ/YTqJ1hzAhJAUvuScPp3I9GnpISkJg\nImyD5VT3Oa+M7pj3JD2ZBtLUnUiIkmBui2oR9WyjwoTOUGMzqjz5Vmk9mAN0\nFWub8p6raXcjMUHOrr8BAsmp+3WSSfDTLJPPYo0e4P5/46yay6ORsGdWIJlm\n3NcH1kxgGuMvjUWLObbaNb6NhxhED0EGhcaRjvIbecdr6Lan6n9QpJ/oT3ea\nMUbiEHDbsJdLnfNRcpHvFyCQTKm3UCjyBHCXKkVMPSWo9bjHZ21MDMLD/dV6\nm+bwPhIS3aW8ykRTmfPvNLFx7HxfJznqB4KQDB0bmxWHb6gxTdm8WLk5KKgF\nYF7MdW96belCfY0oPu7SC7X33LCi3jPfx0UAY/knJAqySspgCkOgWqU/C2Ai\nDaD88Q6gcu7+uJAnyZsBonaSOhPNSzxkR/Teg8qs8/KG7+1oYIC72z0Vdy+l\nEiPqZeVj+cYPzFYDSkwqmjkd79mPcv2VxU8ANwkGh9topofJ63sW5h4/a6VL\nP2WOngOYr02fH6Fvv04hJ7pO3pa/BxsR5QD3C+yYRsO/NWELv+DQdLRRCtnK\nGhDB\r\n=eYrk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d91794c7e.0","@material/base":"7.0.0-canary.d91794c7e.0","@material/shape":"7.0.0-canary.d91794c7e.0","@material/theme":"7.0.0-canary.d91794c7e.0","@material/animation":"7.0.0-canary.d91794c7e.0","@material/elevation":"7.0.0-canary.d91794c7e.0","@material/feature-targeting":"7.0.0-canary.d91794c7e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.d91794c7e.0_1590537291838_0.9964896286026204","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/menu-surface","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c55ba92624d133900548b1f1973bd3722454cecc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.8c6d7e076.0.tgz","fileCount":40,"integrity":"sha512-Y3g3w3EnXiGQPDifNNWd7G2RBoLMzm/b092YqY999AH9FA9jE07T0EsW+lfz1yYxzwWkrR3IJ47yxLlTh77Wgw==","signatures":[{"sig":"MEUCIDIYA5nIHScJ9UIRjNbGcGxs418uPa6uSfeMfD74uXTcAiEA00aq5na2Yxn3jKrs+G/+MXQQ7PKG3+u7OJagN0EW78Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezriDCRA9TVsSAnZWagAA4DMP/RwTNtj911TPJUghX80y\nO2SF38l+u/Md3uFt4Bb3MIcDtrEqtIl2s1H4mP6ZNfY4f1wEhe8vbN/uMjDt\nK29JB7n7rt3LUsZuIjVULv2+bKaw05VdPnrLJwLDCx2godyr5r5vHliIGWO6\nliUiH5sd5zTedMnnaK9Gp6flRcrMk6vlqTuvCttQK11Zelgly85ce6MeXXtn\ndpyVlcJSyss/loDNV8arKoqKyPiWaeJAf1pDHS/fJQUC0GYC9bkkx0Uh4Mu3\nAAzIxaI+NQmK8/RWkjDnN0JVwwSEWfZwUkXTZBXoQCz4lBkSQTSxCpoDPljy\nwxLxnA8c05lZUvQXIjxeNnA/oo4PkDLNc67GWBruDr35bxx1tL0Jo0QK85Zu\nTmOarAsa3zHoOA+W1bUn/NX8OI1EBH2G7HFCd2DJAc5CHVhBFZW1k4nlwS3l\nI6jY+CSXCx3X/JwkV60Q/huF6FnpsJ5uXp0W2yrW14OKaR/fjN2H9lMcRCtN\nGE+2rHsGcG++kbisPLO/2ws+huvBlPbBZFt7UgFTmhWJJf7qAZJj6/aQYwCs\nyNbIz90Rf81i7FHlCLjQ0R6/wzZw/aFrFQAbnzJ8qoL6R/vn+k7LMcI0XzeY\ns+t4kyE2l+I9+36c3L3LspIHXib/67n2fhA+J0goeuqrhf4WCTdWXq6fh0Iq\n4R36\r\n=cqcV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8c6d7e076.0","@material/base":"7.0.0-canary.8c6d7e076.0","@material/shape":"7.0.0-canary.8c6d7e076.0","@material/theme":"7.0.0-canary.8c6d7e076.0","@material/animation":"7.0.0-canary.8c6d7e076.0","@material/elevation":"7.0.0-canary.8c6d7e076.0","@material/feature-targeting":"7.0.0-canary.8c6d7e076.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.8c6d7e076.0_1590605954803_0.6797613476194193","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/menu-surface","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"87fd4f3306a28c6aac6d700bd4ff147a77f1cddc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.5b5f62f93.0.tgz","fileCount":40,"integrity":"sha512-vKhxwda3Li6OYIxGNmR/ggzcdUe5t0GZlbsW29en8dXZSD3GGnT6VGCFw690tFKiA0W8fQQAQ8s7acdAH7XPbg==","signatures":[{"sig":"MEUCIHEv/ehpjHmFUVoCPQvMCmx3LwhX/b2UuCA0JZJnNYBlAiEA6qmcXCx0fZaE28V3lY3wfk27RtVpWg8gsVGW/zWOi0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezryDCRA9TVsSAnZWagAAxv8P+wU3j0gjwRs4RJ+RLcoJ\n6//mLXJ5meSQ4ClVlvjoXomFD8RLzcqRBIMaaVYa1u2mQq30z96Yg15evQvq\nJjhnaAt8YaulK1jF2nmrfy3F3vnyY4mgTNO12JttQO5LIC7AhXbSNvIcD2eP\nbOOBrHCfFAMSG4saDal4HrYk61sx4VHLDDm0cyLPHR9zNhOPWOlXnCTyCYRU\nNIlGRmvAEG3eTf2/4rCrKKk9dumW9CMIThnXF4f+Xi+apm3O6LzN1u2EBjxx\nOa3RodyKUYABCYUl6BvWX5w3qOHRcszxCVn97FN/zH5F2/PCBV/RTR9gBaLb\nJ759xALWnc6CBKP7wPfoKfLrbKNzlY4NDZKt75WCGb+YV3A4K3mC8SkTaoAq\npVfKJU2FEfZFITKTso4sWxs/ldDmftnrpM4Qfughy/fq7NyNCmaonmtmynQn\neh2fr3koSzCteMTIR4TLOLXVNFjI7zYly/3hFt6XBoGhF8RBWtNP1EfwAXmh\nfY+ZJ3ZZZaBBDcV++33DbsZnJFGUo9O83X1MopWg0JCKkYP8NdOYXHlSjXR6\nkEzDuh7GxA4dDFQqX7NmwPv8BDbzBiiZLVRgTAN2PO4zA+nVJDk6CmSH4C9K\nzzIBZFPpD7ypu7G83Ho9ltYPeYujvPj24Bz+S1QZ486NH633iKKpKUoTjh2k\nfhAz\r\n=K6v2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.5b5f62f93.0","@material/base":"7.0.0-canary.5b5f62f93.0","@material/shape":"7.0.0-canary.5b5f62f93.0","@material/theme":"7.0.0-canary.5b5f62f93.0","@material/animation":"7.0.0-canary.5b5f62f93.0","@material/elevation":"7.0.0-canary.5b5f62f93.0","@material/feature-targeting":"7.0.0-canary.5b5f62f93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.5b5f62f93.0_1590606979129_0.3476404756789866","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/menu-surface","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"03f9f1179d6ea056a3115f5d0016f7a3642dd069","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.d9972abb1.0.tgz","fileCount":40,"integrity":"sha512-JhH/H1XvbHlJ+3UAPhp3ez396J19L4lnptJnv7IWWcCymRrUypCNyOd1/J0J0kSghAGaGoWFGFMDyxI1A+BVBA==","signatures":[{"sig":"MEUCIAGOZLUxnRQMt8onpEiecRcYvzfiSG/B4lZPpYeqCnN1AiEAhDMV/Y5hfB3ulM0HnUJUUO73U7YR3LQXO0yw/HoGmL0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsueCRA9TVsSAnZWagAAajgP/i8G8THF09GL//0EjcXi\nFSzoFZxGSAtTQ8K8jszWaIPMWaopBPaict5pHzlmXYfVbmT0auBSBYI3QN4O\nNLyJhn1k4X5jkb6BLhTTrSzkjElEzkIy7t2yd80TEJw2OWqL1VIXg0vDTAj6\n02HzJv/F96b85/h0ewsXk/aig1Ya7WMuYoTNUooaEONjobD92nasgqxLrbTA\n+R2Bg05onMJIuDHgD0kTmHvcxGEe4/skSsabmCxBnl6ostk3yJgKOoXvLglL\n9xvUXBkJ2s1E81msbqNoeum+jU3ZLrTkuMtNAhh+GfZ31oLBZcL9laJEj2VE\nXgNFdnVWb/NvqorG7wFIWQxCHW+DCS6Ox1SEEbplWDwlQAHDSeTdcCDbHgUD\nmgfWtmqbYbgJRV/L2OJ/fYzCFJntnHJuirLnr8aWiLnSqirf+Qi95F01kS0t\nCe0ByrV5zNBWYbkJyJuLgcIqBPDN+s/M6X5A3f0J2YL/FT2PH++yAdAgbZfE\ngjKGR4zQ0mGpTk7dh1Rq1GcVAvW4g5amFAaWslLugVJwZ37BPSFOL0gr8/O2\n3dOwC/8nTfRHNTrTCV5ZmT8Q7J46Mje0scvKH4I59d1hACUtIygKHH2l41FB\nTeNsUKD/+3cybkIc4V0wckscksJp0rdpgOE+/gC9b9Mu1oucub3L27bsxBA3\newsA\r\n=uxGU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d9972abb1.0","@material/base":"7.0.0-canary.d9972abb1.0","@material/shape":"7.0.0-canary.d9972abb1.0","@material/theme":"7.0.0-canary.d9972abb1.0","@material/animation":"7.0.0-canary.d9972abb1.0","@material/elevation":"7.0.0-canary.d9972abb1.0","@material/feature-targeting":"7.0.0-canary.d9972abb1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.d9972abb1.0_1590610845860_0.5715387644252838","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/menu-surface","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"1839584c0f93ac48743fbc92c9662c12727f1301","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.6556eda2b.0.tgz","fileCount":40,"integrity":"sha512-zLSU2sqKcjBIaI3S9EwAg4nXdJ/FkwmCKulZmY/2XY9X5I0O3RY6EYbwbdxTY480UYILJ8mSLYw+t7It2eoNWA==","signatures":[{"sig":"MEUCIQC3AVoSybxJ8HkbCpHB9zl48XUAkMfLP5KOLQmYvBW3ZgIgd52vnxq1eRm8NTc5uKkyHeoyzT3t5IiugjWTnjqytv4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs3DCRA9TVsSAnZWagAAlGYP/jgf9OydKVbEK3oKkDXc\nNQE8nQTnpG3iBp6fWs9fgrbdfABcNnuNYM4qIpUpyWcUkaDLCzqdR6HTdCyv\nn6enSctx8k2onXSUx9lWfwx8iMAMiDe0j4q+8dt86XnLde2LXKXg8zceRbLj\ngqWo4q9Yovi/HdryjgVgaWM/B/pbNX8/rusAqXyiqBj0wBw50eDScdloKz4m\n6hhG7Zytgi8MmCRVqAy+YNpZ9nzwazVUTKv4Q1oy2ud23foDEyiw6xIEqTKW\nCgo2UtbbyKKcOQAVZCcU7ZEOXL2mFif6PfLxVuXHiM7abhEzvU3+jwfmioli\n9ODHD600mESuuKhgx8M/mZWcemxUucUk1miUd2v0/JqdiBLP4KfzAmiZyMGN\nYvw8HlJ77gm0Ubh95l4jyb/HL1UiTJ1KCCW1IK24rxnxv9fKwlaAxjwcKUG5\nrwgruKb7auYAe+WntUyf9wMVRjxzyD6NKVK+B1R1QAdSIlufLCQDUAAahF4f\n/J9jTMIpwFnuw+xrFfgL2kFYnEz8Na7V+mGzdjLoZZYBDB1pTkeaMtbgJ2qa\nF75SLfRnes7ZwRucGu8/U9m/aKGh9UlUMGP6PwGBVKSMFdEb/Zj/EPb4rpuW\nVLm06rF8E8X1mpjxzfTaNEDDo+iIdrVlsV3D9NxK/k3IxCI/GKSUWJGpUOiF\nskQ1\r\n=C9yB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.6556eda2b.0","@material/base":"7.0.0-canary.6556eda2b.0","@material/shape":"7.0.0-canary.6556eda2b.0","@material/theme":"7.0.0-canary.6556eda2b.0","@material/animation":"7.0.0-canary.6556eda2b.0","@material/elevation":"7.0.0-canary.6556eda2b.0","@material/feature-targeting":"7.0.0-canary.6556eda2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.6556eda2b.0_1590611394745_0.27511711391060434","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/menu-surface","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"ec39fe1e57ff0455a4373ecfd30e524787eef4c0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.32aa23641.0.tgz","fileCount":40,"integrity":"sha512-taCDEkFuuRh9kjvEAcD3VPKyCb7LF9dd0C2/rfNL+uedZX1f9AReAr//YhB1pnK6Fr3wqHn2ozdhUB9vRMsN6w==","signatures":[{"sig":"MEQCIAySCoZfPE3Ow31flb1SjZQCHevCvq4uYPeIl0YlVU4zAiA7iSXtw/inMjrx459Rug0ZUhBMM9vILFZD9265N3d1nQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt3CCRA9TVsSAnZWagAAsIUP/R15o5tFtPj5l68QDqch\nwSjrA5zNwlbxAA0v9AuvT9X5LlbuzbwzIXuSp3/p0Yn5AwgquRoHqbuvcHiC\nINXophMVXrtAYYx57vsFrYGiCBP8cBiBGrfexHtFENzDB4Ce88l6E2AI8Lon\n+wlZMTpAFscsXqgdIbzboKTr3lh0LO+INh+YJwOCYgS7w7iuKKg1QNSiw1nh\nfMa2U++igED10rcUo+XrpD4WzSMglIEN6N+qoJZV9RHe8ZZUYbFWgYWu1cJH\nP4WBsZQ2EPyrp7UqKtvgGzxkfP3RfZP2KyJOSPIST0/l4tNXI34qLaRTkuO0\nX2kP72vZmNBZkO9tfsn5/fmBZDY+M3x9lJ3pp0+hkNttNnnI7N0Gj+jla4FQ\nDweqWL50xRkkTUM+iynbVwYBPM+Op9tD/1P385znbP7yB3jmhpQXejuNFFZg\nQIvHZtSrzfqpCJS5riZfDELuyT3eXBhlWRnNiUqpBoGNvURtQIl+BkMdWIm0\n1Jc3GbuCSa9mhg79ExKYDHq8mgn7G0AD0vfwnGKyG+XYwQiNLV4MU4O3QHO6\nURS9zmYdigwCH7Dc2RuwymCkwYIeK+mI/i/4OMkx9QMRNhvwy4EKi0VOVQ5B\nYWPAeq8rZi/FnFKBfsKy2vXdUvPq30dpGPmlOgFImlOUoHmZbZLUrcqltMj1\nNhJ/\r\n=hhOX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.32aa23641.0","@material/base":"7.0.0-canary.32aa23641.0","@material/shape":"7.0.0-canary.32aa23641.0","@material/theme":"7.0.0-canary.32aa23641.0","@material/animation":"7.0.0-canary.32aa23641.0","@material/elevation":"7.0.0-canary.32aa23641.0","@material/feature-targeting":"7.0.0-canary.32aa23641.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.32aa23641.0_1590615489716_0.4995421977857055","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/menu-surface","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"8e72afac7a667b1278388fc5d2f5ea33e8b47a63","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.654934dfa.0.tgz","fileCount":40,"integrity":"sha512-PWgpC0/GehUV8YoL6ij4LhTsV9ToWZ8o7QWM3xkDm3lL8t2SpMluIcLNPCeyyx4qNuvAIuoep1T4MkfIKKmm1g==","signatures":[{"sig":"MEQCIAsDgtrbaY7+CCHeJIS7MJvd0gU56AbKsB5UhjgK3EZxAiADCbihlmMghPR1PR1JX0y8zu1wPcsPK9QUYnvN72gwBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezweeCRA9TVsSAnZWagAAf6sQAIh2V8P5rqF+THsgMptp\nfaUWHktN45XKp3pS7Ztg4GJHjqgWx85LNEB9z/Y7o5POjPrnjpaxQTtKeavz\n2eeYvvU20o6IXjygVGE3O7zuEQPZQW9p9ENr8IXOw6auOosOpakCrMKUCsWj\neGGkPe9F/77RDtzm/gCjQ1qE3rHVMg+BxZPj1gzpmF4k16Nbzr3E1tYdnUC1\nrR7WT2WDeBrpSfUEwXG0/NLqxWxu1msqwGakk0UoP5mcMA91KGzf4ToLiZ2M\nZCTjn/WPfjPCS2gR7LKN8LlhLe60D7fCaQMr03DAaGgTjRwuYz14KDL9cRXq\nFiSB0QH5vji1IjQYa4tYplIabGVUrGCfi9sNsoTgLSKVUKMETuXoc5kaijOT\nmcQUZ41b7tx8Qv9iD7qu78lTIzSqtDxx2YzKXlQoMBv+2B8DxJpUNRxBS8i2\nUZRPjry+iZlQVU/vkcP8+6gRES/j4RlnGoMZVPEwPouaIqalUOKX58Ce8+pw\ngArnudMR4iVdF1FXulILclzB2tcsCMLXIotgbwMQ2bQLALFo79I37JHzO+w6\nvSfX5S1P1FRJ5KVzBnVCPRxHD8HVjfSCXhsZJ07pwsTTXZIl2UYCvBfanijh\n8YU46IU+7POSO5b2PnrQ92vVMyKTh6gXNNI+QZ5l2LbaxsFpJHq9H+QB7A7/\nxQvs\r\n=FIw9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.654934dfa.0","@material/base":"7.0.0-canary.654934dfa.0","@material/shape":"7.0.0-canary.654934dfa.0","@material/theme":"7.0.0-canary.654934dfa.0","@material/animation":"7.0.0-canary.654934dfa.0","@material/elevation":"7.0.0-canary.654934dfa.0","@material/feature-targeting":"7.0.0-canary.654934dfa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.654934dfa.0_1590626205887_0.553453553670588","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/menu-surface","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"500483f5fd6e9e1006116ff7c3f7447464a60bbd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.41910b8b8.0.tgz","fileCount":40,"integrity":"sha512-JQpnoDGPh1sei9niL8pTYuBMfNG0vu1lJd4+OJjx+JivyuHBHLctiWUQOIRN/MyHis/6tFzFGrL6krO6e8VBsQ==","signatures":[{"sig":"MEUCIQDyNlR8NuGnfEYeXHnKcajIgZVNn6RaSRgYCYvJagwz9gIgHk6QnM3dbqCk+bFapOiYuAM6k+eZ0DbdORtzINHIpk8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwsDCRA9TVsSAnZWagAAe4YP/R3VWMShnrnuwEtxX/Oh\n+PGe067hnGWIiGQMyGXNUGCyC0aExidiSV9n37gTR4QNaeOcGY997y58iQ56\nLEsWAaMFo4dnNpkMNDNuNLLzWPemBseZMol2G8DuQtCtfkPvtp8lKdSqdfUC\nEgeWW6L2llXh/qnSYHiBheDcIcQxRBtwPolgDxI8ln6PB+kbSIflJnYnVRB/\nuPsMyz8EvDWxBkVYoVVmBNY9gyYCokt3gwkmxLURV+kkg/SW33wZn2NGyPrR\n9CvZm9sUuyxE1PDHJEX2ve5ylX0olSWPREMivVM7wUsdnx9hH/o9djmH3Ccq\nUcsvKbG6W1Lm7ZLPbKkhWf809HZM+DLEiaSnir4tf8EODiUFVwgg3wstAzBo\nqpG0ihZUfC0OWNN4Q8nChB8ShG9ruINF/c8WiSH3aoHuZeISLLiDqdthw9LK\npEZxhLpgT05Ja9+GWEoHb9Kb/MMUdaTgYvqnKxLu8HEc076Ft+w2IBKswpqj\njn2O+hFtjCtzbRMdB7DkYX9bLyzQLyqvNzidj5lff0PNMXPMCMR9o3HPBtyJ\nPOW/y+hyh93exyeUV94wIynfmSYCUVHTeNh+s+T9WmRGTwcBBjY3jjW1IDLL\ngKad8E/3jKiZ/XElMiBKQX9xB/yaQ4k84OtfIpWRl0HPcmEl4Xt50FUKcGOm\nO+1u\r\n=RdR+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.41910b8b8.0","@material/base":"7.0.0-canary.41910b8b8.0","@material/shape":"7.0.0-canary.41910b8b8.0","@material/theme":"7.0.0-canary.41910b8b8.0","@material/animation":"7.0.0-canary.41910b8b8.0","@material/elevation":"7.0.0-canary.41910b8b8.0","@material/feature-targeting":"7.0.0-canary.41910b8b8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.41910b8b8.0_1590627075393_0.5662597666470608","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/menu-surface","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"f316abfeb281e40aa5e92ddc1c1516dfd874cc61","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.d66d22bf9.0.tgz","fileCount":40,"integrity":"sha512-mpDSEwufreyMyIMed2uNMOHEXSCg+Ly2TdRQt6gRleq+rnMRtW16lEc7k0NhyF/sSKVUwfgIaEeAgXj1tt6sqA==","signatures":[{"sig":"MEUCIGqToXfAnkX+OWR+nHUNEGCihHc9XjhTkNItRI5u0BsDAiEAiofNH/8c0ki3PSa4hNjDRLRWaoHsiTyrL+X087JXC4w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0BclCRA9TVsSAnZWagAAqusP/12RDTPpRKCPCAt7CGb4\nERhAcmX303OzgngeS6lRCWxSE9hODZLoXjYA81hjASHfA2+cwWb72w36VFH6\nOcgKNi2aECwT1xZA7z79LdasKgUz+gyR7HhR/ryjSHTH+/lKpw9zAG1qB3C6\nxfbD7+O6SQ6RaCPm5czR93qLmWDL6C0SUyGo2fJrF9B+qSYsiK74lIegxH1O\nim0HSTltzm3EAFYdnInAdT9GZxol6OnAUXsYW6WwEjSHEhmhFEeOUeh3Vg47\nCpR7JtQ9Ru9chzB1747+hwy/L2MyW1H7pYizAUjEezDnFcb8Han3plhI7ib8\nCyAe5G0EP5XUnVp0cvAOyYGk1hnSjl2caT7uYSrHc98uYOgm6/UfghlTo8Xz\n0WTAiD6EyB1laxb79FObLSDYb96Xtr8ZseRypC2XbScgKzLxCyDJqqAWzco2\nS/xhj5lTLh9ckBI7GhEOmYw/gaN5DueruiuBzGKS3M3ZfkO5KDTLSBjP2M2H\nmna1XyU3e6vTOjeN+qvk3DpYXd/hBBz1KKEVFWUI9SzAwsWlIF2n+e098MMk\nb+y3UqtBi5wEdDgHYJY5sHNtd+zS6Jwno88cwIZGn+zORjp1fnGivXsX47zH\n/OPkQxbyZqpgEMoP2MKmm3LvceIREr6hac4JbKSWBWxwZs4AZxmEJUShS1Vm\nCraC\r\n=3hh9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d66d22bf9.0","@material/base":"7.0.0-canary.d66d22bf9.0","@material/shape":"7.0.0-canary.d66d22bf9.0","@material/theme":"7.0.0-canary.d66d22bf9.0","@material/animation":"7.0.0-canary.d66d22bf9.0","@material/elevation":"7.0.0-canary.d66d22bf9.0","@material/feature-targeting":"7.0.0-canary.d66d22bf9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.d66d22bf9.0_1590695716769_0.006239987366094546","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/menu-surface","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d6863926995d44b0f6ea1ce13ebc06c4b1db8056","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.8904f3cbe.0.tgz","fileCount":40,"integrity":"sha512-9TQDPhY+E1Rx9UdRTl5MkacPXACmDGE2ziMTcIgd30Tw+4AKv5p6KLJ/9bGeUVXOGDRbZa7Red+Ivd06USQZ5g==","signatures":[{"sig":"MEYCIQCs7A6960Fgj78EJbgEbsQS6tK9VkBGKjON5g4o1+x1ngIhAIg9kGMjc8B5S6pgd62cSoyB0ByBxiQsqStpDszi0U74","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T1JCRA9TVsSAnZWagAA2iEP/3RXTHR9wtiEUlsEuAu1\n/U7CmDeet+Lt7CUPf/gkH34/2sT/UN4/OeivCuz9WEN+ISdYoK+QpcsiNQbA\nki7+zvAaWnbuxDNzsv1zkI1AouS9fw0yLpxSTN8+fcN7g3PUyjTmr5tKfcrv\nRfWx5g/QBc9ihB+kc0nlwSwtaFPbgO6CW0ZdPR0nKOJ/uJNCyMeKXYh3ucaP\nw+siqO7iwvsF8dqnHuZsZsMVvUw0z0ZbjeISU+kamzb9AMt2tE511UxdytfS\n7ZsQbzbxppUlpUUbwcwEn5n36LTucI6tpvRGA81lqwtvLF4sNejMoLdtCd3z\nbZH1I3e89gGTZo9q+McDKQLhPMjtLDt78p+whhf6WaKZ0isWt1SpFJIxqGGy\nCvmtF8dx+fax5LpdxV0hHu0PoVVFxkmG8bu2On+REvuBpHWwILgWP7o5oMiv\necLK3kDQU1yMmOSY3LG+Ro/qnB62L2BKHrfp6dNgu9Yfo1hMP5+4jvhUO+y2\nCHDepZBJwOCObOHF6v/ERXArwlxox8shb8KwrklS8GPltPw5ics/DVU9KSN8\nZgCG6B6nPU0oiQAnsUOOHnCS/oTZdAeb3pmVvpWWNdyClCG2v7AhHi/d7ttX\nLEkepq0PC43nJqyF23r21y+0p3mlVKFWV2EAQrR/iHzskjak/3kZzwNdf1Ld\nIF6t\r\n=G4YD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8904f3cbe.0","@material/base":"7.0.0-canary.8904f3cbe.0","@material/shape":"7.0.0-canary.8904f3cbe.0","@material/theme":"7.0.0-canary.8904f3cbe.0","@material/animation":"7.0.0-canary.8904f3cbe.0","@material/elevation":"7.0.0-canary.8904f3cbe.0","@material/feature-targeting":"7.0.0-canary.8904f3cbe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.8904f3cbe.0_1590771016215_0.6826254246566652","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/menu-surface","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4b10c13b85998ee5ff4b24ffb8fd817bd4165511","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.51512a4ac.0.tgz","fileCount":40,"integrity":"sha512-RQ4WzcYHXCT2G4JZJY7jrJUrMInKal/nXuesPDQKLd+OADjtJdBDXI5CT5fyeP9BFhBCOt5RtlRzNr40Jhbksg==","signatures":[{"sig":"MEUCIQCiLvnRJWjV8uZpSAHyHC+Da6cOwArB9ETCkXIjaewbugIgbsJ78za0fNZPd9pks+sx+aeU/Bh8xEvNRE8jHgQqtvY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":337936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V84CRA9TVsSAnZWagAANzYP/3Rz4vx4vW5QnNk2t6Cz\n4lNNa1WtYB6T7W2zhojkEqtdshVxs7z05QXEtWmnyuWeO5lD0h+0SkTMk+AX\n1+h+ypTDbjgviQa79ud/kDxxj2Nlg6koMgZxLWFsomMGjynDW/eE46Vrtfvs\nFH2rhe/HRLnj77GYg0J8VVwVj4cLEluRUwIclsu+YZzvpCA8g+pk9wGgIQHw\nYwzIWtHXAFinkw+4N117h/r/JldfumnKV0UF2B9etR/ksO0o2iQA9g5k44Mm\nzpbgGj/3GJdRrpMEi9hWplUn524O7wxOcHMEXK9LijJZKogM1pemPcvxSvKx\n8FeX2nkJREhEgo1mi1e7QM1Ko2/gFQhKU9MWXugQZ8wpRzqsn5mF1kacykA2\nkH4DfOJOQvg77b4aESSufrMi4PmcRyMl0uQIlQCCeaKChbSXXqXU/Py56CEB\nd5070BFnKXAocG9aCIzqHtnVcHRWFzwwoN7pWhJ1faCzfDUAKHoR8tdXDb+u\nIp1a8cWqfyIrKeiK+3+bT+jtyJr8KICqQEuIq8JLCDWAp5vnMRxXmQjTW/t6\nAPoNAPxCJfhwxYEa13rL3/Zm+Fl+FiN1TqUNrM1l/s2A0wPy17ccYQVLByZN\nORAfIgoMsO7+L4xdQO6NM+pu2aK3dHP9QBLwlbpQoO1VQJAS56VrvJNAxMRz\nAWXQ\r\n=lMD8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.51512a4ac.0","@material/base":"7.0.0-canary.51512a4ac.0","@material/shape":"7.0.0-canary.51512a4ac.0","@material/theme":"7.0.0-canary.51512a4ac.0","@material/animation":"7.0.0-canary.51512a4ac.0","@material/elevation":"7.0.0-canary.51512a4ac.0","@material/feature-targeting":"7.0.0-canary.51512a4ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.51512a4ac.0_1590779703948_0.5288914205785915","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/menu-surface","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"99bcea33c2dc2b00256f2829129b7d687d039ec2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.0743288fb.0.tgz","fileCount":40,"integrity":"sha512-ZazgwE6zHjMfeLB6dJgy7ct9NL/3pZp4TZVsiRNeAcp14Hcti6oA9ZtzlKim8a7yqOuVK7s7dprA0W7f+QrXmg==","signatures":[{"sig":"MEUCIB19nA/DenwgAagPLy3ZJEgQMzoz974i8XcSzM1NFs45AiEA75JdCXLJ1Kx8bUr5oQ8hdGLxhVG+e8ALDnWvxgbU2ZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Wr4CRA9TVsSAnZWagAAxfMQAJoUm4nhWA0n14UV7TMP\naacjKlwQ8NFv4LtYdlKvAscU6Pb4MnwceKDhFy6nbS32EOBQFyyJe85B107F\nbwk8LOwHTTM72iOSbUon1yL0FUcq0BNIapBrEpT8sUiNQuT8yXo2jOU8GGX6\nFAsKO8cGfwAl2ScJtNhnHqT5LzcWLmij9OT88HCljOwB4L6jMEzqkJk9tL73\n7YWtULPFUi8CfBoSpjuiYCat7zQzOi22e05HzKx5Cs+33a9ISyNNOmLGvmjv\nPuT76Bx/DsUvHItlnf5JwnYD2m4DgveuwYuc88AOzfwkjuOWzs6hIFpIgbsN\nDxr2MIAZYw/wNnhG75L3BAvD7YySFX5OFjbl2FXcZaiI+4yPYvtJh23WMay4\n51gGnuNomexlYNIiu3e4U8UqdphqS4BrFJ9pbdrMtu9OQtUSUQgWj8dJI7eO\n/cww8RyJQN1DhA5/NvzY2npd65DSTFcXe52PSbbNYfEKI03/+uR1nubIY0Rn\nofmN/a6jcok/qt1RnTQ5GnVTJbqnl7i+XZGZt1YV0Iwp9gJgyDwMWN+2CVu7\nx6W28GPhxTC0zmEyIXvldPv4wn6LAtltdYvmrxIgamftMZ1yLMzA67giCXls\n4VxrpwTY+xhgCBKhT7hKGOceg18widFVo+DId+qExwiX7xJBHOhgiEJwU7ar\nAhea\r\n=F7CO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.0743288fb.0","@material/base":"7.0.0-canary.0743288fb.0","@material/shape":"7.0.0-canary.0743288fb.0","@material/theme":"7.0.0-canary.0743288fb.0","@material/animation":"7.0.0-canary.0743288fb.0","@material/elevation":"7.0.0-canary.0743288fb.0","@material/feature-targeting":"7.0.0-canary.0743288fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.0743288fb.0_1590782711864_0.21714029879405894","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/menu-surface","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a42d8bd1e3df176cd44af0e0ec3fde1cb3f7c358","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.06ef147b5.0.tgz","fileCount":40,"integrity":"sha512-8EmxNS64CfyzzMIXhe4WeJOBctKF/fDC/3bYk8B1gEtju2q1RMzC2AUJbfunajLwfMgwFo+puWnVTMqypemREw==","signatures":[{"sig":"MEUCIQCPBd7pQrjKF9DvcbP2ecyx8JMq7rrP2CedQAMBUdXQowIgLLvrz+Q9IrBWyd2KG6OD/bOZjz3tVWO6sLjtrYjxbqY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XNRCRA9TVsSAnZWagAAk3oP/1bYOf85HWrPvhaxwOnJ\ne1Ewa6QRb0lCNaN7X7kCQ4ZMG2yfRcTFqphQraiqFme8i9+GEFAvG2XuZqwA\nZ3MtwWWw/yuAeps9/VrWbQImN2MqcyqiNtpYOKPX6FRPbW0sG7ouLCfoIgXq\nm8yfEFtOSB8LTEsu0a3y5biVAX/y9e3+k4nk8rB1JPzkIzx4QaD5gaugn9ly\n+hknFdhyac5/E4W0UvfMBVIqj7St0Az88lO1uFQuOduEDclwjvGLAAlF8DDz\n0tT6fZbwp2aGwcbIiP+mAxgz1Hkp/cC272yTY6s3wjbEtOiwgK/1O5RI4oX/\nj7vmkA3itjGUspprljWp9xtsvNJ2GreRdFoghMJkDg6K5rfvalaonh9ZYlca\nYJMWkmr3VTs0XUQ4M7LusfFIV9r5pqP2aGt0s4HQ3Dd9DiG1cElWB/CwvDmK\nR5plykkTTlLphUOO1W+XNHrKnKcHhBP43zhScOsAE6xWFG4OaveMFQDmJtU6\nEnKqIzX5SXid+qg7S+4koy4yhGn9C+DgA8/Ge9ldMFNDe3uRKAhu4Xz3/Ey0\nTzAe+Bdg88AJY/5LYSiF3TSd6s2z3flxKAoJ0II2OC9Hxl0fbQhvmDIsV7qA\nxQjZEUsyaS8kgKBYsn22Ew4jaic/8gPvcneqFlmZWdcD6dJC8tmwyoGDHFsi\nwX1x\r\n=a+4u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.06ef147b5.0","@material/base":"7.0.0-canary.06ef147b5.0","@material/shape":"7.0.0-canary.06ef147b5.0","@material/theme":"7.0.0-canary.06ef147b5.0","@material/animation":"7.0.0-canary.06ef147b5.0","@material/elevation":"7.0.0-canary.06ef147b5.0","@material/feature-targeting":"7.0.0-canary.06ef147b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.06ef147b5.0_1590784849094_0.4327522904798857","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/menu-surface","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"f48c78b225e79520e2ea63235ecc7545ac93ab64","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.8073a20a9.0.tgz","fileCount":40,"integrity":"sha512-sazfGmPxYKPQgxhbdlFYAXF9QYVhKulSRh4GR/H0UTYu33CJIHD2y1KNoNxNP6qOhPjXbap9S6TKkXvd+YjuQA==","signatures":[{"sig":"MEQCIEqV/1R+yHS7a7nwIujC2bmuOgSb8W2TSt/aZC5B1kZ0AiBdUtvgk+tU1MRn8oNgEBKHrNA689qjV85FsqzkMek4Fg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Zn1CRA9TVsSAnZWagAAtYkP/2dC79p6k5UFkq0sKlkg\nkEGuldHLH8S/Vge1hB7y+pyru9NbRA03TYMRHzW3zP3wweaj9siyfnzl0COl\nyunaJ6BChpz6ODMICsEdIul/AJW9XJNuuowuMs1HFeUKD3Cdu2aBmLt1Wm1U\nS1wE5G9HmqDtsoW5FSrxAPwUJVJ1ahTypfbg0Ax7AolWCDT/Blff+A4QJG76\nYsXH+8jNo7AMdkA7VW6yalA/cUT8uKy8M4NvLSgJRDnTajPt2zCXa4i2BxCN\ngZVJCQbXrcjLonrcwiQYBPWaOsw5dAhApLdrATBMzlWtXaNJFO1wJTz2LZOk\nnqlTI5NKqzFa5w9p+6Zw5kP0ZIIvKiGWRpR6Wto64BQR+3TRXAoDtrplQAk2\nM8+pRUj2mWO+ulRAVX00TKyj5JnEjeKFrCBQVFc7LdbrKZMAkHKzq6Qdx1NZ\nH4OPtgqmbRnvV+GpuIWNdpV/Up0TquguhuXDR1z6VYj5ks+cNBiWkMvM/GNZ\nl5ejSbS9O8TwQ/26uXGaKRl0zfqYzy/zADYsMACmU3LqjbspKxjPQ2LSsT2Q\n1KqjzlWuGSVQFypppa7mkGDJ+FIKBCCUH4Gcq4xWZc7ZERGvjZJVmQBOawIq\ni7u5suh6Toew9z3o9T88igGlZPK9WxQJ+FeCjvuvJ6M/gr1X3IhHhzK/psCD\nnzyY\r\n=ukBl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8073a20a9.0","@material/base":"7.0.0-canary.8073a20a9.0","@material/shape":"7.0.0-canary.8073a20a9.0","@material/theme":"7.0.0-canary.8073a20a9.0","@material/animation":"7.0.0-canary.8073a20a9.0","@material/elevation":"7.0.0-canary.8073a20a9.0","@material/feature-targeting":"7.0.0-canary.8073a20a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.8073a20a9.0_1590794741181_0.281720487329828","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/menu-surface","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"f5c638a6776160502b552425faa933b0e4fc576c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.72ff42330.0.tgz","fileCount":40,"integrity":"sha512-P/NNBE7j+zUNhxJ5N8KYxyBzVa5mjwmlcvLHq5Z0bgmOSNCYqPIgHFBWS2uFnmXLMbxjZtvMIaJBRha4WTAIMA==","signatures":[{"sig":"MEUCIC8/TzCMu0Xpq9IrhKFm4dBjb8qB6mkBsA9FESaQAzlrAiEA1br5+cvWJKSMciENlxfjkNqpKbkIgJxJzZ/wYW93cXU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TBpCRA9TVsSAnZWagAADWgQAJYxuN32261zAYd1bpqm\nY/cNOsXyvP3pUMzhObGZYHgPXVcs9JEdZ0kF08ze7a0NXi8FQVeTyefSISQm\ntZEAMnbu8hG/pmUWalCk3KBm2Chwq2YTIFf7LF63Ok9p1s7By3BnXl+OPfBD\nJitBKD/jQxN6Tn/NpgmHwbadvQlIwOP7n2jQ79VZp/UIf7+pTAspI9hrDe5w\nd3QMseofpGwU4ACV/okXnzRTfez+O4XN3hHzLjffxZcTFKKlA1RJOOmFrDQb\nVt0e2tQzYGM7sAL+lfKFqwkMRaBiKoFGBQowZwJR0hdBL/ATwRlF3WHrPR9t\n9wZKXcqXxS8cmu57XdT42Wx0yjWRjLfAHNnz7bxvK5Npc6ylu/CqUkjN9kMQ\nMgUnu6qX5PnujbL0kFDFFELP+BP3XnHbwbhZGPBmai9id2r+m3TRGWunP7a/\nEeLlsQLaYuy0eVc3R1qhkAz/+kae1bEdTBnpitbZY1AvGht0BwihGqXR0+Gl\nvC6weADOokvEFrflAO/Vm+k7+ZwWoAg/6JQBs4+pjA+h26aPPWEHwDgayOtM\nzs9z1hoRXnFUE3BqsZDt20FUD9hAEyrIkDqAmNYg2B83chfPRFbJqU+Ngbal\nd1LJN/wV3XayeEa/H5lvTR1bEQfmexlrssdEKSiH4sBmXxtueB87g/fxq9AQ\nFO5R\r\n=50tM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.72ff42330.0","@material/base":"7.0.0-canary.72ff42330.0","@material/shape":"7.0.0-canary.72ff42330.0","@material/theme":"7.0.0-canary.72ff42330.0","@material/animation":"7.0.0-canary.72ff42330.0","@material/elevation":"7.0.0-canary.72ff42330.0","@material/feature-targeting":"7.0.0-canary.72ff42330.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.72ff42330.0_1591029865323_0.8928518754855703","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/menu-surface","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"e20fca5f9103c2039a3df9d880c20766875d4723","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.9ea52070f.0.tgz","fileCount":40,"integrity":"sha512-rJI+NHtpAJfz2bMGIn0G4hGLL+hdkeyrLPhqHK7txL4dQ+2evWtbPFKZIxCjVb7fOpYOB6iVIuFJOeROuMqVCw==","signatures":[{"sig":"MEQCIBSHUb1LDNbjmuLk1XpuZ+hcj01dECRdUVcIvPYuh/wmAiBLaLO4kpaHJu08ccw/c0PocZMkK7T9pUAlAAmlilQJKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TGGCRA9TVsSAnZWagAAPDsP+wW7l9nihQC/7FYGTQhq\nj1cU2VqMHft1xruyIU1Rg/fy68Qpzzl29OYnlIRybu1rkUPA3x3PkaPhJM1s\nmpjIrWUq57Qw+Drdge7iY8sG90h54VonsQfiZu3hAu54JVOAiVbpJrqojeR/\n+u17rdYlY6/Al8gkD/bC/3A3igFahqjOzsDcpADU4FRkRlAepuObDevtOO2Z\n7aNv1xdS52Oclb7UnWDz9A22wDj6ryWXByZ7kLLUVRSD4JJ4G7VA5RB8Kn7a\nxG7iHt36u+Me6NsB2UpLtoKIAaGukAxBROaHOeGvcIMd/bU32xy762v0DNOD\nhFlJxiPrRfpiRXzg3IH1JKzNtEv+DDxFZSXMwOIsEzb+nzx1ihLK5f/Zq+7P\nL+Ar/De1MfAGmIRAbdyRZqZF3Q3JV6vfaEvTsXqgoC8GLcZP4lJP5ufPWsnh\n/q3VzR2ET0Aa/VlwLpyj1zV/Wlg/EiJD6qvmmBqSqPt5M7Ol2TTxSK5NyJFX\nu/B9IS2IcGu2FYhO+khkQzINXuBhwtMje45WjZkaiEAVZu0Fsbf1EecS7nVn\nlgvKJXQsFc0+OAcEV0bILVk0VgyCtihVgs7bqrm4GTz/sp9nMArCsZDBCVk+\nbm6qsK5wbeC1jR6ySi4dTQiVhBiAmaA+i6TundpcrrhZ1UXyNMVpvH4/Dn8Q\nhnLL\r\n=g+0u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.9ea52070f.0","@material/base":"7.0.0-canary.9ea52070f.0","@material/shape":"7.0.0-canary.9ea52070f.0","@material/theme":"7.0.0-canary.9ea52070f.0","@material/animation":"7.0.0-canary.9ea52070f.0","@material/elevation":"7.0.0-canary.9ea52070f.0","@material/feature-targeting":"7.0.0-canary.9ea52070f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.9ea52070f.0_1591030150227_0.9975673941768062","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/menu-surface","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"f85a5bc06ae12178fa5d9987b8c905462d5e9d75","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.d86ad3b60.0.tgz","fileCount":40,"integrity":"sha512-qFyviXvZrgQyMSTtJnp345UbsjfV9ZP34rx8nq6RJRRKPgC+nLt+gHSkxdtytqrAZoDLYxYjX9BONReBWGkCbg==","signatures":[{"sig":"MEQCIA6feOpyHVdVdOPNH/xuZGwpWuKbcryrYUj44WZSvUPNAiAmZGrpM/THkDm8kTrRJgPsOh/NvyiJkh68g2bCcydyeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T+KCRA9TVsSAnZWagAAGwMQAJkP5v31rcUqZpZoWVHn\nw+rCJYi1//4DeGvIthogA7b12bY50swuCbxg1JAjMJUD/jbwzGHgRGGuwXal\nNHvOduZPb2U6XK7TcQplBl7vRlnVOHkU6TTH7NXLvdXqzSSKY3yF15ZDC6OT\ntKhqa8gycRa01EC48e1zD1M3+IHiaXeHYN8h3hOvQ+X6WILLVXlHvWM9Qbo2\nRRWC5+IZoGBEUOU/31yew3BIWTP+bhBNP+DcxptlkAduHgD6mI+UNV166jSO\nYWYdQC0qG5iyzTagFprJ47vgFLflvNcdu2+MvZf4pOXaLcge9Sc+gHrqBmNz\nQItN/8O5GQMupIgxVCVPCKYTHKhSfvJMj1sv3pzmzc9jR/79dKnIrnxnKTWL\nY2531te2/PGR9qbPlD+/t14bkP8O8Bp0sPwSNofWnxLAw99PsB9pSVwaDOfM\n5+35L6eeZPCBVy+UQucDpegVy6Bdxj5CDEoPR4AAmU/9NYJwr0DdRKiSpoH/\nE35vbX3BrM3xAuZo8P2RkN91cLzeUGfNqdCIv60FiyjCYCcA3aX1WJeyfmKP\nYzpbitLe8/Nb9EN3xa1sR1WeS1lrXPlcAVhTQrFkK/gnl6+MRRtRvypPTnbZ\nwmVfKEAJrANyIQ7db5JtRoU6cyItIwlX41iZyXhgZxqg314ZxkZOlcBdg/9O\neMy+\r\n=xo1L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d86ad3b60.0","@material/base":"7.0.0-canary.d86ad3b60.0","@material/shape":"7.0.0-canary.d86ad3b60.0","@material/theme":"7.0.0-canary.d86ad3b60.0","@material/animation":"7.0.0-canary.d86ad3b60.0","@material/elevation":"7.0.0-canary.d86ad3b60.0","@material/feature-targeting":"7.0.0-canary.d86ad3b60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.d86ad3b60.0_1591033738017_0.7404888521107196","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/menu-surface","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"5adf13a50ea6f145c04d1d72940cc9b708a78c09","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.b9776b1d0.0.tgz","fileCount":40,"integrity":"sha512-BJIM4/2RToh/fpU5HLct/pQWCnwjDFiaq0fHu8lTowdjt69aaysOR2nTMfDZlCWvyjXth76kstuwUDUhwgYJGA==","signatures":[{"sig":"MEQCIFY6UOyprUQMlgytkjRtGSNuT3NGyqsb92z7jLaZ1f4/AiBv75c+VFu80miSIDdllCR1V8HU9nFNFwOVKsLzf9t5RQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Ug3CRA9TVsSAnZWagAASNcP/Rt+TBv+z4/00htNoqCl\noeSHErZK5FC3SVvzpVTVUW79jyXeZtQInIUf/2JaTUm9FGGExLL5GEhpJfra\nFrhkcCUUpWRkYfjgr+N8slnc78a3vI453Fa64cu1W744AZSGEiCn/LdyoTpB\nmrnlBIw7xOrnTEucvVXjglSWLZ/wK141zn1Xt29yruhFHKkd4oeHXn1OnjUO\nSUWBb+ZklpXOz37q76Bsssy6Nssxp+25gmF/sd+Zkqs8fgJJT3m8W7mXWHC9\nQtQsMqztZ88dPIf+uJMp3UT+4tDQEkpeu0uyoy4UwbnSjDH74yvkKKhFhLXc\nWvwIpfr1FCe04pQHMNep2xAuhgngLZvZiHFdwrcniSaCc/MouPLus6tOoZTC\nXe2KjqMXPxIlbXjZ6woNk1ce6FvdofuuqPwaxOoOMgfrbO9hSe8Ob8zmp5oI\nj1gjzCu15HdNYpuhamyL1rnwiuOSYh3CtN/2ydDYAs8BxeDPSuwpHV+1S6DW\nmUlqp9Vi051ieBWjdUVLYHL3K/l7tIVMPnp1qIy7pw5qpXnicoc10JSlmyGT\n+pVfYqHbzhTKOeoOmYUOXV20EEYcUqbdkUAJBzTac0uQa/mk0FdKR5x+FKM8\nZixyzttffNJi/fO7xgPAHaolnqMUOO8NQ/EzjzGEjpQxgqOTawHg4dfwXqoF\n+d23\r\n=pqfO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b9776b1d0.0","@material/base":"7.0.0-canary.b9776b1d0.0","@material/shape":"7.0.0-canary.b9776b1d0.0","@material/theme":"7.0.0-canary.b9776b1d0.0","@material/animation":"7.0.0-canary.b9776b1d0.0","@material/elevation":"7.0.0-canary.b9776b1d0.0","@material/feature-targeting":"7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.b9776b1d0.0_1591035959045_0.4092821628695371","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/menu-surface","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a9210efe61ea5fb62f95a459211d094fd0e8b677","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.ba6f7c294.0.tgz","fileCount":40,"integrity":"sha512-kzvvYyhTnNlpaaUZpdduDiOrOgrSTJ+bxLQRlyebEN2Kt5k6xHU7hevxrvDAZmet/+FETur1vn7RDwjQ8fjZZQ==","signatures":[{"sig":"MEUCIBcnrzefcbvfnCHPEE1MavC8+WPTmxU+qju6zviJTKvpAiEA9Q4fiy+TfPf3AEvd9kMzxRR2broGuq8bLuxYEhQlEUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oY9CRA9TVsSAnZWagAAFMEP/0tBhPzhpizYGtgaYRxI\n4K0ZprR1R8RLXpT8rVAv+XSjw/vqVwr3fbMoyBdxiytXodHdGpJgQdVBpPOF\nr1Z8Y+K/JH5lY7Jp6wERxED0KxYC895hlKyhoUBrCl2PpOn/c2B/VVKAYuax\nY7CVeq6cAkDJjkR1j6zLiyGPqeyWRd594ozz/Mpxw8q3JQzKyfXxutZma2lL\nAHVuAy2Agm3PFQawxpQmxThzGtXQGQd+t3ccRSMujRyd9isC0bzbv1p6lGO+\npBtJAc8btL0jZr5he6Oq5GFf+fVU15FlHEPFEIHxvTNX832lAZZMzzNhuox6\nLrLb0WuMcQLJLVbwCC8vhxoyj7jnwYJWjY7ZmIgz6C2yENaKDuAfvwl1TSJL\n4Bpaz2dF0TW334frJbyXtkRlDSEAPRTNaLGPw+0yD+wzo9aMcDS+GNBeaAYW\nMr/C6qejR7aDdTDO/hY6xZddoCc4KLyYqLqlmAl0O6p4krsELFj3DQuCRaB1\nDzlZFGTVijdLmeyJMiDkXt43TFQxWEiqD4fcO+gZ/PoAToe/D7nnrteA3eQy\nYyga5ZUxTsrT4iyBNISWqp+OFqNbUW617d6k8eWXv3bsmptZ/PRqj3q3kvq2\nE1x5kuOhpWZ7zTvDivTolR5o1m0p22fUecQjnn0GWVw012jJ0BjthhuK2Z+V\nr85C\r\n=DGrA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ba6f7c294.0","@material/base":"7.0.0-canary.ba6f7c294.0","@material/shape":"7.0.0-canary.ba6f7c294.0","@material/theme":"7.0.0-canary.ba6f7c294.0","@material/animation":"7.0.0-canary.ba6f7c294.0","@material/elevation":"7.0.0-canary.ba6f7c294.0","@material/feature-targeting":"7.0.0-canary.ba6f7c294.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.ba6f7c294.0_1591117372594_0.4931044225661392","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/menu-surface","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"03adf158ca339396e8ec2b53854dde0e9e866650","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.cf3b664ab.0.tgz","fileCount":40,"integrity":"sha512-CSbPjFeOwZCiRPBX5XlRCFgmqOZyfkmXDa7jbZTGpjT7S+V86+fA7g4wCk4UJ+SFlDYPm6MQLfu1AbX2m90ybQ==","signatures":[{"sig":"MEUCIQDSXjG3rIcnMn1y4tMa3lyjZYCiPaAlJpNo85GSwpezZAIgN8jdTD0afgX8UZwbF9kTxQAJlgTnyYYf/hlvAEKRrIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1pkxCRA9TVsSAnZWagAAnjQP/1pdA29d8RQxQXqlKkxs\niMh28kr9NR1FHSLEcOGa65ufkoNdHwoIob5Y7vrPJJXmnLjNe86JIdW1I1UR\nUxdlMtWlTqqssZb0udDb4dKAi5A+3AuxwXD+6k8SJBxkdxPXrkKsaRqwCYna\nu9NI6Y2AuyHwsp0Dcku1rdl4nE38pN32kxPLs3iIs/1QEnm9iEQy3F56nzql\njS2dfPcEBQ1CqL9iqlcO13bgFIcNY8pSpptL+BoISQ1QYkW9lVEJcyMyu8dN\n9xU7Xg+ghxiDN4Xi9keLNLXijtijyqztdtJBXY7Y3wA0UqhSWu2dpQDsWDSo\nss8ljhOUhICVwBTGJ98SwK+gEOW0efuSHJjJIYa2TW+vZyYW+d2QEjpXzdeM\n2udLJR4FBswSuu9LAWaSJbl8t027W3Tsidrj4HGbqO3agj523SKyWDHQ/L1h\nk7GFy5emQhJXi/JuLH0QEuQBzbQLouMDWG10gtYwkzDM7XqbxwaebeFIhHhw\nmrJALV/7oGhgLSp4A/BxSCosFEGq5QS6AA+FOCvK0LJsAFnqESpLNt4bjWrY\nUL/bswbjLZEeJ7BprK+HKh8aunx0H1CQLDmDFaaZL11AiukqziT1ZCUfZ8qO\nrtLiVmMYAKD99XxtBQfgR6G+D9hSLnRKqMRrSd8NtHwgFh8HDsTRZEnpHfMn\nTd0s\r\n=Zp5C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.cf3b664ab.0","@material/base":"7.0.0-canary.cf3b664ab.0","@material/shape":"7.0.0-canary.cf3b664ab.0","@material/theme":"7.0.0-canary.cf3b664ab.0","@material/animation":"7.0.0-canary.cf3b664ab.0","@material/elevation":"7.0.0-canary.cf3b664ab.0","@material/feature-targeting":"7.0.0-canary.cf3b664ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.cf3b664ab.0_1591122224865_0.21768071794498645","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/menu-surface","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c18a25b94caaa091961a0c9e85daf050c9012f4e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":40,"integrity":"sha512-pY8Y0PjChKhx9ztYKBe/2Qfk2LbeSvL+jzQOt1vesag751ZsL/EzBS9MZSD4+CkTtULNNEBAHLsZ/wtI4l2D5A==","signatures":[{"sig":"MEYCIQDksQ8WYDFRt8AckJu6Eq903oxGnFKLFNW6dWEpjP3YwgIhAKS3EFuhKQiXBYQBobf1OP2eMP5VQayVfZKNskamZAAO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uYtCRA9TVsSAnZWagAAzjoP/2v87OsBWAiQ4mqDBqLM\nPZe1spbDSktMUboyf/ISMDBP5+q2DOoGsJU2jYWxahsIUz+BCpZVYpIT9xbw\n8FKr4OX9Cg0e7N6VpKp0fpf24eN1RIxscLhkRycnioiEjY0AtcY0TAVCJoGG\nTHqaEJJD1761GHKh7Ua61htmy3IJ94x2fND2rhsbZE5RmKpBq/D9dABEsAia\ndivejhoWAOTQXyznLg1dPWtIEuftq5S4OHrNhrYFTJ/DdVy6dWzcR8T7S2rS\niKJFO1GAAyMVPCHasRItKMZ2I6pETickXVcQ4BAl0DnkM+oiLvWlQdIB/Mqs\nd3WaCfOkf8UXe+J+aW9Zg0+ChU+VcjZK6aXh425BtOjNRFCd9Wh3ExZnNBNO\n4+Ga+nfarKn/QJUqW//T7B/qEHk49yd0gdfE6rAl0ggycXQ0XeITMXk0rFgB\ng8ULFqO8JlfmRVe6+xD0aPkitAoqadkXOaOY2oc75ONW5sYtdzJHELeamSEy\n4Nx5eUTCQgUyS1WB9Au5Jnhwt+kX9gg2gAUS8sSZPjWyTnChbLE9LvZ4RPYj\nfvwpUkrYhzMg3A/qvdZmHjaXdfJdFdj376qhZNrgLSuB+kLvcyiEIMY7qf35\ntVZkhcuEeBgiGkbk8pSsG/r/dwxesCe+MrJvGoE4Tie0qRAVNO9w84B1Te4/\n8VSp\r\n=oVra\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4ba3c9a31.0","@material/base":"7.0.0-canary.4ba3c9a31.0","@material/shape":"7.0.0-canary.4ba3c9a31.0","@material/theme":"7.0.0-canary.4ba3c9a31.0","@material/animation":"7.0.0-canary.4ba3c9a31.0","@material/elevation":"7.0.0-canary.4ba3c9a31.0","@material/feature-targeting":"7.0.0-canary.4ba3c9a31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.4ba3c9a31.0_1591141933004_0.5298652488016735","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/menu-surface","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"253a5865b595385edc7c6cf4041108c12e58bfca","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.388b042c7.0.tgz","fileCount":40,"integrity":"sha512-m0xo9cOT+KaqDJis+3N4Nh4EUJXm14oTV7IRj53sU31HRHP9cbVDncYpcA1VIsZQ/qglJvtKcxVBTToyzAOQ4A==","signatures":[{"sig":"MEQCIH9N+UqJZii62+mIJlh4q3+YDknmEAhBXXsvgqPofyj1AiAinOgqP99mRE8gdP8yByvNrx4vD9GQ8Ke3AF6rrnTMXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16m7CRA9TVsSAnZWagAAtfEP/1wgm5Mn3rvuRuliWnzb\nLmlHEZnQHNz6IdbCNp3Es12YDHpjT4Pg4wT9PL1DdW/LGFvIhbR778lvJuWQ\nCQdFUcM5VtXv3v422XeZHs0OYKKiBGS5cWHhwivwhAGmQq5HGo1L+HKHYq03\n+8jzc9qm08/huEW2JuiX8KIMqkee80Bgz5pnBvBMAm31HU5On9zaXOPSUKNW\ny+C+CpSLMw2vWkY1BgjYxNUTaBUAGamsEKJI648JLmAbMOMDQFnJispWPaFd\noxAvsK3fnYb8pOcMWzrcF3o5gbSfLQJw0pXHa4D98XP+Cfhk1SK8m4fD8Z2M\nZYGInC+l3DuKSbcvB6WE6Hf2JhOfA/DxID8pW8QavpkTSFXsgsrgB2xiu8l5\np1gPnANVCUS3n/BFeC7T+vgcbANB0++Yl/tYUzl2JZWE23bnVI9v9JA5zRro\nSaJ6dBUj2UFhTGwoELR1WL1ReK0cEwDdnS5leSaRCKLXDgOAubi5QpAE+i4+\n9zcNEWsZurmhgPEk+RCbYVZQKbc6Fm1dAqiX4+wdsyzu2ME23l67w6xEUADi\nnYP503xqwrGkmD9xvYJdJfuzmUP1CQIj9P96eoVe8IEYzSBOxwUD+Gj/8ASD\nsNLMEfxgcMEvxDgAYTHqxw3Ol3fDosP+inv1pmyyTxrMIQ0nRM8ce1BWkyye\n7/oI\r\n=ilsq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.388b042c7.0","@material/base":"7.0.0-canary.388b042c7.0","@material/shape":"7.0.0-canary.388b042c7.0","@material/theme":"7.0.0-canary.388b042c7.0","@material/animation":"7.0.0-canary.388b042c7.0","@material/elevation":"7.0.0-canary.388b042c7.0","@material/feature-targeting":"7.0.0-canary.388b042c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.388b042c7.0_1591191995426_0.22639948834387402","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/menu-surface","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"718f96f0cae5e907d27f756f5bdee75a561b6d38","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.cca1ca84d.0.tgz","fileCount":40,"integrity":"sha512-x9UFg4q/KpWDd2PAf5l0HrPN/UwOdqf5vKSdh/MsDVCltqeL9qU4BkZv1RtEyZAAy/3mL+qcgdrvh4XNiUjbmQ==","signatures":[{"sig":"MEUCIQDEp5jmV2LWck4yQyoHARiz8fEZXWzqAFI5KWqnv9cDZwIgVs/pnoJ1P1pwNOvbHCrVdnWV/GZPC2WkZN8Sp4PPjOA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18ngCRA9TVsSAnZWagAA6P0P/jkWtsPr4LRRRs0b8rh8\nfIeX6koWxdx2HKHXiDcdd8LzQi0hbIc8gL9Hl66GX5uimz0VHjcsks/RszFq\n8MAGFZ46ayMSeea1Er3XzOC100XqZdCN2/3BZl3f+M0mSqCODmgE56OlTQ3P\nOQfiaDd7Sd700paqaygAJFTrTtPBPM+nanQHyNRObMM5FYeqJKsn4goD/Tx2\nVDUL30no6ly0vgJQP4vqOUsc9xqZOIZgHy5Gl97kAHOg1xMM0q2MgR/rILCY\njl1hyN1KJUiL1dW2yKPOzsn2lEVw1PJ94/jrepNJQq4Op/Ii9y2RkmkmnWB+\n5SeHdDyYFrJzP0ptdAWtqnxNmi3GnkW1ZeWj2YGk4vFFcMnA6pNl8N6wcSeR\n5nT3yM07nG2DV+iR+uiKTOcWjzS0O/Go9bPQJdszLrjcp/OtU4BAZPepyz/k\n6rce+2PW9pfDUQgrAFYwzUjhid+KrtKA8erWMnx2l831EXbPonAgENKtzSWa\nFtqJFby0hoZ35QxWWFB2rY0d69Y0niEsZq8uFt/m8VSkI6COV5eh6H3yLGGR\njNEHhw2kVAMgfGtxawwZuhp7oxAFB90OmDKsq6m7FcXKGMGWhsbVzTv2i80e\n+XmDJ1yshbTTqyY77z7hVdM1yOAZHHFxzwuul01ExW8VElmf4OHXWCqbIw9e\nENGc\r\n=vf16\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.cca1ca84d.0","@material/base":"7.0.0-canary.cca1ca84d.0","@material/shape":"7.0.0-canary.cca1ca84d.0","@material/theme":"7.0.0-canary.cca1ca84d.0","@material/animation":"7.0.0-canary.cca1ca84d.0","@material/elevation":"7.0.0-canary.cca1ca84d.0","@material/feature-targeting":"7.0.0-canary.cca1ca84d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.cca1ca84d.0_1591200223391_0.3691258328180893","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/menu-surface","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"3ec1e2cdaaa3671c5d6530ee4a3ed19fd201db7c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":40,"integrity":"sha512-g3A2+NrjN1sP9jE+v3bUA1ZjALhsEaF21J52bApFmGyEUxJWchD7Vu7WNxhwpwuIytP8BjPKP/Qq7BVEaLJd7g==","signatures":[{"sig":"MEYCIQD9fmZD3yQTdBJXE/ycoMLb7FMQrW4fySd1S76/GPcp1AIhALG1WUP5hrwZcLxdS13b8v5yZ3Sy+n2f6Nl7zYd1Kfro","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/KhCRA9TVsSAnZWagAA0b4QAJRJ/x9bIpqYJ2pSb26G\nyAY+uGP9eCkdYc/TWeLUAla3VWDPTCDlDJIjekEjYDeGRdoRrYBwtlsZpRbX\nsCpJwWWDhUoFXuujiiQBN/tic7neXnaZzwZyxO/uYs2FpwZjaNOB+KezT7RV\nNkldHtHNwry7HBJWv2rgmHs3AU+hePWEapQwFLdg9ukFv3Z2sFR/sCqZbgsq\nEiKMt1PrBnP2V8rf2XN4ShiD9teooQoxjQan+VYsyzWILYF495iwTYnhZ7uI\nJkcDqh1ZyUMV6z0eHQDKTL1AotBph2Oy1EvIXEjlYZvJZldcUeXEY8hTNvFd\n6zPAKxuFLr08RvRkZEMdUJiZkVKN7l13F53FH701oDyOvecLi/wAB4fod0sv\naF7tsWoEnIWtedb/DH69MUgPfL71oQJkyy9j5yjxMUu5QFR95lsJnKwpQRv1\nWN6miWuhbMHfPh300FxRdBTgUQwh+sKmjpF2fL3oB+aeNELE4HrbNWY4kIAX\nUqyGMMlZbE6oEXe/G5hVCZpC6/lNOJUrBt2M4yBsC9UPCZ+1376yVXMzJ8BQ\nQAXzVfl2rezeO7Jr7dzm8SpBO6OGpqNuRDMzXliqyLGfPJPMHHZfg80VPgN9\nIpVKYHpnxoP0DcES6QBkrZfvcYZHF/BvVnHlalqfz8eY1DyJQYx7R9ZpIoR4\nHpIZ\r\n=hbKi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.9b0b5f2e0.0","@material/base":"7.0.0-canary.9b0b5f2e0.0","@material/shape":"7.0.0-canary.9b0b5f2e0.0","@material/theme":"7.0.0-canary.9b0b5f2e0.0","@material/animation":"7.0.0-canary.9b0b5f2e0.0","@material/elevation":"7.0.0-canary.9b0b5f2e0.0","@material/feature-targeting":"7.0.0-canary.9b0b5f2e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.9b0b5f2e0.0_1591210656913_0.44731851670013345","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/menu-surface","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"be479b5953d666e25fb464685b8d20e541bcf540","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.0a7895f4d.0.tgz","fileCount":40,"integrity":"sha512-a0cWy9CDbOOLfg2JUUpOt5oIHqFCFkYEiKuVnVpqmLuBftJ9LS3Yq9bvtSopvsQeoIUmlG0vrCeivQZyMrMVUA==","signatures":[{"sig":"MEUCIQCqqBYvvdPrShSnCQzOpGZ66WuW+9iQuMoyWA0uhqTeNAIgdO7yMokUScYKG/siM2gUDjyER5+yhYPWD4HkPhywuf0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BF+CRA9TVsSAnZWagAAjJsP/i2KLhSeqY556vC+ooq4\neIJJOdq0ENX4u1b1RldrDwcryFdq13k3C2mY6+euA+90okuztl0SYrZGwsAt\n6xvDLS8ARzPdyHpaT5pCtpgDWYy4iFVd+19VSm+FhIarvZttm0phJQkiVqLp\nt7X9bovcYJ+prOHxbnL1DTbnmB6kWRl1mnjsFSpDhCk9BUAMkOMGRF/4HUH0\nk6AgDZFVfCAj/fu5lXUGoRa5mIsPqpcf/7fNHJRzMeXj6KDthxQvSrk8cY61\no7vbyyeF9H5bYGGYkUmWM+YSQ6xPN3VQ1w7jIEot7AtZoNnxUEzvgzf0H58q\nKO+FGrAnlq3fv0F68c4xI8j1hjxjP/pcQsh76N6dtS/belyew61j7q5Ua6eB\nKLyjI2Zoia4ZBspICo/G6mo3ewmopkUSQkh3dDLChs+rXovo9pDy526cHjna\ntIHEkkTG91Wu6u4flvd0DBM3Xt34juBBl5SdHm7YRkvzv/mRpp5umKbEZidw\nBxvtORPkYKyzHid2drlE/bA0aaKdAHz2JMi9tmwTRjiliWo1peXEz1MPiiDs\nq6nQHfMWHWnKhJSXiPx5h/fR+w5C8OpDgSjYoXZHWJaVQII9cknilgf6b0Pw\nzeJf2NN1POxJPi+UAt166dUseS2STW8xlnTMZXyqrnfyZr97LLHSFLFd9tIn\n8LFl\r\n=g7Vh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.0a7895f4d.0","@material/base":"7.0.0-canary.0a7895f4d.0","@material/shape":"7.0.0-canary.0a7895f4d.0","@material/theme":"7.0.0-canary.0a7895f4d.0","@material/animation":"7.0.0-canary.0a7895f4d.0","@material/elevation":"7.0.0-canary.0a7895f4d.0","@material/feature-targeting":"7.0.0-canary.0a7895f4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.0a7895f4d.0_1591218557735_0.06124068550466655","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/menu-surface","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"07cd3006a40db95d4219425aa9e876f685293a05","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.7461aad68.0.tgz","fileCount":40,"integrity":"sha512-YdWTFCROOZUBS0hSJrT8ZyZ5NtabgYOfCGXx0NgxVsERryi252bIjQIWxMJ8O1s59WU6zU3lPk8d+FbRwX7jxw==","signatures":[{"sig":"MEUCIEQbyaxcz0OsDLEmLx0qG23MC3v3beqdHddntSdHOlKdAiEAsyiKRbB2uBwZqqe5q9IoGCX+hzcpctr2VHBsbVjv+Ow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CBeCRA9TVsSAnZWagAAPAcP/jxjhXpFqH4uSJ9aTxJI\nLtdHq8Ztd+vLvhV/Rxv9/UVHBT7EVrVmY3sHmpVIPmX3g6HO4wwtthq/8lZo\nB9DKUpCw9Bu8L4nsH7VOlh7g3FxpdeYWIc984/WN/8kyGKCEOmV7b/6YIA5g\n4MTXigQAy4MyycreAY+IHYFZLM8MHNmJUw1UTk7xr5ofdEm6SA5M2O6dFjSV\n0Sp/UB8ro7vT9X9wzfeDMrB00glsPq1Rg0ncnSVgU69G+mKUsUQ3ndFnlWAm\n5vBcwv5Rj5UzTE+T7COy8i+jSr5BfxaS3PJJT+zNOYqrgOx4M1vF7CWk7o4C\nYMsglXDOg3/ENIidM6I2nTJRHBhU/2TiiudH0krfCosv/7xIzW3m63L6RO6L\n5EeFobe82KOlj7pUiBxEW53GcznmjdaUO3vWDWN2pf08ZrSaztsBD0LtyHnr\nyX5ocoL4mVf3NufzHluTPIN3lgTBGJVx1p1nF1bmrqV3utWRDOXRxGVwaNjU\ns36jBi59VsKjKswwEy8EW+qw1YHabxoMfor7WIigmDLQGKQjkOKNZIGxxno4\nJ3ipRX9SHiF1w4hlvHM3JYWHlAtVqc/O3oE09uMLb/Gv3b/fA94pK/Kky0UV\nkstMpPbvZTsNi36PPYW+UovxozF12KFVpY1nc08SDTt+At69G67Xd29C9LFt\nEsDW\r\n=FlDz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.7461aad68.0","@material/base":"7.0.0-canary.7461aad68.0","@material/shape":"7.0.0-canary.7461aad68.0","@material/theme":"7.0.0-canary.7461aad68.0","@material/animation":"7.0.0-canary.7461aad68.0","@material/elevation":"7.0.0-canary.7461aad68.0","@material/feature-targeting":"7.0.0-canary.7461aad68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.7461aad68.0_1591222365429_0.5737297536698216","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/menu-surface","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"8abd414426bf6137d2329f27d9db50e3c531b50f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":40,"integrity":"sha512-tT+bUgp4V6XOcdbCEQ1/CNRNhbIFSbq1qkQ2xajh8SbUesorez7aTft0zxTWNU9UEC9q+lGOQV/EDl3QOr2iiA==","signatures":[{"sig":"MEQCIAPA9d6dbylPvW6mTlTMqPujS30o4mQ5mO7S4lhwsYTtAiBxZ8VpaOGuhn/ByR2gHcy4RCsEnRW1wfj2aew/gaK1xg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WQvCRA9TVsSAnZWagAAjqcP/2fRgohRudABhcXWwh8n\n3yDF0Aj2Zciccq1nwgxZsGrtrKPcJt4VPrVW5Z8riJe+Ai3VkyGS2Ba+IIFv\ndF0WA7zcgZWYx/6bqg7I5sHAwj136OFOdvJEuGMr6AWyrgCSxVmi2fy79V2i\nbHcSWrW+PYjwB6js+bzG0gY9LdseHvDUjR/ntnzshTE8YbvMr+I1uYIZ6Y7r\ngj0DpZWZ6qiXOAHqmclN7bvf7CPgoS8wYcj11KXxtLAwIUaoEiRPsCIdrMnJ\nn9QGHChtKl6jnAAY6rxXgzyTVM4b/UftlDqgMMkUMNHOMxSj67d6ZTp6vzEi\nfPDiSQcc7QiWwxEx85i/71Ztg2dOtuFnwRoPAruy68DlFG9NUUbvbYDsO3Az\nbM0jPd2sGXE5Xw1adpXRV230AlkBIeCwO8Jn/kEw9hPZ5/9fqB3Tq73vm30N\nv5yQWKZLSzMFqMP0JLjkUbKurYjYkUCRYekUsG3kDuQ8Hs699ZiOu0u1+4MT\ng+CQRgsVnTnM0CTL7w7Ma9itwCwrPNnh9Y652BcdcIy2g9dMzGO9qxHBvAdu\naiEF9mCNjsgf6ldonSDfUGSwChV0FUGLqJuJkJlT51Gc759EzZHZaI30ZTIY\nGZ3wjg5E1AlBhrPVlnps7tawuP8wLZRFmfpbr0WR/nELVraOq9jxlMoqO+yT\nl/Rl\r\n=+b3o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a0dc2b5c4.0","@material/base":"7.0.0-canary.a0dc2b5c4.0","@material/shape":"7.0.0-canary.a0dc2b5c4.0","@material/theme":"7.0.0-canary.a0dc2b5c4.0","@material/animation":"7.0.0-canary.a0dc2b5c4.0","@material/elevation":"7.0.0-canary.a0dc2b5c4.0","@material/feature-targeting":"7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.a0dc2b5c4.0_1591305260547_0.4103673617237378","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/menu-surface","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b6d7650ab1069dd55a78cf9aed77a5d11f1f255c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.2b420c5b3.0.tgz","fileCount":40,"integrity":"sha512-fy5NV8093/BK0gaLf7iHDZcDEIW9OZB03wVPs3F3hwjA1mFvYSHsFuNrHd9yAuT8MTGBDMGy5uqIULNC/V4RiQ==","signatures":[{"sig":"MEUCICvxVC4Ll2fFMxeNSdpzqAxcWeOAgrVYgrVS2sXcbdvjAiEArNrroasYq221cu83nhwYe9IOalrGT4OTW+KQAR4ANXg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mPhCRA9TVsSAnZWagAA8pYP/Ren4L1yrzVhBR8CjMTj\nVp+tTO4HWtGyUf97HJp20hqrmZ1TUQOa9CTsnKSEmbxmEatKHddjT2/6nzWC\n4252eAoXx3uVjqM0pbl3AcmGnfFcNIJCmiN3229Xz/R3y4ORV74QIb4D/h7o\nQVr4gZ5q/Pa7x5DlKBmOfWQnpo2YB8fkzgI0iXdAo+7s9Xj/7DmWRDN90JHv\nRpKb0uYBJnDnls5ar0dhkQRGPnMsczmwXSMeErQNKKDjTYaZLvHQg43ABOCE\ng7IcxDN0ccnzbw6cGyWYqIf4KLpb/dOq82Usq94dpX/kWmRZ4Gtyrq1VU85c\n0l5CYz5ApOwWp/yRrvXuubRvKiwpcajKyLDaK+OXyHwob0/gU88SfOEyle+W\nkEIIz1jlig0ubk9Lw5ir215sOivCMUQRRJuibbUmuG1OPnvFeDL/xEHuwVqP\nq6HEAlTRm61EhuSZEaPvhWxb2z4AYEs5g5nMZDcP3vm2otk0QYzIaMglQPbJ\nafLDW4FVqY+AHKm6MLUmortlEOQUEK9yvjoxv4YnTAvc4zDpVwGfDwhTFDFe\nGLRcjQOWUh49S7407C7K7pC9eFQWwmvnAOFbZDmItrj1Duq3QH435V4CXyK4\n8627zFFvrF3lDXZbuVcyWWm/DY2ZKj4m3yxdu8uyWhGv9slJE+OsemHPGmxF\nXvIf\r\n=Bj3D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2b420c5b3.0","@material/base":"7.0.0-canary.2b420c5b3.0","@material/shape":"7.0.0-canary.2b420c5b3.0","@material/theme":"7.0.0-canary.2b420c5b3.0","@material/animation":"7.0.0-canary.2b420c5b3.0","@material/elevation":"7.0.0-canary.2b420c5b3.0","@material/feature-targeting":"7.0.0-canary.2b420c5b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.2b420c5b3.0_1591632865021_0.7460311332914511","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/menu-surface","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"90b3d7604cc9f165760382f3a1e86615a9997fe3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.8fa22aacc.0.tgz","fileCount":40,"integrity":"sha512-xC/OALsPxmBBXm//DCUkWYwc3O8F2NNgBn7q5XMUV05KKaTbvwy6qGWm1YXZovjMz2ORgRl3PARrH8YW+Ii1wA==","signatures":[{"sig":"MEUCIESHoJMhBCBPsHGIZqh8wBpq68o8/4Uq+2iwlENzOV11AiEAl2jk5YdB80g75B4EfhCo7v4SEkg4osyNQ/TDsacgr+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n29CRA9TVsSAnZWagAAnPoP/3Rp8Q3OMAK17Pi3CwKc\nTq/HF50+GpRyjLSyX6T8pAxRUeNhoqGmm6z7tE0TS/zC9hcLfsSxmut8Ry/g\nxX5rw/aGyXWAZklwi+L2WM+6heH65snPocSq7q8xQ+cfuu2tsVvYqQYQVv8i\n0axZtFfoRD51z+zWapr5c62MMcwNBtolclp6cMrHAqbAJ7umg9h3OFbjvmMl\nuB4wgog1iMzrOvv+lYzLQqodAiDsRmOLRljZSpweg9bmeqgIkhJEU6PUtN+b\nJ00mKw04CjR6wcRMOYM+WjffXliTUpt332UD1uF7XbGviPMeu2zLh+6WY0pM\nhYcdimGGScGdu+Lobu+OCrbqXPKdKyopjJZpICFS1C1bAqUEl30rRN3Pml87\nkFBs4DTQaeXle3jSC6c8rRrjNaGZFom3MI5SI5f3X80lT6fDAAhWr+l75m+4\nNXAEigR2apnQw5AixX+H2XGaGYy4f3glsb70AgsJDNuM8NOiH0w+h/s3cJ0S\nWjjh1cCpCfOKiGJBF6vfSaFgK1+DzUNffjECYIKZxGJMEuohxqSUxtNgi/p2\neKPfZXKa4HIV0ruGYm7OEAcf0cDeeM9sa1VGQg69zRoVmGEQTumGi24YbN2i\nxK0p1trfsKAEhnBtw9syybITs/7X/cAkz0XWbkjqk4iKqR9I7XkPvjUSwEmZ\nexxw\r\n=PHqK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8fa22aacc.0","@material/base":"7.0.0-canary.8fa22aacc.0","@material/shape":"7.0.0-canary.8fa22aacc.0","@material/theme":"7.0.0-canary.8fa22aacc.0","@material/animation":"7.0.0-canary.8fa22aacc.0","@material/elevation":"7.0.0-canary.8fa22aacc.0","@material/feature-targeting":"7.0.0-canary.8fa22aacc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.8fa22aacc.0_1591639484389_0.9018787057351088","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/menu-surface","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c9b725240b2d6a97655e966e350af4dd3b3871c2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":40,"integrity":"sha512-Inz7gIpJrwxdDvuyc8/CS+o7vNIY6JBNRA+nIChyYVNZpivvLb0h58j3qHXBKs/3jWjqRELz1IRtd2wDjdjYyg==","signatures":[{"sig":"MEUCIQCIuCEE8xLdG0BTcccavH5dC7zNK9e8VJPZcD2tjg4f4QIgQE21GFgME2EBLMzraFUgQ0ddqM0Lj2OkOPwVLc0qZyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3ocACRA9TVsSAnZWagAAmI4P/2LtoEi3cqrTnQQlGFZN\nzwLJr8kq+T0vwHY17e+eJLRQNe18U/XtNeQQjmYw28BNzeKr0Cmtvy9jDtNa\nAc6/F8Cp/swZ6LK7/ghxJvjuDQDMnpYXAiqwn03kMybaAZYqsD9IJQDQNbkz\nEsnsPnXZ3Cjiz0kzXZC715iEFOsmo/y6b5TK7Aix6LYiaNq+L3xRSxSOVebH\nsKY3Neak4qK9tG3Q4jKeQjb+nR8IwK5SbenLQrxlV4L8mIsQLVxWsTkHNdZe\noViJ7obpH944HxpfvCoDPYw2XDq2gWsGd0pXY9XJyewa24fFruwoltArX06e\nvvHhKCNS43vX2bFp+ZwXtZgnhqqbVam7mGeoVx4wFngT0MmGLVswy6OEczmP\nccE0iPQA052ps5PCLrY+vTBTJxeykohlnJqEYmetGVR8arSoF0IbpixAsT4G\nMj0ZYpfxR2nRlKKeELnRYQFXvpklytZVQLv3znwESLWZe3Ktbb3r/QoD11Yt\nwE/3htHQgYl5c9uQaUpH0QKTlWcCmLToLmNywym35Pftd99wwZQbgHuJGNYL\ngN93dkSuQpz1ju7f4np5U73t9bMJdjqt1OhKFREOrPJ3/lDZ1qtEomrHLwMr\ndQLzXFLrVAZrmvqaS+Np6cziuNW998xwIwpxuD2HrUEaMDkTU1dGJi2MkyCE\n9M2P\r\n=tuEx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.21c4e4ed8.0","@material/base":"7.0.0-canary.21c4e4ed8.0","@material/shape":"7.0.0-canary.21c4e4ed8.0","@material/theme":"7.0.0-canary.21c4e4ed8.0","@material/animation":"7.0.0-canary.21c4e4ed8.0","@material/elevation":"7.0.0-canary.21c4e4ed8.0","@material/feature-targeting":"7.0.0-canary.21c4e4ed8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.21c4e4ed8.0_1591641855716_0.6539416383444174","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/menu-surface","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"97faaa647282533cae9731d2026eb6603108e658","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.dfde46516.0.tgz","fileCount":40,"integrity":"sha512-WvlJixmAJa6oapqGYx4l1thRB0wZvTgWkhUxyMTVgxTlVvQlEOxFLj2LAL+nJ428cEk7DWCPLQn8aT8ggAzVxA==","signatures":[{"sig":"MEUCIQCfOmfaIH1FlTpZuX1Gd3sj7yr8HfSQGAfSSWqaetzIlQIgcZYc5wDBpoew2T6SVNVxk5pNfD3Fj+7bDVxxb8Vw+iQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pSBCRA9TVsSAnZWagAAIncP/jkIHH0jirqvVqLPN1sF\nciu9bef6z8bhq6OVq5Egszo/KPk0t4XmriJSCbBpxqFJ4i+5lzf+Ye0s6vxr\nCno+R5ANbFiCNWLi9tePH4M0V2kizWOrLV/HpGcOkXNMIaDDAsWUJqnY/DY7\nyMU85R0rNSbqAeYGo6bCmc0bHyRYdi0fETUCQ6HJaybltAtvt7DkEBE0GiRF\nPyncqgUx1Robxta+f8ln/Gto5nXcxV6EvM2pEaziriWjbd/yb/zmkFqpDIyt\nwCRI19+IrCUXBgEMhR8t0YugDbk0AHrk7cCFfphckhWWK9NrGTO3WJtlZa8Q\nZVea7u+kOOM+IsCnkuSv6nYQcH/Rt8zlQKrl8kMAQGcHC3dtswTJUUWrUp8t\nfIWQOUHhjYDFRDeobkDRQFJdo5XAZe5UNGZVfCBjh6Vy1AmzA1bhXVjgE/eY\nlYiEm8cpXZT5fzv9EYMb8hT00NzAURLlHuZcBEnJhCb4xfjlXdr3JWECraRq\ndNZEIaL2i+mbVvOA4uNWcNC3Iv0fBucXyLDYXOOpLjOwUTF0HCnEXTANzB+1\nsQvTN/0lPnxyMjXGDKjbkhy7Za0i4Suy0oOVNLVrUj5GdwhCsR96VwZNm0LD\nI4yWvtjjP1mZXYl3rQzyYabbG3X846tRtfwax/M26fcx7NZEhrQbu2w2dWLF\nwMmA\r\n=UnzU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.dfde46516.0","@material/base":"7.0.0-canary.dfde46516.0","@material/shape":"7.0.0-canary.dfde46516.0","@material/theme":"7.0.0-canary.dfde46516.0","@material/animation":"7.0.0-canary.dfde46516.0","@material/elevation":"7.0.0-canary.dfde46516.0","@material/feature-targeting":"7.0.0-canary.dfde46516.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.dfde46516.0_1591645313289_0.13530258187977462","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/menu-surface","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"de9ab81009b95652c5356b7dc3426b8099e3d0df","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.05cc5c206.0.tgz","fileCount":40,"integrity":"sha512-JO3VP2UbDOjftyr2oCSupYr8Vo0fXV4OGIJGQafVtBfA3uj9mXmE4W81gWXTW3GCt0HO2o3vzbqLlxP/37qmRQ==","signatures":[{"sig":"MEUCIEgOo900sBA0gWX592eXhfbyk83kLsRJUA7WPCX4VyRUAiEAh4Rj12hCv1ejb/jKimW9WzmIB2OMLfKEyWqhHTHGRa8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qYtCRA9TVsSAnZWagAA1JQP/Ayc/wY9bGRI4w7JOUCW\nsAB5R+V9dEIxAaKa6ZemTKc8fLA/z7NLP4wLgQZNCRQsmuKyyBTzUeeDQ8ES\nK6p9zfPMoRbcVOoR0oGrsrZfFbU2ZciUPpDA75CNc5XON1/K82Ev2L+zntkL\nvhDhpvQ2Om22MNVcCI3LJ7Zx955Eoa3gj/VYxkv+IRUQiROJBs9qZYn0P3k9\n24m8ihMS/fUVDdsj+N5yrQE8t1o8t4V3Y7gvzGwIeBu8MvvHL9IXBnVfZ/St\nhzwQgdDUx2FKdh9OtKikUKmihsyNm5FTCYOkPY+3F+rRcOfyw0caaTv72g8U\nonkNtveqSaC/+VtuWYxRQ0jBGlqWkTgUsLCjg0KojS1hQC/HJ3AVWhxjUoOZ\nYv+kHrKxzR+eQ3gHRH49PSfq/lbin4kuvV9pczoL7wsWLpxfsugv42l4tbN/\nRxybKozdqU/1bdVfuPpP6BMoRRbQewAHRCfSxWXIg3oBMI8T7xM10cDsPXyu\nyJxfVpJvioE6+vmQ8oWOHe6u26KDnlA1XcynnVWi+w9q+g3Io6vUBqf1eGHL\nG7VxThqsV3IrxnbOnvYs6vQs6zKKl03KMgUBbfMYC3MSGMx0KB9/7YcBfX9/\nrO250IIzPEiGTIOKTRR9lyFrHW1vNXllVeMm/pjF/hKogW3SSeahJCVPLDqf\nRvsw\r\n=VBTh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.05cc5c206.0","@material/base":"7.0.0-canary.05cc5c206.0","@material/shape":"7.0.0-canary.05cc5c206.0","@material/theme":"7.0.0-canary.05cc5c206.0","@material/animation":"7.0.0-canary.05cc5c206.0","@material/elevation":"7.0.0-canary.05cc5c206.0","@material/feature-targeting":"7.0.0-canary.05cc5c206.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.05cc5c206.0_1591649836827_0.47250306524891195","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/menu-surface","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"5f7da7ed1cebd34f9350bdd1de33f4824ee08b9f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.3ee488f1c.0.tgz","fileCount":40,"integrity":"sha512-mvsBsiYLX20cXb4cB6F0p037A8ufk/m9A4ubjSQJFwWyXFuRIS74W+/v9GIogl4TpQTKKOxZT7UT2e2QfLiEKQ==","signatures":[{"sig":"MEYCIQCIOwse2HKu+wQ20dFEO6yOSBkXJVGsGKDGdw8qMq1g9QIhAL1jFOhmRCCk4DrBU5WtIGx18+aDUTjokR+6k5xibDnA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36KGCRA9TVsSAnZWagAAzh8QAJAKKuHIYFruMK0eSYzg\nWqdGozGn/BeTP1XSri9Lb9Lbf4a9GroWBEqPu3jAQdiiC5M2OCRLeR07PFub\nIWA2oc6V9ESD/2nyx0UsBm7eXG0CHBgLHs1BNSQUZUCYyGk3e+EudRcfemk2\n7jPj9iIH0k83spY3GO4bwl3Cyqqj0NmotWjaB0VWlL6e377pd4fY5cPu39nX\nW/NiNL5et/kHlwEnwaBD8WSRy2phzPZT1oWKjHkZTVYbrxfiGDpCkoh32XN4\nvlpphgIS+bQlvBWVLK2DGUuPbmicrdo/q5ls/GMX14wEbwBl24QC2M5mp+t5\nkekMDSaS+6NghNiiMPuNVKi9tporZyZwqk4TcRf0OpPmsBzqnppNtxaM2Zgr\n8bktw5Ix/uTx3r5dpTKzCMccrnXCr7gpHxJljo8UsVZ1VtWO0/amgak4XpNw\nRzB7CKV9htmziZf7325YK67w9wPpP/8C8fBuApjptCuQhq9TOhxi0Q97wp+m\n2KFP37DvaNDARjPmYxT1TPgzn54w7o5vRvXAL+SGtYRYbCBJnjamJy8VAlE4\np0RPmOkZO0NKBPwnJBf1tKqTCCwpUi4izrsVo1T4yy9MO8K5XQY1uUJQkhhd\nGlyQL+2MKtEi7VlAfDtPBiIdfFTP1kjR34QzpPfXbega6mBlHuN518C+hjrd\ngE8h\r\n=Fqd8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.3ee488f1c.0","@material/base":"7.0.0-canary.3ee488f1c.0","@material/shape":"7.0.0-canary.3ee488f1c.0","@material/theme":"7.0.0-canary.3ee488f1c.0","@material/animation":"7.0.0-canary.3ee488f1c.0","@material/elevation":"7.0.0-canary.3ee488f1c.0","@material/feature-targeting":"7.0.0-canary.3ee488f1c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.3ee488f1c.0_1591714438076_0.9729658261079144","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/menu-surface","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c16f7da5433389c2313f0f4f193b079ca5255f34","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.b83d720ee.0.tgz","fileCount":40,"integrity":"sha512-M7lwkUzqIjL5SF8BQQ2VMFH8IGgyXCrFQmJ1lyjAwB8/JKm+jzWnF7PR3Yc+XF00HIX4FG0SLAlTL4BA6m5gvA==","signatures":[{"sig":"MEUCIG6O5EOPqPLY18dgeAChkn9NxxW4sXHVX9GrLRyv///4AiEAivJ+Am3U0YDS9y+9Gnnzt88eYDkeVGt0exkDdSaxrsU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38ZCCRA9TVsSAnZWagAAwqAQAJx3fiPlDDF4ifptJ90L\nUghMKo75JK6RAgbeZz/zJK9WUXAqUrN8QrDCA3nLIjWZEhkuh9zOSuhfHGfj\n6KsBLE6KLk+z2iKsSXMEi0HCeISWbWT9MG4ZgKsDZ5tBQ47Xe2xvAvIfxtS4\nNVu487WD9elDI/W1DYu4ib4lVuypFkSeF/jWwKv+jbi3Gqubw/igDFaH52y0\nuVQxH8TZ/DFimQE2KorN+AAppJrtDkPKlElE+UsEIMir+4Gy2YSNMSUm+R+C\n4PlQD7hEGVhzlGDb113rj9sM1VAFrIAevH2FHTrJlzBeNacqxXEz1/vT/e3E\nS+WAuR8CqGNb4BgE+QU1Erch5Z0hseBCfER/pj9RBcFEkFVp88sJCCfluV/V\n1WiU3aTM9gSZafR24yUE1cUIdEmRQMpwb9DHbUoY08JStqp+GSIjfqoEaCfo\njxf7TyG/sx7pWDEf5T4q9TNQHw5HgrfUQlRBmOaVcOE+aJ4I4Ltda3JPrzX+\nfKNffGIBdGxYGZQZ679AVfeBWiDmqhn5o5Smq1U0UGOUEhAZzIPfri+McvIh\nY559JCmsRuzNcSJJUtN0JzvmlF+0VjLhnv8YZPOK/rIcSQnHwN3dUZxotxzv\nRU4exVS0otCgJ60EMOpyXG9VnsdzUgt3KH7uVVGWGX4gZtYKECT48hEsBWaO\nTBNT\r\n=eu8z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b83d720ee.0","@material/base":"7.0.0-canary.b83d720ee.0","@material/shape":"7.0.0-canary.b83d720ee.0","@material/theme":"7.0.0-canary.b83d720ee.0","@material/animation":"7.0.0-canary.b83d720ee.0","@material/elevation":"7.0.0-canary.b83d720ee.0","@material/feature-targeting":"7.0.0-canary.b83d720ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.b83d720ee.0_1591723585648_0.6383944037616314","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/menu-surface","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2756ea3fed2390855c7b198f3d791240e91da1f7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.afb1c11a9.0.tgz","fileCount":40,"integrity":"sha512-haxPeIfMg0E8iQVZAqdhKgjuA4xRqG3uciOYZDICljUFj5jAqD8zDwi9DmudCdawNOpRLHp7Fecv3IcSANApLg==","signatures":[{"sig":"MEQCIBZGpDFKtpaNHpVsmZkdQVEeFic1EV630pf27aImxDRCAiAGb8KhTklb/dXjfqhiqcZF4qb1OTyWHR0IaNPULf5oNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+5DCRA9TVsSAnZWagAAylkP/3a5bVDjnbBQ32wkhoNc\nhJ2AajcTH3dXmzG0fTwMmEJVjKbSTzm8idrR/hP9C6EFmm3Ln9C5mVrLl7+D\nOiu1YyPm7tPp+ZZsWGNucAfLLSA0T4hotUZSX+PX14G2IlVi1YUvcUpwL70y\nz3QNWwy46LHW8zxUk+xY+Rf6DsZggXz/vOg0J91oMXN6DeliDsDM2kK++XYK\n7x81aEDxIQqo+4s8si5MayP7D5szqWE+nhGubi2IO9ITPDaf8b52C2rMouW9\nGzEp6N6+/xLZtRJjuJZFrjMOuYMSPaGs8DGX3MHk5gUEQut9VYFhAaL2QwOv\nFuuI0TpK7ZgVEFvQfqfodcezCFOV6jUNZHdGHvER8c+NIOSpDj+VrJCcwyLJ\nr1RtDRu7GCJFPTM/9Ii4/SCBOn5FVhultwLrdsOeT3InqEtOIyy0ng7AOIgi\n9+18fWyjlolgzp/Twt0CnJ9aKAn1RxeBYOi3LwrtcgoJTbbzYvZ9DNRduG5W\n4OJ8mpraQHNaln7aGUPpsOwlfGMxTjnNbxqEMLAn3EuawtcL9lxDt9sN1+Se\npjtFZRjrwb2IXeDtQ0HpFUWjJGJTc8F1rsmc1frZeFm2QpSFZoIh6ufCc8Bk\niw2ME1cJ7+fHPQfXDD7VCDvA+cxtVeBrMjkq275SffanthDhISMauJl7LVcA\n9MC9\r\n=BZGi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.afb1c11a9.0","@material/base":"7.0.0-canary.afb1c11a9.0","@material/shape":"7.0.0-canary.afb1c11a9.0","@material/theme":"7.0.0-canary.afb1c11a9.0","@material/animation":"7.0.0-canary.afb1c11a9.0","@material/elevation":"7.0.0-canary.afb1c11a9.0","@material/feature-targeting":"7.0.0-canary.afb1c11a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.afb1c11a9.0_1591733826775_0.04353393419311824","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/menu-surface","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6e45ccec2549949cc06a73aa0857dbf9bc5878f6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.39e6f71e2.0.tgz","fileCount":40,"integrity":"sha512-AZrK+ds4+8JQBpH96poyNfjOXSTO0kSP131Jbpigc/gpoQ8cTzHM2vpmV4NAgyEafjAS52Nm01Ym4lz9knucjQ==","signatures":[{"sig":"MEYCIQC6xsf8KAkiML5qttKAA1ijE7Mu+mdKUEROtbfc+4HFRgIhALlny9Q1WObFjg8kIa2e2EzmHFrUJVrrQ+OK/6kTz3Ji","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B3iCRA9TVsSAnZWagAAC0IQAJBMKWdm6ppwKhcIRHtI\n2fAWeFEPm6yeBStt3abqq2/Fex39UAjS9A4rtkZeHta1cvb/lwJ3hGnxnFJz\nugj3jyhs0LOsuOdediTFtMIFn2X5mLJk12XCnT7C7cYTrdHiBTLN3qaCokbJ\nf4G+qfVFLI8OIAk31fwE6R+IrWml4vHYyFnKPR+y0t0wb8ghg/B4ZK9KGdD0\nXikStXTy+Yc5x3ieh+aY4HrY0tj8jc/jJH6GD/R2sWpXueOCvrYhp5dARnVw\nchkBEva2exrYMtw9eJk7JMdg0n1O38p9iW/T5aJa0CxQiBJxWGZUXHG6p5La\nq5771lz7BB+uZ7o0Y2/3WfCX8kDbxY2xdjQsDcm5m9RFRUarffq2i2t2CUWW\n6+Drnsnhia9rOlC/CeJhmrnsRd0eP+ieKWIIUqp+qBDsgH7gsy+d5WE/SzvF\nh2KqccrqpmG16iLkyvOVIq5h9frnhrbqhu6WEhUdqNA7pnjrsv7qfAF0Ow04\nI40grycR/22RPkmEww+OZdyTnRDA+lLbfzRvSm9o2vX6muZH+hd2Myxr+bcw\nx18NQcBkMsLB10dVOCvbySFhc67Yg4tCjDTGDlIMvHH56byqSoFBWsETLu4+\nh0Mx7/d1CmSyl6eK6pPW1VS/gN3ZYPH+jqzcpbaOaGy2/C1B5wR460kCc2NQ\nJi9a\r\n=9deD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.39e6f71e2.0","@material/base":"7.0.0-canary.39e6f71e2.0","@material/shape":"7.0.0-canary.39e6f71e2.0","@material/theme":"7.0.0-canary.39e6f71e2.0","@material/animation":"7.0.0-canary.39e6f71e2.0","@material/elevation":"7.0.0-canary.39e6f71e2.0","@material/feature-targeting":"7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.39e6f71e2.0_1591746018331_0.34134857890785386","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/menu-surface","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"3fbdc7a328c71a26199877325108dda4992cef37","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":40,"integrity":"sha512-LBXBNeLmyK/ePP6GbuqmBrpNszk/yVC1vKER0qVM5YGIU8F2mj0zq3BIk2FbOYqTJnMvndqfQ+FPhfEkwo5LvQ==","signatures":[{"sig":"MEYCIQCnZGXKc57W1NrMIXeHEjLspaDlA3Bv8lLx7Y1ePWLlwgIhAKPBwCX9mP3bgGrEI/YS9wv2ttl+pnXDeelBoNZmcHmt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m4lCRA9TVsSAnZWagAA1FAP/1btvE2WPBK4yU3bPDKv\nB5jk1uQUdr2miNaFnn6rbdSjyXF8FaG+kUVKuhLC5e1Ybr5lhacu8MUenolJ\nI3N7sBYbWWw1U4eOnPPj8nU7Lfoyl5CW08TNVxyD6wNm2JLANt8yqxByDX+L\nNhfCRpliDVHxHx/7Y15Kuc876mhwaHPoleIjqoCmaZ+pmqih42bvQBI68iwt\no0jGmmXOvjh9wHJLZJ0OTwDx9eqIKqQqZCBIFILgzfXDtiLbUDgLUY7Ag9ks\npmu1JvcclXQsAfnjQbgj/PpJuoyLWKOZtTq1l8KHJ5tKsiWxqUbbScxJzvwN\nZYwAIQKfcUHZFjIu2sJO2817Bpx7VrYLylowhGFRBYRoiaKZRzAj7ohiQSvC\n9Ril/GbLo/byEg0Nwu9B+/0oHRvtyoPQ8e1MB9RsSW0b4IieTZOPmGaxPgMF\nUZx1TW7+UBJsnjCdqtRP3ckeb17nzrF9HfXURckMzNdEBaRuoWHVvWghHuV5\nBAw7GDA/sZD9xmbmRS51uir6Z+fuM+BJPA+h2Gh3IYyMVHQQaqenaa/JFUxh\nHCZVqiFWsHkGsRrMMzwb77hcgVmrx9Bq7dJFzEtlAStO/UNfjLExNrVDScwK\n+dua4ISE9i9vVGXoe3zs7DetHko4cqbRbIas2IQsS+czM8ULdMOhMZ35c/zC\ngSu0\r\n=IXsb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d4c66dc7d.0","@material/base":"7.0.0-canary.d4c66dc7d.0","@material/shape":"7.0.0-canary.d4c66dc7d.0","@material/theme":"7.0.0-canary.d4c66dc7d.0","@material/animation":"7.0.0-canary.d4c66dc7d.0","@material/elevation":"7.0.0-canary.d4c66dc7d.0","@material/feature-targeting":"7.0.0-canary.d4c66dc7d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.d4c66dc7d.0_1591897637097_0.09613030850918558","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/menu-surface","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"85dd522fd4dd398d2129913c36a2b958e5bb3b9b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.be4a19f9f.0.tgz","fileCount":40,"integrity":"sha512-B28OGFboj/f3AHcC21tTagiW9ZLi/k2oQagOJIP6lAVFgJ00tpyiSddjKCXYZh/VE9fbiIfv2d9jvE/2qx+EMw==","signatures":[{"sig":"MEQCICK6+WpEeqcx44cdYaMjU62eCjkkKHss4NzClznMebQeAiBPLNzM2RyReULEviuAW0NhaFUm+IqTGgJDorjh2+YQyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xv8CRA9TVsSAnZWagAAEsUP/3k4B7cAdL3YaCG57OyW\nBwPkkWHNQR3fuL9s+ZxUnYDcuXqCIdyPOMThI6I6MI9qIiRmlSPENRZ/FHEY\ntdOOnfujcaicPN2Al+SG/GI7OSYftM3RHpT5SGlvBdCR1qCDS55/qCwudgZI\n6/6LdrG+CS+WkDnyYEMsnxXSOEiM011loeh2+1pwA9h5l3DgJPfp+Nvm2WYu\nuLcGCX8PmqjK4pI7f+4lH94dt0Ou0xpkKdWdC4uvOULmPgibRr0fznDQqGD9\nh9vu38JtdkrSYkBYiuWb8BcV/X4MHLf1AIsoqogKvvT5DaeYtbvhjIvex/nJ\nPhVnLkQ5+7pgx0EfLNRm0LBXdnkdTjdK9Zq5QgUA5VrH70agpWTlP+oe1gVd\n0z1KWP4tXyU4Z6OAAwJQcnJSjUYGTsIGhIwfNVAFnYlryTCvI2BvoWeXWBuq\nf7MNOSVc4yv+w7R1DtsKkvVMYPLZYe03kSZTR317/6HOBntnR2hzHuIEQ0TO\nrGxE0RIQoRV1FAJe2AUTpC9mN4t4f0VuYIYsmrISQm5IQyZb79DT7WCLmgfQ\nfj4yqwkdCUDVclGSsyzntYzF2jZn36/Sq6km2SNiz1vqQ+yonCY73PQoOrOB\n1kPy4B45vBTR8CVqkNDafBFopRlae7YOcf+MGiKswypveIwKP7MJF9fl4J1i\nwFuo\r\n=B7vn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.be4a19f9f.0","@material/base":"7.0.0-canary.be4a19f9f.0","@material/shape":"7.0.0-canary.be4a19f9f.0","@material/theme":"7.0.0-canary.be4a19f9f.0","@material/animation":"7.0.0-canary.be4a19f9f.0","@material/elevation":"7.0.0-canary.be4a19f9f.0","@material/feature-targeting":"7.0.0-canary.be4a19f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.be4a19f9f.0_1591942140066_0.4886079346187848","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/menu-surface","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b3ae5e2429c068db82fcd0cb40e23960befaafdf","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.a6ac8f629.0.tgz","fileCount":40,"integrity":"sha512-jIexawp1Pl7dsQa1Xt7lzlTgGKcxBk1gLHMwSqiJFSwIuYF7bOqCNeee0Qg+5Wk3N5o6/jwT2wwS7dCypVS/0A==","signatures":[{"sig":"MEYCIQDtFHD+/JZgsPcE8IS4LZLSOZjGvj6iwfBWfeTCL0LeOgIhAJ+YQQYAV+svMIW7nNqsdWsG4qUUcLFTMTuWNinYWtbt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+imCRA9TVsSAnZWagAAFlwP/AwhKmiNz5KtDktP6dxe\nT+t5CTA7BDMwFXsvI1VXq40IJ/jwAEgr9DjJuxrw2AspJlQ75CIBYWkgr7gn\n1u2vhjfbfi47nSu7xXNoiPjJ0JOJISWAr3sn4qrbaCXeFbMpx0Bh7ASplABA\nqZW3Pew5sqPRHwj7y2aokvz+5uLCHyeo0sQa8VRIXzfC14KxHvBYSwSpr/5M\nGxjdgfTCjWf9A2/1/r0oeugIB0/p0+koUsmJqnELfc9PYHBHVRpasFpc+92Q\nDpHj4p7ES6JK+D7nTPGhXbs9AgzaZHVNbhJMCuozSOuQA+a1UbQG7Dz+J9e6\ne5j3+Ic/l4GYxsUEFLeMJXQCyaasf4rCWZwtA9oc4Km7etxQ0qFytKfog2BF\n9vDDf1IIBcVtu/GeY7gMXLI2VVPIzfkCcN76oREzoSz0QOPVRJ1bVGjQ0di7\nhhfJ1NpTQ3vtrWDkZWd6GSxwbFYnFpnu5HRDJ7N3H2IfW5X5C+7Low1uaKO2\nyYdCRAFcilWdVJxgWxIEI8wSScptYycKbvGM5tBQ30t7D7xldy4auOHnvwhb\nv4didG6n+6nCiqL5Qt3JCYzUu+zHzO4w/s41O/DE5AFDW/BYuyiQ0uxifoPp\n2aO+qpaK7SRUwEzLVYk5WVEZy88kuMXQDaOQOfmpU+SwFP+HSF8pWic/BjtC\nYvJM\r\n=w8Pg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a6ac8f629.0","@material/base":"7.0.0-canary.a6ac8f629.0","@material/shape":"7.0.0-canary.a6ac8f629.0","@material/theme":"7.0.0-canary.a6ac8f629.0","@material/animation":"7.0.0-canary.a6ac8f629.0","@material/elevation":"7.0.0-canary.a6ac8f629.0","@material/feature-targeting":"7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.a6ac8f629.0_1592256677770_0.8019562041672341","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/menu-surface","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"e26b5a52cb160716c33c1feacb76925b5cfa2ddd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.9833dc287.0.tgz","fileCount":40,"integrity":"sha512-5dDTnrjs7GgANl/phR5t60kDfwH/h236IwCJbtIknFPif45romKI0Pj12BVIUGqB1QMnOhp8KGEKMnkecp2gpw==","signatures":[{"sig":"MEYCIQCbczwsOBSDWcDF9jOOlzDgApl/UHCGfwAQzhzaXjs2hQIhALJXKLawd7hgQAaGV27e00lABbe7gCe9TBjqHl0Hb0kF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SJkCRA9TVsSAnZWagAAidcP/1MO/JkLsVUNfFtIe+Pw\nAGI5P5usMIR5p0NdAgheRftmm1wrirQdQcqZcPo1GUBh/K2AJjPnyvRVMOJ1\nFW4heL55S0o6LhLOBpSf+6JsKZrTVi6agGJ9XgNwz5/heo3T54QbDUBc+5rr\ngNAvPHop/mBHEs4fug5BjKwlwHoDr3GKLeJHuz2Am+7hJr0/84KNDMYrndzI\nhqjbWDfzEbYwlQzfyDY0+ojXTXL+0Ro2mYjPSh5EGeKkQaB40FyT6LKBl2w0\ni7NPoSr180X8/paZ+SQDhBaOggFtKsotANSzeYNuKDPZVCYV4OdjrTieXUCg\nKNzExalr9BHi0eVt9L3hNm4GPoz6prtnrKSuAvtWrKP0ygqJTMn07tvug/Fs\nX2LAYhKPvzDawN/SWmuFijM8aLa9clyjTg6c27QxuI9oeSHK0UwZ3jCH3h8h\n0qZ71ZcNhJtm6isy1BXUpTu5ljvV0hIjq/VeqHjwI73UKNTx6Q4N230laAwd\nmiL7LquceYc4ooL/spMlcHwuSHFcKSk5X4SqOPmAd1mVxvrmfzwpvAZDhcC5\nSDKpYXhdQS4UEvIeQ0/klmtlsjNizAgg8bwijc9PVgcBO4A9ZtKnW6HfKf0p\nOx5cMDPQBsoYUpvsF2NnmNTr8z18fVQa80ioLQ+P3rxxNdpYK1VV7mas0/23\nvU5n\r\n=lotc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.9833dc287.0","@material/base":"7.0.0-canary.9833dc287.0","@material/shape":"7.0.0-canary.9833dc287.0","@material/theme":"7.0.0-canary.9833dc287.0","@material/animation":"7.0.0-canary.9833dc287.0","@material/elevation":"7.0.0-canary.9833dc287.0","@material/feature-targeting":"7.0.0-canary.9833dc287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.9833dc287.0_1592336996370_0.8217814479938965","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/menu-surface","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6c825e8061c0de276fccffce15388690ffc27bb4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.3aa33998e.0.tgz","fileCount":40,"integrity":"sha512-vuGdufNW5Qg7WvxAI+U8YhQl+dEdlEmAypfPfmqrs9omdgYPEmhE3GIbI6DAnMrNhGK1BvN6i9UWbumityxUYQ==","signatures":[{"sig":"MEUCIQDDo4DoXC0njORBjhg8lb5/vyLwL+SZQzzPQqgurtSLQgIgEtGOtGOqZtctsDL/8FmbSj/EDLtcLkLZOedF+2oiZx0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SnsCRA9TVsSAnZWagAAxnAQAIh7uosQeembNtt64NL1\nUMYeZknCWThTBvMPkDLZFFwCTnwheKEbfpdt3jSx1mpVtYv1HmAtzquNgGHR\noAX/wq3PWmTSrxl20Bj5B382Mx1d2cXuMnZc15umzdSFEKWQ+S3BzIEjuehN\nYvM9Ld1sUNHZrz+t0LD/CXyrj3q+SdIcjm45oOxm6ekbayJCE3dz7VSeXyPR\n6T2Kzmk+C/X1JMY8xUY4TdAWFBx1awm8xWFX448UcTm7LMIDQwb7DpuxTuuW\nrBviv3iXNisewuJPwVmKnDglOq0iOav8sF4YrT8fKDQRfJhY7HiKlrUChY6W\nwAdUnnbwA4TC7oL1UhqL2u8z3ZkN7qdMvOo7WC42LTwWuTWW9xVwKNhBradG\nBU9wsHw5JsbESrdt3aEIC65Np1bw1nLDyRQcCD7ne08gTGBmVX2Un0iS/dyB\nT9o/ESWfwuTAd2MGMV5aDKK5u22W0ndNUEgTiG2xZeO7MHfhQcL5ZDreNc8W\n8b5yihQzYF2EI6DZ8j3k6d7JSCKH61Dn23XGhj9IFjwbGsRqbq3tMXGAe2Gw\nAs1HGqszG6SwpZFWpKnMUtjbfaYjhff75vpLZxulTHGE7a5fr5bEo38asitl\nR0UFQXfnVrnAjWBvfSO1qpZktZEihS0VHlWEYTVFSxUfO9656YHEZhbr860m\nTDdG\r\n=wAMu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.3aa33998e.0","@material/base":"7.0.0-canary.3aa33998e.0","@material/shape":"7.0.0-canary.3aa33998e.0","@material/theme":"7.0.0-canary.3aa33998e.0","@material/animation":"7.0.0-canary.3aa33998e.0","@material/elevation":"7.0.0-canary.3aa33998e.0","@material/feature-targeting":"7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.3aa33998e.0_1592338924229_0.9452610117066242","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/menu-surface","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b5b2c7aa9a81af654490f60899412d1c0056f888","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.d2b54d183.0.tgz","fileCount":40,"integrity":"sha512-AQZSJmVUEALZ7dVq5kyfJ+ZtOkIDCU/UU+9a5K9aMhRQr/HvDT83Nlvbx//VvmaBJxztPDT36YJol2YMHNjelA==","signatures":[{"sig":"MEYCIQCFKF42VClvdV6v1URCVlvJf2LBUQIW8HnQ0w2TTrnaSgIhAJiMxGVGyJ1GhS2yZBFbrTv1zjTN32kEKet8CLhRLj9j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sBgCRA9TVsSAnZWagAAKBwP/jNqrPkB3kiv8x5Juei3\nhZqYfdvlFCHnWHXwbm9FMtqbk4tUNaLpA+/pilT8IBI6QSLoky1CV8aVOAn/\nI6Gl9s+aX/rJjCXzoaTilMXMPikSH6YjQFo7CR8oyr+07ilb2/be4Vdbuo2o\nZjrxE4TnpFyy0dp3Zb2fr+dbmftS93IFxLgZbR05Q//hpvrk8z8fWwAR92fa\nFjZzJavNb3fohHIXU7wGdN+SA1715JNE88zB259jFUp31oStQE3dqc1i8uKG\neJCfHitT6YnMi8i7z4R+hYQrjy++W3D8eSKNDB/n2FeWFIR7V+NuhhjdOq8P\nz+HfV5rcKdqG+h4hdnVsASFFiP3tqiFwM94wl7AxWDdRBuc1xvpbii2CXC6F\nKZ26WPC1NT0UPvtvss8glfzCZxG+7SPU7P8kK2IkMDWj6eE0IK5ZN0UDOCk1\niJFgCs6YKbVj0mU20cgicAyNnkhBqyk0H0COa7rpsNjXeA8VeFA/Z0vjw1EU\nWsEHAfLZgGKtobhSYqnSrM/Thhkp7UisWwjWWmxabNR/Ydm4uVQIJw9pH0Q8\nS99YdFBjF0Fuzo1esqY6xszi6EG58PkhBMX8btoP6yQPkmoGX4klSXpF5Spr\ngBDnob0svgIU6mMcUJbVZ6EScDj7AO5DflztvfrXBRXEfgggkxCMeyPJ5vzB\njXNE\r\n=1I4q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d2b54d183.0","@material/base":"7.0.0-canary.d2b54d183.0","@material/shape":"7.0.0-canary.d2b54d183.0","@material/theme":"7.0.0-canary.d2b54d183.0","@material/animation":"7.0.0-canary.d2b54d183.0","@material/elevation":"7.0.0-canary.d2b54d183.0","@material/feature-targeting":"7.0.0-canary.d2b54d183.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.d2b54d183.0_1592442976144_0.6493800691605458","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/menu-surface","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a1c5d2c2ddd200c03c80e3712a72feccd0555133","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.f2a488e95.0.tgz","fileCount":40,"integrity":"sha512-V4HOz1YfQX9QX/tqE2m2uldRZx4SlnfzHz51rRttQSDZBzNoYnzEyEFniMNdVwRjp64xWYmzIfkmJXyk97wf0w==","signatures":[{"sig":"MEQCIFgyMA2Lvrqekhx9xTE+mjwLnwUTEZBTgogAkELsS39rAiAYDnySw/Ns2zvtXqPYOaSBVFBzW0mV9iP1EL9Ru1g74A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64KWCRA9TVsSAnZWagAA+MEP/jK6c49qBRtJuE943UTY\noMmHzdiWL1oCeYDfJWG7i8gxNPgFYEe9zxXyxD/+l/qF7ei37Ts84pJsyCc3\n9megS24Yu88MK1K6+LgSrZ1xpGHDSy4U6tzM+dlzgnGo5o94IfBY/T1sw0W5\nyzZkdXfNrJYau4zmslViYLX+R7B43b3PN18bAYftTDDw6iOp7cnfLEFenNqt\nwTv9LoUOUPW5TMwsjs3W9gEYqNO5PZIm5zBcBPus7GR0++J7dWXl5f74TjSZ\nK/9RZzjdhJi5KbjLVDLx08H8SHO7nfryjzIIkWZk9BJ9eJXiFM5zrsv2LIV6\n/10MBGjgfmHF1tnvTGzHkK8wCEdxh82NRASf0GsHtF6yxfy2pKEWzwM+vcdL\nAj8LPhML7P0dWgFQxhthYEsuf9g8qjpnL3ilX6ZEfvp4aXIGnIhnZS+OsTw0\nHNOkYmKdDNIAqVgHF9ET5uHCcfl2w/uOm1QBN/ebrrBUc1VWwo6lz/yYbPo3\nVIZ7Znao41sbOhope2qBMGkg+6WYtYUQNhGbtYjqdE09cuxt/sk5CuwVPz6b\nLEBatr839unI6CX2cnzbnHrF7t1LRTWWoLFONQQLywcuiwMm1kLlkXBZos0K\n60ohEosuCcgQNXRs1uZv6a3IJP+QVP89pD4e7Mow+NYZFhu5GN+mUR7g3uyY\nmI0L\r\n=s72C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.f2a488e95.0","@material/base":"7.0.0-canary.f2a488e95.0","@material/shape":"7.0.0-canary.f2a488e95.0","@material/theme":"7.0.0-canary.f2a488e95.0","@material/animation":"7.0.0-canary.f2a488e95.0","@material/elevation":"7.0.0-canary.f2a488e95.0","@material/feature-targeting":"7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.f2a488e95.0_1592492694277_0.4492757614853484","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/menu-surface","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"aa51c7db58b9319e32d788f29867e0130d82d0fe","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":40,"integrity":"sha512-ujN1SVJ95OhwOlWLPqnOmUl9hTjNjMY5vMaH1UBGivqIq1Ruz0ky60mgD/TuBqydGAmInLKWwRwVZIOzRc5UOQ==","signatures":[{"sig":"MEUCIQCTGZL3ItiOC0B6P4fO7bTNVl1+M9Y85aC8pJDLHpUJqAIgVzJyK9NlosO2pu56sB44oNzza9RTZw+ty0UDP546qvY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64VwCRA9TVsSAnZWagAA8CUP/1LnFcje4uXCtf6cuUvh\nv2WXJDFVwTlRqSzOnOHTr+7i2XwR5fxiReJzEt6pFgUidoV7MaAErxQiI6P0\n8aycYWtOkR7f3YPKoxLHOhMz/NduchG8BtakDPMcbPEnxXrdUORfRkIjsX5W\ntQ7q96JD9NXcBd8un6B+3Zbb0ezC6Cnm/g3uBKa8WxKUV0IvUIf7dnLI9nws\nTaRyFXMPNro2d1Ud51rIFpH2qHqPEjKWlCI0FuhViSLXEslFSqPtY/5IZxRb\npdHHDwJSrJuCsKgKEIlITKThtiaSskThYGrgE0T5Jvk/nq6PXeOcvDF/Cj9c\nB3IyYl8FAcmXEaf+cLt7SI9IpUCiK84Vf6u0hP/hNExIwh2VogliaWOOPH95\nb9pHaJtnqlPiUXKNj7NrLHAAekG/gaSh/01YRXRfItiOa2BnkLzCPtiRWwIG\nhjbL28q1acqXk1q/CB4+R9UpM92YXjBbRg/XoxUAqbAfyAt01gWtSrJ2jONA\nFpXZo0WmAt7pXl3hZ7dI9epTmw1zw+zH4xXM1dG5Zvoxmjv9uXgOqxEpU+2R\nRwbJKmtEyihZke76op+JaNptSU2+p2sa+hsz8+j9LgzykvxUiccGYShFkEWl\n15/3nhzxFod1IGUzmIm6uPb609ZmCDN0M7Uz9zLb/yUh1tZCSAJS8o9EH2PW\nW5Ti\r\n=m12X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.bd8d1aafa.0","@material/base":"7.0.0-canary.bd8d1aafa.0","@material/shape":"7.0.0-canary.bd8d1aafa.0","@material/theme":"7.0.0-canary.bd8d1aafa.0","@material/animation":"7.0.0-canary.bd8d1aafa.0","@material/elevation":"7.0.0-canary.bd8d1aafa.0","@material/feature-targeting":"7.0.0-canary.bd8d1aafa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.bd8d1aafa.0_1592493424563_0.9475866885206514","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/menu-surface","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"73ad232504a3587bc78f978efbdf7de3d06c6c1e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.1321eb968.0.tgz","fileCount":40,"integrity":"sha512-uKgjMD9DGs+u9fRQQyx0ad4S4mETtz9A0kc1B/n+W5gzWhbi4rqNtbaABE1tQvcgGMe369WzeGWVCEVsnkl5og==","signatures":[{"sig":"MEUCIQD7doPcUq83HabWWo66LJjeO3UOlTG8mvAiteZSjLphBgIgezesqxoDKSap49V9ly9LFsBrcxtXQAiVECw3/sWxSQc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RBbCRA9TVsSAnZWagAAJ/oP/2M7efDdK17XsKsWAvII\n5L9XdMijlAQtqnfMrVUg9ahF23PFJ6orgdXJJeaM6hWiml73jmGMRI2jEfIa\nme6hrW1/+YXZazaXbIeKDM+IFDaTHP1eMsMc/3X1SHMb282F6i1O/W8kmGBf\nSwvjG1br1Zz0tlyBeHG8QoiTJ/RUPAIWSEHj72373wIdvars1J53LMx/GUC4\nFWWE1yba6KOuYeLLgtnOXzL0K+icUaaFsqg5QdB/vcOZwa+gMAGH9KEjvfPk\n7dpii5cDYJVQl3SasBxEVwWV1DlpAB3dIuvHhV9D0fT4wwNoxTd0sqxXgSI9\nuKGM3bytjT1LYg7f4rHcq1FSABgN6q5cRqt0tWWtnLvQYTXEiCI0kun9h4/U\n2FB4XICgpFL5+NR0WKp2ZioA24RiZCf0r0R6RUDnvP/W0ZF8SGuT9IhSCU1q\nFYqW6uYKCgSGNG7I4Feejcf1u7lvsjfgw7/eIn+G1D2Kyd1DDNmx3j7sv7H7\nAP5s+Fh06HsMrx8vmzRPEHpvtEP/sA6dYTSQPXbHs3qT8A4/Ry3M5F/HYcC5\nBz49IuBGmeFgK6NAFcTSqwRK/PRIFaX4U7+AaFgYGLhPBQplx5s7jR6X/Kc0\nkPVx0uTD7qeGjGeCyh/K1PqFOj50YxlXbCKgXvafTXj1JTf5SvRfvifXY5I4\nQ8qJ\r\n=ELpR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.1321eb968.0","@material/base":"7.0.0-canary.1321eb968.0","@material/shape":"7.0.0-canary.1321eb968.0","@material/theme":"7.0.0-canary.1321eb968.0","@material/animation":"7.0.0-canary.1321eb968.0","@material/elevation":"7.0.0-canary.1321eb968.0","@material/feature-targeting":"7.0.0-canary.1321eb968.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.1321eb968.0_1592594523446_0.052112139780674305","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/menu-surface","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"160f7e38cfa52225636f25aee0f88dd2b503e522","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.db5cc0382.0.tgz","fileCount":40,"integrity":"sha512-KnAqbrIe1YLNXJsiyTcBqUoWrlebEswcpXylmldPriBhw+gR5I0LRSbC8FYJMBMRJ0QtqIdj3OUB280RfFDApQ==","signatures":[{"sig":"MEUCIQC/A/NkN8hRgbLTC9k/ZcgTfZxetEUMB1YLNtsvOqC93gIgZwfWTSKV7hDwA0TLfeDOTX7jJKyQKwNxayerZ1XDQQQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RHWCRA9TVsSAnZWagAAV8AP/jdnoqksIbIyuWNfYzy8\nefyC07Wk0UK3GbvsB9METxo7aHpWVS+9+l1zMps3UbORbduialsX1qHttNhO\nKq+BBnMjKEnbkgjY1wOIZEXN051ZJMo8v1Ud0ROghPQOEGbL6QIsHgQoZZE2\nQAJOHKi39hqKsLQ33FvAnWk64fZnbe5NTcGCaBCk8z4mObrJv+nNEGqon+fb\nD/yF0z8reKQdUgXN7/Ub7TW3plaZsatAUBc0e3T5kpPIjdnvy6rgWg+5hDAj\ny4mqeBr19Ji54YBGRN6VZg4ClIzP2A5EQMZ4ys0T8etVow9EJIfDhnTiFJnu\n82IDOnUDRi7UqcE8uMiEPFXDczPFgtJyu183xS4eELJeeW9OCUwFeficSyFF\ns3D3HwdkVaLHVYltjBtOmf95aK7wFMU7S8HcU+vSBbCZYd+mXxLx3Mfqm4Fm\n1F8ZVhPCqbbFR9ATU+JDi+nFNB+PtUzvBn8c0PUvsG+Ea5rDUIn74z+xxmYL\nWMswsi/8hcWPcxZnbLiXedBQZzVX6HI7DHzx6B23AihLdlhVIl6FJg44OIr4\nhQFZj0D2sCdZAeevmHcGwv7TcyctAxOFLEFMjQbUfHSz53hZxWGCWHZU+c5K\n+JB1vgXQTDFQ3rmVViooj9JwQgcQUf2v2kKAkoa0leHPdHMgMX4nFfSgqq5y\nuMfR\r\n=jBA4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.db5cc0382.0","@material/base":"7.0.0-canary.db5cc0382.0","@material/shape":"7.0.0-canary.db5cc0382.0","@material/theme":"7.0.0-canary.db5cc0382.0","@material/animation":"7.0.0-canary.db5cc0382.0","@material/elevation":"7.0.0-canary.db5cc0382.0","@material/feature-targeting":"7.0.0-canary.db5cc0382.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.db5cc0382.0_1592594902123_0.9467306044415285","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/menu-surface","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9fda670a945bcbc63b5c4ff47d518d937ba5fce2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.6ac9bf031.0.tgz","fileCount":40,"integrity":"sha512-j9X70ymSZuHyon3ZAcw+ExdhnK2K6lfo26C93AXegHB+trV5Llygd8928AmgdTqn6r+kADtlqy8kZUJHV2mpgw==","signatures":[{"sig":"MEYCIQCwFw+HMt5S0Mhilsuyw78zKckUYQvc6t+O5Xh8ptLUhwIhAJK1C8DOO3SnkMeEX5qdFzbbzMR2XoNP2h+8yacBBM5m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RanCRA9TVsSAnZWagAAn1cP/1uPaSkaM8OfMMA5/DBr\nkxMnqzND2CRx4MeQZ3ssFdA8Z8s+Bk4TS1cQyPPbnucmkpWm2Y8oeZ+8CoJi\nNQSwFvf0eXKxkiQdduKV85s9HoAC8xqdh3V5ZhkI/eVbC8YOCFn6zGyAU0jv\nEsNrVDeIqDD2UL4beODbN2dw5/k1n//gYglc9V/LW83g0aWCgGnCp0s6Fzal\nbTwbKAOy5qto2NuAXpMIn9YZ4kLG6oFViyUsmU3o8Erg19eXQQLrrsXdPkSV\nzEXfHhp7iMbyKGtRwj1jfFkBdnG19a5TPldmWOqh8+EYkB2LngT/lRXe8AsT\nyfHyvWSHtou1WKzj9QM/JWyHVnHpXXEDktwfnntrBEMEEyRXQDLB2Kn0d7wb\niRH/gE/2qPhJ7td2w3CdwUTLP6mZe88NnU8Q7MvsMFIHfpWNth9LQT2jK+1k\nLahUB/KO2vMTRJbl8B97Ca/+IKX8Wcdl3p+hVK4yzcgg26L5IANBw95OOOfB\n5tverHPy16UyEsKhQvJG7dsUmpYJ9rTj8kkst9P59AsXpe0XWI6oIlLOoY3a\nN0ZyJ5DN1cj/0ZP60Xq1y4OoHZ3Pb/rfxUCE6vE05dz7E/+CiaKxyQ79vigJ\nTpRxg6zIjqRYFJkY64QT2csL1yAcuwt17iVG3bRzSN0a/jAidecHRZnGT7ZM\nwCcM\r\n=zTAZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.6ac9bf031.0","@material/base":"7.0.0-canary.6ac9bf031.0","@material/shape":"7.0.0-canary.6ac9bf031.0","@material/theme":"7.0.0-canary.6ac9bf031.0","@material/animation":"7.0.0-canary.6ac9bf031.0","@material/elevation":"7.0.0-canary.6ac9bf031.0","@material/feature-targeting":"7.0.0-canary.6ac9bf031.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.6ac9bf031.0_1592596134800_0.8309182488759654","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/menu-surface","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"3752bb815c4632bb60178106b3ffe0be55244ee4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.c21b5c367.0.tgz","fileCount":40,"integrity":"sha512-l+GHVgeo/23t55n76EEGS33ADX+It2mCcuplS/PUpceh/qsuNRUKP4oUweWCPS7syu+2FKZBlrmMmZm5Fr/J8g==","signatures":[{"sig":"MEQCIFf8flld1In5cO029rVbg8QnW2uEKP/f8ASV32sea4ikAiBh+CaMutPK4MfuCKEXLJNnFaklaIv500SkKd2PGyQjmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RvoCRA9TVsSAnZWagAA4WoP/A4kpl6KngPSZLurmN53\n1jaotLktVDz/YnZzz1TPK3ZDTIyD7oXI0NZDxX7zyyEy76Q+19uzMkYawrGK\nb4ZmeTfZlnqeMriNV28fIlJXmnnpdTEJSvT/j+MM4bLCFQ/GyPxoXXFCbMpo\nd9MG5ufoRMeS/pppx6GW3eo9uhSQEQVXGF9DqpOLZ42jumIP5j8NFxJ/VGFM\nOqTEHJJmJGF0pMfG2zlqXWXBCPleTonNns+GwDF2I+S7fSYczVhpdnWhJoKa\ns83L/l4dYHg7L0xL9/27zNqYTLL2Sigjr8nhc7liVYLzHXVvMCuyK95CxsWo\n3sydRza3UDU+Rw1kxJOm+Ww822CeNv39myiU3M/WHz4Fl9sZyWFwneM5k80m\nhSZU5VbMfC04W3Uw7q3HS1QzUFQ1s0x2O5DW86/izS0VIH/GhBMiV8RXfhCT\nsjVbwcYUNQle+N+Dr50RLG4ms3jmIo5zu1vUHRGph6MdZnUtq3EPcLGKu5yW\njeJGZ5cLFRQm4ql9ukvfdto6SYsD6gRztMna7HDX0bcNUoufVbXi0RKqv5yE\nlGejYvvpHpdwTxQW2Z+WqQwXJtqu2J+vuwELWeSya0wYwLbqT5uYRHnNf03G\na7q6HbnoUW8T2Nf+K3qIwVTUe2PvGRAyY8PCgN9Wfd+FAsQqEvyTVffW9GW6\n8EC0\r\n=+Rx3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.c21b5c367.0","@material/base":"7.0.0-canary.c21b5c367.0","@material/shape":"7.0.0-canary.c21b5c367.0","@material/theme":"7.0.0-canary.c21b5c367.0","@material/animation":"7.0.0-canary.c21b5c367.0","@material/elevation":"7.0.0-canary.c21b5c367.0","@material/feature-targeting":"7.0.0-canary.c21b5c367.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.c21b5c367.0_1592597479745_0.5045759981238978","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/menu-surface","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"1b9d9b292bea9ee63fc8d16689c627418a4cf041","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":40,"integrity":"sha512-P4tAna3rzNDyi0TULXuHNt/IncRgg/t5snFU8BLspDln4Q/pDqQGn/Qx2gjIjoS5J4OQwh+6iHt4Sxc+l8VclA==","signatures":[{"sig":"MEUCIBmieb2HhatJtaRaifhSpCzTlTyM70IazCir6uHoXjL/AiEAi5PLSyf/40WXCfS9gk7EKZhGCnCdzD1FSASJOp9ve04=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R4PCRA9TVsSAnZWagAA5twP/Rw8GJGxQB5iEpF6XuyR\nJUlyYsRIDJgYCNCK7P5enOAFAmwEtUKsFDJ5RlZIbCcEd58S4ICmIGECH/oM\nxinhhuwM1Z9pLSUL4DKT18Ksgowa+ZCh9YWBW0ucuQB+WDY90NTsbEBtWMB9\nXW8Byf4L7bZVjb1wCwYrSIYcpKQh4RsSVB6p1DAaNSI9KBKFTv7vCGzg9Asd\nl057fOLL8RJfdjIFyvaBQxIOn8leIZ7onZPQl5FyHdNc9hk+7BtGTmH1whNc\nscvu1VTgrMWf9tv+p7+4m2aaXWobas2retx37W36Lmsij1QKD3oBRBYndY7N\nkPV3YUOAFVFNzvQ0muVFYwjUC18zvsnP1PNvEaruMkbOfzWyu9fUi7bsIwFs\nE508Wv4gSQaJbBYtiiOWwMsfoO6sS20wRW33oE7PC5H294PdZNtU/gQLTUSI\n+NVRceaQlsxngXxi40LTuHCDOZY6r3QRYQhKcp/KnppFlELJcu1U0tfxuV7h\n+LXLyTrSzpiTQxLwTm+ZfAx5UR2MA+JXkWst93kny7gDC1ak1j9/+40ABfDp\nF9jEQfx60tAUjkKfcorHV75ilBlzyt09tYDMfMb9lbADwviBrje0UEArJ8hQ\nYbkDAwBlVRxJPwtQeEB0SFxhHHgj8Ajr6Pw/L6rWQG2IQyxUiKwh/BDyoQAO\nSGIQ\r\n=4b5I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.bfdd7fd39.0","@material/base":"7.0.0-canary.bfdd7fd39.0","@material/shape":"7.0.0-canary.bfdd7fd39.0","@material/theme":"7.0.0-canary.bfdd7fd39.0","@material/animation":"7.0.0-canary.bfdd7fd39.0","@material/elevation":"7.0.0-canary.bfdd7fd39.0","@material/feature-targeting":"7.0.0-canary.bfdd7fd39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.bfdd7fd39.0_1592598030894_0.051846700894107256","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/menu-surface","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"7931f89cc8382884c47119586455e4532e070b5f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.10b505785.0.tgz","fileCount":40,"integrity":"sha512-EdCZqP7AOuPBdnRafoTwUHc0QpqeKO1dombT1BhTi6BOu4oG+1JGwx0LN+1Y2Bvcf9Xxq4EpHHer0avPObSAaw==","signatures":[{"sig":"MEUCIQCn2I+aGODqn3R688W993j0vnrYr0TGTj/W0eaVzrdrZQIgZYqBcZp9eUELozVpdCO1w68KP6bISE3cS60J5YfiWs0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R5nCRA9TVsSAnZWagAAIwgP/j+0r5k547Rw1sYXpmN1\nk56LKvJlHnm8nOz5Cd63wu7dlRCxpRxWxL7bpkbTdpQvKA6z404Jey8Kl3XK\n3+Z5go7UdHaopp3L1DUF7KRqcHXWC86rYkp0Q2cFZNveQEuaOHcGm8iDfgkj\nWxtR8It40aBhAZIOkaIEaLcdQLWgkOrshG/AY0njZnjxdmKlIZ2H2pWnO+BY\nG02XThRD2Cul0opI9jPvfs4kknAcKDMq6BtxMFZgN/h6tdd1Sj7huhWPe9h5\nJTat2b1vmNvvCNL/Z2358usM2IHmGd2skjv3g+DoadoBysAWOAq9tXmSBrsq\nKB+SnvC6+iZUQwqNRLj7hDH+74E8m9VNpM+rWrNzfdN4lehwNDJpF0E+Ezdz\nfTHEs+cqZKTUqDiYbTddwfd4AMKNJnJvNZcPHNeugwAWZ0p5MDZ1aROqqZCQ\nKl0ecKMr8SGM5/dCFfCclQt1eCr31lK/yKJ3v4teYtgVGK9YBh1WpO+4AvKN\n8rMrSi00BmsmMiWRmt9zdAXWInUuKHFEHu7egLSm4c1aK+whE0m9U6VaXCAn\ndt/A7vWmvkoRf2s3QUl2c6TWRdZHSv8Xo4jhWso8wr6LH/OXGd3STtC3XmdB\nKMe6Sie43B9f2YUIh/xR3OKbP0C4ARGuub+Wr3e297HiC6d2PgJcMSrnfTeD\nnYbO\r\n=OTy4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.10b505785.0","@material/base":"7.0.0-canary.10b505785.0","@material/shape":"7.0.0-canary.10b505785.0","@material/theme":"7.0.0-canary.10b505785.0","@material/animation":"7.0.0-canary.10b505785.0","@material/elevation":"7.0.0-canary.10b505785.0","@material/feature-targeting":"7.0.0-canary.10b505785.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.10b505785.0_1592598119276_0.360718197725042","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/menu-surface","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b34a9e63bbb788390a860a7da0b8ef3b11e18a35","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.6483d3f44.0.tgz","fileCount":40,"integrity":"sha512-JVhjeFIPVkIP9nghaa0TPlVpTztEVFfqNnpgt8HRbsKgMEbw8EbAyCjrh1Hl15x+vJjiCNdWgrU+L8w/236GFw==","signatures":[{"sig":"MEUCICuwAERAdHA84MbQGPA+7ki2L4thHgTDZjJ/WnDHa7BmAiEA2gbp7vpWVHTP3eYE4yRr01Em7rebiR3a0sQ+R/DYXrE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SI3CRA9TVsSAnZWagAAnT4QAImlS7K91Oi+Eb0d66kK\nq5So5JVp9Ll0InfOe5v0gCuDeCVLshykVY2kaXeNGLfsw0tmgL1zJMfpDshQ\n24p+XmiTxaddtE12HkYSTS+Lcq8CTOiigz6CXphSK6EKSG6eKHUrF8cvENJ6\n4gNL3L74+krPmg35foSCHOE9R0+Z8ea+xjWXDXKNaRVlhQzYU/Z6GsAXg12d\nz1cwtGJa0QaupUBbzzqyncF2lBp2FLAh82QCG2HadlsFPlgVvbJT+omaPcLs\nuBFn0JQjVmiUOBqQIqe30RO4DdWG6Lty3fKczSvQ3UWUEsEmLlSSMuyG5OjK\nOaWurLyxjRVfnPVZMaVNex+Bce4dx01pBeLK89CtadUPR9mCDakP3dqg1Ksu\ntLdHhcsIqLMeOdUojFtGvFn/HnBi3c57HfQ39VFdU1HA/a+KJaPVOCuVoo5h\nkfDAFwMpr7Nx1uGfnJ8lfh8hO+9RbCXgJm+ihZBIgVgj7M/ZfXUMwXq06zic\nROkmieRcOQ00d5+4T9mVwFmC/e81T1ixc5RcJyI9C9ok6DKP14WrOT8acdi7\n3c0DBxDczAsr5UfPFvOjNQhAALXkIX02/gqYAj6lSm3fc2LbcpeTxgAKI6SN\nZCuDr6XhP/oVfcGQ3e4SPF7CkI5T5pm0y1b+751NsKekwMSmF5ssReqFIwIE\nyjvB\r\n=hSca\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.6483d3f44.0","@material/base":"7.0.0-canary.6483d3f44.0","@material/shape":"7.0.0-canary.6483d3f44.0","@material/theme":"7.0.0-canary.6483d3f44.0","@material/animation":"7.0.0-canary.6483d3f44.0","@material/elevation":"7.0.0-canary.6483d3f44.0","@material/feature-targeting":"7.0.0-canary.6483d3f44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.6483d3f44.0_1592599094956_0.9912974285301313","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/menu-surface","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"e7714ea3537c9d044d7575a24cf7c425bd24048a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.30a74e921.0.tgz","fileCount":40,"integrity":"sha512-gKEzXRZdAmeSgy/JM5QZDTwegKpk7KTfpENexFdURDfQFiGkOvlyK0wQPggcNdCbUJkKa7J5O6KJ1V++QwHFcg==","signatures":[{"sig":"MEUCIQCe6xdxxBeP0KCxEpzVA2K6bqKxfdV/Sj4kqGhKf7PuJwIgBE0CLs+I5zq3hNyTT/KemcSyE9aubEvSXHnhRwdjbr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SK7CRA9TVsSAnZWagAA5xkQAJ+3zuJRSKHDhHrABN/a\nMZ+L6MFFKczloyUfrWOe5p2/Cf7XD6lRzwjgkBakj+XSUDTtQKd/PC6LUDO7\n/XJHtRNiCDBGJ8ZOmXNX2czGSF3mE+eWyXGTM6nPRxTg2kD4wUnH4Uk7Myal\nHq8ovG1gKnlzeh/fCETHZcw2v6mfhSTTciHbuW+227WmZ2cKfky07LqMWgx1\n7VFu6db2lvjYfiDct8MaVhFjMAKBaf9v5lE0KrjqDCxKTIDBfAOxq8MN7IO6\ngKqawmN8bBlM72UIcJrFIKHtkhsrZpO8IOPaixuFK/2hqHPFATYQvIs8vySm\n9gzQyplDQqPo9CFDhmVhVSE1qKzEGPheqJXWqzIEJrbXqVIAjUukHBp47AIl\nNqyH3a9gb8XpKEE9Rgu3NivrHS1L7eus8brtB0qAI6ac97nek/BBDtRv22qP\nOJ4Dm/H2+bltQqUyiUMBOFd2Ck77scGrDCOb5a2fmDFEKY1pBnjIzsZ/xTq2\nJEVpBIuKPMBxITQ07B9SbL55XVwFHpalTT//R4GV/CswG53Euzcwir/FkmSX\n3Zx9dj1nszbkfZ/gHrakifa/5cZMZIqlzf/c5jrJIhsPTpSP447hAk0TfNr5\nGrO6iY/7uoEpeXdsPKlam9Ac15r5T1mi4VHCUA0nlpept223nH1AFYQoECM+\nXgNQ\r\n=mQ8d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.30a74e921.0","@material/base":"7.0.0-canary.30a74e921.0","@material/shape":"7.0.0-canary.30a74e921.0","@material/theme":"7.0.0-canary.30a74e921.0","@material/animation":"7.0.0-canary.30a74e921.0","@material/elevation":"7.0.0-canary.30a74e921.0","@material/feature-targeting":"7.0.0-canary.30a74e921.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.30a74e921.0_1592599226797_0.2930592844109907","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/menu-surface","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"fdd82b9855496d1ea0153bd2cca8f94b9fb00d53","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.c20727498.0.tgz","fileCount":40,"integrity":"sha512-kErai9K6lKhrQuncnZXihGIuI5E3gK6mIcn+y1u1ARLmpzHFH0pL7OM0ucv1PYPaxeFYtX5d1vflxWKAwDpnIQ==","signatures":[{"sig":"MEYCIQDaln9/H2bM3rQrXf0Y4pvni8i3uLNO9iFOvkcPmA4kCwIhALwse+LJz5gyYEocxWEZsaiz/YPHHuP/PyPXeypJTNt3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SNjCRA9TVsSAnZWagAAGQwQAJagya1gsy88loa02X8C\n0e0+MTLicu6BGSdBfvPd5b+jHTduuiq9HhbUnv4LwGOayNOC63mADJ8UsDK2\n2QAyBnz0y6fNBerOpnZFd/mD9XVTpfrQ7zR/vbgf7JPdHCgx3LLKzwh9BFo/\nIYa7qoEFDbU+7fxhCrzo/fOv/1x4lAzisoq/tc79Xc5knjwfS0GwPVrT439b\nfZZtvoA9E7L/oIUR/jMeLKq/NkuYIEhSvR3r8Ee/npZV7wWH4PTtVolu2Anh\nw9xv+qOrQN8OQxBmFhejndXVR231jjNKPiwU5MMpa0N9H7JN/tJ0V/rDn8Jw\nWSiRJh74CYINHmMdvJzV/j4fAwZlHdnPLPMd39hdfX+C1hGsSDreLlrKlvdA\nPNkJnDWai3HdTy90q6jK3wvPKbK3t1qCKQPf9n6h7I7uiN02mHC5gcqk4Xc5\nNczzgfmKOZULdz38Lg4WfuTXfqY2+Lyni+eGRLZFZ4KsJg+UMI5I+WilvnV9\nKdQ9ObC/a2SXhUJYm/jSpYMfPaIFkK00W16S7ikK5UnfQTT77Zk55lEepZ5b\nWEhAubtIyR7+AIoF7JeOPOgzASNCsw34QJzIBq/d834svaW2JDz11HcMi8dK\nW9bOgkeGvBGCs+W7yYHx3WFX7gEqe0qgqUbIRjpW+4ouAJy1sEZauy3f9+CT\nys4v\r\n=SiJ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.c20727498.0","@material/base":"7.0.0-canary.c20727498.0","@material/shape":"7.0.0-canary.c20727498.0","@material/theme":"7.0.0-canary.c20727498.0","@material/animation":"7.0.0-canary.c20727498.0","@material/elevation":"7.0.0-canary.c20727498.0","@material/feature-targeting":"7.0.0-canary.c20727498.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.c20727498.0_1592599395203_0.5840154016448877","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/menu-surface","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"701d924b857668a631eb12a57457b30325d9e04c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.4e360ae94.0.tgz","fileCount":40,"integrity":"sha512-ZKlO59PcInwNZaxVvnOZfstww8+0OrzypU0mX1DjajEHpOValFxccKeBsrjivpt0k0tb6qKEXOxZuGX5tW85eA==","signatures":[{"sig":"MEYCIQDMUq3iNaj/3vFQwMeh/QP6Kxk9onz+4fdLlCMsMFuMTgIhAL0oifcV3CQvJgeh6vjG2rO44v/CRFg5DIH5YxFxhpN/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SdRCRA9TVsSAnZWagAAD/4QAJx0x0QsbWm84eQfqm3G\nLND0RyrdLOYRkA5Lwyz0oh3vt6v2BLi973WjDQughlmBLkjachhQk9AK9JaE\nrSfG3cfYmpa6faTiw7X77OLJ31ulNYo4UyaKH0fg158n9gE++RmdD7VM1ERE\nGd83EHGtPaBiFpLNw3N2oG6oXzduRN5+WgtRb1DT8Aqw0tUGtIdAdi8kB8ad\n1VJ45yNQp2yGyF4jfg5bOlcpftMRDtWYo3Tw2E8NJg+iFGBU/9yR8sBRTCgL\niodGCmcMFw5Qvv5lHvrifH+poYH/3uhVUu/1YvGp2Qj1RuZC2tC7xhd9uLbm\nxYf3BwzgjFpzaAEelHGCVy7tfR7Dc7mP3vnLKge0/ksDTL3UuH9qa71TNz5q\nnD5fpGd+7/g0Pl3EFQE6faMQQfFIJdAfQo5WU2L/LDQDrMx8qJV1XoLTTV18\nZ5mSDzDNz8FXWdde8k3sMdsRfyUvoh6OKpHSJlX/bX7FCJZ+je6eUJDw9QUJ\nCTaxNBImutP+9moMBPR8ig2aP9wbKYHo8B+bUaLp+leHo/GtkxyvEBM1IK6X\nnZ8DirHDWKCq1iXBqVOOPbu1R5TacZPjDhQvil0bl1W2hKycufy1sLfUbG/j\nl38v8CMG52J+HlHaNAMOOjGPCBNOh+X+KQpKwjwt/Iuezk1obnLU6YZiN2Py\n7LiH\r\n=Qxvk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4e360ae94.0","@material/base":"7.0.0-canary.4e360ae94.0","@material/shape":"7.0.0-canary.4e360ae94.0","@material/theme":"7.0.0-canary.4e360ae94.0","@material/animation":"7.0.0-canary.4e360ae94.0","@material/elevation":"7.0.0-canary.4e360ae94.0","@material/feature-targeting":"7.0.0-canary.4e360ae94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.4e360ae94.0_1592600400683_0.020398785349158066","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/menu-surface","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"efac172aed5099a3e938958990bafc870224ca52","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.8550fa53b.0.tgz","fileCount":40,"integrity":"sha512-QEPqFdf0CACImy4L9xXiu97JvcKK6nW7US3orWSj4aSFcXa9t6cLrUhRfXEiGVq2ZJC/xcboqd6NKVFK1uqfKg==","signatures":[{"sig":"MEYCIQD+8M+nFatM7j+8wxITCd0+kJlrpFPNJIRXUan8nmpMxwIhAIW0YS7FndJscfMwIwk3qYKf7Anv1uiM9MLX27pwe3gi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SfoCRA9TVsSAnZWagAAu9oQAKBBLECtD4xv1Ltm1Af+\nNNvHOw6Zp54uZEjzAN19p4mvCrdfnxwSMWgtRJQdo7/obFhtlcNRnjOQcEHr\nF3j1Xdcm4VopCUgR9Al2hl3bGmAE3v8bgZmCNlBesuMqnrKggwdhOZ/rZs8x\nMITq29vP+zD3BWiKflIET+b1Er65gp9wPRT2DaYFblFh38CJQYpZvmE/HR3d\nxG6l0OxjeZVKgIRkprQ7wFhTgp1SkZbKnthna55VhCpIp7SR8H6N1lnegQMy\nzVrEymyFIjTyN0h3p+dUShGHGwWQ7obiluzRrioQJAfgFNdC2YvJm7Y84X77\nhttq8FZI9zFsHkl331pQUwnZqXY18py6MhsN8M9HPPmAB4ODNe3jvMHhwd+I\njjW4H+0MEuLTfWwSl0C50CfoBgtdsWrLqnwtO9ki5rjj9iW2ERtS9WrzYd9f\nEXfbL5MxtYq+JzNjx6yHWUydvXmZtur8IQII6Kvtk6K1WwoxRd+dA7Hu61pG\nBVX/jLktlI63gKwK7G0sImlYRFADEN1NnMZASQ9ghikk2NI4MH3YlqHiK9z2\nHm8jUyYRslVpahLLV+WjdaKXOc1EPQnvLo1BzRtIKsooj3xe6W/61fepkN/x\nopn9GTPtQBXskeBNeYUdBxgL9FoKCbXP0rpVjzAU1XRQTTZZSVsIVXiUTG4f\n/btc\r\n=rrEa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8550fa53b.0","@material/base":"7.0.0-canary.8550fa53b.0","@material/shape":"7.0.0-canary.8550fa53b.0","@material/theme":"7.0.0-canary.8550fa53b.0","@material/animation":"7.0.0-canary.8550fa53b.0","@material/elevation":"7.0.0-canary.8550fa53b.0","@material/feature-targeting":"7.0.0-canary.8550fa53b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.8550fa53b.0_1592600551618_0.794467482398364","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/menu-surface","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"bec7544f3b998877236b419bdc8b8c524583cb18","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.93ade142e.0.tgz","fileCount":40,"integrity":"sha512-bTSQNfkHxttxOdncWMqWPOhC6/Bqr6zQPL2r1vQNmPgHmKgEbyh+j+nKhcsBo6gGw6Ry+nnRg/ScA6r3hbE4yw==","signatures":[{"sig":"MEYCIQD+vbxA54ozwcBfDGrKkLWjgc6UXXS5X3PjksyHM8GeOwIhAPwY0d7cNCo/wVe/sIgBTDSQ3phJRuHkWh8Fb6cS9sjx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SgpCRA9TVsSAnZWagAAnPkP/3mWzG1ixuDcrIxyq/X6\nY/yV/RBbyMzMjXZKVAY3zwHScO+1L8TTVm1phCCugWI2m7v09tX7c9/5O0+9\nOCs224wDP7r4sqIVFN9/B3s8k5485gmB7Q1kc2c8LS56IvXMhtkHN0cjZITP\nh/ZopHeKk/tDNmslNuKdoYCk51D890xfXpVOHuP8z7C815aw0wdu+yGjtDd2\nfh4pBbHKSrR5fEFafOQSQr5/68Pk/c232pWaxnO6Ii2gQhQyWq1gh0IZPE4+\n1BfGUKChmGoG2C9SfjSdZ/nZA5lsVyjgjZMbm+B9+PRRg/zrpqb0cAoPpLZ4\nXwqBq3q40QVjl2OLk5WHkDLxXh3C58Hs6MTFc7FpanBYXFeXcjsmVoYjXEZF\nBiCBMlLh8IObmC20sZQYQvtB0kJQUGaShbGsKlew9xuJ9KqkXFnWSEW8FQlV\n0IQ2sDYs3vkyAqBU8iVxts+g8nKTvK9gV8cIsvWEM0Yw3IPE3VcvV7AMCSLi\npC67hINPBBZMZJ3Cozf0p+q5vm8jSbkmAbUbebomeiwm6zy84Ejsuk9vnXzG\nhz34riINGelEVUHg1+ZLlgV1u/h6F6ps3vbjaglpCK8G/rRMzcxNluqlxPIG\n4nwgtDaOcLk0YxFW4eSg9H758JEQLno8xZZUoOltgc9K0p6dxPrlXq3FOvrc\nHZiW\r\n=ZGxV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.93ade142e.0","@material/base":"7.0.0-canary.93ade142e.0","@material/shape":"7.0.0-canary.93ade142e.0","@material/theme":"7.0.0-canary.93ade142e.0","@material/animation":"7.0.0-canary.93ade142e.0","@material/elevation":"7.0.0-canary.93ade142e.0","@material/feature-targeting":"7.0.0-canary.93ade142e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.93ade142e.0_1592600615005_0.10635727645587822","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/menu-surface","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"167e92c05f1276ac8fbce81d79ebeaea6c432a4a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.a0032f5bb.0.tgz","fileCount":40,"integrity":"sha512-9kkDuI0guL1viqU/GDzqvXszvsMrV09PC4+QdLA1/Sy0cnw030UM9wiYBIf6ayrrzMSCMUq7flVDJBMp5hBFAg==","signatures":[{"sig":"MEQCIBjBCqQdaTF8Re6DilCSKZdkNjPLcwq9R/h0+4ij84whAiB5t+xGHDDdcChfx/aRDWq5Di+FA0QGBfP0NRVB1lTp1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S4MCRA9TVsSAnZWagAAMfcP/jCJhhL35Mw6BbQKiYfQ\nqLOdAyojxSGslEQOZtUh2cP3m47ueLaHaFh6Eb10frqWfcvVRUP0IHPBDveF\nHepdvSoz70VQnp+mAMaHpLvOICJS31GvpLcH56u2xZdb9Wxl/txTHPwaODT6\n3iDWZkVHYIRsg+JUTye+HSG3qPPTTyYojMQ5uq5S4tVyct23QwO3ftQBSqHK\nhHkPHR4pnMgz6w26dAyOTwVhfNlJ9gCcwXylhjoriUyvWBfizxT5ilvmogdy\nlRLcf+KXYky+iY9V4QRRaGiHvxno7mMZy93nIqOLz9eW6OErfdV54ZhTc/Ye\nZe3n16nIH28GBX5/Q2ITdOyi7Zw4gAdHd0RZJuQ71feevJn7be1onTNwvEqK\ncOWYP/OmLmpsBGCe6EAEU3tiY+mkMnZ8fhB9zeCmiC9Upb0sdlWniI8uAUDr\nIBMS/tfxe++eDHn3rGzxgo5AUEyaX+YEOpmQGZiuMZnQrvFdF6DB4AWkGItK\nNpm7G1VMV6HNZzuCHXrMLIjQNTsPMMJ4+xzVhaSboulaj4CVMwBsFFzLB5No\n367YaY8jgjV0Ok/8D8s8NOKWMcIs7cBbsa7UlPpa0Rm+yVd5yvjY8w256hLj\nDdDanZZwb3b22X7wHXeUpcku4fI1GM3y/YgARW3kdPLt16INYaUdnVDDLa9R\n3i8I\r\n=kx9G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a0032f5bb.0","@material/base":"7.0.0-canary.a0032f5bb.0","@material/shape":"7.0.0-canary.a0032f5bb.0","@material/theme":"7.0.0-canary.a0032f5bb.0","@material/animation":"7.0.0-canary.a0032f5bb.0","@material/elevation":"7.0.0-canary.a0032f5bb.0","@material/feature-targeting":"7.0.0-canary.a0032f5bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.a0032f5bb.0_1592602124017_0.5703609744686664","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/menu-surface","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"37da1b3bf4f7d613dbde29868892916adbe075a2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.3f342e721.0.tgz","fileCount":40,"integrity":"sha512-rgUYs1sMWwpxYONS0UIrFPS8jT/6ETTIW0xrCZMkflPfQL4ISo0RJlLv1jCgFDd6dsffUlCii0nzRAT3SvhreA==","signatures":[{"sig":"MEUCIQDEkFM5e3q8UjRXl3Lu3Uv1/8soDU08uCEh2wC9L18NdwIgSf0QCxi6bRte8dfU9/dZr0iIIEsA7OGROT+YPLBi3OA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S6VCRA9TVsSAnZWagAAFz0P/0ed8lQMnWqWICUUuzWE\nUkjaMi1tCRgMED0gAn7mi/G3dxZ57EWXMs5B0CyWzMe9Kw6Z5x4637Shml1i\nMLGhn79ygsXNSWjExt7MaEHTTJpskWxnXVywDq5l5jskgbk7n7hKPPT5vfRA\nQFt973UmU3MVcQbcxwHIi9qpU0gZEEUWJfG512GqJB+LQshSKeEx1J/YGWNB\nh/3LMYJwEDupt4kY5FZ7PGAumFpy8T34SpafpKnoEQqlcmUbZcsL8AkS3blN\nkOPgm+od6z4KPs1f63NsRW1e+B7o0Bo5A+Z6jdSJPaD36xVJa3lu/1ApIQcb\n3GvqYcWu0+2SwPQsxXzkStsnBE65TPz1eEzB499L7DLhD+eK5ganuPdny7WA\n5ioyrWggq/Myaib/QfJjHgz3VoYxXIRGtMZTCnNYz5q2DGfUgH/Bvaxb5Bui\n7NzCeXXws3CNx9QdCL8y4d+B045olhag6+PA0zQHzQ4ucS6q0HU+YAJTVZoM\no6Nqowuida4Ga2+D83LKSN7+1JAlagagB69SCHNdWDSqjWdABavj+e6YOShO\n4fV6hQIonxYf6L3my8M+xWJY5ep9JWDYe2K9f7wbAKdhPhO5AGjKZaEC2FU/\nPDhM1a8yqDmj2Asol7ZrnB6y0qWFhI4EINX45RCTHWFFfTUiYKWqKdDt2UWd\ndnDP\r\n=cHB+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.3f342e721.0","@material/base":"7.0.0-canary.3f342e721.0","@material/shape":"7.0.0-canary.3f342e721.0","@material/theme":"7.0.0-canary.3f342e721.0","@material/animation":"7.0.0-canary.3f342e721.0","@material/elevation":"7.0.0-canary.3f342e721.0","@material/feature-targeting":"7.0.0-canary.3f342e721.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.3f342e721.0_1592602261193_0.3263533813081432","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/menu-surface","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"529c8d74ef6f774b07227c9eb6e027077b50d654","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.ff89457cc.0.tgz","fileCount":40,"integrity":"sha512-K6hGF9Yro8YT+11dj1cAEDS15LeRGlE7KQMyTTsAB620BvU8LJzA/PCqTIKwcrunvQy4/alIETzcxLjNGIyl6w==","signatures":[{"sig":"MEUCIQDJj1ifKP/lSAKgCbe2vCYTpW4WfdrimegUCqAMuFVWBwIgPWzjYtgSnbqJcpjlgWyZWi7/5PxJcYNrwWJw4WDhtwM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S7TCRA9TVsSAnZWagAAHgsP/At46vWrISZA1uEswyqG\nSzWhdXq94Xq+t3O2+hNhUbwjeETZOZkt35adsx3gxKsi+3ghJCjvESdzsZNd\n0LeOS7Ed5yLaf1uUUu1XnAbKQFflmgSJ7lkhHgwiWhoPCNAR23LMIZhC4C4m\nvSugi9Y44vPNGRBbLUWzwXEhTNNBKvRXAtvb+24qLNwa8wEylX3+LedkS+kD\n6GTV7s368cIR42kC4c1508Tyk2YXaOH2qZfDQaqFpWpdgMIZMDEUgFnYfB3d\n6jCBGAc9EPK4kljxVsVpjaUcLxncyVixu+/SYNJUgMJibujWJ+ffY1n04oCc\nlZjF2LCO4QB57KSK++LA6mYrUd+qH4jdKaPW13ErcfScGkLf3yQ8oQVFVLeB\n9TkF9GktBk0NA3UyteCUnQn6yeOCJu3/AcYPRRJim12jktG2Zd1dcMVCV7cn\nO98vOxHGFfWz91b5qi47QYY+VmJyELDedJn9w1VXeDUS2DLXFcSya2nXAFBR\nFBMrz4vg/D1olQHPofh+oUCyxgxfEUNwD1hDF21DDP2RJNbwWfrCpohJJbG7\n6oTpVftdGe3swZfq7hrgDz4in6CtR4uNhzrBlIlHs3moYibalzWHVee9ZsrH\nUElR0+BUE3+6gChv/RNTiOLUPkMSmPu24H450Xz7ArOpMHv72Pb/iLM4xicc\nqwdA\r\n=SNrP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ff89457cc.0","@material/base":"7.0.0-canary.ff89457cc.0","@material/shape":"7.0.0-canary.ff89457cc.0","@material/theme":"7.0.0-canary.ff89457cc.0","@material/animation":"7.0.0-canary.ff89457cc.0","@material/elevation":"7.0.0-canary.ff89457cc.0","@material/feature-targeting":"7.0.0-canary.ff89457cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.ff89457cc.0_1592602323108_0.9200702468763697","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/menu-surface","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"42c762d4e018f9a475f6d28a5a32124f306d7427","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.4a1855cf8.0.tgz","fileCount":40,"integrity":"sha512-6mfX4Jlh21SxZKApBOzHSj4xtpTVnjMufS/d+5mcZTc1qWT9HqvlzgOW8NImq4ySbn5sBhCJmuunTcZXLJFwDA==","signatures":[{"sig":"MEQCIAFYU/oflo4FIVuDqljDCiVuMKuhobSDuu1dD//UMQpwAiAro/+6Hk/cOf24/iYpx2hiWjc5+LRYT98xOB+zs/L4bg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S9xCRA9TVsSAnZWagAABAgP/33JnA2OYvNj+VgspQ8z\nJio2dMqnMgrdyWXyRzVnrLMl7k6DDvT3a2AIihxcGQIKAwP/BAZT8gf7CRBx\nqN0uABrQTypfzPEFWgCRs1T5StUv+t6nugvzHG9tX0Ltl7iXdN1cJE1XvBdW\ncRs5eTH19wai23fmXJMeQOgVcZf9bqbODJdbtzG3P/Lkuc4zW/gcANWU+pbD\nA9SbWFxRLqtfOGwjla6t5RcgpUsDd/HQtuPrucYcQFPk5ro+lP6zNfdY+Djf\n4kaK+gKqtNVRv6rM6aCmOreFT3q0LH8SaYntVDmNdVFmiHEJcLNoOxntNMan\nMEELXixjnUqKggjZgv0vdiT2Aa1LAVBi6gEoJKi6izLj0QxgmBs/fSWwswKi\nMBGxUZHvLWlRjfDTAHLw1UaZmn52eEhQ0WYGbWtSzMpJR8rl1kxky3o4groF\n7kducn8l4mz4doXW1fRpvfcqLmeAVqg6CiyqVoGTa/YSl+vmHMUNB28LmXYP\nznyyPiiQiU+Nt3r1su1EEptfhHP2LaDnMNAb9uilZNx7tPXSs0jyey90WYHs\ntMxW4ITmIiJjNeOh/SNlOJaZtYbEhZt2beBLBDMLbcLHn6Y7BJfPylbS7sLJ\n1Nf4EhUII2gEPYIDJW+BmKc6OmBf9wtTeyoIwzfDpyrAEBc1Zvzi5VAV7AoK\nGh5U\r\n=BSJQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4a1855cf8.0","@material/base":"7.0.0-canary.4a1855cf8.0","@material/shape":"7.0.0-canary.4a1855cf8.0","@material/theme":"7.0.0-canary.4a1855cf8.0","@material/animation":"7.0.0-canary.4a1855cf8.0","@material/elevation":"7.0.0-canary.4a1855cf8.0","@material/feature-targeting":"7.0.0-canary.4a1855cf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.4a1855cf8.0_1592602481575_0.4090888273332052","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/menu-surface","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"265888fb68a98500c6d602bb7544aeae8e8ec821","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.8602f1b4d.0.tgz","fileCount":40,"integrity":"sha512-6AKFsIqf76buga+124waOhdovBnN8AVkBx4P758A/D706mDurvVxUUIu1amsYeOGr5nMVJOSUWononkEkVmh6w==","signatures":[{"sig":"MEUCIQCDHTOWYKI1Uz9QApzg+SCYqKQUyexnhDt+wHe08edokAIgeKuQLAM5LNjpVVE2LxIiZwYxwgWbj/pRVYOlxv4DEZI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8OlDCRA9TVsSAnZWagAAC2cP/ifMQeZoXkkXLdVip3yo\nyBVKubSsCG79l8N0kOh+8U5DfGjsvrmO9nX5Zk9y5I/X50ZgRA5s9jefuVyV\nzvpugC0dQjYrOt5SE11r9tPwkqg6wlVzJJb+zMzZRfqBVdtSBsfSx+Pkp3cX\nPpDBiujmakp0GfkgJTMr8HdEidKNGCjcAehHzrZGw5ptb7OYc3WzAAWTz6YP\nQ+BpXoEGVYmMHi8FcEjBtBxzlQhXhA3cWmugoLudfIuWxULpuaVWocXCf4E3\nVgzih7EXFLKc61Z5ozo9/kCHIofBZSUNy7pUYrIOxuRMbagXuUoZuwqSuNSk\nSou2+0PxJrzK2iFU5MrDYD1S3NT1I8nh10oRygp2warSeimqY9vXIL1YaX7B\n4m+a7qvnYSu+Zrkl//0UOua7waOM/Q9OricZNxJUVk2T4rqdbmgNHjNu7ETY\nb9w4IPUZ+J+ZOrBotlAvo4fCkGtNQtCO8rwwgrd1Yog+pHpRL4CKrAOb2i2r\ntn6eSAcY20wfBkdliEuWR/GN08lDEatk3iWGDss5xkC744NrlAIVb406vhlV\nb/F86rjyOrw1Fus6R5DTd42eN9QoG95mrjSZRngRh7UPZBThEsNJRYExW4iR\nPero/zYdc/XjGNt1/31rO+f+txoapVVHJNgSi0rtdpq4skI9h9mEPExIF19e\nWGDc\r\n=/PAX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8602f1b4d.0","@material/base":"7.0.0-canary.8602f1b4d.0","@material/shape":"7.0.0-canary.8602f1b4d.0","@material/theme":"7.0.0-canary.8602f1b4d.0","@material/animation":"7.0.0-canary.8602f1b4d.0","@material/elevation":"7.0.0-canary.8602f1b4d.0","@material/feature-targeting":"7.0.0-canary.8602f1b4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.8602f1b4d.0_1592846659272_0.5537500403603155","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/menu-surface","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9ef777c158d8047538e8fac3540ebff478a56213","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.69f9f0982.0.tgz","fileCount":40,"integrity":"sha512-CeqB8KQTkL7Bs8b38IMJJsiWsOtbVfx9APY10j9zD8qN2nx0n7QzGJKSg6amnB3YkgJeu+09spUfYEsjDl1UBQ==","signatures":[{"sig":"MEUCICH+/ZaVGgdjJrvRHK1Ffzd562aVmTsbxWzEN/xJkVS/AiEAxh56xijY/9vBt3JMVe4lZCTA8oWuEuxCcVOtRA3qhEI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R9kCRA9TVsSAnZWagAAEIoP/j8u58akMt98ZziVTyQX\nNQWmHIxXmDL3Q0lrMPHNstVmFsSHLBHVoaM4U6zJVrJf9g6oPD4pxKf4Kqyc\n/RadBwHxDUJCm7RTCwEU3qfbv7HTs5INixmUni1VPckRt+LzDGOVTJURw5YT\n3p994TXizChu2/gTmYtONUMJILM9v9fSI7J1ElpI5D3dgaA+aR5TQwmwi8GM\nMzIzme2M9R1mdo7ItwBtEdsI5Z2FyDUgv2zWxrrn/0KBw7DCjofk2oVlL7Nq\n684pRz0/A/+B0r6sUR1PuP2k03bha3wsI0hKN3O07lQT8G/GLY2LM5eRGERw\nT0g9Daej+iKjM/Xf9pHRJTLzYerbNjoJX9w5ez+d9Ae8ytt+PTqzzuMCNesP\n4xw4fp//PaK+qG0WyqJdn85EB3Yzf0f7ZBHbbFdTt2g9aiDlw1lGLVvKpe0A\n+H2rBkJd/coS6T5908ZxzQTM20pKauyPZy8DvBg+0X7UYCkxT5I4j5sD4R4U\nNc2rphRSoxBD7x9LStSQrz0LW+twwRj7aSGdh8XlG3D9h45xC4AQXs9SK51x\nNNfD3s3kpz7jXfoJhIpuR4R5Ez1lMovgtrH7TxyKPJPz4e9xSEwOem8q+UTK\nC8WKmoeCQ+ySrWsFtrHbJfguxtAwr1egGuSlvrYg4XXO6FZ6gCt5cdZ9qXp2\ntUeD\r\n=VrIf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.69f9f0982.0","@material/base":"7.0.0-canary.69f9f0982.0","@material/shape":"7.0.0-canary.69f9f0982.0","@material/theme":"7.0.0-canary.69f9f0982.0","@material/animation":"7.0.0-canary.69f9f0982.0","@material/elevation":"7.0.0-canary.69f9f0982.0","@material/feature-targeting":"7.0.0-canary.69f9f0982.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.69f9f0982.0_1592860516186_0.9925776484426585","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/menu-surface","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d956a173d4395eeff9c08c3637949d7ba9622c96","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.369a293f0.0.tgz","fileCount":40,"integrity":"sha512-VroS2HvK0dDOgq9NpyUslQbgb1Ful/UHKkdyxOFB5g4kCKGq4xDbWqNvuj4Ma5ItMnXEW48Ef+NqsymYMgIuXw==","signatures":[{"sig":"MEUCIF8ehbzoaGvQDQ0O1CINisvdRk2kllrMNIH6skV4ghMyAiEAlcJKhhmKQKhZEL1LUrFvvymnzPZnUMUsSaja08/38mc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SAJCRA9TVsSAnZWagAAvssP/2bVVPMspbL6zWqNKhNu\neLp7ccGihzHTXP+yCvHsKi6wW0WaTguAxJfdj8R4/T35IpUjb0NiTkg025O7\nW4mMXWlnc2uIBnQUOs/C9+X+dToJmeEHDIg16M3q5XumYpSd4bK3/5mMIwp2\nvUFBl2AtJLDxTH+lDhbkv4SdT/s42zfU7M5lxz0wURMKYMqZJdp3uD4km7+J\ncgdzryWOGywc4J7Mjy/X2xcsNFivz99iIwbBZ/QVEeFqM4ZKXm+TfRvqU/xN\npKGGXPbZOqX4lGtMC73osk5yDkyoJaBwQr/Bj9Wk+hFY+2LerZnR2K7ijk/e\ngm1znO2+NIe2qAN0bS/DEAhj2R0hv4Dax/ushDfr3DeYNWilucGuunIulDB9\nDLi3LF0adKDL7d76hWm6fcn0VCa/tIn0q5QSygyRMWOL+O347O24y9iz4OxO\n0IVW6XVAP3tjX+0eG87faCDllokDT8zZbaeX1vHIZcjJrh8z9wSppDlGhgpZ\nIGakY8DPbhQHJEJ0rf8VjvHSuxOMtc3qYumF3oyAq1yya+DW9pwJ7wWTkM0G\nxQViRbs/FM+yPCEKAxrK4sT6f/slJHvVDhmVSFpOeQtXCanx4RufnTZ5BJ4P\nMNFc+6TX6qhm4RDYpjxay1Op8YTk1b6Xb+a2d0tLjC2q/ALGjTp8OWzyFocv\nEsn/\r\n=/qcW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.369a293f0.0","@material/base":"7.0.0-canary.369a293f0.0","@material/shape":"7.0.0-canary.369a293f0.0","@material/theme":"7.0.0-canary.369a293f0.0","@material/animation":"7.0.0-canary.369a293f0.0","@material/elevation":"7.0.0-canary.369a293f0.0","@material/feature-targeting":"7.0.0-canary.369a293f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.369a293f0.0_1592860681116_0.13058720253966238","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/menu-surface","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"abd09d7f63e2bc52132ae08d8b675a3c6004a5ee","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.f1432b5c6.0.tgz","fileCount":40,"integrity":"sha512-XYFPqpIGzNyZdlRFAG3ubuvfF+bmTvKgAt2BWmFHtvqjfjE4W+puGym/M4lB766nVuJ8MGplIjVVyPNsra9HNg==","signatures":[{"sig":"MEYCIQCnlawMfsUT3XCzI8SquB8M14rhpxXZknjsgoKP6FmY9wIhAMI7ARSGD+wwMzfZO55fl0AQIrD2+ps3N+K0sx5i8OnK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SHdCRA9TVsSAnZWagAAT8kP/Rs3QoZ+2w8iHgHTNT2W\n11mPOzx6ow4EL90LiMEYEegStmMqRPdRhRQQNlj64dmxkJLCqf6Ev8sfKpSC\nvwWnUwPpFVaBayRJ5vbhA1iqT3Hv6RZL0lNb7ZUdvfJLnd059Lou0g3P3QZM\nSHVi1mFSBbrJe7ioELYF95bPKfTiq6qh/9053BJTN4OZWrhzW2ql/Bt0N4Jc\ns/gjfKMLbGgY4Gn8nFAyidpWdDmJtXpH2S6LUy9NjroAu1UdQxObF7O0dWat\nhGVzCK8mbo2/BSqSxbTRIvjuq+kB4lJTvgGUaaAnlDgP8ek1qVvJp9+7oU1B\nKpF5uen/gGR/s4iWVxC61xO86ktnFZjtUt54fV0X6Gir8xS4l7lJdo5jjtrd\nePQq7ZCVbgFftVqtlNg5NggFBjtnCLaMs24uWd4blm3iJDftZKZoxb98CH2l\nvkiQv0wsCDG0KpaSTkxGXHP1jEebu7/3oE4n66N1M9KFYZY/ALkJ87L0aJ+I\nPiwXjfhQImCfIcZJ/P4Oq8NYDglGRBk8GnIydweuH3ujUPJRgzHWRPh0nfG5\nWzKfyaoTeYNahYAiO+K0YKsqoK/kxgsdsK0xgKemjoaEm3jMi9JWsveX/dd5\n+MgbYhIsYNU57OGyMvYuV9vrdgAJTS+v+/WxNzwzfYS/fQYzo264Rxiy8lFi\nhT1d\r\n=4Jp9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.f1432b5c6.0","@material/base":"7.0.0-canary.f1432b5c6.0","@material/shape":"7.0.0-canary.f1432b5c6.0","@material/theme":"7.0.0-canary.f1432b5c6.0","@material/animation":"7.0.0-canary.f1432b5c6.0","@material/elevation":"7.0.0-canary.f1432b5c6.0","@material/feature-targeting":"7.0.0-canary.f1432b5c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.f1432b5c6.0_1592861149195_0.04502659899684058","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/menu-surface","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"ff7c55f0551befba20c11186db2049c988c21e19","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.4757a16b4.0.tgz","fileCount":40,"integrity":"sha512-D3ZGsmqpTq1naIe0CUSuWrKZ+soLHklX7C8s9V74ZpKdFvuGVSKks17hrjesel11EI1OiV/KOQ9JUKjy+S0Hng==","signatures":[{"sig":"MEUCIQD4fXM4WMgq4O0dgfm2w1cm8k/Y5RDWQCLRWAHVWDqpkgIgZfpSNmEHml7OMJNU6kWKN6qeujppqZOL7LXL8HBDSzU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8Sh+CRA9TVsSAnZWagAA8BkP/jn68OeA1GfuBxJ/0Z2e\nEgd8SHc/LWVbnA3fXtoBFkwHfDfRzj97L46DaS0oBp7koUezWM5je1WVJ6Yd\n7rb6Zy9RtCcBCr8SXY4vKidCEGtc184qP/fyTmSwSW+nv29B3JJvxynE7TGN\nxk0ar9B6m0VYevlcUdGM3j1rbP2VpXpOxlrp3yyVn0N3lXJEei1mmQwlo9E2\nu2+FiT5Wgk/Yy3H5GiPn+hSkzMm1ofyLSvQLDe8W3Qqiy9n74G0oxLFph9so\nuzAA3F+LoJ9O+BqLTcttvbUCJDZ0k5CNnv2sN3eWpt+v6VdjedTkOE4v6uZ0\nFIcWuXhJjKYjf1yXXj/f5Eul47n6qBQ9A5YWe3cxp6RB+N5sraHE4/LsMuOy\nwWChh2Use8LBb/wRXzXzUIHuav+94Ji1AzCOfiKjpVOjtQTO/jtxmAi28enI\ndjOFY1iXyyKygz3Lm9uj+27YxRHK+uCTtekw+r1mobKkb+Q0UE/tCvfgR2Qb\nFXgsneOzPaIZNjGsI+SmKXNq5Ob5/qx6kt92KrJLoSH1mDJpDRzH5NwBm1ov\nMkTWSybvjWE/Vb0HJLpEzGUkwRnacbV+NtSO/kht9kwMyLZx2kiioc7vs5dC\nkm2YLgzvor8urB6luIsS1ZB+mHu7uHfLYQqLvBZV7dLAiiyH/hx9j1A68F3O\ny0is\r\n=rOhx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4757a16b4.0","@material/base":"7.0.0-canary.4757a16b4.0","@material/shape":"7.0.0-canary.4757a16b4.0","@material/theme":"7.0.0-canary.4757a16b4.0","@material/animation":"7.0.0-canary.4757a16b4.0","@material/elevation":"7.0.0-canary.4757a16b4.0","@material/feature-targeting":"7.0.0-canary.4757a16b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.4757a16b4.0_1592862845659_0.9815380526595374","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/menu-surface","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"f63fcb26b6e7690c1664178a3da8ab2f1794d28a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.f8f472762.0.tgz","fileCount":40,"integrity":"sha512-YtNp4rEjrNNsoMOOOR4qR1iSG7KjCCOszA1XvZnpmupVGOJUSZJFotAWeH4lghGshRiQQCdmwzSQR+Gpqeimcg==","signatures":[{"sig":"MEQCICZp8teqzJqlH4eoEsKntZIqN7UiwaDHdPL0ATBpal93AiBnRVS9o/d+dv75xG53F1iIrpqUt7vPfbZoNJr7Q5IkaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SlpCRA9TVsSAnZWagAAbQ8P/2OlM4BHh1+LN60Ijx7d\nRGysDm2iacHpK4Rv+AYyRxAtesJ6twa7hzsREYpLFSGq7DDRh+6e9RcCLa59\nUddd6yZ1gc06mzIOK65Cbdq2GtBsVqJlVF+EoWzJSNt8/UV8qSDF3ZtUhI2/\nzyxtm7CTQ+Au5KVp9CjPizDJ3eIgw5KDtCEymMiCs+WIs79FgcywRvVq12/B\nkEkrtrZnQL0UctwLP3Lu8ZkxdxK7kCt0yNrrCVY/xTA4uJctFd3LCfcsiJKo\nvcKxicFLs6h7Loer2MZeGQWpnQs86RQAg/F00T/8GTqBVBy5GAGXUzilUkWr\neXxuXUGtaHRTQbFu160/PXfJQJ+ajR8XJ+NJB2VgHnwL5tKXI+S69ewmtrva\n0imX76H3Z1Gq1nWyrtBzdWwm0UJemssIlPP+jlql87DS7/RhBM36e+5eCKZ7\nh+3x+NUzRPrIMFnL+rbgolh1xLSUlTkx4K1n/2kja93NSpO9asN8kqhWwRp4\n0NDEWjBugzoA5nU35EIqLQZzJmWEDKp/D7vRRBA4m0BMCb7dc7ebvBgnc+0w\nenPYeyigUDGw/92jsBoTMImI5aP+JvajeIKtwaaxlMIf6s+wIsfloqbj9/Vc\nNRw3TKGKmYEG+X9ZpFwILbZM1HOFWFwkYm0xneuSRqr24vDwaEge0QONqe0i\n0Ekc\r\n=TF3E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.f8f472762.0","@material/base":"7.0.0-canary.f8f472762.0","@material/shape":"7.0.0-canary.f8f472762.0","@material/theme":"7.0.0-canary.f8f472762.0","@material/animation":"7.0.0-canary.f8f472762.0","@material/elevation":"7.0.0-canary.f8f472762.0","@material/feature-targeting":"7.0.0-canary.f8f472762.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.f8f472762.0_1592863081265_0.6923685803485113","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/menu-surface","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6d0084b93ae68a2c5c1917c37a35b3fea60f3752","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.7e4d55c34.0.tgz","fileCount":40,"integrity":"sha512-VcFgSkq4Vkv9nRqJp91D/p42gQFw5BnRnHBnJisr2nQ2EXbzBq2gU3ccDWbZ+5U05NVA+01wo/svl67DFgaoCQ==","signatures":[{"sig":"MEYCIQDcvysjSkts58M2wFBEp05Se4w45KTfOHuySwvYg7i7rAIhAP5gRwVAr6oJLAI4qipOnZ3qdffUyA8hxm746HsZwIxq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TDmCRA9TVsSAnZWagAAtSEP/2MYmaHUQNi3P7jqauUo\nnvd+B9lgSfjCi4oYENOQlVGnrQJgqjf1agBbesDpgaeE/f3D6gRZ8YTVFpSQ\nFpsBWDGLLunxslKbIcrWnv7HeHxaKzRayUqCzfbvDkH9DtWMOgTjy2QjVtrt\nmZl8mInMDBb/dIxTwD0pq7ThWVExJRMiR8zFoFh1SHvydHqmhmwYVw8U95xP\ntNtHvn4RdT9iyEBuQTPwVjNIkWX4iv+Z3hdpUz+xnRRsiYMLVprvX4iObsxt\nDYyluqWdiZSKhYojtIcpy7A9eZfk/CRBhIi/c41mNPbFyu9V+4DSptzyTtWi\nouZ19L/8vTWTdlrPYK86b7F+bDEdMlF949F8iIllUti+yGYmu5wNLhRUg1MJ\nPRgk0AC9a7PL1I+n2w9iJDle1ZWwY0BpvO+Kcpi7KOD8q7rpSgIvcI/BpMdC\ndKYqKPr8UQc645EwTzfSxBOOMSk4Zp/wC6DTJjzP+xLeiQPAn7RWmCj5TSLZ\n4f8zuc3Gc6XDYr8nY8Hvf1MXQrwIXq8ZkAUEgzXq9Sg2VGudaE9bsZKdIpTe\nZ8ufAP3ssnV1tIWnW4h7mYEwgnir2NbPH8hzpOsvB88kZcxxeJl3Z0SNPxrV\nSpdEGMwUq+AyhhdTdJ8XFKuAQfHfrJiXq/l7Wq9lJQT0kQMnh1e0VobFQWVH\nxRc8\r\n=vKQM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.7e4d55c34.0","@material/base":"7.0.0-canary.7e4d55c34.0","@material/shape":"7.0.0-canary.7e4d55c34.0","@material/theme":"7.0.0-canary.7e4d55c34.0","@material/animation":"7.0.0-canary.7e4d55c34.0","@material/elevation":"7.0.0-canary.7e4d55c34.0","@material/feature-targeting":"7.0.0-canary.7e4d55c34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.7e4d55c34.0_1592864997540_0.7016233307176423","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/menu-surface","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d0ef06e7582c8819dbdcd0c40fec3cbd0e1e11ea","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":40,"integrity":"sha512-MteSNwIU4H44ErMxItbFFwsIRKF8RQh30f5ygwJEBq4XIeNoVZLw4nKs7HQNFEdFUO15O8k3ErMK7V64F0ZStA==","signatures":[{"sig":"MEYCIQC2GRBkUcHAJ4aABhsRA+ZdYwqFYNCfPcX2b90GsNcy/gIhAMqkDuAW8uYyqw7UUuD2oRoLSLpw1nbkluEZYEI0A0sI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hGjCRA9TVsSAnZWagAAbzsQAIMBLeh2ifegz0Py4QvG\nXnASQaDWeU1PKfCTUuMlDVOhbKfjeaRV+GWUqLaWniGj7LIaHUo4er4jRYOz\n931cE6s6Lx0atC1XnhQ25dbtmzM6Hr6r7+VAPuMdOEEdBGFJYnm8SPlLhni8\nbrswMdJQXHRUYEp4t0nB60nIxHG4srLEAC+ZYhr7fu3ToVxS/AoYaNgCoZDp\niAo+odewDAudUToNuxJ3D+++hZbWSfkLhMjkpGshZMIGQyhBpGAyRlM0ZHSv\nsCXfQRuO0p7mNfmTm7qAN6ttfvX1boIVpZB6+vNs6qwzpUImCyvkgguK3VF/\no+Z9MLNNY/oyvCwEOBNGoVLt8clvx5B0sD2NNOLRDQ4FfCF2eteZPsCilxfh\nCOwYZ6KynBwrPgSaPLnlBn9DmyztrxRfmUul7Y/rdqXY+rEA3BkKeq4FE/lx\nijaVKCsVWRuYBO/0T7AI2AhOuNoNwt+2GLn++zG3TnLimlhpLr+//1+x0KYW\nfpvVZYl4rON2arnb08mDFeMFdb5uTQvSeyGZJS8uR2aXRnBi/f5WtruT3h/Y\nP9eOmC2kWAlFszlQkuhgcU759m+19+vqj+DI96WXuK3jqQuEqjfh5uXuRKOS\nSbKycgrzlGLEG5rfQ4pUDvM5ULqNcYiWXuMESnUnCs+pQLrgwWeGMlIzj5CL\n8WWC\r\n=mQvM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.bd1dbc91f.0","@material/base":"7.0.0-canary.bd1dbc91f.0","@material/shape":"7.0.0-canary.bd1dbc91f.0","@material/theme":"7.0.0-canary.bd1dbc91f.0","@material/animation":"7.0.0-canary.bd1dbc91f.0","@material/elevation":"7.0.0-canary.bd1dbc91f.0","@material/feature-targeting":"7.0.0-canary.bd1dbc91f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.bd1dbc91f.0_1592922530531_0.7280599352666672","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/menu-surface","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"dc4d4470c6ed7ce5ed37057fb6060380bf7cdae5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.31523bc62.0.tgz","fileCount":40,"integrity":"sha512-jjP9inkC5fN25cjxTw/0DaTi6EsS5Txx/uC0DxzOK8/fIQ0JIAksdH3NqEWlfp4JxSu7nJC7jrehyUKoD0SaTA==","signatures":[{"sig":"MEUCIQClmCtUMeLPZcNFCGEU2+TI2Q1u49kT6xEctWP3BRWxdgIgesdBKenaq19TtSg6HWa/ESMBHRRv4UotOT2mLRWdF3o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hLxCRA9TVsSAnZWagAAQDgQAKTDxhmKUm4GMt4kMvYQ\nADnkmfv7rVrpYFo88EfRg8qqrElZwdX95fZ0eqh4Sf+8VAHauuoTZu4jCKVT\nkR3PKwKnj6+YKk2f1HtMDbcLKAZmyOOVBTQ2mGgqC7qbe6JSjxRWVYepJrYy\nFHrp7CmKjnca5X/7ZrZ4UNc9UeqfRIv8zT68C/VnIEgUg8eatXxzg7e3JveQ\nYEwT2CNjU9Y47TYhnTun2psPZBqSLZ/ERdwzhFek6ePfHrgVJKaopUh5U4T3\nloJXAGQ8z+y78Bdi3NMnXd8PKC90U9/TwvhCiwvmzAXCb0kMQUSdKzna+5+6\nTQvSlUK8/su13hjbW4bOUTXjY6aRGtC3i9nGNAFMupSScKfZe2Ax6q8zwmEf\nAKmaLT7outpW5d7h+r1dFw8+rcMrXYEihog4fK1SczVoHJ8Y7LTgQ6hX8YDn\nJwHneFcoN7XoKlO/VXaIi4i0fqHz7e/u4Htm+a2Qflv85oPunh6Ax+OXabDs\nCdyNpAWCoAPnSIi+ylO9ZCqwwnfgqiNR9DTMUlBhZR+6uWOcLn5vltb7MAnp\nwahFSn/W4SH65ILSzK15MKTe09WQixHPjm/bWRF2zR8ePRnIjcv3STm+mq2W\n7LH+SbFdZ2W6xIP+4krFkDyFFKTL7aILLkLj7T0rXF8yo6AUAbZ+lCKKoeKB\nOlEC\r\n=DwMf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.31523bc62.0","@material/base":"7.0.0-canary.31523bc62.0","@material/shape":"7.0.0-canary.31523bc62.0","@material/theme":"7.0.0-canary.31523bc62.0","@material/animation":"7.0.0-canary.31523bc62.0","@material/elevation":"7.0.0-canary.31523bc62.0","@material/feature-targeting":"7.0.0-canary.31523bc62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.31523bc62.0_1592922865074_0.1431752382744218","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/menu-surface","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9c9561170ad9449151f623a82d94529f0989a533","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":40,"integrity":"sha512-BSrX62+J3CdCWf//GaEPMYdJjcuLFHfgJT/FusSnkXhrFH27nvLCYotz/X+C7sXPj6CXs/cmsv6zKMoPh4gpUw==","signatures":[{"sig":"MEYCIQC3m8iRvM5hFsCEJlSkTjqTBkBFGNWMOPvziPOX8UrAXgIhAO0kL4nVI29qRnZepquyyN88N1Z+sPJ/ksRe8RBbCuCn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hToCRA9TVsSAnZWagAA1F8P+wbHK9xKvaq3PLt41MVt\ngoCLdiQhyER42aIjKQz8L8v0Ry0gOv2/y9y4IzDl95lcsgC4eRVAV2u9Ej2B\nSwVnxb51Jnlt+OWsOdJtA2nsl/G7JFgjVKklMjfa7c/52ws9chBhuCTXBhr2\nmgQb2ICFJBKhsHORLalnUssdZ8f5lYBsixDGYdXHfgLkUj0MpXwNb7DT5z7l\nfFsBoAU1zidiyUZjVzxhAbmAdUrkiskmt/j9KL4KcmlenVS2l6FltiEiQk7S\ndJv9K2ijT2jXzRFx4XKvA2z0hsC9Fd1OFquGdX3RWuM0nvSjh5XVfbCJTYnO\nlFraYppy3fjw4HMGbfaPJV+luGsr4JVL+ZbaGhMZnf0oIDxOsMNmCa7oMoXN\nR89NjFM9H0zvIg7d2S8Kjja446acPOhF5MjVcOP1wdaffI6KAMkuvTjVUGdo\nLy/zxjScnS9CUispf7/FFis9YCWHaMbBB4hk9IrSLhLsuanQmcMUjWh2LRsn\n+8PW9AZNaZv/FvgslhAqbBg06oN+anDSfB9bDEGkPyAP26YOn3gWHspYpIgW\nv9bGxXiNQWn45TcC/CgJlYUpJTIS20ZjLYlX8ryNF+ALAfovt+S7med6lsH5\nOXMPBnhVmGxCYdyh4DeL+4UjV2d/iCLuGd2oR5I6vK3J1UiV0mtVTsCpHPSC\nreeN\r\n=nXpW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a96b6d4d6.0","@material/base":"7.0.0-canary.a96b6d4d6.0","@material/shape":"7.0.0-canary.a96b6d4d6.0","@material/theme":"7.0.0-canary.a96b6d4d6.0","@material/animation":"7.0.0-canary.a96b6d4d6.0","@material/elevation":"7.0.0-canary.a96b6d4d6.0","@material/feature-targeting":"7.0.0-canary.a96b6d4d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.a96b6d4d6.0_1592923368311_0.2329946038248747","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/menu-surface","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9229ca02b579e8b46c499ff52cb8e0900c3bf717","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.ef3a09533.0.tgz","fileCount":40,"integrity":"sha512-QAZAgFyksljIHOdVmouWqExoeQ+NqN6W3/jgnCbJtE15+eGrWaqq297G6EilrEXt9N/P1NBeNEsyZSo/ivgLfw==","signatures":[{"sig":"MEUCIQCJ1sbE4teq1t+7XjZEsQHo1nyMfRbaVmz7vZZ841uEqQIgQ5gGb6XzdTclaZwLEODiERwZVXvQl2nUC/Agdz43W9k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hZYCRA9TVsSAnZWagAAFDQQAJHEOBkeV6DwgpKQzMto\n8XmcAte5P51wk82nEKyN7/8saJv8nSO9UwHqEe2Nr9atnSGbZaTTyXDpGpB1\nUHJKMtt89ucvbP1/U1MhCsNFkid4vXxPP0wEf0MeAv0FxwaudqwnPGpU34X7\nlnBTqvBedzJ7zQ7vKcZAl36TnJgkmrO4Kwpg5kB/bil5dBmBcG95rHxRWrSq\n1tm5RSSjje+W/t7w7a41J993q+bAyAta3iFMhp9Nj2/YogtbwucQMV/Asixn\n/IAN/86dcS6mTEJsdBXRqjl+sq7Ea8Oso+EDItoRGDVb6jNH71NbetVppzOn\ntLA2aXLFTl89JEXRK9+DLJuU43uDYaRD5N7My+0ma4K2AetRn85FOXaes9nq\ncWE3B/WwZRtjw+7IfhFeXwOBkvgTroBGDRJHvvX5HAAKFI4pLqDQX5jtXljU\nzD2KKeTYunkQb5PYJOMSmeIdpUcj3zOaWYeNlziEGP/LXD9PjXaVezxYlN7s\naPGfKRXAXJOShtxLeFQxa141crC40iyd7Ug7n4QV9LR/93vVX+xWBG4AC+8e\nc5AZUhkbjfpHHXk911Czj5mku2p7SVDkHEWJ+rZF6jC1GrvU600yT0yW4hfD\naNGrbYApXk9n9evCU4knYc9ke2P3JrVtKgAg9hB49ZqFDX2q/QPN7YK9Trbs\n/ojd\r\n=8XN+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ef3a09533.0","@material/base":"7.0.0-canary.ef3a09533.0","@material/shape":"7.0.0-canary.ef3a09533.0","@material/theme":"7.0.0-canary.ef3a09533.0","@material/animation":"7.0.0-canary.ef3a09533.0","@material/elevation":"7.0.0-canary.ef3a09533.0","@material/feature-targeting":"7.0.0-canary.ef3a09533.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.ef3a09533.0_1592923736386_0.005778060759849657","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/menu-surface","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d2f92872f09d3aab8efa1ebc13e3e5d0d1699a02","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.080965f39.0.tgz","fileCount":40,"integrity":"sha512-MjBQ9oJY1GgeFAZfRBRtOBs6p3M5wpK4uBnaNC5eToBxsHMsoZ4mcmJJ6aK1NvcMv852APuQgjf0bRuHxAEmbA==","signatures":[{"sig":"MEQCIATdd2VZ5xM+VzCq98nhmln3wMjm+2IyEIY9bMA6s6pjAiB2F477SS8n2KWl1bnQNZqxgT3axZiOAn3dZZS5N4UFgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8h02CRA9TVsSAnZWagAATJMP+wRbd0tg39WyLivSwQnS\nT7kfRizEa1w0hKwnscK1RxOb9ZLGIL+K+obwOf4kMzQVkuW5ksmdUG93vrM0\nJH3KCdC7kxOjnV/1HFP0CXbNQ4g8DWSsZ5B78rGxpha6YXDPaR/DVcosLyJ5\nRRwOu8jds5pPAWYCPMEy4Qi4oQbHOb+xfghFILcuZvGq3/LGhuY2Gxz76rN4\nqKm2oyWuXRPL761oXtK1UiXyAoHN/V4m4ccBiFi25udR2NDh/M/px9oNHSQk\ncgVORs/rqEcuO4lHdSHtqwG1/qHwa6pbFrXePfxjZ5TXmqVdvOgnLKUGxdmO\nq+s3FR0tZWMRk/o7HjN0/ILmjPzkvDakvWsTAdxHaX4dxtY6h7Qew5BBYo8m\nHR12fJnjy0rcCa0QcUSAZxhemuVDoKl2vJf04VnsrIdEhRuUY3vbFgC17wJr\npScAIO4napyRQ2tbbbMFGrsYw8IB7+lbtB1a1T6IrgAeeRm6ytzYYhZL9wxB\nNrCCzs2Il9uBujBOBB6VoMFjInaIexvnUavfB5KMHoS6SLI+R+JCgiCO6N8+\nvzaSOvA1kg6/I5x1rYY82EwSTe5KnOhjlj0y+jq6bRX/UWgd3d44VeVtiYqM\nsuiz1xoPagNK/7yyALQPk8Ijn/fRvxzdxN+bCK9oOM0R81adY09PN5c9CWKZ\nl6Ox\r\n=Iyrn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.080965f39.0","@material/base":"7.0.0-canary.080965f39.0","@material/shape":"7.0.0-canary.080965f39.0","@material/theme":"7.0.0-canary.080965f39.0","@material/animation":"7.0.0-canary.080965f39.0","@material/elevation":"7.0.0-canary.080965f39.0","@material/feature-targeting":"7.0.0-canary.080965f39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.080965f39.0_1592925494341_0.17846548710615462","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/menu-surface","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"e38e81ddf1b0cbd3dfebb812750192ca91bf8da7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.1bd67b65d.0.tgz","fileCount":40,"integrity":"sha512-Y3daizA2aKNZWM/VftfGhx0Hno1s3pYSgEpcplvSwDH/r06SrthIPBLk9ix6Ni7zlJg/7a4usjo1RmgXHGFkSA==","signatures":[{"sig":"MEYCIQC5Oz27fItJMkR3n6agArwYFXsJjqKHQAz9i8l+6wQ79wIhAIJAsTERhZMXwZoa6fUQP5mNh32ingxLZUL5Yu9iFH9B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8icrCRA9TVsSAnZWagAAPcwQAJ8rWFFZ9CuRaNtLzn/r\nuu9I8SfMgFKGnoKiEJkXxObo46a5imnKADlEkTB6n2GrT0wRKTgJRRnqjELm\nVFksoZUDMITck491oYzqUMdB68irijFRiqXOyS+hI+kTp50ETz7HpvvzX4Ea\nIunkgQHTS19xdYNFF7X9YTOYlctjFfmvyRQoGltqahm9atDXxii40xm9nTu8\n6bpysAaUoxdbK588ZmgvoyRRJZtcwQu2+PEfVwAMwr+VP45zR7MLtU1ZzMJE\n8Uj0l1JNzTC8jJi6T0ODzOPoDVw5Io7X9Ks6vLS+RzLB8S4Z66guj4gAoGhI\nqsdiXzzd6tsqPpHzCC6Z96X/drtGuxV7k3BWFdx9cH2PfNlpvTezOYC983+g\nAxxRj9crSQFwWvMM9fQHk6IYjGGWSCvNcYUlFQodmqze1S2k01I365WVp89U\nbdOHqPJG4CFlfeesuqXUR5NE0fm0MqPmX+UZJ8hTkDA7vxppbPr2gq/J4Kkg\n351xwuDnB/LbLNt+VzTFgDLiaxWjwhgr10wvpQM3/+K0j/CVZK7OfGzsOwvf\nqnTSIIPin8/L9ImT4D8VA7pYsPnSvZHlboARhpoK+uDBfUUWOahdSRlW4t/A\nCWenAWHSBPxG2Asj9oRfrvKGWyWzs3/OakvZswMGmu7uXP8tSq1me9hReQNH\nm1Yq\r\n=AUVs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.1bd67b65d.0","@material/base":"7.0.0-canary.1bd67b65d.0","@material/shape":"7.0.0-canary.1bd67b65d.0","@material/theme":"7.0.0-canary.1bd67b65d.0","@material/animation":"7.0.0-canary.1bd67b65d.0","@material/elevation":"7.0.0-canary.1bd67b65d.0","@material/feature-targeting":"7.0.0-canary.1bd67b65d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.1bd67b65d.0_1592928043263_0.5408676752784374","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/menu-surface","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"0cb9526e4f6a7a1d3d1a564b1f941b138a7f2b97","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.18ca31248.0.tgz","fileCount":40,"integrity":"sha512-figHEA6Il+h/5zKT9rAmZD6ythoLY0WPh4ZyV7Avnt5Ur1HA4ktMUi/stcjhY4blL1aPQ9lbaZdZlb7wezgyiA==","signatures":[{"sig":"MEYCIQDgrNIc42OGAQoWlbIeSsA4+nn/bD3ufH7P5gJReVoh1QIhALiWRrxtBEcjeumAJfu7/fMCim4x6JdrdnKPpvTpVi+c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kklCRA9TVsSAnZWagAAg2oP/2gsOWqrt/ewF1jCdIRC\n7tHh4rPIKkII0MG76qZ+5RcoBdK0bwHGNT0t47YDEgzsjhL1FTDJRRuGSGea\ny7k0qLnnRgsBlzwr5MOSVO4BrXBjVeRp6RNjibfXTth+i7nKj6Yuz6+XhMaa\nnz/ioV2bjMzO2wQlISELygEckEYJl1RcL3Q6WK3dGJzej7MY9P54oyYZc9m6\ntOsBmsCZEZhxd+6GpHBS5z0MfjL/iWOBsOWq8s7saE3aGxpvAoBT+fM0hq0n\nPF7GqjeXDZJfXoDpPtch9X+TbYWqtVHsHVqtJyQ8M9ZBePqgxXJCCSdvQMNQ\nhjuLXCiuS1tyI0yJKnVEcROBccKh7RoRy5kwbh08wtaRpIxg8Nb+iNH15Pwn\n3B8v6pATGI9Q4zwnFaALCl2VVOSmZNhdDWfoLfbMdmoCLWh7YBoYGVU7F7Kx\nH1TDS/rzRSbOFpXlD8C/GM+rAMjbwxx6kJ2g3GHWVlg5iei03ySd7qkxJwXo\nmZFQ+muD61penylXnNgHlSxz/VnFZ+UYDMMv+uOKe8j5ktIldicGwkh9kZWS\n3KlkjefCnfVyUo0BztBmjo91QDik0u96ElgcGfTZiS4FTq8lEEAuNiMJeef3\nDCPZUa/WIgxzAJsNhmPN9MGKmIJaTh+EwcIRyVRb5vo+jnehUqBUOCEZI4lH\ngrib\r\n=+iWt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.18ca31248.0","@material/base":"7.0.0-canary.18ca31248.0","@material/shape":"7.0.0-canary.18ca31248.0","@material/theme":"7.0.0-canary.18ca31248.0","@material/animation":"7.0.0-canary.18ca31248.0","@material/elevation":"7.0.0-canary.18ca31248.0","@material/feature-targeting":"7.0.0-canary.18ca31248.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.18ca31248.0_1592936740574_0.6462111762632807","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/menu-surface","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"0cf8540d028a03add83f43e13ec852634df5fac7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.39cf00836.0.tgz","fileCount":40,"integrity":"sha512-s5SPWm62RJOQ4fbDXpGSQlEB1hlppvU0kRT+1OXyO/CIik5lKKgfoPN0xTWt9TIEM5i37kWmzDa9guig8u7Jjw==","signatures":[{"sig":"MEUCIQDthXaXXl8j8HnoohhV3686EuSeiY3PJzvoLJ5TNbjgCwIgfIGdqzF6PsvpIdE1mNhLwewvygseCr8cwWVQzf0pAX8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k6GCRA9TVsSAnZWagAAJf8P/iGQvVkyW/oClnaBNfvZ\n3d8UJ6Pl0BfhcR0+jc03Zkox4K6MWNx1VszB2KsElzOuD5/X2ug5fij5ZqCz\nJVWz3vz2SSLKCcdOfNiX4q0GnGptuyfIMvyyPqBSnTgtMmbekHoGvCg6BX/2\nmmkgtVb270ccF0bhkzmDdKenreHomdYNMYB4iatmlyBbsPGZnsELQMHYRMUF\nYcTVc46LniO4me0pA3Lp+DJoUYZRGOJH1c2kJD4YPuK9eIxJ+oJlAI90a5OI\nWrzBRKxxqL/AEXLHtPAvk6JBr9AUFoZ4gCFJWHMwEYRkhK9aNlHvxUQp3Gbi\nq+T6qIEsT7WpkNWhujTZUbvmmg6lqsA5hLnTELGakc+MGelsS58C6wTXRAeG\ntgaaES1VdaE95ppU6HZN80kdNRCQJNIy7YanrJIyUwhKb73fyJWGJGZzRrBr\nY4uWBNLyU/8GFP+9Mng6Gg52kzicUXMH1J539HgGqFb4d4NThCLJU/59TojK\nR2fhLqeYqC+a8fIsNz2010ThvCi5YfafAHRjMEHwQx7MOeAmR2ALeHqscOvj\nCSLo+PHPjMPRsO8jYDMeUQWkRQMKZw7XcRTsTQGv6XwedHyYCBtbFJ09UkGr\n4Q+9R5nkdFGzbpingrm+7v7Lpn8zVWdi4dEnGSiHWrG9d8VfmWWoiMXSPebW\nYb7C\r\n=Mulq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.39cf00836.0","@material/base":"7.0.0-canary.39cf00836.0","@material/shape":"7.0.0-canary.39cf00836.0","@material/theme":"7.0.0-canary.39cf00836.0","@material/animation":"7.0.0-canary.39cf00836.0","@material/elevation":"7.0.0-canary.39cf00836.0","@material/feature-targeting":"7.0.0-canary.39cf00836.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.39cf00836.0_1592938118023_0.8575523556094988","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/menu-surface","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"ae4baca588f9debc13c801243ef133922aac650f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.1bfda9e05.0.tgz","fileCount":40,"integrity":"sha512-ELl1mcaT/BWvSb5ffOFyg8gSY8p8BHnpqnJgxFh+QH19Q9zgeXt/WvtUc68Ebrwlw8Hl4s1GWKKbAW9TjH7kog==","signatures":[{"sig":"MEYCIQCNVoiXT6ve0lxfc+e8pctvkUKH4MSyB+YQWVrcCAPzJAIhALuD/L7u3Wnf87qV3/noBu0IXkpAUg3dFfWnO1AYAEqU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lFsCRA9TVsSAnZWagAAAH4P/2pKyQnQA0YvuhRJ8LId\n8zAa94lEOrIXwwK66En4OO+Yc+VYCbA7r8ydwogAd55ynSsq4jtIVAZssBpi\np/RtIN2zYdbRgyKPBGV5H57RLPuHsdheEv3gwRYZ0mZVUkylfCLrWTbLIE/T\ncwIf7XcxLiDwGPfbI4r/0ApLnefDIs+eRvO0iNF6UthbfDdiaVsUTAPnd38n\nhtXvzA3ClHIQNqXD7m6Y2Q12KYaepTr/DxEO1hf6Zc0HfOainD7yc8113Elj\nk+CTjvoo3LRQ/pN11xytf8zqiNEE5PGovbU/gFaQtNYRLkHh/dV2y8505Isa\n7mPOBWiHxR7owfhm1abpJGC6MKpDmyMQlbLLVlBvFdSxVgAOd6GWcwyobCLn\ngcMJWM22RfrIXKSidtEgZG4D0z7Ky+Y8O5EBZCrTBhziYjSzkC7LaLWBcUvw\n4yF1PdFUQt6Ue3VbW563BEjt60ygw4QLPGSKVsxYSou4IYLAhx8b8r1OaNg/\nlH8xhyKI8K9+miWL/d4VzaKOH0jE6MWr/YQ8P4wohvgzcx3EBHek3CYZW55Y\nYKO2Nfik/L616y0JVdlYQkmQ5jHerwEMlpEqRnkdx4s78ymiWmXDQeUm1IbK\nsxMxaXM0erSFMXOJk6kVjWK6LPZtzBEmF/Vi6v5BgZ1W1tTg4xkFcZO/kDTj\nlmcd\r\n=gxG0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.1bfda9e05.0","@material/base":"7.0.0-canary.1bfda9e05.0","@material/shape":"7.0.0-canary.1bfda9e05.0","@material/theme":"7.0.0-canary.1bfda9e05.0","@material/animation":"7.0.0-canary.1bfda9e05.0","@material/elevation":"7.0.0-canary.1bfda9e05.0","@material/feature-targeting":"7.0.0-canary.1bfda9e05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.1bfda9e05.0_1592938860419_0.6604456137804076","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/menu-surface","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"5d8658f64b4dd31fb4e449b3c031ee4f2e68b76b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0-canary.08731bd95.0.tgz","fileCount":40,"integrity":"sha512-PxP7F7/rruuKjULlWTF/ymfCDfY7u7scPDzBTTZxakfkaID9PGZgbIfTE7z9TxMMTe6sjABy5LDJlMeT7AeNxw==","signatures":[{"sig":"MEUCICUC8xGA9yRDj7GR7gxlrEp8iash1RtoXu1mS4xWvcpzAiEAoYbsL+SdtpuoZOncNrjRr2unqXaweL0etWRkODaVXM0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lIFCRA9TVsSAnZWagAA23MP/RIDg6D2QQ2Q+Q8ZGb7a\nZmWnHRR1MARmPvYp5kVhL8QXzJsMlKvQOu5p7hq55Y+/2ZCBo1WnvKXDmEs4\n6HJIg3psoXXaplzbew75wcEmh59JT7z71DrC7eFhxM015ENgcpu88YvqPhRW\nKP9/oPqIzE9Kj/Wy46/jL9IEzM0RBTPEcH5in7Uefm6lYHC0/KZ/73JcoBO2\nVCOYjKRyKL25XIQ9vQUSp/7QzwhLai78+KOziY9EfVV3oz+ErvsGxUuIMHUA\n/OXNg+vOfCtdmrGPVzj8wyyZpwrH07q7eeQnDYHiN3c+63NY+HBcjwiHy3lH\n3XFM8dzB3+n4YPf6T1la0HqDfoIp+X/JKfIff87U8tc+YRdV5bnaGGRIDHmX\nlKnan8SM8EmHWiTI0EW6x0QUgpr2hSUSgzv9AjRgdfVvbWijCugW3RuTtG8I\n6Ch2SNv/P+ksVobr1qo9fdPiLnQh9E6l5QiLHIQZicX+zHzNtpLprSvGCTOd\nJbhot1hZ/3P+1PvZ80cBny3Hpbv2We+9wf9rjP29NtaL76nL4oPi8neSatUq\nJxQkUystiORJPEILX0+BjMa9JT44gf56pI/bKdGqqS5JVayE3qjT8Jq+im+v\nb0how+AqC+FX5sq89g0wcC5T3PkVJBvpYdrXAfgSkbHeGgkEQNt6BN7vUTFf\nhXfU\r\n=O6l2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.08731bd95.0","@material/base":"7.0.0-canary.08731bd95.0","@material/shape":"7.0.0-canary.08731bd95.0","@material/theme":"7.0.0-canary.08731bd95.0","@material/animation":"7.0.0-canary.08731bd95.0","@material/elevation":"7.0.0-canary.08731bd95.0","@material/feature-targeting":"7.0.0-canary.08731bd95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0-canary.08731bd95.0_1592939013113_0.7318473406639976","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/menu-surface","version":"7.0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4cd1c899c56044587e295dcd3e934ee020dc9917","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-7.0.0.tgz","fileCount":39,"integrity":"sha512-iJh0RuwbqCk3azeqaf8YIChnHx/4F0sE5btAs+y/105MOWJaMveLy/K0JPz3DUD+fAeOoKJiQaEBIzybedDwyg==","signatures":[{"sig":"MEUCIFKfW9cHQIkht2jv3SWWpTuECAnQ13En582bSj7l/D/lAiEAitRBRwVCoaT3v8K7i82HboeUp6JyPC733yfQuTyNQlY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lPjCRA9TVsSAnZWagAANHQP/i7Whf5N3eqTNx/Ksow3\ni3Bh37K1H45xuHaPFsrHxtHrwvzIoqzCs8jzuhRowWIA2K6RzpRwmzAX6OMI\n9uoZxm5PYV+J78HZOqouHmMwh234gyjGJ8KbUXxMMM3N2udm4j3d7moSmZJI\nqvtHgtBkOrYMt5uaXo4vsZ5giwQ+yvB0d/C9OOrnojtpmkVtKfMqUKnInISo\nf5pELWKZk/FWUBnvCPlspPZfgG1sWxQHtpphVoOZ93UsOedA5BjeVK2MVRSa\nIAU0U68GML8KMuYEWv/0ZYLGixPOQZcyKaSsOzNg3ePMMjir7gQA+28yq58C\nkTxWdnSd1rIvrHXHi4aFo7tPKfr5znavK0+TaI4aPp0LQA5iSyTsO4AoYweH\nLaCBa42WXEVgL0LqJDAkYOMEEGrebO7nhY3E3jyPNeLh15AXqA/eSpjofOl+\nvm7YxKw2vvnK7F6o+62ZgRptxqxjN5MfmyhHaTL6jWEGxs+2G3ckaEVkeD/N\nx6Sjor69xw0E6zOY7ZM0JaqFH/1nj7W/DLnhJO6UxxmQsR1jV2dLpAOUXrxJ\nNcoau3zuwzMAEJm20PEoCRiZbf3l6jnssGIQK3MByF/owJ9JwfAY9ciZ5dXr\nTdvD0RApFKOjg3lSTyoHRy2dPYXD6uc4ciw1aSqFDKJd0HbvcgVSvITIiFfq\nb+6F\r\n=VbUt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^7.0.0","@material/base":"^7.0.0","@material/shape":"^7.0.0","@material/theme":"^7.0.0","@material/animation":"^7.0.0","@material/elevation":"^7.0.0","@material/feature-targeting":"^7.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_7.0.0_1592939491401_0.6595491678040655","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/menu-surface","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"52ca15ee2f7a7549b2d300bb6ec16dc1dd37a1e6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.a3212b209.0.tgz","fileCount":40,"integrity":"sha512-gCh57IbNASheRdDh7jMFzcKpg2OIuzD+XtczdJtjpEZ3syZtTSaPmeUcKdK6b8sbho7XRCr/q6zTEyZYgBjCcw==","signatures":[{"sig":"MEUCIE1Zk447lC59NrHcNZk9fj2qXfWNcfxH0E2OZge/3GLkAiEA43pNfcU2Lpw2q4vbfxRung5B9EvCKLBbr3q7LfSG95U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lQbCRA9TVsSAnZWagAAnZkP/0jMhQbfr64Jsr+RgOD4\n6Kr/FJs1Wwzv9chdXsX5yemWO5mVkP/h2KhN+LRm1RBr7j8mS8jHy6uTYGNh\nqUNJrh8sBx4bLrp11/n6vG6xANwth++qZtp+nBSXssXK0BpdvwhKJ4Odjyak\nQIh7jvfYmmy3FNOaaXa41XBRs6DYW0Bgt54pARQCOEuJoT5lpXqmPR0Z06Bu\nK3fELMsxLy3JE14mmhn8CoMLbcNRW/HvVrmHu5Sw5Eq+Yd7cMAzN7MaH2zgV\n6LQhJIEPA+nQ/72NaKVjQfufmRyQmjoxWazSAIOMxjkM2aAUi1ZkzRHHheot\nHMrMlysjP7WAcirqWZrGgKsOGT0kh/HlrrZ3lr8LTqQeE/BA2FxvcgJCxxcw\ngi7fN2u9C/Rva6r4UOZNSAOAB5qc6A5DbIuMlaCqS8aaFAcz+7cVVvHFlwOw\ntAqg+gjOulLfX6TUOYlaUa3Zjza9tFPKaccO6eodRH7wY1bigUPbiccGPW9j\nbgsjmwLXsXhZ0Xy9kBfbJQ9CxnV2XxMaZhDAUw2PDejs0imyMBFsBxFRH53z\nTkE3DecCFM0zEDUkyLTiWfnHNwL2aOIRGxvuz3DdMTxOMcU9GJn42VX4Uq4V\nOtaC2MP3OySxL9uJNAmbN0G/XXYelBDPjFeUe5HnJf3ml7RuGBtqSKgnI8xK\nvrbi\r\n=whdw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a3212b209.0","@material/base":"8.0.0-canary.a3212b209.0","@material/shape":"8.0.0-canary.a3212b209.0","@material/theme":"8.0.0-canary.a3212b209.0","@material/animation":"8.0.0-canary.a3212b209.0","@material/elevation":"8.0.0-canary.a3212b209.0","@material/feature-targeting":"8.0.0-canary.a3212b209.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.a3212b209.0_1592939546831_0.6551727478887972","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/menu-surface","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2c16cbfe963b7d60eb92bb15896f8aa05a77c1e4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.15e81fe98.0.tgz","fileCount":40,"integrity":"sha512-eXc9jCA3U2u65aJcBjVl9ORZRzxBNRnxXbJX+SThKEDJEf3fnRUN/yZvciBOfSWmCqdZKRgsmjC4rVvAM7LT9A==","signatures":[{"sig":"MEYCIQCPRV1hPnHdPH91dUrIqeQ+eIU9BHwC0wlezXSwVQXfbwIhAJr29QHLdR1Jx53X9y7KsaFkOFmM0r2gwvZbk4rX2HRq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lr/CRA9TVsSAnZWagAA168QAKR2HRBzKKJHaUti+vUK\nZA8fYvv/q6rG13lFaTTE5/9bk6b8lGkJIKNPtfJ/4hXBd3P2HVgJihdGJ5PB\nTjOcCt+pTFIoInIfH/Dw/G68+YnYgdsfdFgKv/IkfKefnuB+fuO5zWH0E6kl\n+eR5pgUD4vL0hiI9F79hmV7K7Ka8+9Q9AyEGtDZqR+7zDZsyny8F7bfSA70c\nIENFEWGqe3lE8+peEfa7YK/YbYgWfBmpbq67XvyPEd8269W3w7CswFBPQEI+\ntlo7Y16DiFwK8hhzIPkfMmoj1LNNhlvg2ii24uDy9aI+XrwYL27tn/qxixWn\ngZg6Y9aR6ApuemeFxjjEcCIBXUC6oxu/+FBFHPZWDmiLnPcZ+m87GfIJBi16\nvYzZk2EwxHpocYJDGCJ1BAyr3TWwX/KHD6mLiUKqBG5W2Vk1ES1gnhwlUXuM\nQkYIHmdfXMpaEsPkgMI2vbjdF6sJABPc6D/ekMqP++C0sCHZlPkUtOuJst0Y\nS74lZuW0IGZJjDRqqa26VkQ9E06sFRn4/lLFLQ0p/r8VbjfRL0a4PqIyFQa+\n3LrylWF2HJpF934BY4ZVx1g3ACPmg9RbKBvtT3wh8iyeegZi0lM6da5r1UFi\nhfHZYrhP7eDEmdXS27+qdG+gb525m3OMzCH4qrpzGx8wsFtgfaAcPI3pNVbv\nJ866\r\n=VXmr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.15e81fe98.0","@material/base":"8.0.0-canary.15e81fe98.0","@material/shape":"8.0.0-canary.15e81fe98.0","@material/theme":"8.0.0-canary.15e81fe98.0","@material/animation":"8.0.0-canary.15e81fe98.0","@material/elevation":"8.0.0-canary.15e81fe98.0","@material/feature-targeting":"8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.15e81fe98.0_1592941311528_0.9154109952945426","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/menu-surface","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"8a304c0f30a5e0f1431799f843cc8cf7d845a777","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.004c9d392.0.tgz","fileCount":40,"integrity":"sha512-YIDy7xt5C2Zq1gQNrAohtyfjM5liPhrA5Kh2PHGXnYgvrDXQfV7RrojbWYw5/ccYma/BR8iLsbLL9HPh7J16Mg==","signatures":[{"sig":"MEQCIDwJotkNLcY1rKi9dRrxpC9O50laEFdCbnjw6l4HEyaeAiBKdXMz+WcLArHzCVS49SBhySkTlQr06UxRivSJU7qD7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8oijCRA9TVsSAnZWagAA3MoP/2RayXKlx3m94eLORXrK\n7BJklTcANJlyWOdmOCOVcZStFG+Bhq8rgbnsAF/n1uKFspF6u5ROGgwjqsgf\n0C/j7i7fCGuDjiwHGQirPEV0T6wOh4BadazlMSQWFi9yOSe/mhG+wNBJRLkt\n3h3pFhTR/jfs558QWdhlFlSO4c26eO3FivtehvEMe9OyzX7lw/6xLDlAYa7P\nNuu2qQx4+tYNgu11ZWKl5/fSX9SP4pyTDfy13jJHoW+H7tpZaob1gWNfs4cW\nNxBn//DER4hS4d4L3w/3VVHKd1OO4o/Ak3pQiW9wYj0TEGtPnBlBWv/lGYji\n1UvCCFnn+vqRqYBwHr5HhGk0ePtySxkEPwv7jsAUytM2nwTj+UV9CA/gdsQQ\nDkl+kH/CqsZhxC77ORskBKhpKWwJyKYXwmnpKnDJYQMwIRknf/rZ8l7JfVtj\ndqZ9W3sRdR3Ud4mLDuMcsCm5e9a7ZiAx7Npsmr3DBG3dbS0sw1R36fl5d88B\nC5InMsJ3Jj2TLqAUpoKckIVmENOd5XdxlF+piloIPgt7XqL6k/GwdBc3fHvh\nlrYMlndVJQgal9vh42yjoqZSBLLcezZgsfrNwej6KQlhc7I6m0iPaoLNaymT\nTPovna2Daj3wVZe0L5GuRHKlyQmIeKYv/Vl7c20CpVwOLfEZ15ed1uR1YcWg\nIkBS\r\n=tqZ8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.004c9d392.0","@material/base":"8.0.0-canary.004c9d392.0","@material/shape":"8.0.0-canary.004c9d392.0","@material/theme":"8.0.0-canary.004c9d392.0","@material/animation":"8.0.0-canary.004c9d392.0","@material/elevation":"8.0.0-canary.004c9d392.0","@material/feature-targeting":"8.0.0-canary.004c9d392.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.004c9d392.0_1592952995094_0.5532530938697069","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/menu-surface","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"be3f3ee1208502935d1fbc5472f4b01efb5ff449","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.03bde00f5.0.tgz","fileCount":40,"integrity":"sha512-qR7h5gi553NwTWvXatXMk0GfU/pXLUXYXzm2wWwcXvoZw0Tr3XkyTZJO3cdLD/gDaR+9vjHCS0Ui3TN26NKGnA==","signatures":[{"sig":"MEUCID1CFSS0m0khYxrz0r7oKACUuSqMcXXNe+08JiIjEtiAAiEA2M/WnJ5qqQk7B3rTMMi63yxepdUtYTG/dFATB5i0JN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p8LCRA9TVsSAnZWagAAbUEP/2E+VKzJqXTuB4QrxxEA\nJf6F+uGqy5aXsl6ApAA13lnU/ZPL6R3AdfpJ5yrbhnGqakcEED80HXO2tlxW\ntV3pVoNrlddQrmLKnDPAmxV2mZg4uQJXLbGnU+ir2R7CNcHR81gGdqV5lPyS\nmzVXnuB/1w+pywRDCiNqXr0CTE3LKkV4pia0834T0uvwgTIg+0Mq62yaFLNR\nzFfbcVsgYLdlnnYMNJoGhFDOnowXnFmL1iMa8zmExy17AjxTOX6hyEtXcHGQ\nNZb+E4je3Tt4VEHshaWH3vZ9x7IyYqstgRZsXpCtYQ2H7lRWV5nGBzeoLwej\nCslRoJqKlMAiQG/iwux1W1UrtRPX64qtz0IupdHSkTgS8IdUeJEtyy/g0abW\nCv3P5flP5nbtuWn0I9m07dyqJ0zhgYVnss6zGDIi0wOErZ8PTKMCrCJ3fO1L\nsyEG4yUYmxvJQ3ZjDuE8AbFPbLnANGShAFjUO5zdtW3muz/UJj6+prooi/4h\ng4vTPj4PxjGn91SGTA1tFszozzeC051iSil0A3HFIMIhc4+R2k6xWu1KvUwi\nMREg0v+kKlV1sb1O87pzo+ZN53OhH8u9QJVIguZDKaiMyt6JUxMlx/mzGydM\nsRJYaauZP99n6csqBPrhL4f4EqaOzrNCL5T2C+WomC23xYpRKrVBTQXguqwb\nOlFV\r\n=ND7O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.03bde00f5.0","@material/base":"8.0.0-canary.03bde00f5.0","@material/shape":"8.0.0-canary.03bde00f5.0","@material/theme":"8.0.0-canary.03bde00f5.0","@material/animation":"8.0.0-canary.03bde00f5.0","@material/elevation":"8.0.0-canary.03bde00f5.0","@material/feature-targeting":"8.0.0-canary.03bde00f5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.03bde00f5.0_1592958731028_0.2283013866534438","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/menu-surface","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"67daa5bcf66f96ac704ecca0b4be2f97d27d7f1a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.599b8c319.0.tgz","fileCount":40,"integrity":"sha512-uWfjxS3wwVZ4y5Wr3AqIgGIfZo4bRQ5DNqDjy3oikUXlQMBbEFpE9k0t4eWYynsR0E4HmjWlj0VWXk6dia35PQ==","signatures":[{"sig":"MEUCIAztyI2EeqyVNtjur+TzcVQEi7nKZNwkOipZ7/08jPITAiEAz4mbjEkYX6phmxxfU3yjCxdGCntgIF2O3IcJHil+ZI0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82nbCRA9TVsSAnZWagAAmOoP/jR+ArN11LVWrwkaLoGE\n4clztUgmTxqYk0opOa+VOPfGr3TkGNO8FUi4PheF2c+dldBCPBvbIhgX5ndw\nEOqFR3X4FeMwDqIKD7vdKX1Q5MQwr2CcGNfhm+G93CWlxnzG0WDM+9Q3ICfC\nU7ZYdHSEwjbrmi1p1xPzvpT+QYSUE8RFXhjbPA/MyJEDgxwIL6lwxfloM+MG\nbO1yclFzkWwX7yUM3vhQNC7xuLLu5dS+ZHoRdBZDJavb3e+BFMc2EaiXzZnD\nMTKkQnidvOu4zuQ4TOF3JAKbgR2GoHLtV/CIAJHkCxV72hdOk17Bu3bpo2xg\nxEwmPI6Mz0ZCQsFY1eVlRh/BaloV9RaBAyvUmeuUQHZS5KO+RVlpflhoKcjj\nNtOErtoM71LdlBtR0riCMcFYwZg8j5cheP/UuMyldTN7NVRv/n1ljNsIy9QM\nXbKVGFwXZOZODj+0SLIGTxj9vPBCLGCxHvrFM6ODr6DgflVa6b0u3JepZYXR\nj8Bn5gIKCz98SPinZMQyTk17xIKoVyJAZ/VrC1Ne/rxeMyasflOufHmAq50F\nr6YpBkKk3cNVzOcp94UIj8n7FnAEOv5fC2kp70/fqdRuUUZuWg4wqTTJZq1K\n6tZnfp+8KIBHBghfKEOly6sVTl83pxqseFBgT/kLI96OUqVF65Sfsd+H399c\nzWka\r\n=EA1v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.599b8c319.0","@material/base":"8.0.0-canary.599b8c319.0","@material/shape":"8.0.0-canary.599b8c319.0","@material/theme":"8.0.0-canary.599b8c319.0","@material/animation":"8.0.0-canary.599b8c319.0","@material/elevation":"8.0.0-canary.599b8c319.0","@material/feature-targeting":"8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.599b8c319.0_1593010650961_0.47415416418528555","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/menu-surface","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"83412a2af6766e3d9bede00a4690854f22118bcc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.87e3be418.0.tgz","fileCount":40,"integrity":"sha512-smI1A8ck58r7s2mcaNXdrIFBnAEQ1mzgDjayadzlGzB85nqjVODkQPlw1TJWEJNPIMXUHmTxyI/EMW/yjmoSSg==","signatures":[{"sig":"MEYCIQCew6BMJuYJLHgVdX6eidVZGw7H7dARZuhjnojxnkhrUQIhAKiQOz6ZJOt1Nryd0pHRxqXd14jXf6Ml7GjteigpAMWc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85M0CRA9TVsSAnZWagAAbKwP/2Iy3xC5H5u22YimSlEz\n/nSYoYiW+RbZbSGUuqEExmqMV/3wV7C4P2l+29dloepOPzafHJbH5rf1xcoJ\nSFBLXSyDBdoGFiWGufvlLOE13kjjSYH24xP9dYubTxGWu/oIFkT69Bc6C2/O\nYgB6YqOiaqLySjFt2vjTEatJSsFckJbr0B1iC856WMoji1Qw60FcPH0VRp63\nyfORTpPxVoA/f/9zJ6N5Ox91PTAXq8DEA4A2nK6I7UXrz8ZqUXkBmYyBpkwH\nxlpOxu+JpaXF6zGGvQxbYxMQdfVEC7nkSkA5mjNdUg2iG+NCeJ+QeIQNBdsU\nIhpDpckCKV+j7Y+6uAuelVVJecB/nTa61VIh0Ri7ti+kZ6u/EpR7iQ7nv2fn\nVHgeasMhGuIPPIHYbs1CXI0Tl4mu5ugiEywelUteoL59dybsGAZJ9r6MUDx8\nUFMrsp8aEGy85sllk5c4ze5QoIROU5ygKe+14sE3C+q34ppu6ZWQgJ47Y9uk\njh0Aa3lnL/OnVmukj609sG9l4lpDqoHJmt3vVbqA9S5IpbCqGOFeAJmh/H9L\nfN12gYT8AG+eAAUUZyeTHmNUoX2wBItvGGSSlHHat82dzYJpKDjxw1VB4WPn\nWlovO8Z3sD97ZH6X2RhuxUmwpDHSQ3U9SKMwBhDHx2Fhb1ZSimOTwtIisR4X\nlui7\r\n=TqZk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.87e3be418.0","@material/base":"8.0.0-canary.87e3be418.0","@material/shape":"8.0.0-canary.87e3be418.0","@material/theme":"8.0.0-canary.87e3be418.0","@material/animation":"8.0.0-canary.87e3be418.0","@material/elevation":"8.0.0-canary.87e3be418.0","@material/feature-targeting":"8.0.0-canary.87e3be418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.87e3be418.0_1593021236233_0.9719574103387254","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/menu-surface","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"3c6560dfce228a4fad9fd71f10fc83bf830ff552","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.035cf2a6f.0.tgz","fileCount":40,"integrity":"sha512-90aiNPXjUrwDBvZaBp0ioMVTbWhmzpFnC8ppCWoIP1isREOgTHJ/xctW32QQm0ofOZIR5mZaUVlHrHjTOmrnPQ==","signatures":[{"sig":"MEUCIQDvEX2EhsQ1QXiucGLqRZ9WEyUm6L8T+3KTO23qOdICTQIgEubmIgf0O+6l0zHJ7LLxOxwP8Bw1DaYk+Aqkimwnezs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe853SCRA9TVsSAnZWagAAhuUP/1N+8OmrYjB2fhmOCipD\np+TamtdWOWtKNQnFvnBRXEE4PjzEnOrmgEgqNAedLo6pdUzEiuAvQBM8udGt\n/yvt95P7xmnc/C06CaVz4+fhi8tSPmFsVE3DM9w/ntiOBa8ZBRc2IS1P6iFA\nk3EWQRmyZPZe/V648DN02h2P6I9GkG9RMifH3pdzNm+XorSW8h9DrKomcy9X\njADW63RdYVtzOKn1jhgVXCjchyiXnPUHC5OULHikq3BX++aseDdSs884xufi\nn4p9DIa0/yJbFytKxUI9qYWKvPTB1tX1KGzm1M3j9zRzHZnynlYP9leR957k\nXXX5wO3cUf8KlXVLIVPP7/nwvAGC9I2Wiyyb3fuOJXymgqLllsxl4Hj3HybG\nBb/SLI0RFoLzz9/qm3DqQBm7a1uGjcZR/F1LZyo5hqcRny+ScQuBHP56nMz1\n1+2icO8Fab81BJzSxOM7BpbvxfcI8DPwOTLjIl5gEvYtrz3EOQk7AUp2ssR7\nTEFkJZDA6GbVlg2ZwhvwEKWuUMvrur3fciX3z3N7d70R/0mogHraTcKAqpDg\nmSsC0Xq+cmMeJ3AsN4rJYKSvlHr4N1Tz/O1TAfoY5tTcMwmX16NvG0myfVDc\nzgrrUgX6VLSjJFvEb2VDV9WJS7/QQ2mqnY3BEVpfN+RrObnypuRtbhGpy8Qv\ngWpr\r\n=e/g+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.035cf2a6f.0","@material/base":"8.0.0-canary.035cf2a6f.0","@material/shape":"8.0.0-canary.035cf2a6f.0","@material/theme":"8.0.0-canary.035cf2a6f.0","@material/animation":"8.0.0-canary.035cf2a6f.0","@material/elevation":"8.0.0-canary.035cf2a6f.0","@material/feature-targeting":"8.0.0-canary.035cf2a6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.035cf2a6f.0_1593023953657_0.756287783647607","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/menu-surface","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"8b39e10312d1660b752edcad763bb1411e5966cb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.2fed2c12f.0.tgz","fileCount":40,"integrity":"sha512-NuwB8JdA3jEh+DYyalxHeAaHn7ssg1rf+qImC2ZylGwe2QIFBpag8GLARU/cyzSTS0tanZMMgyobzFdDvz2f1A==","signatures":[{"sig":"MEQCIBX2YnZ14mxH4Wd2d7UVLrVPDFhvTHQ3Ug7ZO9CTipD0AiBiWTmH/aDNg0LkQdjyx2I7y3WFVQ6iRyFE75lNG3OaDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QLRCRA9TVsSAnZWagAA5y4P/iD/tCE/1dM8hcpmGFI+\nrGHWPa81ziIdBGgYGlV6PLlHVKqsMQOvmH+to5Wmw3MvV/1DcuvUzuXklke2\n9/AT1J5Z1i1tbNvnLlC/rhy2oHolt7qbftDDmaT+xMVwZe6fAzlvNOfD2HMH\n8dSVqZAbJduMvbHSv39PafO9htUx9Jpx/XjP/Ys9ROZ2eGLky03XjoVha1Ww\nCqpRg1qS9iYByZbnBu7mXM87gXGsHmlh2EngcbYbqGPMwIKaRbJUrn6eAEMn\neqFWHTPfLXlxRWGhktoSPzNqFiGQyGvq8MFSwmwH6HzFRfoY5pO7bAVNwMj7\nPF3QF8Kfc61TzBW4s+dkxIvBFnhiGbjC49Wb/ZNH9D9llW5zwa8Qp2PE48CA\n9uilVT3T8bYdw8/73Cj5lT7BuXui9b2f80PfVYSV76OBChpJY9cxEHevcVzM\n52tzAnDxuCfbZgc/AG/eo3fwhXxMt0oh2FSilDk5dPkfhhOcRYXZGRx8uYeQ\nhPMzMwi7JSeIlnADZL3LzNd+LVcDcpU90+L9qIK9xpTMuIgIRU7CIlv3Imxc\nm6T8uabXTgV7CeaUrYOi9Ngox/eMKwswDKA17vmxVqtQFVfuNHg8Nx/gRS0/\noSdmqcTy/13Mg110CZrjhv6MLdyaJYDybsdl1rh86JODPp0wGz9GWM1KJEpd\ntsYo\r\n=jtY5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2fed2c12f.0","@material/base":"8.0.0-canary.2fed2c12f.0","@material/shape":"8.0.0-canary.2fed2c12f.0","@material/theme":"8.0.0-canary.2fed2c12f.0","@material/animation":"8.0.0-canary.2fed2c12f.0","@material/elevation":"8.0.0-canary.2fed2c12f.0","@material/feature-targeting":"8.0.0-canary.2fed2c12f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.2fed2c12f.0_1593115344932_0.41351799776387455","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/menu-surface","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b1260b05649790b1e310171abb259b6cd75a17e7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.38197b443.0.tgz","fileCount":40,"integrity":"sha512-Dt6RUl64v+kBgG3ZYvG+LmTrkv5wIu28ae4LNkxg0nRsFrGIsq5jVIU8nQZdwV+FlrJhn3Q1Znb/UBXGpIXcQg==","signatures":[{"sig":"MEUCIQCDPMh8XJ+1hT/1MtFhHP3udC0nOX7iqruNbg/Po3HP6AIgE78b9JRhbNj20EdO90WMdrJCyeuKPfI7zXWMkvyYTbA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RXCCRA9TVsSAnZWagAARPQP/3rNtNfKdZJcLsV3tGc6\nGxGYL1MKFL6rBu9DlqtqpuOksy6B3hjbjmAuneBLuyKkQbg+kC6ACbrBBZOG\nuGX5CfonareNTqL52k5PNHduzeJu3Vv2joBm2+6nQg1XL52Q9WCY3Zi6OBRE\n9/C5f2MPAJpWe63Oz/MgssMnwvFWXRZk8Gb0Ld+RLHJJCfzImRO6Zu3V7SyC\nIVnowrReRfV0QwXrf5det/iZ57PZYG+yPZOu8U3Djz078GjKZDNFOZfKvYk8\nyWe0kNVsZfoCZ2mr5Ft2hx07eGGVjEl7nbpENqZlj4WU8C6uZdn3KwS83EIr\nHByOcntZ+xlZ3JkG768ESVWOdlcQ4faq+Nurv9yDru35WEydFp3VVFW6ZaFA\nlzVY2bSjX1SDusEalYwULafrGCnOu+hCGNMc2nCcqNTo5RR9ollcGnlW6F2Z\nlnFYJ/MclRkY8oiBBF/4WqZPPqgxm3sr4dPwjJC1/Bc0SGgbwOC/XjS7/mMj\npKeEIflY3MJg0Q/+2JDHnnPgT2jtr/raePlqQHPMkB5l0d5r1cPl0XwUEUu+\nGtYvmEpLOMc9fjEDwNNsRlVHdLXPaD2P4Fk6Uha+t86lpgnUccc0dJagXL85\nZaVGTZ/1YfjWzypXHVMMJnuBIlpD4v3mg/c2K1S1GDr3rwKJVIwKdWkoaJzy\nfV2O\r\n=enQC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.38197b443.0","@material/base":"8.0.0-canary.38197b443.0","@material/shape":"8.0.0-canary.38197b443.0","@material/theme":"8.0.0-canary.38197b443.0","@material/animation":"8.0.0-canary.38197b443.0","@material/elevation":"8.0.0-canary.38197b443.0","@material/feature-targeting":"8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.38197b443.0_1593120193796_0.1600475951240019","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/menu-surface","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"60bb5e95e42413d410df1400b033bf4674d1c12a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.69a35e80c.0.tgz","fileCount":40,"integrity":"sha512-G8mGixt4vR+kNUe0/tFgRY/TOrAkUtcY5mdZo+b9JaJ9H/TC37a6896gYOhl25fs+g69OfNXBDeiFl/ptaULrA==","signatures":[{"sig":"MEYCIQDnSKOwlLseIcEn3Q9u6WDj2/R1T8KP933xc8mPAMXN2AIhAN6a1a6Cvoh+76wJorH435ID9Bwv85KjckwB6kf3k/7x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jLICRA9TVsSAnZWagAANI8P/A7rdWaikNpp7rObmGPg\nk+FNYdXxF9xAgW5RlVVEbQeCBwcKIfRoXk3CRHxRDBqYB0LNnLLW4VNRGGgD\nZDjMaY5RAF6fZ01dh2OTGQwFlhe9CVrFSpkra+746H6kjwGIs642f7UzA6gs\n5E4BlaNjwk4l6IgEEfamt3BYxcIrJG3lRC3+xZpKMCsEmr59OHMb8koVJcb8\nVlYuS9RbJ4ETdob1c1XcPfdPfqrZTTf7OVB5+8U0X4bkUCt2S8YQTRQxqqhO\nmGufXwA2pCE88bfmXBnQ6eC76PIfUww3epfDnQc2Y20XuzyEVV7nciD7Zf/X\n+3aTEAhy533wNVIvzdto6wwDvUPqOQt3QXjobpj/Ey4jdpWYfCa2cCiDPCps\nLvfmaUni2ZMWCxO8vol3k9SVJbG2h8l5G8+ejoWsFxpTrI4SoIGkrbm4/ONe\nshnrHzChOqMZgATfL3ueXKod+AYugBSrTWZYN4r8dCF8WjKRh0isj4a9DEVH\nkkOZ+2FxAZ6CIASyQAsg+c+5KccfXFr+O5aTuJGsWSL0JCguibnp79855cHq\n9LWgfuNmubriogIKdzUqDTGcfwh6hcd6Lq95Vc0xaSMxpK1EE16Yma4K97YJ\nT6L6HKmfHktYuNTtvx6VFPgSTLozKoyOIPTObB8yo+9psleENI27e0rpCDLv\n4aub\r\n=OwCn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.69a35e80c.0","@material/base":"8.0.0-canary.69a35e80c.0","@material/shape":"8.0.0-canary.69a35e80c.0","@material/theme":"8.0.0-canary.69a35e80c.0","@material/animation":"8.0.0-canary.69a35e80c.0","@material/elevation":"8.0.0-canary.69a35e80c.0","@material/feature-targeting":"8.0.0-canary.69a35e80c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.69a35e80c.0_1593193160121_0.2678514566021757","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/menu-surface","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"87ffffd8092cc891905203ba7de4aee64fc3f7fd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.df7154fb3.0.tgz","fileCount":40,"integrity":"sha512-OMH0Hgfj2IqwjvH8OvJkvNE5qPdi5jH3Zaya2BXx9JetGWS03rEiEhPH+DbGZZ+xf1D1BQFAIP3U/zTc92FYoA==","signatures":[{"sig":"MEQCIEYXBfvvoukTjAnIanbtR3IuHZDWFHk5GoWlioD8v5wMAiB1Ls3u+OTNdGGWZ1GsHGBQdD2Hdd1wlOlQXL70uwlZhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9ju3CRA9TVsSAnZWagAAU5MP/0N4mvQ0mBs9sXXhkp5e\n2Csl0Ms9adbqTWAs35VkTKGI7ktBXhFe/yXuTJJFy9CDtGYgCnXXrlCVMYez\nyPCcY6RH5fsmageT1PqxPyqEXpnSx0NWj4elSFcLJLi2cBmAI/kaRuXjBwnr\nPALUSP5SMmq7CUtXmZM5Z0VWwF629kcp0QECRQPAMcfk+xmclIsU+1/e5D0f\nrBC6eViCq8YQnjCx5wbi4s+E22xbcn8+mnOxjd62RKme3cbe7PPcuR8YIAp7\nLqyQkBUJzSNc2Ur8YTQ5Q4hAWm2N9U6ZuA7nQfjsWC4QsOAqQfLi8IzBTNkM\nK4dLVRAvjdCvw2DgjBewWScFwMO5V65UL1fiPAQV0yYSi7BhhgIdwqejzftm\n2mgiBQRKxJ4WdibX+bHQqo8E0Y0/gz/tbFvCOuP5wCNWxB/fNqc7k0N0BcC/\n0R9knaMG4tKMFWbQGLmItbUVSG5GxdXgfgMQcl8oGf6jjjjWDwrrTQxSpR0j\ngBQAEAyA5uvp/3wOunQqIHw9y5zE4TLKx3byatujjg3vR/LtUs+Scrq3lP3p\n8nCXMtkQbyW1BzeTBYbCaKJ/4RFagzxu77kdjR4inhnt6jyswVfBBte+AGEH\noRro9DI5K7KD3iAs2Mu8Ry+UKJ5+51vpa/khUKyzED30Db1vhfbLyiyDrGCc\nSLDG\r\n=YJ5w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.df7154fb3.0","@material/base":"8.0.0-canary.df7154fb3.0","@material/shape":"8.0.0-canary.df7154fb3.0","@material/theme":"8.0.0-canary.df7154fb3.0","@material/animation":"8.0.0-canary.df7154fb3.0","@material/elevation":"8.0.0-canary.df7154fb3.0","@material/feature-targeting":"8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.df7154fb3.0_1593195447151_0.9853317307519152","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/menu-surface","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"1ff85170dcc995f8ca4d860a3292c6b64a131175","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.d5618602a.0.tgz","fileCount":40,"integrity":"sha512-SM6ugXmizz/jU/PBavq883188D+pxSMD11n/vfyGkXGcIbMlEkW0AH9xKL3BhsDM0Hgz0Oxnr0pEAXklmZfnBQ==","signatures":[{"sig":"MEYCIQC0kIAXU3+GU1DVmmpY7bOT7RojcL54zHZfhj9eUc+f2gIhAJiiMmL+xW8T2HyJ1EaoBaAV/Zbyk456U3fQyyNqEoue","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9m1HCRA9TVsSAnZWagAAwigP/1I73kA4eA97sg2XkhKq\nehjbDiBWv/8dIMfp8El8T72Fw5/kQ6ltB96stylBPrFNA5gCfKZMGh7IkAhb\n24ns3TJ30nb9gKB6p6O8fPgC+RCL/UFSJBP6h8aG0KzIVttlB1xREuZECw2u\nCyHitUmQvrC0AzZqGaxha1kuzipsMNElz+s0wHyZdvleMO4D4pCwkhBzm2P7\nW33fqOtIEF7ni1iP4N/luOgS9l/0ZzOhGkC0dkmUXhIW3NgQqHANX4wr4RqG\nENn8kWJKMo+An9RDm3FcLYyZ/DerzYQGYpFRcYCkpWmTQX+kG5xQg8mLXNyS\nN2BAea916LT33QocL/Onfw/t+n24sekqQob3nT4DuGi32z6ZSqmVSqoD77Al\niBoLOv6zV8uFCeEacGdv00z1/g/XsOqgx9UCDRWBfalax9iewgjJP8/VgVw+\nWKrttN1SnnoSBdKLow80fI+1obMFgpj2uS87e51T0LLkPPnLI3ssqO77202p\nwQkfTLpfNH/jIaDs+gYkeiexu9DbmPNC6LeM9XbmRj48zcOc9Tlp4D+Hxz2T\nOQPXJ+2Ma9VuYOBHy8tdh0m7igDjAfe+tcJB7fDYz687C4nJWRvQVf4Efjug\nIwxx9gzol0re/38fQPhvoG9U2QI9RzwjgnRpN4hMue/qScwsbeOXH77qoGVK\nl724\r\n=kllv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d5618602a.0","@material/base":"8.0.0-canary.d5618602a.0","@material/shape":"8.0.0-canary.d5618602a.0","@material/theme":"8.0.0-canary.d5618602a.0","@material/animation":"8.0.0-canary.d5618602a.0","@material/elevation":"8.0.0-canary.d5618602a.0","@material/feature-targeting":"8.0.0-canary.d5618602a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.d5618602a.0_1593208134653_0.885582521669509","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/menu-surface","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"73698202117665256d1daf2be4e625679a742d2e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.e590b376b.0.tgz","fileCount":40,"integrity":"sha512-RfY3U6TLioyFFZzMaf0YJieWA3+ZsI1ZMbbZimF+HlXsY9JWWKzqbGESDf1CmC2BDFq2f+nI1z4XqeKCkgv6Pw==","signatures":[{"sig":"MEQCIGHXcZ2Mx6DAGbR3S6WeU1s2OrnMp/3x3lJPzJ3qT1h2AiBD9nRW3t7zoELUb5u4A1jwDdoJ5LbVAO5oDYQpV+CPog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oOgCRA9TVsSAnZWagAANx4P/A3OysfwLfMEz149wb/g\nZ611QWmjrq+NLafgiWtPLvmu+RW4b69w0jt5GISOX2rTwTy2MuyRLPHxHV1e\nxHyHEpNUVbpzFgA30ibxVtswunxoAI8A9mQNb1rRLivJEIQFeC7YYfRsVlRI\nx/bPJghEEgc1tI3EsgGDxsNRIkaV5drmosgcxixULnV/ARcIyuL0TvrQisFn\nhV4hExgv2Gv/pezeop1tidkekNf1dpCiczyEDlbcokoK/17bkw2QtGUJ2r0X\nsPpxUMGTlZMIcgh3Cm+6i20Lq7rXV2OA6thMQn3uRhydYgXY+VaeHnq92ljV\nkzGfCzd6asTTeufzd7zIzQXF5FWWW2Sfy93/yiuSR/YOMN2a5WTXJt1zyYMc\nUO6wQtvECg/fHgm3kNsqSvSS+jM8RZP1nWvpgj8eTHST0hqvaszMpFhiUV8i\nvuZowJ5wa9rXNSHx2r4g6JPl22kWNFxO7XK41OYDYNOCLc1EbZWEFhGfEJU7\nVoUTo7NU9vISNAIIOEPkA1Gt+RprlzK7bVm44i559/4b5zBG/fJebeIjis14\nqJvIYJ4yr1LBlVEnpqfmtN5rl9lhLCcG7d8+rXtfYF3DidQiP/EQDrlKA7sS\nvdQXpNWCfPg4LSY8hHzQm2huRy+x1BFh+DMuVc3gpFUIPc/pXyk1C2W9pvJP\nhCOA\r\n=o8xL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e590b376b.0","@material/base":"8.0.0-canary.e590b376b.0","@material/shape":"8.0.0-canary.e590b376b.0","@material/theme":"8.0.0-canary.e590b376b.0","@material/animation":"8.0.0-canary.e590b376b.0","@material/elevation":"8.0.0-canary.e590b376b.0","@material/feature-targeting":"8.0.0-canary.e590b376b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.e590b376b.0_1593213855826_0.4080998649863412","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/menu-surface","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9330745527d23f63a95a18c5b77db5a60f8b8e89","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":40,"integrity":"sha512-VSbxsCn6n0VTNESlhEUoyEcuKspkvfuj82ljaNJzsrqAXU6i6ukrdHU0W9egHSyDlqaatTDkokd3vB5XWkX10A==","signatures":[{"sig":"MEUCIAvsLgh8kj7OGOP0Xe3fP8rDXuy1vVY+MA+DJhzIJF4TAiEA1d4qaPnx6Q5EJrvAVnACZYGal6kSeYlNw4NmYdr9wtY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iHKCRA9TVsSAnZWagAAEwkP/0/5d9KkXWCrotOpmjS3\nDDc8HJcISr7T1rlfalzYg1t8amJdfgJEWFJKtz4O80O4nTb5n7TC9CWn1mis\nozXSfbZXzdt0ecoFB0aRBeEvMoXcFtuG0kftNzD4YFCK+ABiPHDclzH2SQKu\nnf0uPvgiMh1MdrBbCkxusvn2CJevEG3mIheOxAShbWcNgjMvzm1EJ2t0z0fp\nRkMwNMOq9AZv+IRQe2jmyeGjwtsa5xY8LL1J59YdV2kT2pjTOcFeYbrxnTHj\nq2fK0S3uD0dlfPy+H+adT7OIpeOO7usgvdNq6Zt0dCPAMXCehcSkTf3kLXA3\ns1PZZcJGu1zgjzFmVPL6cuWk2E5hs8aFmh81JESdK1J4U47ekE58KbxNgfbT\nBEsxoeKaXfMAEuZM8qpUyyoKxfucOf5OdtWUfwrtiXhWEytoaVlj0y1jZuHU\nktoq00lLCeNPtfFcKszKCS10A7F8HXg6QY3dVJugrt3XGrzYZDcpaKd0tjxV\neSjYDB24SBIx362TtDO79xJcxnX0Au37nE0peUXyITgqmhcl0XcoOZ5orJgn\nr2Q+8W7s8/RoH4OL5kTWUSayQN76mKscjEeutGN19+o1JLbzr1Ajc7skyR76\niWy8NdogZd8/o3hxp/cTYrz+7p6wcpqXuC/dqRY7f52PhcOujW8H6pvA4tlC\n57B0\r\n=DhH9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.0c9d6bd2d.0","@material/base":"8.0.0-canary.0c9d6bd2d.0","@material/shape":"8.0.0-canary.0c9d6bd2d.0","@material/theme":"8.0.0-canary.0c9d6bd2d.0","@material/animation":"8.0.0-canary.0c9d6bd2d.0","@material/elevation":"8.0.0-canary.0c9d6bd2d.0","@material/feature-targeting":"8.0.0-canary.0c9d6bd2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.0c9d6bd2d.0_1593450953600_0.19537743708052546","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/menu-surface","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a36c5c3b703e6019356dac51a2039444316494b7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.c1fec4246.0.tgz","fileCount":40,"integrity":"sha512-IS/K2qlx4O8sDzkbQ/jdeLEz2Ee3fFBnQKu4/08iWymxC/WmLQhsf/K7ZZe8KDsJQSFU07GaOpuZilqqsErsZA==","signatures":[{"sig":"MEUCIDq2EVc2MmHc4KVjigJg1BFBwB0nPLibJI6M5J0iTzlOAiEAvPjOSrGGZYN5hS3MVmKV4V7ywnriy/kAdc7EtlqCROg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iVuCRA9TVsSAnZWagAARIMP/2tGIKHUfJbkaOKwPKkE\nPjREKbVcCtBAkNwvnOABtIzt9DezzfHWf477datm56vSkcdMp+ULpmuwNGhZ\nYUtSwNhLba7aX6YwkO24Chs6fNGg+VIvQH+Oo5TFBVtr1+iAcy+VypQahHCb\nCR9zal6vEKF/qZD8FwkJL7qc84hMjGPyfu24qWVpbTSYXugIvEAAwoHzglor\nxV1XvvcSKjFQefek1Mtq6LUGXKnjwo8Ok1FqckqJD+pSziAISQlr1+mP2+zJ\nlemgvE0gYn2zhKGTeyQl/qDNvydNmCJQR/4vre/vIzazJumtCL0oqT/9LIkO\nrOPCzxQBLjRuwgXWTXBPOwGRAu3wjh3puC1EFNqmsqwcWjfRm9vNnc6A8QAC\nbul7ctQbF3iY2azryaAhMaEoc/wF3JIQnZjiNFqTjcUw/vmCHDDSTsXz7zt2\niCTxQPNcNrTet8RPcMiwNek9J7iG/tscfLZlT+GFvZ0ZJGTVV3xk+1LV/0+A\nEGi54jSphP9WlYWBgYsECi8aeKuohQuOhJQsdDrApBzo0AWqkdmz4eJeEiPY\nfIU7IzyY5S//Bca2i58N+s+2nEzqSjpPOVHnjGLxtYMP+ymLroFxKLptEVRw\nSNsa3869yuDYMv3h/IG5FeqU+FmvcG0b+2WgyT7y1zg5kXgoVEx3/O+0Y/IL\nW/Xl\r\n=+sOw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c1fec4246.0","@material/base":"8.0.0-canary.c1fec4246.0","@material/shape":"8.0.0-canary.c1fec4246.0","@material/theme":"8.0.0-canary.c1fec4246.0","@material/animation":"8.0.0-canary.c1fec4246.0","@material/elevation":"8.0.0-canary.c1fec4246.0","@material/feature-targeting":"8.0.0-canary.c1fec4246.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.c1fec4246.0_1593451885717_0.9796310864230455","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/menu-surface","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9ecf484212ad4a32a5498a2ba141574156728ead","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.c678a9d34.0.tgz","fileCount":40,"integrity":"sha512-n12nWh5322HMJI1zMeRdkqgayua8EV2sRTrWlhY36q5NHTxAX0maBY9WlG4OPtQ8j/aFMUAM57LYwzAaf/mj3w==","signatures":[{"sig":"MEQCIBiiwrv+lASr8ySxt/qv8u15uLDgM9zKuNuT8rq73WG0AiA7yP0ZplQdEojUW3gFsl+ni289sc/iBDkcpNja0txGxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+io8CRA9TVsSAnZWagAAsoUQAIb/o8Wi3OLfapvN9qal\nCbdXoz3sypjb8HEnq0BoMy5o839O6R9ZvwC4kluPqYFRRVUBrwSxg89KS6sZ\nb1k0DDOGDukRXUXpXRFjt8/WKdNvpMSQ4RZJ8OczSC8NjtO1Dtl6Qw+XRwk4\n/zLmgj4Fvo+G/yQB2pMznwLQ7mNziy49Tsz4yaE6yah8b/L0eFDIz4ZTSkbw\nF+xoY14U0uM4myIVOfFQoPt5WA2+MGbl5sfmVE15BR7K8t6pTi0dG4hJpmfk\n9EGXiCR/5gbJwHh+OxO2NlePN+F9PiAoQe/hSwzjQT/Ulpuz+0w250WE8afp\ny4fKV8h4Qm1/+9Kgoy9Abhut4JMHTCzYJ1qBnIp/cxtQfokJTbdlvGXuavJD\nHNC8OzLZ2/FJnyoY8LLdXsNzTQuNUED4elS2VM3HtOfciKY85XE0C1f55y/S\nf4BQgcr6/M/a1hsiXdV7rTJL45szkVjLc8OE/8tqapYjoDiWfRABRMmLK+IZ\nG7l7Xhp7YOSz6KykxC/gqUTEYcypfX7hP3I/MUy8HeE7ppIgKe/J5lEkhOyT\nMiGZKZFMFGHtLPEv6LO0sPHQnd+HXolumMOBdmAMDwvYeR+dje+VyI1ywVAH\nojAFYul5QHLZlQdWqcqWF8jkHW6XRCtYCjB8XCILaoPAzskkxfApOg83FJVC\nHJVk\r\n=ynfH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c678a9d34.0","@material/base":"8.0.0-canary.c678a9d34.0","@material/shape":"8.0.0-canary.c678a9d34.0","@material/theme":"8.0.0-canary.c678a9d34.0","@material/animation":"8.0.0-canary.c678a9d34.0","@material/elevation":"8.0.0-canary.c678a9d34.0","@material/feature-targeting":"8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.c678a9d34.0_1593453116140_0.4676808727359647","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/menu-surface","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"3b4c840d1c11f1ecfea98b843a31bb3aeb412549","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.521afaf6e.0.tgz","fileCount":40,"integrity":"sha512-YsrvkmDaXpw2nJ7GYO9BWrRQ2/9Ylu4bNH/X5yq/8w6kro4Tj0Ep1Vp6yYVZ4hVRuGDImbQp2+9AMesr4Q+j9Q==","signatures":[{"sig":"MEUCIDawzKBOZlyMhFXzdz1N0d+AHRaWKAgRh+GI0cQiF8PKAiEAk3kOKI0FhhTm6TaoEZLxuWsA7z0IB2xrY15BP8RQGtY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1TkCRA9TVsSAnZWagAAX7YQAIb6ox1WmG+W01IZE0r9\n8S6D+RyNC3K1p7KxHlQEZ4cPCw/Ex8o5LKMJzOSGdyPcJA9lgmp8FZGKXXcz\noIFJQi5TcXukDhWaneGfCJbF8Pm6co6gbswVEwU77KuvMmPwAjgtha7C6fhS\n5raaAk7MZZR5CRzy5mhf155vjteiqXyqCkhl/CDElcpmukc+jKtyeipP/8AQ\nnfFA9M28uZqJUMKdVtQ4WceVSRvsgZRAZIRSgoPVy2r+icY7kDthQyKCk6Mn\noYoMoGe0yCOORhYkH4HiUCN+b7i5FeSksPIVGry7/CdXMYTsAhGj5jxCTzR5\nustyKnhwe1VCvkh2d2I1AmXqqwBPoq7R9BsMukBj/jruRUED+G32X4vwGDzb\nqlR9gNOVLGpxFddCLUuj1faaTrQeefPobBKDsfpsXNETq84WuV5aDjVz5OWy\nZexXVbzYbbP1TWb8VsFjffnqNWujZwMnOygTpkRLGqI0YQs4TE8kY37LlO/N\nbEYh9yHiRTg1hEG6Jf+KnDZsHoggEstW1N881RnLZ0ECER1ySmpy2hxM8Lwl\nPWLCP5gxRdxLt41vCiMwrWpw6SOx1VF3L713JnPuCRUGdqBb0ewHVC1cRcsI\nxaLN33iwrBUo5Zc4qusfBFsrssGURUPkavyHduQ50Yrf+BWfZHxOMQSyQai4\nLbMQ\r\n=YRaN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.521afaf6e.0","@material/base":"8.0.0-canary.521afaf6e.0","@material/shape":"8.0.0-canary.521afaf6e.0","@material/theme":"8.0.0-canary.521afaf6e.0","@material/animation":"8.0.0-canary.521afaf6e.0","@material/elevation":"8.0.0-canary.521afaf6e.0","@material/feature-targeting":"8.0.0-canary.521afaf6e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.521afaf6e.0_1593529572241_0.5547656782476418","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/menu-surface","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"533903c3b3e1007a85d5323fa875dc2c9746af6d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.a2ad48839.0.tgz","fileCount":40,"integrity":"sha512-lPEjXNTlWg+k6XfqrE4zweX3i3BDXfXsZUoapW2lko+MCweWNz0oC3k1KHybX6O6nE9USdRQDvMEMmI5Eht0lg==","signatures":[{"sig":"MEUCIQDSlQVmXo6GOGNOsFLJ/D5tI8SKaSItY2SbCX+IC0XAbwIgKyUZzwkDoo/iKpoELZ89x3QWLawZUTToIgmvMchuyuc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+488CRA9TVsSAnZWagAAhjYP/j19qR5/MjCxiIoaSxEu\nkg68YMwh0hGSDTeGha2I2qi7u32Ce6K08yM7x0N9BdxR15kCk+x6Sg2wLezI\n/KZmH21aSSHTpCOeLcP+0rtLJFRw4pqnI/dVm91R+x4ftyf3QDb44rLsUZIg\nScMKWCdG8M3vSZG4XqIovk8GRGOK+ohvt77ur36JLJjwxIdySGJhRp0OdXDQ\n0wUqf3ThvjICQhUxVCIMqDVfwohAWv/MZGM6rwFg+SHDRawbde1BAvoRO0r7\nSLfv0l4ji74I/kwuCBIBDFYTDg3DiJlKkOnljazNKQ8N3blfm95rTmvivLb8\n8dhSWNMhgBi6mPhpfOH8+JXJpoQEdhPDcxbEbE1ap/0mD9brbZmynrrsmEnG\ntXZ8dcsc0QETIKD+bAoVC8I9AYuROwooABWK85i+seyjlYvLYF0dKBfjUHL/\n/bxBuN0X+f/qb3G+4LOwEzEfFzyyxmxUKB8jKlAWO6DiapqailXDcwS+81wj\nVg7Yy7DIOrUM5n7S9zzxfFpV7veAZVS8e+TuziJ9RzHD1YSS8G6QyI+wkzPv\n4hIiqYOaf/EB6OkohQ391gHiMIF3VeCW0XmAUMi64oUufPzpG1l1+c/xK34t\nwSDJpvQ6AhtifE+DxX0MgWTc90I9/d882iLNGGHJAcHm3UFcxJEjTD2KUoDm\nooSt\r\n=Zd0w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a2ad48839.0","@material/base":"8.0.0-canary.a2ad48839.0","@material/shape":"8.0.0-canary.a2ad48839.0","@material/theme":"8.0.0-canary.a2ad48839.0","@material/animation":"8.0.0-canary.a2ad48839.0","@material/elevation":"8.0.0-canary.a2ad48839.0","@material/feature-targeting":"8.0.0-canary.a2ad48839.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.a2ad48839.0_1593544507854_0.3172454440338135","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/menu-surface","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"536e479f88a1cb6f39edcadeaf53a0793ac8663d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.ec2385881.0.tgz","fileCount":40,"integrity":"sha512-y4GSX6VhYn6uaMAWL3gG0PlsZeFNF1bEsXMvtwnX9dBO6lnosYqVjm+8DOn9/muUFbqr8uBa2nhzPGmcUq6lhA==","signatures":[{"sig":"MEYCIQCzzGMfR52Xg69tqquuPUOjj4NTTKUYl52bYkAh8c7UoQIhAMPMY6X2gZ16LuQykxjaCr6wylOr76YN2E6H+wvxCUoU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7L8CRA9TVsSAnZWagAAUz8QAKQiEYYVUFl++vSWxEJP\n0FSVgplfp6uX1Sb//1Z7/dSwte3wO3V02eCE8f3oP6hWuigUYaL+ZKdgEFHr\nkcgZbKG6paqoYwuWDjspFABX41N8nc04jAY4LaA4xZOSqfl+LhlKOfcIUv2N\nHULvb8AeLhm/5Za9LJmoKyfWEb159h+oPPQFhm3KlcRXTVaK5mSo3f99Ccwr\nkFYY9Wo8QBzF2rSD6zhgMXbkpXceOc8m21CkoVTJEdAySfXkICM3fNw9BlZ3\nwy2hSThFRWAvdkpYgJfrHNdzBXvP0gkoEYQ/2pVm+feiil2ifjqX242uOubz\nKLO/zi6Ac02yGv0BWp7oct5Z95XktD7wVlQk70nbzbX7gQhuTcfHJldEjmWv\nPoebDWJ903sc1q17rwjf0qmK+dQkX6MZU+rS0qv1SgpHH1lyo60Dmp4r4efg\nQilw5iFpfV7LOoOpK8O6tQq69nGcgRLenKF89m5jU2yVF9c3LEK8sI1qjsRT\nivvFzXKq3Zp+gCPqblYqfcbUFEuHLiCFPalau6Pg5imF6wHHoawJ0K1b0GfJ\ncngzbRCcQ0oYnC43+uOyXOcMnuKJRxvLCswZdjtG24vlXyIAvCzNqwfeWmKI\nv5KVN3fwAVc47APn/TSherHzsfCraWcPfhtgmHp1H9kDhTKmXSPt3Q2S0Aww\nfEQp\r\n=XjKR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ec2385881.0","@material/base":"8.0.0-canary.ec2385881.0","@material/shape":"8.0.0-canary.ec2385881.0","@material/theme":"8.0.0-canary.ec2385881.0","@material/animation":"8.0.0-canary.ec2385881.0","@material/elevation":"8.0.0-canary.ec2385881.0","@material/feature-targeting":"8.0.0-canary.ec2385881.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.ec2385881.0_1593553659322_0.5725372498335171","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/menu-surface","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"fa73ff070e268110b19307d45af187c1aaca20cd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.610c26c4a.0.tgz","fileCount":40,"integrity":"sha512-zlIqfZCZpj34YdsfQ6rnCoxOPUA1O7rKoQ1BIws3DsNLp0CQGpO5WXgxoSVZCNeliLLVy26R5EnbbIpkFQYFjA==","signatures":[{"sig":"MEUCIGxs9vI5j6QijK/lckueS4Kk70fVOrCHHg9EImn5v1tJAiEAhcLcY2IfJpBmw6ZHwVqrNY6wINjZMQJDuUHi7Ydpxds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KQ4CRA9TVsSAnZWagAApAQP+wdnuv6HQzn6jjutkdzy\nbYLDxV1zizkDbJOICL/VbTNncoIbbcZQwF5xTgdmPg7grAl0ks7SsTs0VxsM\n6ydjxa4mok+m4B38LiTTg0YeqKRcdhmix8dhLAE3wmG3msSnNQmooSgj09Un\n0Rp7VI3rFWCkOVnlWUSDdUXtGkkvXe7V8laIn+2y7D+eUzqbOzPC8nQT7bWi\nD1P5+h/jtebgvh/3Wm90b+bwPfKkJxmI/v2gPE2ZmVBND1qLuxu4FV5YktrO\n5tkba0vNxLj5Wzu3Z/4eG6rZMo/6ZV3HkrSC/GVt2Tk8kGHbevrp54Nl/+vP\nSSRrSSpskSQjYR3D7ad3CjrL2o7g2qeGSWIKbbKSdyNpvxWwRwIPVn77Gw69\nuYl/puLvqDbxlKRIwd+hsnZZWbvymxoUAe99WkAr2FSqz+51Lwfh93HmME11\njC9qgJRtN85nA62EyStR0o6x2aE6Zh+Wfr2gr6IbU58u5BAeZY63PukCMWqh\nn/dcORJ1fu9aA3sIgiqPAYoZ4j5B7L4knSR8ribWLnNVsh6+DHsFFcVyL9ql\n/lD1jBCj6wpwojoQhrC1mNZvSe55vi+vSUCB9IWIs+W72EbhBbKGSi+p2EtX\nK6SfHiTf4tmuIURgltC2MKhfXqhqL24h4FR6TE+UCSgd5X710ktPr2LfDmuI\nZNa/\r\n=ruWX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.610c26c4a.0","@material/base":"8.0.0-canary.610c26c4a.0","@material/shape":"8.0.0-canary.610c26c4a.0","@material/theme":"8.0.0-canary.610c26c4a.0","@material/animation":"8.0.0-canary.610c26c4a.0","@material/elevation":"8.0.0-canary.610c26c4a.0","@material/feature-targeting":"8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.610c26c4a.0_1593615415603_0.001209114831568714","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/menu-surface","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"bbe21ed72c0d2633ac909969b6b54d51673a7ac6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":40,"integrity":"sha512-sMCkvca4Iz1NkkWTntbN29XMQeC6XizkV7lK/KEpEVXPmbn6IVrLh0Yda59Ctxmtm2Ocd8eSnJet85TTt5Ge7w==","signatures":[{"sig":"MEUCIHvYHMa86FHjRQ9TKUp1eLhPGWRKagKzJ/U0hPRIi1u+AiEA79IqleGWdW7yX+8+rM4mm6ksIXcyQ6EqRqEbqYT2YHU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OO1CRA9TVsSAnZWagAAm/QP/i3IFedr1RRYq4lBmghq\nHYn/VT6ExVJwm+RqXTX8n5cbveycc3+cx8aNDHa6mx+4VmYCjF8vqVyEJGBM\n0M0JBYp9Icgd5I4aPBgzVnuXlAaHSF20KCn63wvhXZEyflZU6ZtJBhOrMjlZ\nOnHhyOCM4lLYBIV2RGOP37S//mtFjwI2XcGHeIAog6bEeF2C/p+jXrmS+Ri+\n5ywrzoRG7LTX+2wOfz6sRJS3IK8RVUD8YTApwguN9hyNzBjQxdMIyZ3s1Ot0\ncAe7b6AGi+sHVLaXzzMzQ9YKf9cvJ3Zh3B9r5RUhFPk/adCz45HohaNME+kD\nKBuiwchPiBs+Bt+H3QE7u91v7KqqQ2RLWOfxjj4r7xicsimVzHiXvKZni/uM\nOelGOQHFTBVvib7whTr+dTUe8ZpdsoCGfVdC4NHp3Wo8/DYdoCZ3sISnhSMn\nWNF7pmqcYCC1SFynKQGa/UCZmSBLXXQdLNiLellj1DX7qVWRakykC//49vKO\nDBw3goyZuoXXvzXcte8gmy/7ROKtjYkjZY7OzvjojKZ5f0woBdXvCVIdov/B\nitGTUfyBy5GrOi0Wld+QRgPQPuLvlbZQFVB1cVyplraW1kGlq+hJ1I6pvT1D\n6VUMIlH12d7JIiskNhwIW6cpL6C39YuPdNPZLHR+j7SQB2qI/cGX+RTxHXL5\nmxdO\r\n=amyi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e2ea4a99e.0","@material/base":"8.0.0-canary.e2ea4a99e.0","@material/shape":"8.0.0-canary.e2ea4a99e.0","@material/theme":"8.0.0-canary.e2ea4a99e.0","@material/animation":"8.0.0-canary.e2ea4a99e.0","@material/elevation":"8.0.0-canary.e2ea4a99e.0","@material/feature-targeting":"8.0.0-canary.e2ea4a99e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.e2ea4a99e.0_1593631668780_0.12244301955565629","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/menu-surface","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"88617336a0369cd71ec0430914bdf202cf464fa1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.a78ceb112.0.tgz","fileCount":40,"integrity":"sha512-PRzYXJz/VmLTmAMJMs6U+BRAAH1+Gn36vVAGtFptYFHk1XO/BTrHKqMmriXPsRE4Kqw8BBf6fTsIImvZcqxhYA==","signatures":[{"sig":"MEQCIH1kqkS/0SBxSe17MP7wrsI4bbzdGh98fS0CstYl7VwiAiBHQvMSKMagXmlVoHaaZO/FL/7pHurB0mu66RWg9toVfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OZ0CRA9TVsSAnZWagAARQ4QAI87dvFb4d4vxqQ7qt+T\nmoDJ78fqUljbWxOZLoLZ0qxj7JnSjNJ3h8CMYrVgcZgmNKVJ2LkrainuIIem\n464s3CNqM8UBTAbFOK1k3t7+sEaB5SSqthDl0qsLr0AVsf7z9n87Zds5Diyw\nNH4gDssGDTtjYGQ7opilY4v1JK9Iu5F1CeWqcY4G8g2NhHw+CfSjCtDVo7Xa\n9CRyUzlILOQxC4ORWxYg190iKZRNAhRBalssLgLjXoFonC2LpBHK4kWnGmy/\nLKpGG85u4KL9hREAHzglSUUWyx5t4u0z5tQSYGZtzNYPc9NdbqXTVuDK9CdO\nprxylqEIW1A4bHrlDiQsmJ6sxUY2wfwB9rVnQGNEh5ay/xQ4i++ZPb6K1ZlL\n4yZE/gm2Dv00BkFAO9XOEWEXhHH76f+aW/zQx+iArDdCKjcKZ7EwkKWQ5zbs\nFk0t2owbCDkB2zw66DsGCmVC8sYf5dhnnTxJwqS25MdSEsz/8DExow05okoN\n61JcrQapV42r2OuTtVUOT/K70XS/V+dulGdGviqThx1FVl7WnmQK4b3FeuuF\nbGnFfo2GodKoU+gpGE7BOecTJYafdLLnyz2CFzN5poPFGJChL82+EgebDgrr\nsHIw+bnifGVqxsgWFjxQtykiYbCdYEnla8QDpiP20ua7T+14Vh88gmu/0o4g\n4zbt\r\n=y4NN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a78ceb112.0","@material/base":"8.0.0-canary.a78ceb112.0","@material/shape":"8.0.0-canary.a78ceb112.0","@material/theme":"8.0.0-canary.a78ceb112.0","@material/animation":"8.0.0-canary.a78ceb112.0","@material/elevation":"8.0.0-canary.a78ceb112.0","@material/feature-targeting":"8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.a78ceb112.0_1593632371757_0.3090353711493148","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/menu-surface","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9f788b258c26c88a3852ca1ee4db91e393ea2634","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.b0c456d33.0.tgz","fileCount":40,"integrity":"sha512-K+Y1HPudp0kqe2MfByuJlGEmnod/j9WeSTGaKWR2SjUO75z8CpVeokOx/BcjrI2OuV1ijSAtY/FdeUGTFfJG4Q==","signatures":[{"sig":"MEYCIQCndT6r6ij6BdgJiy/C80F8mEPqHoEsNuHxJsmmirW+MQIhAP7N9bxYl/w5ffSjh4CaTtaTwkjJZ94izT5HN35HvLbQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6i+CRA9TVsSAnZWagAAcvoP/2ur+foldUDirKO0PiJL\nXWETeYrBalkXoaiQRHAu9VYN5tU0VPYi1OEk6dSuREinTEbehvRyfd4o4ZjO\nAQJ9KJJC1cf4cDMAbkCIxYlKojc82QSFThqk1c6435rgSpjRG4qXwD34KiQO\nma7UHW4XUOZRzfL7/+K8xg4Rs1NxNwTo57Pq2IhugDmUZFZ/rnIFrmIPKYoD\nbcpu6OX6q2kozQeywQGF64ANz5wsP33CvFjBdmyayYepezcazAt/SqBoLUY5\ngf4g6eUaOKI+/1ksYzqIT62wtiJOXSwnHEl1xrpq6EH0/EjxHelKLQs+92pE\nd+dqN77Ig28fabYf68FcPKjuCKoPtFy4nadQfg7bnpkQtcGOqucW7VRnm17c\nDIkXGpXi8hVMmjCUPH8O9Z1U8M+CnqLkdPa7wIAAoL2hVuoLWkmdyQTRZtD6\nlhVpnI4Bv1L37nDEbGqjI8JMcmxCSruJ762XxTfips7U29OSiGgB/pNVa3iS\nYqHwGCYYq9f3m+DD2kKeHyYJmhgyW9em8MpOPrsPM3zbK44V/m+L4hPQK2qP\naqBqwuBsftnllmEJJuYkHPz84tg2DLkS3OP2ZPCrLSjF/ZCrOACSbEQczR4D\nxihqFLPqD/1ddxgGfZ4ZXb0CHDs+deb2sdLEv1myFnRaNU751FHX92dB9ftV\nlLp7\r\n=blOb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b0c456d33.0","@material/base":"8.0.0-canary.b0c456d33.0","@material/shape":"8.0.0-canary.b0c456d33.0","@material/theme":"8.0.0-canary.b0c456d33.0","@material/animation":"8.0.0-canary.b0c456d33.0","@material/elevation":"8.0.0-canary.b0c456d33.0","@material/feature-targeting":"8.0.0-canary.b0c456d33.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.b0c456d33.0_1594075326462_0.9465443817628894","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/menu-surface","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"ce6222c0fc5ac80db795003567c9d86211db755c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.2e5711e04.0.tgz","fileCount":40,"integrity":"sha512-drfnK9bu4bj0HBA9qRfc2NA0pCryMBKTM3+NPybQ/Jt+InVSgWtWUp/p8y2l85AJaynFnMmhVRgIXlbfmWKD+w==","signatures":[{"sig":"MEYCIQCzIPRnk+sybZe4ecXmDaOw4/UukHQuODjQv4R6+djn1gIhAN4YC3c9CsghZq9J5f4EgnTOYYXLegLRiUwHwEPuhs6W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfjyCRA9TVsSAnZWagAA1ooQAIEfq1naYBRFeoUWg0O8\nTbhSijcjOsGtTzNYr1O1iqgQwTFdGN2pnbS8UGuYOsd6RqVoWrpds94+yrIx\n8/ZVIFieCAyMR+xVXKHsY3LEEAk21lFAUPIEAZ86qrV9tDMwsPpd53xTSSRX\nuBgH3Wv6YumoAzTZhUg6RfzRpRAwc0jFPALzpxnNhaijLIDKd8w6etOVNIhZ\nUD9y3foXf3qBX6s5s61dSczChoQl2UkOLMTmjxYJ+GQC7LZzXFh6UX+Xkqkh\nOBOes8pYOm2sjXXLh0s/44Fe3w95OtWMRhH9Vasg1Ea+xB2FogUv4gTDkHrx\nZtshtfNm4hmPHSaShnmd+WRcKRDIDeXo5bHxMWxBP8cT9Ku/4aVAEV25Mr7e\npzEcWF4xq8u1v1R7rs++mgRJpjESwCaYqOwHoueuznssTTcLVON7qCVAEChv\nEquThJo4Luca6Re19UMVA7rVL9mymVqE/Qg+Hm/zIbWofSaMLfQnjdK2y4xu\naMQKibznppCAFcRJ6U4fFxl3hOZs/t27o1UOVj7sP32FE3Pjrw/gG6PbOJLF\n/VZhVlxE2WR8EXXeHNvuSKbHoXyB+/irg3mrYBmKU/T7r4xUyrpaSJjLGUQW\n2H89PVWzRSvq+xufisFqHT7sJRj+mSO4jOwbu/avZ272Dt3D1RnBbA625xUM\nW6FO\r\n=GwqN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2e5711e04.0","@material/base":"8.0.0-canary.2e5711e04.0","@material/shape":"8.0.0-canary.2e5711e04.0","@material/theme":"8.0.0-canary.2e5711e04.0","@material/animation":"8.0.0-canary.2e5711e04.0","@material/elevation":"8.0.0-canary.2e5711e04.0","@material/feature-targeting":"8.0.0-canary.2e5711e04.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.2e5711e04.0_1594226929931_0.36186139802132633","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/menu-surface","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"69c97df539bb729e4a885693400688a473b6284d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.811fc5d24.0.tgz","fileCount":40,"integrity":"sha512-eO7SGLDCDS5wp2pab49q67GsJk2dGPwjuowZd3C+UY5iY/2EqxaI5kfA6HaxXQJLH7JxEjpIqR/T+2KdxD56HA==","signatures":[{"sig":"MEUCIQCDkuMac6t9ocBNyPrlFtIXK7dy9eJASmu+Ec/rghvjKQIgPgHoa0Ef+o06jmZ8KCQliwicUkgPmY2mec8pIAnRkk8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf9rCRA9TVsSAnZWagAADO0P/jptB8uuvMDH0yiMuLwE\nW633c7AGEfx9uQ1hfinlCGBMnjLNck3iN6pgD/5BJrQaKoDyP/UOrWjYd63H\np/HE8jMzTKsa1LSksM5x+N6kw7Cfby9mgQLQCo84b7c/ka7f59TgaezIjVCr\n2xBxlw0U5ZRIUWZVDQ0TqtRaDND72ctaPV+hAI6LFboklv1oIoSlGzwobC2h\nWhrzDwF/Cw5wbltX+xTyBzDJEbMHTZYdsuvPL7kdFRDR1Fum5dp18bL40v0N\nPl9wT1Dh6AygH4IXi8YY1DWt48Vcv6iBuSSWfJlDC6/wI3HdkxmJsTfMueF1\n+n/B0C9tSUGvUStcuGPug6UIf6D5ZwvsyCfEegGIbVPHhfCvEuxwkf59IAE7\nWw+dW+AGcQlwn/emr7MCYhgd9ds2ZMsAaHea+c3Z+eEH04SG04T5Hq6g3ilJ\ncohsnGs8+/NbAmYavwA72aI6E2Bax7gpGDqfB2FYOo0xV3DqouLv0tdVaGQQ\nzCddxYoF7srTF/Om3ZzOoPDAzZ/Hc/fQm1040bUt+MUnLBYlXO/u5zvK9DN8\nho3W7NmwVXhUf5HDLnrosa5rlj0pig08jpB454rrrTMRa9kcSN2Lil96s5iX\nr3ENzSbZuYKiLxjE+0GW5H40Z1VlhkKpjT/4mdsfYGCxZiGiUYsZWzlEEJFx\noo1A\r\n=hmX1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.811fc5d24.0","@material/base":"8.0.0-canary.811fc5d24.0","@material/shape":"8.0.0-canary.811fc5d24.0","@material/theme":"8.0.0-canary.811fc5d24.0","@material/animation":"8.0.0-canary.811fc5d24.0","@material/elevation":"8.0.0-canary.811fc5d24.0","@material/feature-targeting":"8.0.0-canary.811fc5d24.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.811fc5d24.0_1594228587093_0.2699311545907599","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/menu-surface","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"31bcbcf7d657a6dcab9e0157890865c3708c1938","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.6ed717ddd.0.tgz","fileCount":40,"integrity":"sha512-KLWm13RsfhNftM/3tlNk1Pbdo3aR/oZIvpCAS9FOY+UaWrpK7Rq6DyDb07QCNDwOV5IrrBJMHy+2RO99bK4wYQ==","signatures":[{"sig":"MEQCIFnpw8tVz0hRnGufjMPe8OyTV3+H2tv/awBCXqpdnk18AiBtd3GVDvI7bepUOn0WKJiow48J7IqIgO4ASnrc5WYvOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiIvCRA9TVsSAnZWagAA7wcP/RjV2MtJPurT0jgvrgsh\nSWJHrkHKjFDhwOspD7jPHdVshQETbUr1PwSuy28zTEjsmOmGucITGKiFZW5j\nc+PDTyqycvnDqPcsMuWRBkIpAQ4+dL5n50HqpVWBOpaLiImDnF10Ap0RBKGJ\n51r1mtmnOn9agouww6vxTEIv45fEp26/IPWlPNa8ED9dyu+NUziER+kVSMPJ\nhk2ZErro3wGnoKTR1/I7LO88n/ZbFfwRRKMpw+WSh6qLi7W4O6qDM4ebcjIb\nUzHI0PvamLnrIsAZeaxk+pi5XeKGTopCCSmtRoaXtOdlkCMt7HC+gEY44QF4\nL5GBuWmEyEBh8pIdSDdAA64Y+I5v5j95RJwxAK+ifZxb/o5Nd4ui5+knr1ZV\ngBZiCuugkDVdr0Pj1814hwALKPLsh8nBHVi6PZxIxJZHwz2ccH2fiJMdepLN\nR5aIScYjkGWJsdW/yQ6xHw9t7A2x2/zsPTGovfP8yx+bECTIyj7JhGd5Py5l\nyyViy5tz1sFEZZYHLG4fPafTsMXsAnPDhGVTkFak+oQyb5PZXNvJF6YP5OBr\nWgApooDZzReRRsdoxvbnir17O0vb8Mpj3pP+aG53n9Fs6404DCv21YedPjMj\n4jJrG8R/Ine6oEYF0KaXUkZkefOApkhChB49+ib2X+7/3PEnkCFD+QbomseY\nUHOS\r\n=ckN7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.6ed717ddd.0","@material/base":"8.0.0-canary.6ed717ddd.0","@material/shape":"8.0.0-canary.6ed717ddd.0","@material/theme":"8.0.0-canary.6ed717ddd.0","@material/animation":"8.0.0-canary.6ed717ddd.0","@material/elevation":"8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.6ed717ddd.0_1594237486808_0.36780079245420105","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/menu-surface","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2bb11bf6666837dae2743161feb5f2b5519ea5a9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.d850de590.0.tgz","fileCount":40,"integrity":"sha512-52rQg66m57VMHa7xsykeaMSKbdnk3rYYYKqy57LavoA8ky6u4L26XGoxNLg4NMQJe9JCmPDv/nryBl6gNmjDpA==","signatures":[{"sig":"MEUCIQDGSmTCk6qFjBqwI7f0mSJh+rCjYPTQRI8BLkqT/TkWXAIgfYdLk/fMPwf2UK3+kaRrHxIVOGEa7ny9cxujJsWNE3s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1yVCRA9TVsSAnZWagAAQfUP/jXxj+2WuVdb6pU3Kqzw\nQaYJL/DI7xOi3lCKeHtwGs8DSVqGEoLFwNwDtQ4veraH3lkqkjRm+jesdUbY\nM1X8Pson8ntllbCBu6bISZTMAzSL7gEjnUFhhhcp9/4rB8yKBkvkd4pVJhAx\nhogDREdi/PNyY9B/VYRlnIgHTSnGm6NfISPkeOldc7iqjFoodhU4yZB+3HBs\nTprSzfcLV8gpXIqElXT7rBR9hxWz+o8wOKymw8szvUy4xfuer/zdYLBnyAVM\nD+Y5uwaai6tAJwEdlOoYRFsjU3BGtzSPiglrtCWTdtJFAx/ppArM1l/WuCqf\ndTmGNPMCA0o7Rcb0U4OSuU823xwzNq5riEfkdrwo9FtFcg+sz/dtn3Im32nK\nsI+RHX4nulNKyK1wghy/CzwZpjZRO+palEsrWfq/sforxxehxm4PdVgPt/L/\nGg7KrHTA360mIqGZ1S+GRdPGZN3+j/wD6LjCSqhnY0yLH7d0M4PdgQiJRBUZ\n1ZOJJLkdbJj+zzAGNXbnQeH1gT6fdOgeMkSjvot4S8iaiiWczOQZfh0L48f9\n5D7xqScLjZG+Vf9Y3jaTaD0105JPNnjLYbmV5Ci9yE8DudkNhLvLOw4n6zmS\n/4fMTqA99fSDj8HgeJFXuVZ6KgbgGfABFWBPniEEpq6hkE2o88o3XXXofrju\n2OeV\r\n=Pn8N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d850de590.0","@material/base":"8.0.0-canary.d850de590.0","@material/shape":"8.0.0-canary.d850de590.0","@material/theme":"8.0.0-canary.d850de590.0","@material/animation":"8.0.0-canary.d850de590.0","@material/elevation":"8.0.0-canary.d850de590.0","@material/feature-targeting":"8.0.0-canary.d850de590.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.d850de590.0_1594317972711_0.5957838775028432","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/menu-surface","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2e9359db0466d138d01c1c9c8d897b969ea9580c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.e07a70841.0.tgz","fileCount":40,"integrity":"sha512-gPrxRJgvrAN5Y+NU4vsT3BR4hgHAVHHYgMhZjCOD+iCfF6a3I3k6bCirTrU7NKQez0maRSsRLR15lHmViMIzhg==","signatures":[{"sig":"MEQCIGmNXKxVjon2xRHVWlZQn3VFYlAF5MD8GvXEnPW6TJHxAiAok9JSK12TdMZQx5wzjcCM518YrZr5yFhFeajwykdFYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2OMCRA9TVsSAnZWagAAKTwP/3GUAK7xUVdNGF1OLvG6\nXHcn/CvajoCOXta6rIXUyknsNWxKxVFkeQWQqo2UiIZJ06PEamP8jJWslo4j\nkuXa6AYSuQy4rPUFZk7AenT+d6TMZMRWNMa/t2uBFsqZeStkG8Iem/Xp1Zpb\nz9th6fxWvxxQJFTD3QEYpED5p8c0MjxPX2USx4QJ3BSUXDdKrjryM4UEuLVe\nVIiYFDGigsNYC6YJ05tMNGv0WTR3D+UM6L8dOaHpz9SP/6bfKkj5d8zRigGX\n+YwSDhMnhJaG/OIR2QLkGlRZ0Zdn077VEnu3OpgFAKW3j2pMMF029rAB5j7W\ns/eMbMMBd4aPORs7t4HQr86fvG26kOP2T+S16dzlv+uUaRXVatELa8q7dYvw\nzdaIDky4WUwkyPi8ARF+8MJSjkTUJSvYaukBmYNY5YrPI9iNdwFgpx6gWHYO\nbM+59wIktp2iT4UGC7vVDcvkOzYPXhvYV6f2KPRLXzPem5qZ6PGrDb4sNfZm\nOavzGhuTo1DAhIexbM6iQk7G30Z6E0uwExuDT9A4Y4MspaM7WopU2xjptNBY\nddQR8QHdiVayaoSMPViJbampERJWvv+dH3x3y9/zBN4YxiXbtnSAOi2F3fge\n+60w7Vvm7aeCtPggeGJfhZZACgK7U6jpRR1r1dT9zfzkPWbbvSFJuEoxPd2u\nws8w\r\n=CSuU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e07a70841.0","@material/base":"8.0.0-canary.e07a70841.0","@material/shape":"8.0.0-canary.e07a70841.0","@material/theme":"8.0.0-canary.e07a70841.0","@material/animation":"8.0.0-canary.e07a70841.0","@material/elevation":"8.0.0-canary.e07a70841.0","@material/feature-targeting":"8.0.0-canary.e07a70841.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.e07a70841.0_1594319755843_0.8438759044515092","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/menu-surface","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b446d5fc623977e5ac0fbffed49f7556fc6bc091","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.37947ed6c.0.tgz","fileCount":40,"integrity":"sha512-RsB/YB2DtcjyMLvMvHharkbEfkhfO24uibu9+Crg6WZvCSztpbEE8CTxFbSae7c3eCBoG5Sg2H9vc2yA+9eSVg==","signatures":[{"sig":"MEYCIQCHQLcKvuvfLxDNhzqcxRy2gwXYwmPYU1BZQeCtN5vXEwIhAPfPBYWRfBDYXWwj/o7Db6eIoWonYhT4t74h7dilP3G2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB3/JCRA9TVsSAnZWagAAhowP/R9IWjeQTck65Weo2HtZ\njUqLZZa6C/52+nxpLWXCT0sH2+k/V8gDS7HfLvczt+JNdUrZ6UM6tcmrLy9G\nHj/CbkpolbCh4hLuJeJ/yYXdQPN/WM3L0SqYcZXZzAOsnr7nu+JeQUpDAi3g\nRk6zSc6Pn86KrGOEcJH3iQSF0E18It/Xg3Hn2Q+J+mZZdxAj1h6NQflTapV/\nd5onOS8M9ss0B4Bh20fJdTR06qWFXZylfY8LZPii+NVvjCuflhJ4IEp8zikv\nKEdl+oLbRenwrE10+2bbD/Hd8SDzt/9+EPQlfOQ537ZIMravJ5uv9Q4fUuYx\nCJzuiMzJKLjVrKFMGS/t0OxTSHyHPm2NKnA+ou+Tv94Pc5vul9HyM4G12Hfo\nCF7bz5S6I21KrUBKdazHibbnGNoQZwv9XXVuRGWXJhgh/hRKhHRTYql8nEiN\n22Tz9QfSnb2mBA+jyNJ68oHDr4P5mb9wZ6pF9MDIKGtNI5QtCvOEN2ji1Rd4\nHPyJzdu87LVLGY7LJvranc+K+UW/190zHkSREOF/VE4mc1Dp2kr9U49SDYLj\nlFibFJpsojvghjrg2hY+kAmPXLrxBoacqyrzJdlpgpa4/ECwPsWuzkcZ2cW2\nkr4kN8h0F741swjiIaIB0whj7X+8KTjTpD6Ri40hnMWVaOlmFLhPsWzJ2whu\nHRjb\r\n=dpjN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.37947ed6c.0","@material/base":"8.0.0-canary.37947ed6c.0","@material/shape":"8.0.0-canary.37947ed6c.0","@material/theme":"8.0.0-canary.37947ed6c.0","@material/animation":"8.0.0-canary.37947ed6c.0","@material/elevation":"8.0.0-canary.37947ed6c.0","@material/feature-targeting":"8.0.0-canary.37947ed6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.37947ed6c.0_1594326985057_0.5209113811478912","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/menu-surface","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"299da7fa1e1efc4c95f39aba7b01412192639cb5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.5d443afec.0.tgz","fileCount":40,"integrity":"sha512-9hoQKBGXprwhjeLnA841Isnwx5iUwRAJHrwwQ+JNFXNEgWpu2BrHg3QIzHzSfWRBRoAnymmTxsVN3x9ddBa9Hg==","signatures":[{"sig":"MEUCIC/GLsupvrgk+zGKGRorq26xsGuWL7osRrcTK2OUYXrJAiEAqFWYffEQ9HAhQlWBFytaNirE/nBrO0w0Bbml1Wqrs0o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4OECRA9TVsSAnZWagAAa3EQAIGKYcJjHtiq2Xflhduo\nxGrjYCZTKur7wvAgAdgFN0KtSKxUaW5GPi5jnTkXUauCw/XtSUWBC580JREs\nC8CCMvO8p85T1dOnecKfpKH8AKMOYUsHLhnX11391a5mJWQz8Eb4m/QxaXG9\n0OOJwq5PinB6A+CvVk+KToPcWjHqphj33DT3PxMYk7KAbU98Imx0vv0D9NSp\nma54Sj7dF315c9Azo/1oeM5erInxyd6aCRDLbnT6jtk1srBxJ833MSV2uOoI\nD7rK0hZj6ftI1rrc6y+xzINsP+Qi5lnUbHS1iObBJOanCM174A3tlr0aiLkG\nin/qCig2Aeh/5J0nP48SLETbPHVN69ZjM9l0yxsyiMlQpVOWReKSQfakyKM9\n6l3rDOHUqBj0MnPoH+ockMDLxrZ1M8sN8uscU79P0rhuX0uqumVSGIz9zWpK\nptGdLrXI2dfoD976b9LSLnjGUg87+OSqTY92ri8LgB7Ossf8e/80DurPjO3J\n1KaQNxBReh54BM9pcT3wq5Hpg5SC0x01hk68V2kw+ufyr8TfJeDu5/n4CmCB\nP/q2gAoyys/ZlamFXEWpJTaAt2CowCCBkIrvPdrzpBrsn1SGgAmIW+6Nk3Jc\nfjqhKTiqYJY+1pf0tBFdvmova1ufDiUrwkFg74OTNLPfVv7YloVSTyOeT50L\nLlPJ\r\n=/gVg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5d443afec.0","@material/base":"8.0.0-canary.5d443afec.0","@material/shape":"8.0.0-canary.5d443afec.0","@material/theme":"8.0.0-canary.5d443afec.0","@material/animation":"8.0.0-canary.5d443afec.0","@material/elevation":"8.0.0-canary.5d443afec.0","@material/feature-targeting":"8.0.0-canary.5d443afec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.5d443afec.0_1594327940449_0.6958691825423513","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/menu-surface","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"0310bb58092c616729e86b072187319504ad84ed","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.9ac1ed914.0.tgz","fileCount":40,"integrity":"sha512-wD0mGAsAq+sRM/fJTiy4gwbNT+wAjIefXOo9aL4dg2eZMuQ3i2/p+kQp15wdzkQDN9TK3wLP5+jvgxGlgwgfzg==","signatures":[{"sig":"MEYCIQD/Lwc9IuGIoZRZygeFJgYQtaVu6jtV4OWhU3wOp+mI5AIhAP0kkFECiZoUyS77YIrLnjQ5CQJcQ6EO+r1e7h2JLNYY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4pMCRA9TVsSAnZWagAAhSkP/3AbERr+x1rNlj5RrdwH\n0mCKAe3wt7M6oGFaZLgZ6Al77QETmnp7KnhBn0ZzesRteyv6pY1lb/PVekxb\nR56xPv5YqBAZnA4oCYPgYpHsnS42GnkXtOhwgqnP7vU9HF6a8fc5dTdnpCH5\nfmoCzn7pHgXwRoqs9Y+UB4mwKJAgRytIkmaG+Zdr0FdJbaeM6utfPOs7ug2k\nMgf9sKYZ7fNK//ziAn96DO65eBgQCMYRNdLq6/cZG04zjeRlUU9EBwByz9pB\nSeOdB3T8MQXCYNcz9bdcTo6odsnlgkSH8vzl9AiCqWuCh+pgHR5joo9fbv+I\nXzVmDl5oHNrvFs9N+n2aEEdfoogFm8gC/f0j0KPjjZ/1yg+CrzndhMqlI0YJ\no+ZotVs2Ttj0rASrFOncluIdLwe+vSkS4ezquw+8QgAR7no7THtD+hfXPwXj\n+OWGLNiVgCQvAfoqlGeX7AmgrYPJp8hE1eJNm9l/sVSq0Q1emb5eGo8cMxzO\nHTjJosMbC3YldPH+aMKbFGTCQFMoK4O1RaYnJjz/UqID00ufy/pTI/3MJMgq\nnRm5J2fy7+Bpf4jtf1PgeZ8gMdzyuDcSH3asYSi1kw8bD2PotGarVhvwAb6+\ntjqPypOZBbOK/bg6kcG1ZqYsmXWdEPgkFh2S3lwG0R8N2sGfNAH8LiYQmlov\niiTW\r\n=21x/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.9ac1ed914.0","@material/base":"8.0.0-canary.9ac1ed914.0","@material/shape":"8.0.0-canary.9ac1ed914.0","@material/theme":"8.0.0-canary.9ac1ed914.0","@material/animation":"8.0.0-canary.9ac1ed914.0","@material/elevation":"8.0.0-canary.9ac1ed914.0","@material/feature-targeting":"8.0.0-canary.9ac1ed914.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.9ac1ed914.0_1594329675809_0.4884605850811874","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/menu-surface","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4708cbf66485b2b827ab48c99d046af34c9aa5d3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.1e7cb6198.0.tgz","fileCount":40,"integrity":"sha512-tcl0isAxdUgxbtFsllZpgtxQrwz+Skx21D6TbTc3j9KsLycCvKH8cfyZcvtq1u2xowaTVgyyeSOLbKRBumCWJw==","signatures":[{"sig":"MEQCIHMo+Y0j7nTPZ5+u5G500ovofUVDzGICmgeVeURSH1XzAiA74HQ36VpBZw/wOtcvjQ6tMrUbb1gsXP776DLgpFx8dw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5ZzCRA9TVsSAnZWagAAdJkP/iNFUfukeF24M61Ty6hK\nr7OjC82/HUPrVKRiU8EHX9iejyeLNzmuouSRCbRWqC9OceGXx/D72FFNnJoi\n1DH1j0gy9plXXCvofwrkl0Rbk0DheJ2wCfr6cgaBAfzVdWUU4VEJJr4Rcyt4\noyWgEDej9gPxY5enLh0hMuF9RPKc2a2nE35PEFkBIxlNnJYWrmIdXYHBrI+K\n1yM1ZpeGEC1cRCG8m3nvi1R+Rki56snW7XC9n65E8wJ/Vqdxc3lWxYJniMP+\njv4Jg4ux8Nro4Hoge2PHCoD3UkRUZre5kUwIlTiuyv/4frpuJ1rlxaWYGK+8\nIFHY6dIz8u46prYcZesKDY6eMTLP/7g2kWDnvPzA9BXJZYvBkhJZFG6yNjxy\nqpxU3FPpzvgkcIRuafpnFtgwM7/1v06C1o1GJhBtByfPrwdaHCbVCibuWNtL\nJDyGExAuE1OKbQPmaiKdy7iQJ9gYaU5c/s48cQw+1nFfneZ2gtdn3Jmak5IT\nMhm6I8A6tzuUqgUhh/hnbfTg9jAlhZa3L0sjxXN9JqM5EFdTWaAHyKGHhbJf\nagrGdEmbUQdbOd53f1AA5785+xQ5cN8nzCEFrVoKQvzNAbI1WPYrZgW917ng\nWU7pmDrLoV9AZVlhyz5w/Mu3xLCkAx50k4FosToCfHOAaSIed1HNdZnWPpH9\nmznM\r\n=7S14\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.1e7cb6198.0","@material/base":"8.0.0-canary.1e7cb6198.0","@material/shape":"8.0.0-canary.1e7cb6198.0","@material/theme":"8.0.0-canary.1e7cb6198.0","@material/animation":"8.0.0-canary.1e7cb6198.0","@material/elevation":"8.0.0-canary.1e7cb6198.0","@material/feature-targeting":"8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.1e7cb6198.0_1594332787136_0.5168431751046292","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/menu-surface","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c8f3a36ab65753706ef9aedfa85fe5d61286c45f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.843f636c0.0.tgz","fileCount":40,"integrity":"sha512-8Vi6dAK01RW4SCGsBP/1jE3hnYZ2OvUkyQV+V2vETmdhhbpGn24pNiPE6EXraTgwod/f3sR7SqrXSEhC+QUgjg==","signatures":[{"sig":"MEUCIDTR6nQQlJezg8c2pm9rz9ppApueq5o5OdqbhZeo5s14AiEApFgv5gtGM1D5HiWtJ7WgHhI6H7BuA6sgmTivXkoM3Zs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKi/CRA9TVsSAnZWagAAq0QP/RfR6bp+HCnJhaGjd7Ux\nHv1GpPTo2KsJBp4kwNzUR3hBMgMBcqKe0oO0RcdLix8wXIpUEF39P2uUS8Vc\npSVXSdHAmSI9kX6VaLrDtg1XwSTjgh3RWPcJbrQGCZ5/h0xyjASMLkkckbds\n+8xFTifmJMtFHaJf5aBlqNnt7AI24zI4xttNciZUa57nKz45b6Sv3ZqDC22y\nL7t+aMJ7LqcTDndNuNKqSgkppYCSlX+zGONRFb9wrZqUzhk0fvtQJ8V0Ti0b\n+SPpkanYNLarJanamzRs3sXdSmBlVqDH138TLtpVU/6LFQmGaMTTeFkXzV7c\n9Vh9LDZqQc7KJwDuJuBRfW68itV5i/wVrs8ugnyghKrg8Fx5HKFEUeJUiX7a\naBOckTZDMTqppNUMkAYaVKmf7HHLXeLbX5mRbcNYdNUUB7LE8ut1OgB2se57\n5jyh4NQQdSwoLo3KfI1RHDcBESSp9BsISQ0gQLWJeJI5HHGB/1k46bwh1wdM\nRmmOWkwhHASpk2xN8pm8k+o4sskrvcvxkIMy3xlp8uG89NhR3rxrgZfHSBqF\nNtIDIYHCz8Z9YxMsj0flBz2d+dE8Ag195ASY81gwJAGc0hULA1mFanxM9Cug\n/4Izrmy+ln0NuT2ke7EH0eTZYuXvUZAs7MfzePN3ZFHCcSZiTh4TuEFiSGwh\n+siO\r\n=sZ6Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.843f636c0.0","@material/base":"8.0.0-canary.843f636c0.0","@material/shape":"8.0.0-canary.843f636c0.0","@material/theme":"8.0.0-canary.843f636c0.0","@material/animation":"8.0.0-canary.843f636c0.0","@material/elevation":"8.0.0-canary.843f636c0.0","@material/feature-targeting":"8.0.0-canary.843f636c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.843f636c0.0_1594403006886_0.2609075329692925","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/menu-surface","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"46466eb4fa191df4d52cbf977d06b0caf018c82f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.b2edaeead.0.tgz","fileCount":40,"integrity":"sha512-yfWQzpfZ1jqK5W1xmEo3dLjYrH0qExtbHGG6QPfVoGzTdR5VkR1w0DPzb/IruJrfRwXkL4EhQtNymX3H7PtUfg==","signatures":[{"sig":"MEYCIQDUw6vFAKBkihaMzUBVmkAV1Kgq9pnDwyIIkvRSpS7/yQIhAJL5jsXMGtjj2djIukXYlQk0RF54dxjAU4lt6luUleIn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK54CRA9TVsSAnZWagAA8PcP/Aml7Ep9pxgOIZ/WXqb4\n7mQzGqu5PK8lleO6+LmtlNMtT0Iq9rcch29yGaJcwtGWchpVHqTn7QCLqD3e\n8vGyU8H6LsEpr4XZrjDkXeenbfPbVfrFUa36n8aY1sBOQEPoKyYcwh82NL5Y\nyvm8TcItngoG83FuAQq4mAi5cXv04MRfG9M79snJzqGyQPyX90L3igQY3mCV\nHgYl7NxmHk9ITiTycXFIfwVi9pbLdA/3P4qzDa3Y+CmZrXJ/WXB+ovi3BXFK\n3i5haztVJHuZlcTzCIEnCF9vzJC0EGZQjHYu+rSSXD16Ta4ZJURuQL4sZ948\n5+jvmk/axquvZOI6D4XNOpG29p/B03KpHu/U05LT1DQQz03EidX0vs7/lvlU\npaJgSAAUMofzLWiPkJg9yzcm1s7qxrIIghjwgCmgoRjsvppyea8LQEp5FH1J\nHebxvajqz7+C+swRvX/mkr9aUGKnqN3GDGC+LPrWPy72h45wmtzKe9YVZMXz\nS5nZNIJPk/GHaDYgXRHI7AG3ScU/n+0ksKIoqZbFResJlK8iEnq4wlyP7vxE\n8XdvvRibpo2kDCWRysl0XSpqXBRf+w36fnzxb3yFJP6+hbfxDw/iH+eIOE2p\nTKK0vHf2tiQg1r8oRxShsvH81lzCrgLL+0HuwOk2uE1maasjPOP8ZxM+UNMM\nRTo+\r\n=wcwY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b2edaeead.0","@material/base":"8.0.0-canary.b2edaeead.0","@material/shape":"8.0.0-canary.b2edaeead.0","@material/theme":"8.0.0-canary.b2edaeead.0","@material/animation":"8.0.0-canary.b2edaeead.0","@material/elevation":"8.0.0-canary.b2edaeead.0","@material/feature-targeting":"8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.b2edaeead.0_1594404472439_0.6784702078651468","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/menu-surface","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9bb5715dbc599800cebcd290d5dee62306568c62","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.5dac1f624.0.tgz","fileCount":40,"integrity":"sha512-c697McJI2lOkIo3LF7426WQnHQQImu8htkRi4q7yzb0uOGjb/vEbXDPNkFjdYuOFXas6ZNqvBdh6VNW1saf7Aw==","signatures":[{"sig":"MEUCIFNVPgC4wCsmr8NZZqEdRpOcABwLnaf+5HbUz2gGOwMfAiEAjKoBvQhucmnv273tBVydHnfTbFyco31c6aHoJsrV91s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDI0zCRA9TVsSAnZWagAAJfsP/A240vJ/isXAVbN1cSlS\ncoAYcQ0wqEj2dSEcMRSz7MJJOBV0uAbq90YGmnL5A3MGiIZ2ABi6X4H6YQGK\nQ8NEMaqGFNgWqLuLo30qh8OimZIyTwBFBwy5RFfDDij6hiw7k5pf6PJOL42l\nqK/TOx6TNiv2ZhypJQvlJ4DFq42M9uKRjwsHSj18F6S3XZpyw83X/9LOZ0WF\n0DMRvvYP7WpU9FumGztbdIncYI42k8KKFLEj1CsO5/rqyzESATpf1C4fd4bN\nvToEQGGVRaDOrPdiTEite/azpdpxAXRDj9e0nyaHyOMqyjoWJynpJZ6PxNbu\njX2XopSsfA6+D3YsT6+XS7plL3t2wNs2rfirL4DAn4Q2itJ9iildln1SrzJQ\nboGJA5j6FQVU95oHY9wfoafAVDNfYNG12VL7q9BhMkphYvqNvhDrrKOon5Mu\nmNWL59Zdo/bFhKXN/kG+0FKqdL+SCS0/wqFG8d+ukjBkG5Jrpep1bgIzHHuA\nU1JF0DAesanlkhXqUeQZ7nBJkUX8V3H3bj3SAdYD012kFP+HLKDuXEt930aj\ndR+Ocwz1cVxbXTx4+jHlbeh4wUbio6HYYc2RcakMWt1A25mmyN5o9I9GbD9G\nn/XXI5wwDux9I0+hsMYJ1AzpT8Tkb4xBEhWG42AdsrhP8AorCU4n34xY5RJn\nZZ3b\r\n=FHee\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5dac1f624.0","@material/base":"8.0.0-canary.5dac1f624.0","@material/shape":"8.0.0-canary.5dac1f624.0","@material/theme":"8.0.0-canary.5dac1f624.0","@material/animation":"8.0.0-canary.5dac1f624.0","@material/elevation":"8.0.0-canary.5dac1f624.0","@material/feature-targeting":"8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.5dac1f624.0_1594658099105_0.599637528535689","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/menu-surface","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4a49304246130b27f266e38dd78bd0c51d7725f9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.4497acef8.0.tgz","fileCount":40,"integrity":"sha512-+r7vZ4ui5YIgn3wDsK20P6/7oi/hfakCxPa9Psrm9YeclHnwVX31bKhi3Sv3mCm6jOQZxk0I1jzRN69TLQpq2g==","signatures":[{"sig":"MEYCIQD0gSAK3tMEqAP4oIDzVYZ1QZLdB9vksGPs0isyrMa1bQIhANpstAMmTRFX/izpapDaMaN5HZ1p/Pf7vtRmqrdpQRGZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb9CCRA9TVsSAnZWagAArVQP/2IuHzvUke9rnPDp3Djt\nlftA77euv+3cOSvEBjd9F4i5c+0aqGbUElioBIV3NOgDlbtXPwgteb0P+F+7\npT6LaXMrBM1qZq5JCsaOUMOvGOQZ3Oq1vqgar/vry5WW1bOVrqbvva+f/VRa\nHe1O55gx2h4GZguUVazmq3Hx1S2Ev9eQ60jmOS34rYY8Y3pMYUPpiTVxG5ME\nFGRKu74Cjb7iE2dcCxvw2qdiwBfB4aFihwt43ywFVi470T7H/5WQpb0ryX8Z\nxI0/nHzZjmDN4UhQgLZgKE9eR9UsrxRjNyL0Y3uy8V2w1o9PlyARIsWp+1ON\nrtT4txlvJif79bBXU35m/jPqt+kEIO92is8ElvWNL1xK/A/CkdCyn26DBAJy\ngfjvSJwW7OUqlyCmMF+VDpm0+oK17gO6gIDPvXrzR01iSxjBjKbLErcsyl2H\nW0qXPaQZ/EDfNICsy7wnuKKoFFUyiknzlfyXUJA6dey0Et6U8MkSo+FsFR5b\nJcLCz9O+ulkpIXwtokhuktvzA1GU7LavybVEx7/VjpzsoKufG/QA3wc2W9rY\nzSMaTWOaL9sQsNdFhMVEMu/JChBpEFmH3BnHhTw1vs7fGd4mxVrfQT2ezNwY\npN212r+ZlsCbcRGFpbDFejVDgn65cXqcE+Pj+3IhV0r7nr4yBKp6DdEf06nJ\nZClS\r\n=D0F8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4497acef8.0","@material/base":"8.0.0-canary.4497acef8.0","@material/shape":"8.0.0-canary.4497acef8.0","@material/theme":"8.0.0-canary.4497acef8.0","@material/animation":"8.0.0-canary.4497acef8.0","@material/elevation":"8.0.0-canary.4497acef8.0","@material/feature-targeting":"8.0.0-canary.4497acef8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.4497acef8.0_1594736449823_0.6263958693198717","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/menu-surface","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"cd9fff4b65e5063da2f799d51b692ca6529c2c9c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.e6e23019d.0.tgz","fileCount":40,"integrity":"sha512-xE+VuGljeRVwdN71tBr3eyXkSmZLHJz/DpSTrYnOmx3Mhe1CrZlarytz7FeGOa6/+yqVOBotkFaWBIoObqjxdQ==","signatures":[{"sig":"MEUCIENBUTd5cpaYqI9/mswPakeDL19q+dyx3LlWvtp+/KolAiEA0LfrbuxPJvDAzhwV/xIqi4PhWvZ+ubQITkVztG34EsA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhFlCRA9TVsSAnZWagAAZ+wP/1eDcZGOVQIb4LVbKejN\nuRioyNxxkVcjjS6MHV5A4Qv52NgSMJWWABGjeMi7kIG4d50CMVdKwUY9AeAS\nbRZ39lbJYzDkYU8tDfJjrlEmjWoeXf055fMEfG/GqojYXKyk+V8Jqv70RdS4\n8JazKwOa0JDhiWZ8CVVwB2MSjTgreRgh3ICO1I9K/+8VdpS6At+vH4laVpJV\nXRuhIJHY/Z7MmdGNnK58J5/ZxXqdGtj63sYTij5bxnVaDiiUUq6ploHE1qJJ\nPnLtel4FJPPE/5GC6QMBuuBOqQTCLxfr9HSOaqOR2/KN0/3LI5TBprcIq/vZ\nhK2NftBmB+DdTfBmUhqDHd1gPzsjOc0fDECQ9S54yLvFV3LOJP8/2E/KqLVU\noQCoIbRiBmp+RkMET1pSbqhALhElr7/dkLcY4D9cz9zr2r5L3OWLsxzQnrRX\nVI0/8dV7eVOws9MegWR7O8JZSh9Ae9PGoDXL9l3aIFsI76nnRtMK2Zkzn6FC\nDybj5UtiiUiOpxeI66uXnNLmdBUS3E6+KzLKekfhwQhX1sSpn1M6jQUfRT8F\nstmwf9juwurkouNYH/GcfEB1LaaP27hHaRQ7PjOSiQWUYSmZL6Ruju1H4olz\nN9VoOKAykWdOEjTMaA+u9CW4B+MoJTEPEFJtZVYgnCjBr1ugY/rZ6sfHCKI6\nuJjf\r\n=D9mM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e6e23019d.0","@material/base":"8.0.0-canary.e6e23019d.0","@material/shape":"8.0.0-canary.e6e23019d.0","@material/theme":"8.0.0-canary.e6e23019d.0","@material/animation":"8.0.0-canary.e6e23019d.0","@material/elevation":"8.0.0-canary.e6e23019d.0","@material/feature-targeting":"8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.e6e23019d.0_1594757477495_0.5712851629338651","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/menu-surface","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"966508ed4f865cb5a4a651a32e6976fddfd50c78","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.d548d7a92.0.tgz","fileCount":40,"integrity":"sha512-L/AAv2iEdHDNAR9CKcoMdfRwrhxtH7M5mT7yqelve94miKmZOxE4ETu6ST016cMp2RPsCT8OIZScSbZCYJbctg==","signatures":[{"sig":"MEYCIQDcXQX21gacxF5T9SqOOy2Tg1AEwRN4Hx1Bdq4ZOCrFSwIhAJRK2wI1mwZDP7sYnun2yeUkwjX0GIWU6JfpWj6s44uk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiAGCRA9TVsSAnZWagAA9KwQAJSYz0pfzChqYgp39WyQ\ncik+/29skMl78BHch2cdsf28ylgVB983MG3Z3uG6BjzxOj7EwasAp1R1X/+z\nXNLuj3iZ1EeeArE8E0psWH26M2mqGMubOdVsDjBeWVXgQjqAbGYUN7jwptVL\nYVFyL55XPmsCw95Bt4SBR2WFwA59IGlW55IBykwJtWVKNKC2SSP1EdptuQSt\niLy4w1f1vEAIfWMAH95zE9Ze6ye8uHiYHLbpW9bHR7XfGdFJqgdnht8CuGDe\ne5g5XJKRQhxopfUEvAH7qPKLq5r+iDzZ09ePr3LOOf+PNQ8IGuis3Ty1uWRA\nqz6zX2hr2aSQSKbs5k9ulwmq029nrWK6UcjxlJqFxMateEkUFBiQWTsOv1W0\nGjdaPwZRDIm/yqcziGfyOXq6ygVqiioatOOJxEZg83T+P9dThLvm3PblKFke\nAFJUVfD4ZJcdVfoceretYCsf4l1S1ac6nyZ4YFT9nZ5bCWq4a8Mhdo/94cHG\najOj+2+/S+59n6aeD6RG6eVNPL5xfJIiZ3rmAGidAHk+G5kgqievI/TR0YZE\n7XRJ4kWK1ANKZmPpSAgr5Zbbl7dBStORUSCtlfteZg8OGNBPmpaoBDRmUkzy\nNRLMjI2YtrXjxSU5iyKeT/8kph1qbmilX1c7+U/3adKH0mRNhKs5X1J4gu+b\nwCox\r\n=ARjr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d548d7a92.0","@material/base":"8.0.0-canary.d548d7a92.0","@material/shape":"8.0.0-canary.d548d7a92.0","@material/theme":"8.0.0-canary.d548d7a92.0","@material/animation":"8.0.0-canary.d548d7a92.0","@material/elevation":"8.0.0-canary.d548d7a92.0","@material/feature-targeting":"8.0.0-canary.d548d7a92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.d548d7a92.0_1594761222395_0.02423202450749118","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/menu-surface","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"940aafced232b5e619e8900a3eea802eaa48a598","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.58ce529cc.0.tgz","fileCount":40,"integrity":"sha512-eDl9p1YNrzeUUlChmHLWBbBDOBmrjpuSFnWbOt56X7n02DChfGyhup6NMAcnl3WjP9Jc6Uoggfa1sKm3OxA3Ow==","signatures":[{"sig":"MEQCIAsBQTEed80GLHeF1ftVvlFOcxKs94DbN4ukDWLbY0HtAiB+h0zgE3Q5iOfKhij2yLlcpk0jeGSE+4X6g4GHIfZGJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiCCCRA9TVsSAnZWagAA7EIP/iQRAFLRG8Umzo1fnB3l\n2+tl6jXgNtcFcDDAlIlSi9H0NuDXg12jmpunc60d+cSjG84NjdhPa7xyVuhX\nXARTDLluR6b+mnwgHMt+1uK7s+CK0LfITydG1z7ngm9yr+gcqmB6gHMSrH2Z\n71aPSVD+JRuC9bTl7QSVIw3Q2TO/xKH41yxbGQi4ul6fxahnU34qNCLVlF0S\n4Hi/84mt8FhDioN/CkvgCdnDkmqd7N6NOP33yVeZW2EUhZLaU5hJqz67TrSY\n/CoV8gK+Oq7Pu+Bcobrf6WvuLW/kXQDNtcdPdE9CynQkX7my1ZcSaS+kVIhn\nEh0pI0u8+8BiMFrwaxgMVlY8xVMPR2pfoc/DYLXy1yXGNjZ/DW8Th9Otmdhc\nEZSwDIANw/3n+naI7+nhmKmnNniTeQqNRNrD/7eTSmRoOpTZih7G6MsGCRHY\nWooE48bJouklfp/ctsa9cS0BkPtNh4khd7Do4pSCwliOXo9LiOEraTjJXRMz\nxP59nYLckQROOLRMmFYKJ9KfmavIMjJRJpSJ7L2KwPybD2I+YMzgfvy4UBaX\n0MkeLKMMDTLL8nk132mKXPp9Ox+IXNKas7pVrCTGrvUkVcSSrjtsFS6q7+uH\nzyiVPFJ+BLnl39AjhyyRorJVEVmduGYAAeoa7ztTEQUCHmZZR/ri+/2W1X8P\nobbC\r\n=Smfw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.58ce529cc.0","@material/base":"8.0.0-canary.58ce529cc.0","@material/shape":"8.0.0-canary.58ce529cc.0","@material/theme":"8.0.0-canary.58ce529cc.0","@material/animation":"8.0.0-canary.58ce529cc.0","@material/elevation":"8.0.0-canary.58ce529cc.0","@material/feature-targeting":"8.0.0-canary.58ce529cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.58ce529cc.0_1594761345895_0.08295959507222284","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/menu-surface","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c7eb058ac9c382e1fa4413e4572d59bb5f7236e9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.a0f1202dc.0.tgz","fileCount":40,"integrity":"sha512-Q2WHZ7PUHaa+r8KscQ/kKuQBYVpHcZYrd5l5uHW5WjvTY0MjKpzRmIlJOID9Nffdv9w28pSUT5FZ8mJfB34pPg==","signatures":[{"sig":"MEQCIHj6PMjszmCu24KNARWp8GV7BX+J0a0A2p7MsTySfIuDAiB9UjytVZe35BZZP2YhuqMH4zGkinWoJel4T0yhs+NuvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiUTCRA9TVsSAnZWagAAOGUP+wQxw9OiVYVlgMO/W4Cj\nchL6/2IiI2CnSaiSimFsKY/e6PtDc7U+uNiMvXGleVdw5pmHLX2JyKIbd7Rx\nVKtrH/+Nxah0KCfsFIiqytbEzRe6TVyiOxCSA8Jt4XuOlZc0uQK4AvDBHuqW\nFHMrUuhyy0zV/Xhz8/sj31fQaHhKdxjFDduZB/EVpX806WxZ1Ln/rkrf+EeQ\nxbwNfeSIK0Lgv9s9v4ccr7yZte0pjF7twWoAU14sqQImxMV3GSNsT/FImGvH\naXu8RG3p1duVbAnlZdSnGaW6MJLx4wqpV6X03/Q3vExPlE/2KmJ7MYQJVMQ/\nQ/oM3b44xeJgz8icMybd73fg0/1Xe24RYPGM5A7RPoktC3nhyvh2RUeCFZwP\nuNU0JpAGIdBEjUr6oUxK827Z2A6nvSyYqcdN6X2DuY5uoA6Fq0aajxOTAyGM\npBQxdJGxIlacN0UD2WXKBf+KmnXPQ1PJzdCE5WYbH4u257MBC8V68BvEH02J\nfqHIZVBinx+qZm9gZVjIWklPj91/I8JJGleCLSz+QfjcUi1x97+JcKjWpCHz\nAHOc5oXj1Nz4B11vU9LsS0EzEV2enmLQ+kyngnBoGoOGOz6Yt9uI6C1WMeex\nIKGA6z+6S5OnBadRWaYf69gBR5IWBzyALs0dmoj7DbyL1bsAUrIy8+CTRxPs\nQHOP\r\n=GLM9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a0f1202dc.0","@material/base":"8.0.0-canary.a0f1202dc.0","@material/shape":"8.0.0-canary.a0f1202dc.0","@material/theme":"8.0.0-canary.a0f1202dc.0","@material/animation":"8.0.0-canary.a0f1202dc.0","@material/elevation":"8.0.0-canary.a0f1202dc.0","@material/feature-targeting":"8.0.0-canary.a0f1202dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.a0f1202dc.0_1594762515300_0.3978517478222505","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/menu-surface","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"92f63fa3bbf02a446c24490973dbf8f095f30845","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.ad4df58c1.0.tgz","fileCount":40,"integrity":"sha512-HU6iiFcEGbyWra0/6Q7GUo4VHNhDA9YJAC8vMdxeqQGWAeIAHIGyVLvPJNPBs6RRZ80vkeGzXbHp33zp6NXVUw==","signatures":[{"sig":"MEYCIQDuxSD3XoMeMgPbsuAlcatGxoJfPbkN5w0rSQuoUPAuigIhAPiH+SvK0c370cFmhTT+2BV4ZtAvjVRRB4HPDq0snehL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDklcCRA9TVsSAnZWagAAxMgP/26TYSf2HAqOgmx7sR/R\nvv7S6JH8Mb/PUlK9Dq2jpk9B54BabXyyDlntbtsyoD4RPYOTKTNUNCUDPbtM\nyZpyzjEvkO1687J+czSSBWRlkNhx79cz/SyIew4p/vDIy8zMKbEMaQBuGG33\nqwvuuXXv/KYJGTmzJ5l2Bb88cZp6mcyFKKMo+o+mXUAfDgRk0MATBhVg7MRz\nH7rXzTfKOQD/bhBGbsPWg8z1eTyc4vQMbfmMvS2FK5XmRT72HmQz2Q8Lyr0n\nAXsQTcIpT1XYFI3tGLOYHrZp48GNh//QTyQTYUcT37SJrCzzz2IP5HJ/uH0f\ntAuuiSO/UcmBAi35lxgMa6xIUL4r/L7ZlVA1GG5/iHfv/B7lXgCKcdmtSs6a\nZkSrq8wFEG1YO2NAzmpcL35Ap7LmDC5rWwym24AOwX49GDnEMBBduFMjCd1c\nZiC64gYpD854I9k6WWmEFAqegDeeNSu8M0M1AICggm9075kgW2qSZVx1mtck\nkbKU+48JhsE+8CGPpcrPHynbR0OaEyQqfZvn37aczTDJVg6dzzKXaEbiSFrR\n/crIGO+LUMonu4sSXBDh9sxoahSq4FkVBiJ2ETfBAHFgUis0OtTOps+3cM0c\ngPY1oDEJGFo3rq4yh8oqCzQX+kNy8F7tId00OdzkwjQcyaQlXyvPYmbh/Xpd\n0xLp\r\n=2mt0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ad4df58c1.0","@material/base":"8.0.0-canary.ad4df58c1.0","@material/shape":"8.0.0-canary.ad4df58c1.0","@material/theme":"8.0.0-canary.ad4df58c1.0","@material/animation":"8.0.0-canary.ad4df58c1.0","@material/elevation":"8.0.0-canary.ad4df58c1.0","@material/feature-targeting":"8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.ad4df58c1.0_1594771804395_0.4788812820032029","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/menu-surface","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"21d02b244053638997a132c55d78c53e5c122705","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.01db89053.0.tgz","fileCount":40,"integrity":"sha512-pFi7Vg97ipQ4NtcrmKM265fCMuXEr7phhJRO1B9/+QO2lUXh8mJBpF76mkZDxykfSnGQew01ZQlzhi/xMuTUwg==","signatures":[{"sig":"MEQCIAirdp+EGWF6wzFQwFEO5Md5psfZinB9SqylYauv8/XnAiAtLLdv3TX/1ytMtaNT8e5Tf/r80jbYQ1mdxqu6bqbchg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEILuCRA9TVsSAnZWagAA7yQP/jHBapuvMLa+4PfYwpL9\nBAZhRmwRBuX4ha9ZaJbhYKmjfZWbkHW/74mf6AWlrdo93zArD+Sj9SlMwRIR\n/KYuNzihoJlGxI/mSOxT8oWlloapBCToGOfV55lc1y29MI+kpA/8ZVCbDsEg\nwI60QK3SbY6WCXiMM9nlpisfAdSImHPdBaCiMPy4Sy4+WcvB4WCnf45CXwXt\ng5DipePk1b+rptN7jYxSLlckeq3K4YBp95LuhG5AltU0QEghq+uxxljGDKe9\nTjw7FX12Fyro3+L598xjVjcqbb//04Y2IMi43epccMvXidZZqepdXVr/mCo3\n6mfMXK3KSEvLTNn82ZpT8SJrQiK7HJ2C1np91OHTzQP2MwFzWx+bamLm7dMm\nJOEevWeQCnj+dIu6++snA1+jxE8WW/a4OMjTPDflW6BpOm33aASCICMli/GA\nDJabJcElQUfIXuHXYeKyL4wWlca3WJ9SZ7l6FMa4wk7T+Wv9pCzQBNZll261\n8L8oFsJkebqJ247q3iCGQxwB/xDy/hcwZzMRluWaAEBMjqpw0CSBcGNkAqhE\n3wFSYlZdtEXR1Ix8wOzqSNafv5Udc3dX/TG9S+Z9l/tm0aTgdL6YnpVp4xR2\nmFgGqIteQTnWPBlOZrvEjOrJdAwT8vp6vBxC+ibkrkzOPHvh1Dx/Gou9oUJN\nTA2j\r\n=ELHz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.01db89053.0","@material/base":"8.0.0-canary.01db89053.0","@material/shape":"8.0.0-canary.01db89053.0","@material/theme":"8.0.0-canary.01db89053.0","@material/animation":"8.0.0-canary.01db89053.0","@material/elevation":"8.0.0-canary.01db89053.0","@material/feature-targeting":"8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.01db89053.0_1594917614392_0.37980566738615673","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/menu-surface","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"69c0fa54560198e63637055bd850576970395034","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":40,"integrity":"sha512-BO2Augs4YnsXbrONJWdujZWi/REDr5I7JJ3QgGY3GXN6inb6w9MA4HeS7vuY8Z9xDBuBN3qN8MKBIVu/gsvZfg==","signatures":[{"sig":"MEYCIQC1e9KHuu6p1K7Po7QmThRCKuRjHy2rOWONEiZRhg/nfwIhAObkgCGYuGkNNViiFnmAF28WqXCRf88LAXiecFLjMh1Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe6ICRA9TVsSAnZWagAAqAkP/iDkVTNkfwR5fTv9ZeEZ\nIS31xIA42E3WTyTFjAus2ySkAxULc3LIc36pJnllfHF5kb0PVVA5t5RMBgwm\nHHxMBN7r3MFrYvMGfqEJTKZgmUs97TE24opHdaolOmsXnx8WwOhA+7eIOCsV\nB2uHJ5sACiJN/YL1lQlXeMntn2vXEqPFJ5h0VbUdUvaX2P2OPalQyFyAU1V8\nSFuhWQjMBRg70jl4vbQjuPWXJwAWM0rHQ6PB7pzh+V9q2lhH7sgJuTp49QFu\nagammmpODtQ4Oc3ifC5q04YOmoLTMJrMoZExxFi4W8onCpsuCJiPijDxZW8U\nXo0R75Q5d4t1v7eN4BB2iF9B5zw1hsfvEqaTZ0XdusFzX8S9vTn9YzCwud+W\nIGUvs1p/PPaqZH9uHdfOAPHrkV019kmpNB3qgzyTne/Nx42LykN9KVBy+07D\nV2mrTmnj66YWo785+6I3nvdZD06xqM9fPLdQerp9orqZJFOc029UzDfG30CQ\nl9+onfL7kDtSyJ5RgDSrypkimmmFDj19pIL+KoIHXGwJf5+5VEp/jH/JUpBY\nAHXw5qShcu5bbrYivFm94VUXlZzozHy4v2S6eJfw3DvxuXEjBrkNvlQ/z9MA\nAzugnuC+eK4TnUEPG0nk5bVL8I8YZvkyAPM5o3NK1MRM34QHxLtL0ip+/ttZ\nsKf2\r\n=EB9W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fb5a4cdeb.0","@material/base":"8.0.0-canary.fb5a4cdeb.0","@material/shape":"8.0.0-canary.fb5a4cdeb.0","@material/theme":"8.0.0-canary.fb5a4cdeb.0","@material/animation":"8.0.0-canary.fb5a4cdeb.0","@material/elevation":"8.0.0-canary.fb5a4cdeb.0","@material/feature-targeting":"8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.fb5a4cdeb.0_1595272839731_0.016556327326837428","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/menu-surface","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"602a2d3e3a8191b203ecb8b3f5ba5716a4712c3d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.8df0f517c.0.tgz","fileCount":40,"integrity":"sha512-M8WvXENoFNhNQ0Tl0NMPqAeBIito/3TVeCDWaCjkasxP2kUkRo2agjJBB9Nu0Vg/8GYPmqRquZErQpzJYHrf1A==","signatures":[{"sig":"MEUCIEB/WvtPKExMnn1kiw7f2K+U7ytJkMblXVkYk4lxi8JqAiEAzPKcUMCDO11WjYsjdI5DLluZHOeiKQ9RwOYc7LM8oK4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi8lCRA9TVsSAnZWagAAm24QAItGXc+rQ3q00mIIcGVK\nPnYX/jhyWk2jvQmj/2eC8i4/GvKDOYwFYtzy8nnpf+wOuQ7/HervepJCQxUa\nLs1T/PgMjPaVv2eWnwLZ9K69PAu4hJTckjcpA2kIhjrRA0IFnikxkz6O1cuo\nkFFKGYO4rg4PFua444BVI4zddq2qM6QyA5QjiuulfIVmAIANHRjuJZmo80Ra\ndy4KKKrZoeDCydYWuLTfi6n+uJWkgcuKiDe5aDrJ5/0r3dhUFoKnINZ1rVj9\nIqqEu5tYKl3bOJjG/7+ZDLvvOkLfJN7EWjdNETN5l0NvXTBPwT5E18CZ2Eys\nI5V3Wmn55WUX6Xizejes2lqsl+X9ocMkEHJLp+5WNLfRCGY02FVraVPxZeYd\nQYwwUTMnlmg0Bvj4Bwckkxn9O7D2bcKhkAAL23KoMUucQ0GVCTJIn5y8iDQo\nX//1V8KD/JFhhdQNXUBV1KVuYDE8fg8aPDu807sjwJSy+ITZppB3fgLgAhCl\ndykUSeyydy+qrAnUR2DJABNIlstf8J8OsBigg05NosYZjg59iqFKiFeQhGUK\nF+FzBjPRbkXobjx4BMjGp8JTksy4LrYuTTJCNQbdNd5De6ubMTlNGx69XIwR\nLQRKoUvrE6qx5JWvauUBOEFu5/+Y56abfc4xt+cpCB7GREhLCY4YGDl7a9oG\n57kB\r\n=cC9a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.8df0f517c.0","@material/base":"8.0.0-canary.8df0f517c.0","@material/shape":"8.0.0-canary.8df0f517c.0","@material/theme":"8.0.0-canary.8df0f517c.0","@material/animation":"8.0.0-canary.8df0f517c.0","@material/elevation":"8.0.0-canary.8df0f517c.0","@material/feature-targeting":"8.0.0-canary.8df0f517c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.8df0f517c.0_1595289381253_0.5811501223127828","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/menu-surface","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"764c4e30990c73bbdeaa0531445cbd6dcf72ad05","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":40,"integrity":"sha512-0olHJoWAL04nqBkFYwDLlFD8ul4pBrT3DkpoNAtqUlKgOUV+YM001h+AD+ebrYxIzMEYcyf0YJdr4k93pLCfcg==","signatures":[{"sig":"MEQCIF8DLLy00z0Bxnxhrw4R8zfYoy0ZZ3zFZyvRmy2QUAi1AiBVfzhosGniA0bPuQ9o3EioOUB5dKnYZwQ8aicEBVdJjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFjvuCRA9TVsSAnZWagAAQnoP/2o8oeHhtutvgiPTLW14\nEU+tS2LNnUJ0kQ9iwoJCaZUZJPxVg2nfy2qncn8XKlKkV2Dexm36q17xdkw1\n09qVH5bCx7/Y1glguKgRLxcKxgJbmJfNlHyHJRKSAbRCjNeA/47hGeYEvBmR\nEyP6AJK4grkdx2p0fJK8WuJH6mzpai6Ld0aaY9EciydSBOXeNVoWgela/+ao\nhqWJmxH4R8Kd8MVV89WVtqebsDGUT+014kH0DVxTC2VVlGR0BWsUgbW5sNY2\nqTkLuU9DdTpp6ujUcn+8wKKXXUD0dOB72kobLMo4dKZIQCTOQ1MBWycdZUoh\ntUYi5sPT88iQ4pOsiYIDu1vagYG+6LlBEvVXPtTdqp61h6928eWeub/IoTFJ\nJRm7gHLBzgnPeFMpF8BD2g7au5a2BOaCufJN+5ZNpJ42/pNAOVh2QrJ7Pg1f\nR48ZWGJ+qR4pmM/3X/5lYyHvtHloABF/EZQLTQzYelgJZGudlwhGCfEhn9gx\n9WYYcvhVkkvO6Z1VEda5Dt3klJYjm1xbDhw7h/loC3GTlahmbZiZp4lwjXxQ\nBmDmW0g0/NmRrAptET4E3dtJwdV2zpsE8vB19WsRrWjaOOLVHRc+QrwGXc7b\ncIb6yc6db9i88ahLU4BzFpCrRf4Ou0YYRgC+mQgXVqsa50tf3WZ6WOEBAK1h\n40QC\r\n=qbfj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.abcdbcfeb.0","@material/base":"8.0.0-canary.abcdbcfeb.0","@material/shape":"8.0.0-canary.abcdbcfeb.0","@material/theme":"8.0.0-canary.abcdbcfeb.0","@material/animation":"8.0.0-canary.abcdbcfeb.0","@material/elevation":"8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.abcdbcfeb.0_1595292653968_0.5813236469763836","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/menu-surface","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"5017e840b9b9d53fda13a7be6ccb25f172634e20","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.7bd5075de.0.tgz","fileCount":40,"integrity":"sha512-X58ELqjbF9XwixyPFkrB7SNI1rdLTSDqEkgJtJcuxVoVhRKeKoJj4ztRugddIRWRzzA8dkKB/oIEokVMaPOLvg==","signatures":[{"sig":"MEUCIQCfpSFHOXUR/f2uTC3HcLdMRWYIojgeLRg8pW4OISXHSwIgApk3IUztW3JQx/dbIhjo4y3KO759cLkLUOZuz3J3qIs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzhbCRA9TVsSAnZWagAA694P/jeh+xszlpa0iXuBlYxX\nwkd5iKL16qHCnfKJsZUy2/8VMM6L9FBHlCx8EhoKkit0NfQyyBdDgN9JtMA3\nJlB6BlsLIqEHjS+ssgymTBHsK0O1zs3G6R/FF0uunCMqAYsbMdEdaQY+WCjG\nVRvzgy7xBx3tb1r63Mox1HLUDIsbC3NSYhSFcnzBjHMzbKaXoGkQoDpaW/+a\nZzuWlfgL6QQrjfKw0OVZzLFxlCXO9U+k3fFiQRojRNpUGerSAL6OInGcTcXV\n97078YxJpjxGDYcYEqZiAx9pJ+pUkUFDBWh+IzU7eqj1Xr/08JVEidGEwicm\n6T1yHhBPAdSSF4k0GN2CqlcUlOYZU8qe3mwaX1xaiDrmbVdoHTsDIuQGYvA8\nuKebY1pqCBKECwhNNHK3PGU6bqI915p9V3qDfJMgU+cpp0re14c9HGPTb1LZ\nyzeDVoc2pcFL+Cwe1mYz3ZAGtwwNFVssPZoMvRhcETwrS4G0f0aSidDDZWxp\nve/0BhY+BaiWnt4keavxIiI3VctCI6ASAEItagX7aqXgAOnc0VEbbs8TxIC5\nlLrdqS6rBaOnC7CRsnbrtC8DpcCygSQkrSvHEN/JZ/XMd7YwA3rspvpSCu5W\ngKkjOw2xEAsQGkLd72k9WNuEEwsulLiBeAGPYjAknIsLoRckdyF8SW1miX7Q\n+j64\r\n=1z1f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.7bd5075de.0","@material/base":"8.0.0-canary.7bd5075de.0","@material/shape":"8.0.0-canary.7bd5075de.0","@material/theme":"8.0.0-canary.7bd5075de.0","@material/animation":"8.0.0-canary.7bd5075de.0","@material/elevation":"8.0.0-canary.7bd5075de.0","@material/feature-targeting":"8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.7bd5075de.0_1595357275393_0.14530924153869318","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/menu-surface","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"3414f0732a5b10e1570541ae2517a3be7866781e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.405a29a20.0.tgz","fileCount":40,"integrity":"sha512-P9YoYQf4Cxsuw4XANC4Vi5PJ9hCErCG6PPcX/3+ywnVjI/+50PRCCGI4b2p0sBl/pebHhI2OtyW2ako1jij0vw==","signatures":[{"sig":"MEQCIFl/aWEHIY28jQD2Ds9XGSXUImUKRpWuk9lVH5tyVBdvAiA3/m3tDzD+sdpMuuXb0t604G/SvupdWJPDosPUGQeLZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLx6CRA9TVsSAnZWagAAnXYP/icfXeVD+NiuObzWVKK6\nNSO5Flomv8IjN/RsuRy1Rgt7sKnlJHxLlnZHvx77a3bel8bKTiAZCd9JiZzR\nN9Q9tMlxzUbUhqKlZqV9R1gcy69RqQwNLIANdRHN3h3ov7zrvJz+yXZm1yyv\nnjqJyW1dswTuWY6P24qVazWBHXk7E3M/+SsaKqrUXy9OWj+BmcvndDuRTgcB\nlYcf7hnGa/U9r4Gm57xnXPRt/ydrioDnXybPYWB+GujZ91/RnA2g5O8ABZGv\nwbrd2TyyDuyD9JoiOHxl0PWHo/Tdr1XMZYu2PHLhnkHPhD+56cwV+y3PycFR\ndFO46LWkjhtHWzNitbgYhhWpZzCIHrm9fU9tkkfzKJ+fTD/W6t867tFpHD6b\niKlTW3ZvEldJYTGF4nGdWXZM36v9d9txX6i3Jf6MwLeAtVHQpHOuCbXejdXm\nE5XXE7ssvVF5xSyUmAbx/cAKOzZB9MDcBAEzpHrwCWtpHcyHldQ+dp27fhCn\nu1rTK8L80MGGa3tF1f2tlrb5foipU0dRlrLtPlrWfD90iE8RhbLrRlAxXzqg\nVnlGJkDIP66Tk0kui5PcF0e7tEIkatNzWWY0v6X4boB2FE9tc3NhzEONam73\nMBBzOdXNP5dttQuYOgy6STHsmPuHqEWMLfI6Mkb8Pr1MDq1h0S6CwE0LrjH5\n+uMd\r\n=kjAE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.405a29a20.0","@material/base":"8.0.0-canary.405a29a20.0","@material/shape":"8.0.0-canary.405a29a20.0","@material/theme":"8.0.0-canary.405a29a20.0","@material/animation":"8.0.0-canary.405a29a20.0","@material/elevation":"8.0.0-canary.405a29a20.0","@material/feature-targeting":"8.0.0-canary.405a29a20.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.405a29a20.0_1595456633983_0.14433409309913636","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/menu-surface","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"bd01a59a2e83513cf6fd2b76c4030ac91bf58a40","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.f3693ac4c.0.tgz","fileCount":40,"integrity":"sha512-FncMca7G44sIIQYBTA+h3xg2udjGF8BL8eEnvgzEgdEzNzlYloZzqWK23vf3FZ7nUSjokUA3FQW14eTmzfDCzQ==","signatures":[{"sig":"MEYCIQC2k0/vmS/BZCe8jkyD7R99CAvNqwDD1RMu8MEE85P8PwIhAO6dohpyShcZi0gUNxOfBpZhnvy3xKpw+hGKePVS3af5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348005,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL7vCRA9TVsSAnZWagAA+N4QAIwTE1LXJoQuxdvg8pYn\n/keEB9mnLf8tE5T+fWiuUHb6ALVN+00K1mKRBeUcT+wrQs1f8eIIoGw3+Rng\nAm+g0iK6qMjzBq/4M/HXqPg8O0uOhnVJ3I+7JHOp0kXBkDr5Lzc14QgTKNOq\n206JAJyHuNfuc8BwBgjyHykgyWgh6tTCoVn1oNXn46pjNU/jFjTPB65tDB4m\nrmBvXLWljRhhCl6MYK7DPEBW1PnS62WH3yKVXubpufkGQugW4muVRuUbWxsE\nqBhzqShUuEjDeunR2iwocTVAcc1EwllOrsRKapZGgzvkvjBj6NkCHq2hqi+9\n0TTjpheziDsnCrePlAqtGmOBr0+rJA7IjxLNP6WV2bkuELHaC6VOWlrdCrJ7\nnjPGWFmgnY9ygkiLgILoasyAmjZCCqDDxUD0lR1/U8HraG2LI0UHFHaBpyLD\nOJvBJSq58PbLZNnjNiSXmAbHxzzV2hqMEoz/o74OaCafJONM+qU3bJF+sOci\na5frtQhoQj1e7hfgz7at/JvpoZETCQLV3WVdQQbgG2fRuVXZNKV/RHE/BV5n\n7CHxtG2CHyZseJXuTS/4itIUhrIPhTkmFnA+8HC9VYmqDYS+4mlskuDxk7ZB\nOr5ltH9L9fJwj+p06aDFOLW57IBda2xi5vzX3iGP/gkbGwHBLc0LSL+WuCTr\n9fo4\r\n=F8Tq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f3693ac4c.0","@material/base":"8.0.0-canary.f3693ac4c.0","@material/shape":"8.0.0-canary.f3693ac4c.0","@material/theme":"8.0.0-canary.f3693ac4c.0","@material/animation":"8.0.0-canary.f3693ac4c.0","@material/elevation":"8.0.0-canary.f3693ac4c.0","@material/feature-targeting":"8.0.0-canary.f3693ac4c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.f3693ac4c.0_1595457262807_0.8678235301886796","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/menu-surface","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"0eee67dd78a0a45b572955e2492ad197857c3702","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.12a109680.0.tgz","fileCount":40,"integrity":"sha512-vWHjIf7Q3Bc/fde+SdPOy7U/cAwFeHu2JqlE1WdXhi7vDoy3U107byVq0yHgH4ncl8cUyR0fiCyZVAQwAnT5SQ==","signatures":[{"sig":"MEUCIEnrlKeAkJ5G5ZWRjGnLi+siHgQAUxUmt/C2r4/S2yaEAiEAneAfSaLXIjlabrjU8LT5YXqGoQTjLxxtubiodV6Ymkg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348005,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMXsCRA9TVsSAnZWagAA+o4QAJT4IQ4DVw29sLF0OZYq\nT5wWJ3gbqq56qN5rieHCtE9c364/b5p+Pak1Qj5jqVF+WaeXXFsSB62Qf/MD\nDI2BfyK69A7cshrdPA9g5lAKxeFgwSn8nwp9thgQ38lmHKyQrYwyoP286sB0\nDBxUtadSopPeWPOUL917yCR/4uHKnVF/ormZKfj96AGp41N1feLXk38JQcRx\nU9Kcuw9u3pbwIRJ8yxk7dlm5YbDNqRDkscZRaySAcP/DGg+fc3MrRn9UV8sP\nAos3b1rvt0cHbHLIup7plG7U2rvA213QiHLRzxQx3UGCFM+9EsRh720DOOig\nWbHEeg1yjqVIGqXRvROZhNREVzqsnys91ZPrDeRONM2hJq8zaJFGz2xL+qyB\nuWXTg/Nl6Q63xZET5mjGeIYNILsQ9vdTCSnPnzGqHXCXrFhpXwgZsg50g1M8\nnuA1CNu2jgoyUWKsVPk6NZWEhE1AuIxfS2DIzOVjRbSaAnfZIB7M/ehR1EHD\no/Cg2/QHE+2sKo6Ks5W33L1D0wrmLbRBxWeFqc+GNPjPhFTL2w/J/4+UsOXO\nVCxW3ksMp/nlJK4Htv04mMu+F/MfnTFFlibSrBdVD67qKtnZDBwTqs4vloNF\nxQm6iCFDGiu8OlERttL9EJ28h1+H5iMWD8x5F3MWIfLAWqXu8zNLlng/EQF5\nhx2J\r\n=ombR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.12a109680.0","@material/base":"8.0.0-canary.12a109680.0","@material/shape":"8.0.0-canary.12a109680.0","@material/theme":"8.0.0-canary.12a109680.0","@material/animation":"8.0.0-canary.12a109680.0","@material/elevation":"8.0.0-canary.12a109680.0","@material/feature-targeting":"8.0.0-canary.12a109680.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.12a109680.0_1595459052361_0.10638523191553828","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/menu-surface","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"7d0e9420bf190a44a71b0c4ed7470a81b765d933","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.bbd06696e.0.tgz","fileCount":40,"integrity":"sha512-VZXpFmiHRXeALF53SYyiUobMDvnFnRF4oUpPW05+iyRLs1UpYT2+RltUwQwCd69OUozDeoNTK6RaJ9XjSRSo4g==","signatures":[{"sig":"MEQCIFzo2xTkRY8c3QlEKBXtp8jZayuvJt7KkRItGQOXLKAAAiB3PnQC7gCrS5qsz0LpIdBqm5qiL+MEKoyjaSz8WwKgKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNGFCRA9TVsSAnZWagAAc8YP/0Q8QNmu8YkQvicznK8A\nh/lZ6/thaL8lt8Uqm0tnhs8VeukWFhCQwAN1opaXBlS+RlgW0udnZSN+SkkB\nVEgi0LN+RR7ESNxTfpefk8wJZh7pxyd227edm+LqUiGknWHQ8CtdctEww2cU\np+qtDWChwvdkdOMrBCeuGtMj/dVkFWnRZDTxwDqSmx1KY+pGgZJMfwO9NuXA\ni2gNn+KPW7D7yCGvej8KQsj6Ar5UwRw2hk03RdJ+03+YmJsglBuzKUTgRSi+\nDJmdKWDHA/vE20mYqB8ru0Fu/yu0bqTY5idY680BLObOQScosfHTyzXoh9ct\nXCaHcgwYt0VFfcTNyV/gfs9LPFqeGEgtDKZ4hkXvtTRt8SRqkiyl62oSV+PU\nIaaCnUNimbSy+wlNqZW+JV/bH4jGCwJgTW/AvTGalrFUJcbZ7fR7RVqCjMhQ\nOwO0CLorGOUltsbJSnPKyzAStmATU+rA8kmuqeiOe2PZ7S9vQZgh7AkRQiBk\nYa2AXALBJ9y4ckS4Wf2MJ7eGlvuECOcyRvOYmHIJrudnd6fNmEjMyeL3oK+b\nZmagjsmvEpPtEZnXrfbs8HClDv9cffer48sTGTFumxlHoMaBigbiBEVvMvhu\nz2R8KD34D1WwamvoXZOK57Fsxjs2lMzUlCT8Mm7RduJImEX+F7rNTUsxS3uL\nmqUZ\r\n=d8Vu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.bbd06696e.0","@material/base":"8.0.0-canary.bbd06696e.0","@material/shape":"8.0.0-canary.bbd06696e.0","@material/theme":"8.0.0-canary.bbd06696e.0","@material/animation":"8.0.0-canary.bbd06696e.0","@material/elevation":"8.0.0-canary.bbd06696e.0","@material/feature-targeting":"8.0.0-canary.bbd06696e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.bbd06696e.0_1595462020740_0.5230037284414035","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/menu-surface","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"395008077144c1b39e05f8ee30822631604de279","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.4951e7651.0.tgz","fileCount":40,"integrity":"sha512-vLXBK0gJUwADrvPFUs81UmWwkx2vRVX9L62FW6HK4OmUctuJg5z7DJ370OLJI0fYGRBxrcvMqMyIJ5HQPHERhg==","signatures":[{"sig":"MEYCIQDLs0mgDe+L2+lqrGfiUWAFfd6YTE++lPtDaUk/XlchPwIhAKBn6SmPkgeyihtAyFAd03F4YSedkZoXfb+YBLTOCn6a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOzgCRA9TVsSAnZWagAA2ksP/iVZbNjiZW3Ze7W79dLS\nsHjtTNKNq3kTLOPq9kLcU2o4hdCMr3O87M2U9PLHTj1FvHrYs9sJ11ZbBDpf\n9rRShRYCC/VHzZ6UrTddkF87T6DT/mQe4dqgH/RyJghl7y3gADlHqF4S8FZz\n+KMNGV65bRqhiRGBEd5a20pMtgEATANehaarE54NmH8ph12axQmfP1MnECwa\nf4GWU2CfwvvYvcswImifDxJEjU0LUd3fR0BL6ZVbSym2FiZZN+ibe9y63gNq\nuuxciA9U01BKsu2xMeN2V31Pea9JNJPU6OkMQvtPhPkXlxR2gBXULPsSoiOa\n1FkmHap9peLMBokZRcUrf6V4xA8hBVFXwEVO3RXTnQn6zPRxRHa+yFCLeiZa\nhcRw2ZScLDW++1kwAOpjiH2tUx+9iTmmAaHmoQADUixsZPw6+f+pmqlo2Fxa\nDRYWgQAiJRuCyD7/dMrfypavJZtFwTwtejPJfCZdmSqWbIE9AZJdk+D4twok\ndtx6K8f17Y+/+s1FU6gS8GO1lUmAT/xQwlOZYe+ZFSJLd63dw3nDtWpQeRbo\nVwWHxESU2oF6c2r9RzC3sfMozGrCEMuzk6S6hMVi7L+im6JwV7bcuHYTAA64\nbTjzXGom8iyodOCFtJQnBFzMN5i7gl0mthBDcqPpjJJbS4wZLX9xfPGwwPQv\nJv5j\r\n=jDmK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4951e7651.0","@material/base":"8.0.0-canary.4951e7651.0","@material/shape":"8.0.0-canary.4951e7651.0","@material/theme":"8.0.0-canary.4951e7651.0","@material/animation":"8.0.0-canary.4951e7651.0","@material/elevation":"8.0.0-canary.4951e7651.0","@material/feature-targeting":"8.0.0-canary.4951e7651.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.4951e7651.0_1595469023883_0.5444047971725743","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/menu-surface","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4a1f253bf181ce1e16d34009c141926a49f7c116","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.75deebbef.0.tgz","fileCount":40,"integrity":"sha512-Ltu1Yuw8qt1R4k7voUS0IH0/0YL9eExBqJAXEzFIIhVUbuFd+9wuWS3nYF+MjiLsHidLkS2Pgcdac/i34MvYvQ==","signatures":[{"sig":"MEUCIQCxvKHzu8zlwUU+X2+53xeSU+1eVDVkg7iHmw6n/jVWOgIgE6sPW8mIOSBnqKwEkfJN87llEbnCWRuSxEePjmPe/nM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGc1KCRA9TVsSAnZWagAAbvEP/3qdpXrWJ68tXG+DNW9n\nNaByv+MgIikXokh7FS5O0et5JggAdxF6uzhng+sSJdAyG0T+WAQTatgyhmG9\nBJlvsjwsTE2r4813hqkEb1KEfpbOsg4+T052I7e0R5Bfhor+7elq3+AXtqhw\nyNo/pLu6+J6vxOR1pcmNEJUPkzaOETf2cMLMm9sRbA+rEGjOjKVd9bjKRAre\nj2tfK7H2Xx8wfu+jGj/Uz4XHSOc3/Au6e2LvIvpbi/xIpsB+pFfmdG6aupFQ\nr69n3+T2xpriyKs0MDkFUsG38rSleiPPPcMBx3YfJW4EusWEsgkFdFjPUWin\nuQEAvsn3zWAregbAB4x3Nl7ppM133N97MxzrRbvg4BpYsU5m1m9u4vNw45QX\nge1VXnwB1MuOzuHtVMc4p8pCneC6rJ1+xzrMXrwvkzIHAJ+hr7BYEgRDgoEC\n987xZwBkgIEzPc4jZrBQdtHqTxIB+ypo5rTEgFyo0F29B8smwtgcTckKIIBN\nLqNkHEgFv5cSBUepa+SdkeYhREu9raYLwdnVDHG6l2wZAkPNpKYSL+/JMWhY\n5NddGj638dzFzVahDPkOo7gP1zq1+RLnDSNV3yXYyznVN5FEQL5hNt4fMtkF\nspMFm+G+CG72tjR2fZhGjfyQR+o358cU1AVcXfCu79CROISOij2CMyjkpFm8\nfeP7\r\n=L3U+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.75deebbef.0","@material/base":"8.0.0-canary.75deebbef.0","@material/shape":"8.0.0-canary.75deebbef.0","@material/theme":"8.0.0-canary.75deebbef.0","@material/animation":"8.0.0-canary.75deebbef.0","@material/elevation":"8.0.0-canary.75deebbef.0","@material/feature-targeting":"8.0.0-canary.75deebbef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.75deebbef.0_1595526474318_0.538867129942127","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/menu-surface","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"55ba6d76ead828f8afcedf303dec9e891b9a63cb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.95aff33ee.0.tgz","fileCount":40,"integrity":"sha512-fctkrt968kLrobOIr8yRnNi2XT/mqOnlLB6AYngTIdNl7ZN0X+HJJBxwx86zfcEwMmXwbT9rxBcNDgoTNNtStw==","signatures":[{"sig":"MEYCIQD3qjd9paTo3D0kc5Vy5NzeWZKZ3qmMtzADHP0WmiZCYwIhANZIAJe5nrRozSGk6+tH8gglxBdqY1Ct46L7z+SKpEga","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGdtrCRA9TVsSAnZWagAArvoP/iv9hlzAKXeRhr0TSQx1\nLCg3vkzAf3PGRWm2pdp+UnyMUeGXm3kvALqFYlvqZ3YGnrg16PnHAsHu5wnV\niilkXWQMUqgNf56HWmbdRg4DBwJp0+392xIKhGzSwT6r2zWa4nC9menDT+v/\neO3evCwGOolkTsgqCdQ8PNJShsSiurhndfxicHlOoUBO4/YzcmanenQWB6E8\nQmCnd9XSqpvIZv4cN65qC31ycV2DU+81IAm1wdkWuW4+8EBRm3Fl+iwQY+vn\nA1wkzJCKkxjk2BwbGexQAo8SiskpfXtnGDQ6OFNrkkAgek/tis7AjdYFX5j+\nLGNgHj61wP1KnfsSnQlwLUhlevBWeT+e9ZCWE2L5S2Y2dLgLzH2jKcv61iwe\nX1qZfj37k26M3xBhOpwe5zb/mQK4WNg8AIfPECpafNwbvImb0eprtVfH9otX\nVmIVbBoGi1IepssOsTGJL3/5lMe+ckafacmc6SRSM7N1XQh0qVJ+L61cGmmA\nqlxJg5Ki7HZspTHq3VVhDIw+LCTGP4lNdxrf3LU0LO5XWRzCQBb+vUi7mSmy\ne9Y8cAUyQs6Dp38/0IDO6EWzt7zzesKzFe4wOqU9NE7MZdpFDJ5LehMVlvUE\ndBrE3wjvQog5WfHC5Jo1oiz8IjbJfFCTy5V3DJGuEzskXKoofkNUlO27Pt/y\nR0M1\r\n=MU5Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.95aff33ee.0","@material/base":"8.0.0-canary.95aff33ee.0","@material/shape":"8.0.0-canary.95aff33ee.0","@material/theme":"8.0.0-canary.95aff33ee.0","@material/animation":"8.0.0-canary.95aff33ee.0","@material/elevation":"8.0.0-canary.95aff33ee.0","@material/feature-targeting":"8.0.0-canary.95aff33ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.95aff33ee.0_1595530090768_0.010444142047398408","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/menu-surface","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"23d226a6f6e935ddb86ba9aa2cf13344d587276b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.9d9f47473.0.tgz","fileCount":40,"integrity":"sha512-BwnXk2H31hxLAySigqzbdMUz/ynLSEHMlaQjTv+pI9fafCcLn194AbRMLanHtNiuZ4FtJs5lj8lDGs7/f6DI/Q==","signatures":[{"sig":"MEQCIHzbqdFJ41zUxPly+IGSvSGjK7uYjn74pDu6VU+Ud7deAiBf/bCldAQFQEPOtqu8eKcOr5aZjRNDlQCqKGiPS/PlSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGewiCRA9TVsSAnZWagAA9IIP/j4suA/8/+X29NIMGnO5\nRgnZTLUgEncPo41t/f8wrJ4JpZau6qH91zO0YDoq8Beq4idcqt+LRyT5Ol0c\nT5gNHhWlfd8VG3t8ub9DDbj3bkia7YCT2spbzO+pGj2wHoHIEuIa0uKzB3o9\ndjLR4FIrFp/fpNVxKn7l7ivG44E72fLbQgoQyqmo4/xykhJhVZW5iYPOm2Md\nipMdGoT1ruyjAtSbeHy87E3eTlJE1Eymq+njEn7kL99EDANROInEe/MkHMMH\nF0d8bTu4zpOHr7I4OByE6LbGbrseOr30WqKibS4lpbU866R1Sl371JlsWpcN\nAAzPrdXbX4t7LKmRvMaxK1ABherZEjy6v0iCGLUajuTUor49tNI9PoWwg8HT\nudrK/HtewoqEDlBo4Ut3ByZq9+dZOWHBil3SQqVf0fLuJLJX23Au/nXM7BSH\nIxxpbOguIX1Yq65eVEC7+WXezkWYs31O3RVeJHTED8nP69orlM9myngoN0kG\ntYuD6ZMlPQMs3Y8UZjBRu4vmZCjOIIt4GY04BXxlvxoyXqWVS0s/AeSEXW0q\nWMBVTvDXM1XWYDi452XAKNQqyaSY4hWW8QBjO4DM36DDImxAx9lgh/xHwhIJ\nbUCLkIdQvdS8uKBxPTE6UOP4jYO6OLdebkJn6gh26D6wf9iXNITNUGMxfuaV\nCTyE\r\n=kDBo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.9d9f47473.0","@material/base":"8.0.0-canary.9d9f47473.0","@material/shape":"8.0.0-canary.9d9f47473.0","@material/theme":"8.0.0-canary.9d9f47473.0","@material/animation":"8.0.0-canary.9d9f47473.0","@material/elevation":"8.0.0-canary.9d9f47473.0","@material/feature-targeting":"8.0.0-canary.9d9f47473.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.9d9f47473.0_1595534369959_0.5358569817514132","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/menu-surface","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"99defb62d1abb6e494d4fb194aa018e007713449","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.00dfbf6be.0.tgz","fileCount":40,"integrity":"sha512-mMdlJbk5f6/z200QE44U/YfFMAOxCagOwXyAGuaSzUXdy9AvHI5MDb5Jm7GxHTX5zqpVqa32/dUQkUN14b+bjA==","signatures":[{"sig":"MEUCIQChkXkm9stVPRg21t5TKrLgpC/CKuw3Zq/Yrjv9JgIKjgIgZ1E+4CTK9/5TPTs5Vt6u9qZ1CKi75IxFv/cI3vVXkNM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfpjCRA9TVsSAnZWagAAuygP/jZZXdKf6LGBhLEXBWcp\nMHHmveC0V2Fq7rHSqX8dBrqEm7xiZMIGkeqsJI7sFo8bEWakEX/9Ece+fDfo\nxJJIuxBNl1DRMPBshZ5eN5pIsUHgVDQfNs8qdjXm7n7K8L6PNx4IHKYZDPfN\nhJAEZpvDdl/O5FUP0ZeIiz5Su0xLDFHNOw0Ud86gMEH/uAGe+g+CJ2pXfBmo\nLvR+cI1G56PWTm+MCVkM0d2UyOWYN5/LQoLRObqLlGi9/tNb76lq+JwXcMkD\nfB9Cj7s7IUH+1OWS7KlFHsaNcEPerSmaRo98W/pyS8YfBHedXZHlrYnmsQ0Z\nmlzxWx9TMoSegBHZAMIZQ/MUCnZRpNM9El4Y2AEF/9lnSX909RFyOAEkV2Uz\ngCY4cAIHAppxo4vGaWvoenhow6oU4jqeXL7blGMsqwv5sTeYLAFJ7oyjIB11\nafSok9fEqK3T1RGQGSj3jpiL3jJidbAt1ngiqS2LZ/Z1nU2dYdgCVuT5php0\n5axoZFHiZzaxvwztv9lEQFCt5DrJq4Z1POHvBYk100vDIXt+ZnC5VUad5V4/\niN/tt4zhsrdJyRCjEOmzAz9ZLrmGQ3vEmjUtDqsVz5/gvH6zpxud8/9+Kpex\nOxkq7v1LBJysuj83qF5FoT1d3pw5av4D+Ca2zKYP1t3z0j7V3uQAPN6hJv1h\nl09C\r\n=M89M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.00dfbf6be.0","@material/base":"8.0.0-canary.00dfbf6be.0","@material/shape":"8.0.0-canary.00dfbf6be.0","@material/theme":"8.0.0-canary.00dfbf6be.0","@material/animation":"8.0.0-canary.00dfbf6be.0","@material/elevation":"8.0.0-canary.00dfbf6be.0","@material/feature-targeting":"8.0.0-canary.00dfbf6be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.00dfbf6be.0_1595538019289_0.0164362026287177","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/menu-surface","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"81ba284bdad8dd485deeb53a840e646a6140a7fe","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.b87e522d2.0.tgz","fileCount":40,"integrity":"sha512-oINREvY/6yHQ0PF/fLBpYy0t08+V4vH5FmStwGxdyA8/rQ9+rr36MvHezTLsrRD+h5H4zilVYGu0Y+MzqW8uOA==","signatures":[{"sig":"MEUCICsV5r9ToicTRECpcrfeCqq+4Kt5HGuNU1imzWP44eDeAiEA0rIDifnkX18hA1FYb0l3y7vRAU0CGN+7SqA1pL7oVFE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGgADCRA9TVsSAnZWagAAouoP/jJgoSggGp/w/QlmLsKw\nYUCTDA9ZAAkP2k2LcAiMCE7/mFi6CDni68EWxI21qoQcDtdd+sROlDo6/LzB\n93YV5na+xaOFfDQJ/uAmyYMYBarCix+WJNgHZ9/9PAETvPZYtwuYgit6gwJl\nrJYwopWDPVcCYUhpEuT7ppAb9Uci8YpXkVyMbyZu6Y7gq4PueodK1vXC5EOS\na9f1OWr0S9325jNrcRAJwU7ZOBDOD4lVAPtgl6eqbowfSDyH380UHjqS6777\nwMaADl/0XTZSI5kGFhVoOTRO7ROyyid4Ck+v9DTCkOiwejp/0fc9XHQfgMF4\nVDEKEtq7lje+qihxtO2JeBMM++jmaGaFFNjj9emb4WMydbUSM2vh+Y0ctwiK\nOCodXhuxZfmnTEX8D2h/qBAqKC9QmHVzfrSSxsT5dYwcAoUHGxImPc7+BqWC\n4lddPAKcbYsLftgQOkv0K2xDATbQawhJjGQl0mxnUsZmoPBc8gh+OrmDyifG\nntFdmLCdO8f//rZyKxDidwI6zfeJX6LJlJdN8mmYJp5W2sULpZ5MZrmzdSXR\nlRbGcu+bC4ibLGgEcH6wA4GIZW4oRS0HEneX1mL9UHejdgaj3Ck4MGG+2vIw\nBS9wVcY1WAYXhWara0GzOYGqwYB4ElkbOQSHnXh4l2omV3JPKcdY8kbfp/YU\nc2Gl\r\n=vfeT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b87e522d2.0","@material/base":"8.0.0-canary.b87e522d2.0","@material/shape":"8.0.0-canary.b87e522d2.0","@material/theme":"8.0.0-canary.b87e522d2.0","@material/animation":"8.0.0-canary.b87e522d2.0","@material/elevation":"8.0.0-canary.b87e522d2.0","@material/feature-targeting":"8.0.0-canary.b87e522d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.b87e522d2.0_1595539458957_0.4200940423810209","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/menu-surface","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"e7367f9912a190422371f59fb6eedad8cbe5b547","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.5b3e150e5.0.tgz","fileCount":40,"integrity":"sha512-Gdj6MG7G5KfL+iZFLkVD4/Ed0xURSogMJMQP49zdPVVdqnIXtsLlN8KeZJyPtO0SZg0BI556uwroeBFKT+l+ng==","signatures":[{"sig":"MEUCIQCYULRTpbKRQvOFYGgQZW0S1xw6yVdrew05giSr4JUFZwIgJZ3GXJdQHYcWJ+QmGVfNIwyEA2KbgW0LFXWcIWMi0OE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjhcCRA9TVsSAnZWagAAqM4P+wbWCJcoEUxLEaROSOjo\nB35NgsHAHKG7irAD61IeV7gS1ogbkbLhyLnDMlrJkl+SsmO2k1PxbLKo2m6B\nBdI4QdFTZ6pBLYPk3fZfCyolEhPLYG9VB1t7ErTwNPutTDsWk1f7U2k90EKz\nQkLPb8QL2NDCsA0Ygl7vO5Aw1KEtmBYTp/9p90HzAoeNDhnGBdxd6haFKAnC\nmlYxrp9HJNp89TRJN4tdu4mtKKl1zvTScaoORtsiL97bYSwpdtP01d1jgYgn\n5t1cdnrKyzHtZBYduG+4kCA8P2wfjis0unQgJVuQeSjaQYBi29Lhhpf4W18Q\nJAxjsaJZi29/D+txNR5BqbySAwym/VukTI1FU4q8I/Wyb7O7E7E/FTrtgls8\n37y1lY9q26n/N+9qaJksGBE06yScGeYAlf5tdG+LWcqDziySMh9cHUFdOF+z\nEyJwdE+JBYa1aJ0T6jdHd28IKXHyPURiB72kaRu3fQBOYKuDfdyY5NH7LXMA\nbxR1Xy8az6rVxplCsigp5MWYQ3FzE9CvaMjvxpBGhpqQTkBhmA8gmeCUenmO\nq8yC9sHKEhdfZMtglRUXVBjbFQ2g1uuKcLNcXcdzVW1HO4n4GjF0NSe0h7g2\nj50oSr7nGfQipiWERUwd9P/dTIbwhRHpnLlMiDCXVWmzxTfC25Q3DUjBtMJM\ncTAD\r\n=X+1d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5b3e150e5.0","@material/base":"8.0.0-canary.5b3e150e5.0","@material/shape":"8.0.0-canary.5b3e150e5.0","@material/theme":"8.0.0-canary.5b3e150e5.0","@material/animation":"8.0.0-canary.5b3e150e5.0","@material/elevation":"8.0.0-canary.5b3e150e5.0","@material/feature-targeting":"8.0.0-canary.5b3e150e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.5b3e150e5.0_1595553883939_0.5550352437781019","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/menu-surface","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"60e07b5ce3b49bc0b44bde44c659ef53065b905d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.f0ae11786.0.tgz","fileCount":40,"integrity":"sha512-P+a8QmYddPkk2p0U5oNAuxhTMmYwC2AhQPRArY+H7hvtzqO8rkwshc5VACLP4vsKlEuFtFlinxN748OX3bZwRg==","signatures":[{"sig":"MEUCIQDa2eDyBPKhl9LgBkiQjLmkk2gqgfjJmzZULacHLVVuOAIgUNDlk/bQVyOZNTJ8S/M5bWySDVuy7wYw7QqEdtbhua4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjz2CRA9TVsSAnZWagAAWNcP/0IkZAanaYdiQVc0dwUb\nIXFEmXn5dj7MY8O1fHX6GwTS4SJalOOaErNaJjVC4t8wDeI59ZdxZbgWGQm8\nhCeV7e6BucoW8pDpeWxf2mT5x9kPuhm02Mo5S5MUqHl9X38XiXboutAhNpQ1\nXkwsdnJWzgI5M6YO0XXZfOnhDrtpqEPPwnXj7RSyCXyfvrB4zp6vvUb1tGkx\nEpKhRI34fbOIqbi0jQjlPgAhe127b/Hx05Gw/K0rhu9DVqu7VIE3Yc1GOYFY\nO5qdMI/ahBOS147nd5uKZVCEtJArbYiDT5Ltg7YQr1E3/+PX3dUzR0Qt8BcD\nOBQinV6D3vHM8Y63o55PqKqq2xjzKbEfKVje2AYTDpLI/D4EdcNpqyBUI4Un\nX/yd7ozvNsc0JxcobNZ6WIHVQZO/34twWqgguv8rc3KaO/kle+pGlQmmtQxF\nR8Dj2vBz8WHh8t5UndnjwtuItcfsmwkbhwA5ZIH7n7DbOsjldAZrjpFUW+Cu\nfMXlE8lJLRTKjTejPdNrTRrdXCYk0oLTGONGTzwcwVdsafesc0DPzLu+6ZOf\nCTim3WINfuuYeoa1G1eCC+xMCDbQ/VvvT08MzRlDqNKTD2JgTr3ifTcVvscv\nzBackVb6Uj6TTPRl38WqZPjsGYtwUcmj+nLBuSAF7Vi2iVzCX9jdvBEullhY\nCxix\r\n=xYZI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f0ae11786.0","@material/base":"8.0.0-canary.f0ae11786.0","@material/shape":"8.0.0-canary.f0ae11786.0","@material/theme":"8.0.0-canary.f0ae11786.0","@material/animation":"8.0.0-canary.f0ae11786.0","@material/elevation":"8.0.0-canary.f0ae11786.0","@material/feature-targeting":"8.0.0-canary.f0ae11786.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.f0ae11786.0_1595555062388_0.5214733788740387","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/menu-surface","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b9d5eef42edc482bef89fc20ea6e84a6e53f6c64","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":40,"integrity":"sha512-6Wk8qQ3WI9IcEb9KXrPR7RLz5ZKdfDu0tkqyOLSYxsmI01c/zGkiqEn+bR8SmrEaM8hMjmn0zvcJb4S8g60nzg==","signatures":[{"sig":"MEUCICcRfsbc7PxMEE3F88dHFkaKoR5lmbe1dT1GegDbFZubAiEAxG9FIu47DFzk/Us1kOfNTJDHjoScC0LPZhgvd9oCFjg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkNQCRA9TVsSAnZWagAAqSsP/R5LxKIeb8GaxhOliEyk\nz2u7T49yt1o9fygNYdkcm/ECUflxHV1BPr93iuYrrVAGl5RhoCFFJXb69IN1\nFgcjV9BfzhFSG5QHqaMbPGiFlI64ztJAe35SMT8675ZDD+1Ykw+DiOknNOWt\nlS2xBcXkXCaETFtbav+AsmPivWNLrh6JxJtZEMnMnIb9F3wJKY05U+ewfJv5\nw9EiaZuz0aSX3yMA5520YFdXkLRqrEU/XyuhvsStc24rG7pe6CSOQYHMHW63\nd5aykOKzXvCVBFVAHtmKNNB807lBtksoUa/dyxbCMtCTrr2LlJKQUTTPyd66\n+JY+DHjnxkCsU24IuiNTkavosaMlgMV8bdFdZPiJ9DN5GUIsXly0HbuuzTO4\ndnh7yEhbkqg4VwqQWAnf14rzW9vzCVWTwBCv2iywusnVqKOKgMeNbz6C8GJq\nLxufc3A6O5OZbsBhuxqpjcRKTg9dql8Nb2Y2XQPGrQp0X6X/eT9a3ImVhZbg\n3cFv3D+w1HsFncHWqIpjP01fG1TXVC/a0DoaifIpoEo6sAb10kzSxzmWzTCQ\nzGOSxyJujNT3KP7JzEYGiRj9884ZZMdvdg/fO/CXLOY7KCmLblG+C1b5ApoX\nzsV1xShcTBEmNfPqugs6LBFI8deK/1CrD3hd7CZpKgtgn13mi9ZbZyoVb9o+\nTgfs\r\n=aaAG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fb4ee66c0.0","@material/base":"8.0.0-canary.fb4ee66c0.0","@material/shape":"8.0.0-canary.fb4ee66c0.0","@material/theme":"8.0.0-canary.fb4ee66c0.0","@material/animation":"8.0.0-canary.fb4ee66c0.0","@material/elevation":"8.0.0-canary.fb4ee66c0.0","@material/feature-targeting":"8.0.0-canary.fb4ee66c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.fb4ee66c0.0_1595556688114_0.27235521600573787","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/menu-surface","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"aa73bf09c6d7fc9407eb1e41373f5f9540881030","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.5511e0aeb.0.tgz","fileCount":40,"integrity":"sha512-UI1v0IGJJAzweYcEmWAdb+Qa9YqLZvDBzANPFSfxONr+8xd+4xdnU4zdxshaIJaExmaEIZcQAHoex0QPI+aHow==","signatures":[{"sig":"MEUCIQDQf6PrbNfZ0GzBtdASsV9s97RyLd/KPuvltCvnvFgSvAIgGXxYJSSu26rA6HRJr3u+KVsU/EaRPWqigkXiYeIMiOA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxL4CRA9TVsSAnZWagAAq9IP/2p6v8OmAAmRoTNIMnpg\nQjTXAy0Y8KDen+g6//tRx5OApvHgUx0jFYZrwyyN6uhyo1kDgNR4qxLw5anM\ngag9xeWyxJ+f2YOGahSkCFkjmdynrnx8wI+M+mpsuRiOjPIQHKNsGUyz9vzf\nCSH1d2rN+lKUf6X8htax3H0OI226wDI+rnuwpijBCbgMJK5ZWCGkDDI+EtRO\nJ6175gEOu3dueWX6HgAM4vBlFoQHzjXfuPB+Na0TmTYrV3TfSvuiDWfnfOOU\n8VLFzcOK86A0MC0SgwZJ7zvAbTFt/WJ/wWgsrSrE8KbtHxfCgsbEtpzu+K3F\n1FuwPvEifni9yUtbci5Qbjz2/hXF0H2qq0lO5jDr1KqHTRSO8Ic+ajmF9PNJ\nEMaLNmVqUwthOWfHc93WSSMwQJ3T15+AQE2/+F3MVzUymGeteX3uWrXZGYKC\nu3ndA3xHStpf+7O1kJqH9QbR4omqdUM/8FE156iO4peg8Hsd1e7n/YNyZ+Hg\nRRHb2RykgPeK+i77laOJNO91er3vUa7v08/kaZLI4tLDWmyVMCZxUsft3ixk\nyJNLk52oPtj3V4VbjOPFsUnymdheLMl+uRSM9LhrVe8ElerBdWp18BmxRjaf\nxep7yXEGpKsuSkaRup3y83F5T89dIVfRgi8sFUjUVAuhKdLD/okK7UOBoQ9M\nihEJ\r\n=Pzzw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5511e0aeb.0","@material/base":"8.0.0-canary.5511e0aeb.0","@material/shape":"8.0.0-canary.5511e0aeb.0","@material/theme":"8.0.0-canary.5511e0aeb.0","@material/animation":"8.0.0-canary.5511e0aeb.0","@material/elevation":"8.0.0-canary.5511e0aeb.0","@material/feature-targeting":"8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.5511e0aeb.0_1595609847600_0.44535300212977624","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/menu-surface","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b382152953f9f65d1440df3ff3fd494cf3abcf67","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.8388a9bf6.0.tgz","fileCount":40,"integrity":"sha512-KFQFHikKw5+Ga+eurli18wycXDvFbUR5hOtJNArFlY9c6NT5VfHRddsGXnpzMXHxJUgFTdAM7pRF0C5Gu/4xbw==","signatures":[{"sig":"MEQCIFdIoq/+PqR/SnuKcIKfXXG6jhwOgdyt/x9LlZQECwhWAiBD1MHGzpkNjiURW9Q4Dl6qVj66WPgxkLuO9Ffr65r2gA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0ENCRA9TVsSAnZWagAA7gwP/0XtNVUsz7NkRUGnCLFt\nnm+nirYTHQCAZ3d+uanJGZgJy3y/8J7oe8olK5dVpgFBZsPZCQcnj+mXth20\ntbbDAuViOlqLcGFHDU3t6t80wTYgSORmWKif5Li2P2j+XfADinZUp1fqgzu1\nNw9AAlp+bOaX6+6jchY/v3Nyv6T8pbI89LZy/YeRVvhd7N0nutsTXnITwp7v\n7c8tAEh6m00cDq8zIcsqADGB9Y8eVFwMUEreodp7dNaKTT0aC/+pdtTR+2yU\nGfbmyYmXvDNdWZVW9tEiJYvc3WPK0bEsGFPRQIBagyKNkfIEzu23U7WGWQko\neoXEfjwgOI4C4aYUZ8V3hDbL7awRAiXEvmVmUpqt++H+Y02P9RQLV0PlE4LD\nm2e8OBy0T4fr2WgFEcrZTxPWNLVP0PYaryUHl7LDrPMq/48D0A7JSw2OhsCR\n5AoVpTPzH+A+m3/vgRPwkLxYERsbvKXtqhTtHD0fRsGLtd9AgMshr1r5b8Oe\nI2nbyCb/WeeCAnV42rW2TI7K3PizmS84QhdLpPA/ek8MvNpyf24z4gbp04R9\n/NkhbN4YVq5tjfMicb3a+GhH2MOusQvf59Fxb06ty56fWprCJ9LkipzEO/Au\neGiSJPwVtnhlV/j/ETVhny5qMJW886ju63QFFK+8yC7xfccQuOcXfMjDD9fR\n5VJb\r\n=86s5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.8388a9bf6.0","@material/base":"8.0.0-canary.8388a9bf6.0","@material/shape":"8.0.0-canary.8388a9bf6.0","@material/theme":"8.0.0-canary.8388a9bf6.0","@material/animation":"8.0.0-canary.8388a9bf6.0","@material/elevation":"8.0.0-canary.8388a9bf6.0","@material/feature-targeting":"8.0.0-canary.8388a9bf6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.8388a9bf6.0_1595621645190_0.17495002509899282","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/menu-surface","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"f9bedf8bb6a95a103734602f90ee38f2be8879e6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.ac405eae1.0.tgz","fileCount":40,"integrity":"sha512-MQ7s+D/s40QQAc2ahOWmUz4wJR1T8y+RzR0WhnjhwAciGwC1RyaCvFD3NZQqmY9ZKhdeK5cRtFEFF7dDM+pLDA==","signatures":[{"sig":"MEUCIQCbARc9KGvxMqeUth6AOJ5d+AYNwdJqoiRyyoXU7NbRAgIgNX9BWb50++wwQQG/PzjaIfcY9gJk/a12fWTbNl3ilXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu2jCRA9TVsSAnZWagAA1XkP/i//glayzQ8UbZtgmvd4\nq7W46IDhcjCzUbp25MeOgymn0LVkGIOiwjihLCT/o3dndKBqwAc+AzFi1ana\n97ucy2DUj3ZOTJPXMGRdiRcBEtomI0ELS8T+S/LMtr1R26+RiMFD7qUaMvyT\nC06ibTsv8LM5LeeVQQRAA3lm5B71eNjAQCxx+oaZRCzEUcRWdQwqkL41Ct5i\njitlWbMuzII++aguVCCPRv80lkhsvuR/RLSRtaPudAl5XzyCbtXRm+Ac7NWO\ntZl6heZ2L4pXfaJmscypILgNdGyr1rcqN69JWYhZGRwMdDNs4MhVWTU26zdK\nZTBW6MN8s4z7e793cr8Yn51qqpkgoa0sO+oSu8ClL90vYGEY4NjvK3ItxcZY\nyXcW2UQPH0gHdTA0RIo1Zs0JaBGB7LKCkOA5hNsEKOhQ6WlrO9ku2iVR11Vy\nDVlrBHmvL7XFdwDeFPxg5n9CMJjK8g/HXAyB+4cOGYSmZeyXkeVeU+GS2JQV\nVq1G9okOKSVQMfRAq2IRLJu1NAKLfmn3NtF7ru6e4itmq/XK6Lvwyvu7sX98\nySoEpoFfRu25NRjdlinfZQRSuNVSjcPtRR85rSqE9gUARxjxmFpkcufnfHb9\nE/1OvIbWKA19zhc1+epIgpNJr+e6rk2WgRVVcNey9jdSeKHZzudaFhPqbacX\nHpHy\r\n=bT+O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ac405eae1.0","@material/base":"8.0.0-canary.ac405eae1.0","@material/shape":"8.0.0-canary.ac405eae1.0","@material/theme":"8.0.0-canary.ac405eae1.0","@material/animation":"8.0.0-canary.ac405eae1.0","@material/elevation":"8.0.0-canary.ac405eae1.0","@material/feature-targeting":"8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.ac405eae1.0_1595862434900_0.8451889591693984","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/menu-surface","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6e3623c20129ddebfd32f661fcd5c651cc1423e0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.75553837c.0.tgz","fileCount":40,"integrity":"sha512-6cHi/1Hql5JKWx23TRt8ri9t0F7EA17UR0p5drb/xXHfvgLpU/u/epinYym+2xZDseuGhd8zyrqLQdzQcZRHgw==","signatures":[{"sig":"MEUCIQCSPEZ+PVGGAEQQuqCPLPQHttcU+MlDf2yTWsOpYwRs0gIgR5gn9Rp65ozqUZihNFhuCCKpD4aNLkmQvNBYhAjVjQY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu8ECRA9TVsSAnZWagAAq1gP/3ODyrBn6dWKVki0tmAV\nYtxc3N0gBWjAcv0VMYUEa4eXXy489K3Khfyk1juyBQE8JhjJ30Ar0YxsVSk8\nXWFOxL24laHq+WRJjzJAenNVFFkEvJBjrBccmype+HOflWURStYK/ctDaMfP\nX+Fc6FXKlnm0apDhgwYJHJ1AC69CA8FlAgLPlLltPNVxBlkk5RPxRzJBhykA\nlbJmwyZSs/+yXZPVsLI1OmuhDpbn7W/J6gjHRk1wr8tL7PCJVRTAcFveDIgr\nrPGMDrMLpDAEW8tWu71eCcoF6MnDV5v4XXt3UuXKeIgo7R+HnoDXSVCeIAaS\nDsWl4j+am1u3pe9A9O4r6h5k6LxFLpZlOlEz2eBsNkKFmzwXfTmZPlXNOLeQ\nv2rvsMjsUHFHz9icFYLPiqrwcT4hvVRV+/dkbSXzpS+GjZLnGbYGKvpqFEmy\nqzitw6RAOeHqlwV87njepXNUIFGjW8tRyXQtjkNyDa3byAenRvlogJcShQPr\nO7FhbPJOZQYE/m9IDUNu5Mu2YwvbAm0GRyx7QrreTldC5pFXsdIQkHYKTCd5\nyuWrZmEf8b9iR/rQHuJzGHR0Ob4ZxGaCpZeVRPLYhoQE5NUlzPuAyAdqAuQt\nzE7yhKFOQrNPe+1nMZC3yjNnlbemaWvoN2JCxTa82cDLp3VVCy+cE8gqFS64\nQKxr\r\n=GkAF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.75553837c.0","@material/base":"8.0.0-canary.75553837c.0","@material/shape":"8.0.0-canary.75553837c.0","@material/theme":"8.0.0-canary.75553837c.0","@material/animation":"8.0.0-canary.75553837c.0","@material/elevation":"8.0.0-canary.75553837c.0","@material/feature-targeting":"8.0.0-canary.75553837c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.75553837c.0_1595862788347_0.42031726710246375","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/menu-surface","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"0ef41ae0dcb2e7d71eacffee9dc7dead6e358a36","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":40,"integrity":"sha512-SC3bb1YOoN7mxqX9qNlyrKWZTSYfob59MyfpctSVwigqignTPtY81CqcCEQS/5J+GqgxnF6hbzQG5DQKQiLvmw==","signatures":[{"sig":"MEYCIQDo4zxhjCUhT8MT8H7NvGcL+EsbNpMPzWkUfatQQeyypgIhAOTTLuuwn7HMYOukLrZsyQRjZM0TZ2nZnptR5h3lIT7i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvUECRA9TVsSAnZWagAAWKQP/A1Ci3MKz91hJm40b4xM\nDnXGjkHjcf9JOvt6/BUELZ8h5QYLSfTIPpyT3Tt0RgkdxWSp4pbWC+er44Uw\nm/d3WY4XcJYy8fzOodVV3jM10algKgT843XjwWYuDiwXDCd8KbL28pE/4iyY\n1sErSRDGXTC5J/o+5fz1lXxfvi2RS+ECZJaTDGNCmvzkK3RtDWLhztvsxnK9\nml0CCHJDr+px0U1H+alIxPR+E60/AVZSJAnMqaVCjlj144plIuBH5QbU+AKA\ngGfKEijf/qsM4H5ev/Gabcb5oRZg0tn9gft/buf2yHP60OPlj050hFu+51Wa\nHegeSIYiVZ/OR+QxJu6yN6pFDlM9mF8F+IfHRjPzdc01LT+ghjZ4bKC3S50e\nxUkB3MBPh/qKPNGXcPwfEnTsMBUCs7aWIuNX1ESHtG1TohbrLXjdx+Lv5K3X\nNuzkHVO58enuidsPV6t4JEDX7Dg2hnqrLaOyX151ONTj71mY2QfBrtxbzl0s\n+3bvw5cV4AvMzK4806UDfc6lwkuM5QI8Ig4yt/Vh9Y50pE74gNNB1CA1oUrL\ny3esidKAhPstA4Lr9Ip0t6+cxHaqFIjDdpcXrOeez9zPnd2mpaL2vqjYYHAA\no1XcbKTrizgc3pjMuVc4GVlCgNrMY/UuAbZIVezsLTKzzJ295h9ZtFrahLMG\nB1ar\r\n=Xj27\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b96fbfc7a.0","@material/base":"8.0.0-canary.b96fbfc7a.0","@material/shape":"8.0.0-canary.b96fbfc7a.0","@material/theme":"8.0.0-canary.b96fbfc7a.0","@material/animation":"8.0.0-canary.b96fbfc7a.0","@material/elevation":"8.0.0-canary.b96fbfc7a.0","@material/feature-targeting":"8.0.0-canary.b96fbfc7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.b96fbfc7a.0_1595864324449_0.051199489754841565","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/menu-surface","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"52f6f7c7970c062a997c829c7dda5d3cf08ae687","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.61f1a8d85.0.tgz","fileCount":40,"integrity":"sha512-NJFSkKVGs4WTlBvbpKE3pwcAzH7LMVF+G2fVgtXjSLDhCfQaqjT5hpJkdJzIO/ORAnNlNqy3VA87vZp8G6pSag==","signatures":[{"sig":"MEYCIQCLeAHxXDdGBdPxJ1XZ+6OwIdumAtKOI46d6QRBVxXgeAIhAM8sNRYtQFWp1bv4EsVkP7xkS7fS291jYd7P8fMD2kfF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvcoCRA9TVsSAnZWagAA3pIP/R7bldfK+uke+u3qLhFg\nJ+EmHg/AF9o788IEIozkNErmhF687+JY/vKh+SAKu55y9qwll/SkJu0i3b5/\nkj6F3FfKvBWQQKRrBfA+eQs9thQ1wHpUS3e4Yg7lZcJ3AsMU2UXSJA7Bm6Hq\nuDnavYBJF8eE+2dORzlVtnqI++UTHn7LfQWhrzTF8yVr/KueU5U3v0FvTORG\nzkd0q/S2DZ5SgIPkrermZE+oYqRVj6Te1JXaCB5lItz3GqYLAxx1fYvi395W\nj9/yahSiJUzJYbW8HbHgKiu53tqj1RgmhtqUw4O0G14ZhucWnxAV74DdC9dZ\nGgAIBbz1leKwUoi94Qd3D7MVhRDk1UCvX9Kzx1ONVySVe2ZYhzZgZvBnCqL/\nHYIXgbqBsxUpdU2/6hxW/Cc77UagZ1KJ0XCl9ZL2RZGQ5jz7hWa7tbL7vIZ/\no6ik4g1IRkfyMje0etM5HbW6GmHWtG/z1e9euqnarACYYX90ag+02fWAWhw7\nv5yPzGd6yvcqfby/1raFsl1GJgj2LEGY45GBsDph7Mh/8UjzP5MU7tzhknOW\npgJDWhVM3jhNmLR3HsxHyh/0xAwqBTybVPdfYDIoi/zVoAfXCw/55Sm72xdC\n3Ng09C+VORfO/9XEkH3//vjoPdTcC/6Nic2/lBSDqrD9mivDIk8lRqCscrGb\nZxta\r\n=qRMs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.61f1a8d85.0","@material/base":"8.0.0-canary.61f1a8d85.0","@material/shape":"8.0.0-canary.61f1a8d85.0","@material/theme":"8.0.0-canary.61f1a8d85.0","@material/animation":"8.0.0-canary.61f1a8d85.0","@material/elevation":"8.0.0-canary.61f1a8d85.0","@material/feature-targeting":"8.0.0-canary.61f1a8d85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.61f1a8d85.0_1595864871709_0.23731239816149086","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/menu-surface","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"39816fde53b4e308282c3c8fef0a463f4191d1dd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.81dc33377.0.tgz","fileCount":40,"integrity":"sha512-kCqiA1F89/EVLZOIuBug6mXKn8KeEiDq9dXxyQGFe6OChIWfdzrVc2pRgwyJ4+kGk7JA5K/8WQhL2nI+9PrbSw==","signatures":[{"sig":"MEUCIGWJKiHVMb7wPUAXJIeA0Y5DkPMwfI5VRi7XhoUQh1zqAiEA2aikZfnK4I0rgAxflvyP4/3v+FIxxdr0A76fMYEmQH4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvn9CRA9TVsSAnZWagAAAKgQAJkn0FIRcvVlnfnq8CgQ\n0tYzeoNxgqFcaDOVKfUzfv8ZOAV4GwyNnp3v4xjfbP0tpg/hU46IO9DLWnck\nCOR85v6NfELAv9WZFTTMFX5F5t/5N9QRmxjoftOkyiurhOats/Q8Kjn5roFG\n7ZKMLncqYomvEmjYbdvWcd8gs5AH5Pj41L+F2fiBI6zDwWq5QRpIDQi0eGNJ\nX/sRbAcXldGdFxnBQaZnXSIg6YzhCx3DXF0+hSiWu/mFeXa1TT50hTyiwkfG\n5dcojgG37wcy2DaHmJsH/g2PlUVOE23reNSlyIBgZnSoyrjideO9cNDIOjbz\nZEphvCtQf3r4PdR8A3alDYfp0unInUVutnibCLXvJH4j+hI5J/3GaDNxfoEr\nnn/OrvuSZWJefkgACEI7/XTFgQqvTsf39J1JVOsPKNtcK//ctJbKF4FPNFu3\nMml/wdt32M7HNcCD6czyvYcpTwF1t5RYj4AjTeWyzo7LE3cY6lQkAAOLEHSq\nkGzDmOWnohWVRzU4fVsJgam9SwAPF0UuxFVT4pC8ZGPOlqO/i1OAenPKruA9\n4Oh088DAfTbhSHHslEoLH2u7au0VElduxiovNB7Ies3R3SYnwsN0mjn9lipV\neOWDp/4DF1kwW1YJBQENwxPvoIOuflhdgYNVg+1Bs0nN5bxcbRKu7Z0sKFZz\nvAgV\r\n=BXoP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.81dc33377.0","@material/base":"8.0.0-canary.81dc33377.0","@material/shape":"8.0.0-canary.81dc33377.0","@material/theme":"8.0.0-canary.81dc33377.0","@material/animation":"8.0.0-canary.81dc33377.0","@material/elevation":"8.0.0-canary.81dc33377.0","@material/feature-targeting":"8.0.0-canary.81dc33377.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.81dc33377.0_1595865596604_0.3840318176846196","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/menu-surface","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"1eeed186d5d3a3f180bae0478fbad23be4aa6152","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.ffd9ede58.0.tgz","fileCount":40,"integrity":"sha512-q/6ya64U+QLdsO3n2n04YWX+Zf3gLNXOkHs3+5JG+CIkQVCRq3fvo7zZyL+vy9SjCXsNJtjDUiAw7VcA4o8g6Q==","signatures":[{"sig":"MEYCIQDWwawQuV29cl1d24JIBZLLneUEdGF/KXLTM9tQNj46HAIhALwbHnzb47R9b1SfFI2+ttImjJ9heMs4FMM27CyhCumD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwHSCRA9TVsSAnZWagAAz/cP/0bzBoK1ZHtMVqgHPDjK\n3heSzd5lzWDLeT4FpCGIyo7dgAZzHUpELC8N3Sz3L2lLZYtAfPLthFiTZ/1X\nr5xjZikxV9N9RkaDufhzt3ll69jFYGjlLgQ1PfhxsypbHVUOW2591Clmki28\nSZqU3+aiMB8mX7pqN0f7G0Fco68JeQqytaTr3Wo6CohEY0N/gwbnWY4sfEpQ\nkGCp2jkAgbSYTjaPwOKARMDqRuvfc6cWKDH/bpXIofUtaYkO1o3tEJCWdkaz\nioAEFO15INtUh5fg5GyOWMyh4nHS9gp/8njI+Ye4Ylao8siPOTWUL1OHDhJ+\nAmJgO7J1/zCDKewI5R3P8EFdsO/cPfNUoZlJhZOxu0eyXXDCtZ8ejIdT9ebG\naf2JkDoIZfdUWU85fkixyyXxM3bvWs1/G87SdOHeup49YeRcosBaPCi0vtb9\n4MypJMyJN9pTZSDtYQ1K+HQPZX169gXclNL7bpFyQv2fAJOfo31jlJY9lXPX\n8pLDTX5v+YSDu7tPYyArWhtpkdP6Zix7umn3Z253yn9XxxDqZDpgRF495jNQ\nPiABwPPM2wiFRlM3AUPyII99zXF7nSg3frn+9ifJq5cEWPJwISHiwx6zSMrs\nfSLQpcRSW1+pAuYXPl9jW5uxC3avOIqH8TgMan80Nza8pEwN3+rtB8w13iRN\nhAVJ\r\n=wtgx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ffd9ede58.0","@material/base":"8.0.0-canary.ffd9ede58.0","@material/shape":"8.0.0-canary.ffd9ede58.0","@material/theme":"8.0.0-canary.ffd9ede58.0","@material/animation":"8.0.0-canary.ffd9ede58.0","@material/elevation":"8.0.0-canary.ffd9ede58.0","@material/feature-targeting":"8.0.0-canary.ffd9ede58.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.ffd9ede58.0_1595867601868_0.26773002772259935","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/menu-surface","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"cba358a61c502f1d8b789c432f0a73183a721c9a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.52dc55acf.0.tgz","fileCount":40,"integrity":"sha512-HiwYXkoO2hTzXTwiJKr5aZgkkQjMDZ+xyornP+KUy27LkckE216QEyVbIP4vdwD3vT+T538v965nf4Dhtwkikw==","signatures":[{"sig":"MEUCIQDcJwMQ5Li4wnL7tKBUbS0iKQuvkxfeKojeYnnAHIikQgIgYOsmO18jBbTf+AquNkqklmmO+qs0jUsuVvaIMjpbsSU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwo9CRA9TVsSAnZWagAAVN4P/RZKOSeZQ7y0RNHo5wOE\nj5ECs6XafNBeggKkelfIZCaBIShKbjJf5D0VFqG1xwG0+7zMkNxaXR0nl9Sf\nKLIEV320wQnU16mKB4qXp1MIZ5xFsno9wZi5Zhu1OkJQf30fyEbVy0iNNyMF\nuPO6TcMpEzeCbJdRVv2uwEixjJkxtKZ7fXjP8Njn/Dfwcr09DJl21z5dhWlt\ngK/a3BzQJ1rV7cdur05R2DGIKNMCKDO1/GGu5yOg1dpT8XCUYcJn8tuyBb6a\nx2qsdAt3fDaJHshL5Jj5zrKMMORPRadF+uD3g2JGMHtWIYZdYXLkU+XvnzuK\npvesCPyftCxsuf0LFNRzU1ouHp3EglHpU3oKUsBxObf6Xi+0F/GSM6IikYVP\nMIPCy1z/S0js/+u5wt+vnh4TLEH/mQ5elOUU4HplQQTuNuvEL9PTv6bH2e5H\nm5qaQR9jXnJZG/mgqKPafI+Gb6R5iEDCrN/LNjTkdGEfXQjf7ni2V9u8UvVp\nY/EXMA1XUDfGSfXjUSM8RyNacHBas+0ZwwrzvXAbgNal+CYSXUrT9w/bjzr/\nEirzpv8RtMAzQOKE/EsU5q2xJT4IxUYAPbkx2dLROkzOQ3TRNoKQGgkNiadD\nANdeZywjwquphiUGmAPfZ/jOuzULJeKJtgdAmisgijRJ90QYidFeuFjD3ko9\nnMdo\r\n=a+bE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.52dc55acf.0","@material/base":"8.0.0-canary.52dc55acf.0","@material/shape":"8.0.0-canary.52dc55acf.0","@material/theme":"8.0.0-canary.52dc55acf.0","@material/animation":"8.0.0-canary.52dc55acf.0","@material/elevation":"8.0.0-canary.52dc55acf.0","@material/feature-targeting":"8.0.0-canary.52dc55acf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.52dc55acf.0_1595869756846_0.8838324288447541","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/menu-surface","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"379c8992d320ebcdd10806192807c985d31cbf52","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.d4274ff05.0.tgz","fileCount":40,"integrity":"sha512-TMS/OgR6ZJ+u1Xmc7dlDhxL82EEP3hiPcMPZX+k5iBDN/wmnd7Wq6d8mAcTTjtnFCCC43+cqgGJK5u4wezh2Jg==","signatures":[{"sig":"MEYCIQDAaWcl9TGzkWP1IiIu1f/iBKkRJnGIzhl3RcU7KUVvogIhAMROETIXocB40dfn+/IqiNpdB57GL9BqaKv854revuro","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzA4CRA9TVsSAnZWagAAjsgQAIcfCKuysalrgylYpaeJ\n5Q3Imeg74lTR+adLP/MMJ0R1Q1eav4XImYuNDhBbcL0l3hAvKwmeSn+6W9pv\nYvcbuJZ6UpCQKF0jrM5SCX3DEYxoSRM7O0wjqCDsuUdSj2auAaOXczygCNbt\nNXDDsruPGSzWyaQ7UhxSpLXJ9i2P8fgtTiHtUQqw4KB8AcGT6vh6ZZvW3mmq\nn4OXjlfVfw9I+GSmVKB6YqdFV8sZBjg+/dmH4uU5EgpdbTJhhLK1hldVZQSa\nlmmVB7I6GdkhLHwyGcsfPeb1baCplw7YeDF4NxhH6LsdFpm8KSHuSjxN3Efo\niQXaC0fUjgCphfO1FX0cOBtnYJYsCill7sXui+qOt6abGLe94LpLp9t0Qut0\n6H//k37ImB618rKeLt5Bxdnx05KBhAid76V6S7tarfdX58U8OZm/5VZa5ye7\n4Zl6xQR11OcICWW4oiWvtfgjs8c6pXwo3HcYp46Y8luj2LRyXFLiDS8wt6Vi\noEQmehYpehCfqKrh9kupd6VGRBGB7sMyzkYcJcxihiQN9Rn6b9i3HOD8g2AU\nEFLBuvk4s9ppJC29GntOB4Uo28dpgxRfrwSNndgfVwxh5lVcA4oDFZtch/97\nVDv3SGfCdT/qmmzYLkTpBc/9CFxJeFGMGsWObsZZZ37rxsChi6d2W9yeIICQ\nm68o\r\n=YvqA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d4274ff05.0","@material/base":"8.0.0-canary.d4274ff05.0","@material/shape":"8.0.0-canary.d4274ff05.0","@material/theme":"8.0.0-canary.d4274ff05.0","@material/animation":"8.0.0-canary.d4274ff05.0","@material/elevation":"8.0.0-canary.d4274ff05.0","@material/feature-targeting":"8.0.0-canary.d4274ff05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.d4274ff05.0_1595879479734_0.8945442951521321","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/menu-surface","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c784e041825aa752cec6852bb5158ac1cdaaa5e3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.b82d0696d.0.tgz","fileCount":40,"integrity":"sha512-lSVCatWeZxHztYgjglbtl8+Y/bq5Ow4cacSeKRcPw40rTXZkXd2SZ4uu3Hm33cTbmzpssrIQI0HmvKuvy0TSiw==","signatures":[{"sig":"MEQCIGTr45J3p/8j6zWvx3Mjr/dSp52IG1WYXgHgSZ/7X6gBAiBySossgLlzr815ToUR2zCO8bz4d1Knc0ZI33MD7kUv3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzH7CRA9TVsSAnZWagAAxqMP+gISl9Ztmnakp7ZMJvyI\n3Zlnio8mhfazikO9NfiXkqbGDZROrNNxwmhbqUZA5nXsx5XBiKEtVYew9Mav\n53m+1LWv0eEfGFSvzYOZnzO/sp9cJ86XhdhmxseVjbgozPUVK78fkLV+UDta\nQfN/UAi6iFo4Rh8Zf18WYXKEumbOw2hwqKIH6vQHGAkr/WnNxjJO2RD3SsqN\nMDZOAtlxl8Rjo/8EoSMjWZZKyIzuDW247k6P3XDgwAcq4qi7/ZY6p0IRGtx6\neLsN3y1qtd2AjeKMgOuQW05mmx9gZ0nwl8Eb6sMEV4/elf1dTP/Lya6ZIM/H\nZwzVD/DAlceaXgtVL5O4ihMKrxEhIp7Up4Qb+VheCf6p9IMGvbN/fZtJ7Amm\nKkZGi0pDiWdXrWkP4ckucuHuejvG0u2AY2odCDKqjket2IRgzwTG2i3jtTq/\n4k8UTeQCuATvCJaafog/ujGL6tS//eCLe+9CidqO/s70ygez8zBswK62dhpz\nH3L4ZF2ja0zBQS8PPTovAWXXKd5c8NG0XXTMKkjTf/gYY97D2C5NTp4EvK4i\n/V+CgbLihBBvZULCVLTScfQNKBc1Utt4igq3lQ0U+lxDkkRXKgTMDnaukc8j\nCqMaSUA4hE0gpZ1dxptFMKaJyXlKoRMMB54H5s4YRlIXHBAY8+LEYHIE6w5j\n55wt\r\n=l9HI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b82d0696d.0","@material/base":"8.0.0-canary.b82d0696d.0","@material/shape":"8.0.0-canary.b82d0696d.0","@material/theme":"8.0.0-canary.b82d0696d.0","@material/animation":"8.0.0-canary.b82d0696d.0","@material/elevation":"8.0.0-canary.b82d0696d.0","@material/feature-targeting":"8.0.0-canary.b82d0696d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.b82d0696d.0_1595879930912_0.48368327606822437","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/menu-surface","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a3cde71a59d9b3c695c48b70f43b7083b50cba67","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.c2852000d.0.tgz","fileCount":40,"integrity":"sha512-O5wgEVaXEGtvdfD+vv8diY6OqOivzcbrOBAZM5B+xp82pnSucCoSDT990h8Z+AMyVKjT+Rriizk71/F7bGTpkg==","signatures":[{"sig":"MEUCIAJTlLY/dUxzUJ7ZTdxy1ocoPIRMoEve7ng8AYh6q4RJAiEAvOw4M+F1MaMDAcjzj7Mdzd+UB0iCPZ9KTR+81AQJdKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH0AYCRA9TVsSAnZWagAA3HEQAJx9MAl/UvpG7AmvNHtd\ngcKcPOaGRnl/4OKCs4RnZOnS8iFjr3c/fIR9B9R54/jjD/DcfHAXAsBQ5HXv\nClhgzc0FKyOuQY2zqrX0HsmYmhKCOC5TrC38ayKTX6oxU6BRBwXK2rSgW51C\nwiwxR81uLSKbj3/SLXgu7p7yqCX2Yu88tYiSczg3lr/ttD3Zytt8VbvTHLSm\nLuKbRaLd/UZtMsL1RPM21QCLodLtPA+95r+ZdPN36TySJiYSWJ5gA5tw9sBP\nRl3YlD5eDNzH+QuJCigIbd84vbVqsPCtjtyeQA/24ViY08AoX7eKc/Pm5uiJ\njWAUR21O8vJjMXOJNXHPDUsKOUDa+2M8noDFM0kvlH+On4dKdTSF4ZRhf6tG\nt2rlaLeqp+Tpcvjg8Po2YZuV0rounDSvBVirCCzUPnR4RVCspkhC8WzG1K0j\nHEysaayB8mqXupdHatLOYX3ygNTJO5mVUUDDB6PgtsyeMX8ub/i9vGziCl45\niCZ/kCgdIWJLNKKzFca2fS/RuTHg7pXnM55U4S+UdzKHtACFE7BYtcikk6ZO\nQsgiWfh5jrKF/GmsyYZDZmUJg7pmxsQVySLLGjfO3QdMeyzsrvY407aPNYpl\nSRC6l0c4x5dLqknFsAy1J1pR+8xIOmtVMValCnus86dzO5Am+q3qbl8ntkaK\nkT9P\r\n=QiZT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c2852000d.0","@material/base":"8.0.0-canary.c2852000d.0","@material/shape":"8.0.0-canary.c2852000d.0","@material/theme":"8.0.0-canary.c2852000d.0","@material/animation":"8.0.0-canary.c2852000d.0","@material/elevation":"8.0.0-canary.c2852000d.0","@material/feature-targeting":"8.0.0-canary.c2852000d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.c2852000d.0_1595883543562_0.41443001367412413","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/menu-surface","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"366268b095b46f3df92727db3ebaf2866ef2d919","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.f86f83f54.0.tgz","fileCount":40,"integrity":"sha512-Mg+nLUsfmMdGMDSlF43gnNKyz+SHzMfgRzyXMkHI0J/LcZFMHuHu/u4yj6ADtP5SgiFBqjmc9jfR8d5T+hiFfg==","signatures":[{"sig":"MEYCIQDDsTReX9S4s6uMLrtEERFjinvxYMz9wd03tygpGVAtPAIhAMX8Ca9ynXndQyfAkJnCuz1Dk7S0kQOX9bF6EYM7VrL+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH00lCRA9TVsSAnZWagAAFsAQAJGG8HvMuWT6ZY6GSAA0\nh819rn+sAJeBc9ulKio2Hry93o/jlNej7TO0Jd8l8wT4+cgTFAxb8+fMJ0Pv\nEywdBuQUKZgRPDu8vIIZqyvTjf2KfqE4VmZK8KBuglScicKMZrmGcs9TTD+s\nU5QjRUowyruPRNW0ZjtVnweAlUq7lbXZ+MeBU8f99hAWvFTKmdvg1mER0Cpr\nK4tGPPObDBoJ22B7rEDCqFb1wiEdhhhR5Aq5QRMwZvZl0HGJcD0G147qByZM\nVgoDSndykBLFz68EXTylrtAAF7aCkrV/9TxzplehW73BLU5lo1Bo65yjWVny\nWwuj7rVATk/z6ZkWEomjMxtFhj7QqVUR0kfXHnkU/kQPE0ZOZJFHnXcngFXD\nKKMukCsHuIAy3HLnstE7OWOUVxQOfwjmKGhps3edDT4G8TYJGQPJBmitcVl4\nNUYpiwWxKnjfl7Tvf7PnCyMi66jxSoRSGr/gY65UgKSq25ovMMKGZ8kHHils\nBeIq1Iu93JBY8zVgWNZbc+HbZKMWY/9DTVdv7DyNoM3kB/iIXkNa/Gew/yL2\nIGjLp8GL0B4iPm+Ub7723drfycCYqzl/eSVJu65Tg1s7blgBYS9te0WJdOhd\nJxgIrXI3qjNpzdNunbq2LdNFRgxdWQnHH9gMSg63A9WlJOMAGflNseoRwqZk\nRVYf\r\n=u5Sd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f86f83f54.0","@material/base":"8.0.0-canary.f86f83f54.0","@material/shape":"8.0.0-canary.f86f83f54.0","@material/theme":"8.0.0-canary.f86f83f54.0","@material/animation":"8.0.0-canary.f86f83f54.0","@material/elevation":"8.0.0-canary.f86f83f54.0","@material/feature-targeting":"8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.f86f83f54.0_1595886885211_0.5032169623374156","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/menu-surface","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"898995f4344f38f8028c1b11b7587591ac66f4bd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.41eb1684c.0.tgz","fileCount":40,"integrity":"sha512-V72UxC9OZEzebqx30E91nHpZafa9MfeVpheHmnSgpVzngctDmteWx5unwVpXTp0WLTnsWWiM8cWJ31MRdmxhag==","signatures":[{"sig":"MEQCICokoOX3SkDN9QyGn10DUD5FkhrvZ4dmYvNpFmcR/jOLAiAdiyRM5Xzqx8nPlGneOec+rOz5zgqAqrPKbCK5aFdu0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGWSCRA9TVsSAnZWagAA4SIP/0bbQs8aQDJ80KWIO1ah\npGrQfdR8a+kWVrvKCsQs/NZjjsPosng/7NCoo6v8eQL2oDlxM8SHQfBTxtCG\nGAZ+nLlD8Bb0BBzx4stimH7T/gnFtSmegYhbtbIK+mcJL+eTFZsOOjSV315M\noj4XtTKog8KBWUb59sewlIRQ9krAo2cYtSFgIEfbyoITAkR+HxrsjoiFsjZ7\nsF74K7E6XEM8aVGxnV3qrwhOxesLaT7EkhyqqJjO1jR/10D6UnFNHul400ye\nftzcUOu/ECHJWT7f9VxLSA49koOeTrYX3wY9HKLHF99cOJCdIFIwZIVnuWBN\nf5+ZAWVYwN8YHpEcFLFjoma3mohD6sliNVu2+R4Gdl94OKL3TwgY8aHSkfVF\nSHlq3BHt/9hIFm7SREervm5wH4kZ1EiceXpVQS/IttiqncqdLc5qerBQ+AqI\nkkuL5JKTbA51E4FqvYPjElJQcfJbmIXNtYqUAdGhCwbTL9by3bMJrX+79od6\nON1B7QubM7AC2SMKQKaQdWwkws1pDZjPX270Z4xbNJ93knwoa/atXeKTZnpQ\nZyYOlJY8Tvj+18PQMzEC0UnfaWrE2l0Kntv8ki7346Gx8gCD8t6QRZAjcQNZ\nTOGRS4FcEHUe8kN/Yb8IXZ348G+eZqEyLZ6xP9xsbvPQqiDQ2W73Mf4tShWP\nI8py\r\n=fbdl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.41eb1684c.0","@material/base":"8.0.0-canary.41eb1684c.0","@material/shape":"8.0.0-canary.41eb1684c.0","@material/theme":"8.0.0-canary.41eb1684c.0","@material/animation":"8.0.0-canary.41eb1684c.0","@material/elevation":"8.0.0-canary.41eb1684c.0","@material/feature-targeting":"8.0.0-canary.41eb1684c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.41eb1684c.0_1595958673769_0.42431528059928114","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/menu-surface","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"48b6c131f6aba07ecd9f1f4ae4c9437c40886e15","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.9e2f6c450.0.tgz","fileCount":40,"integrity":"sha512-zgVfzLvaHB3RUhlW6DTs0XVp0l4spCV6pn1SN+jG1vFc5u94aS25Au9Ri3dPyrgRFujIci+NaKtr4u4D1t5C5w==","signatures":[{"sig":"MEUCIQDSGzMTVznQBZbadJRuqEl7itnXLbq763xvMAREj+Mt6QIgGe3EU+jevUYUILrKBy84TAuILtxlbQ2cVpnKOmiaMUM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKk/CRA9TVsSAnZWagAAup0P+wTaLNmtRLhkJ93NwRCD\nUgGGBQqpV+f4De1A3DPW1x1p0J4ZKDctC9ky4ziQKUQXMAPyDKnw3ZHX/oqu\nX6u47ciAAuWwUAhN0BZR9QCENCQrf7elTCemRecQ9l8CNJ6lLly9hBhydxZt\nyQvHacaNzLGw757H+6CCbdcobvflrAUkFnZBELUlNClUxjzZLQogGaGpjJQR\ncUzWjSdUOwHwYgHwn99qB9TXy/2nqfFWhDb/6vACJAibKMRxuUQhFztaSTJi\nQUlKo/MQ/HPm+dJvS4DO7BrikagXcRFx+H914aNxefFTfYMdU0E+T+zaZZ7Y\nJ1BXRa3aCC9ryRAZHbb/MZXaoct6IXPVVeUK3hBm040r5R7aXSqKp4XWD9Z4\nBeo1216NNcDNWSYl9aeeYvPNGFJG91gu9ZLAJU7EFDSGekkMYYBAl3gSuVK8\n0RQQyarBSJSJy0Jql+wAH/TEpzEW2aWVt4js+aeuI39GH5hO52RCS4vl3iHR\ndUM4mdSRx3AhMBM8pkTGxJWqVNl53Zfh6hLzIJV7ZEWsLgu9OEPzOvnEXS/L\n8zjUqNbbtbBxovrPkBMdMvBq9bFSF6jcWgXOr7v6oUTAHpO/F3/8/O5QpZGY\nw8YBTgu7yCcvxKdI2uVBBS0p105Yn6mlK7assvU6RJwAAUHsO6OzImUptLrr\nve7o\r\n=qXYf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.9e2f6c450.0","@material/base":"8.0.0-canary.9e2f6c450.0","@material/shape":"8.0.0-canary.9e2f6c450.0","@material/theme":"8.0.0-canary.9e2f6c450.0","@material/animation":"8.0.0-canary.9e2f6c450.0","@material/elevation":"8.0.0-canary.9e2f6c450.0","@material/feature-targeting":"8.0.0-canary.9e2f6c450.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.9e2f6c450.0_1595975998534_0.6606535633991806","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/menu-surface","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"c5be1784d1f265187b42872bce7f8a3021530b47","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.e6950b55a.0.tgz","fileCount":40,"integrity":"sha512-+jFRAN4DXdH4WwP18P2ZPIvrxQIFW7Ck99CtudXp04agsxPdsnvTEaC8sUhEon50hsvgMQ6UakDakPY09CjsHg==","signatures":[{"sig":"MEUCICaIJ5jBtxBfx6imCY2P9TvbFXEx84LH0Pkznz0ODZ1JAiEA3GOeTqyHHA+RnpPF9qmGtazq95Nx0MV+hUEM4sFY95o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKxrCRA9TVsSAnZWagAAxgMQAKLetoiMaMX4aPbaotsf\nFv7W22kVkhNy5Xkge15XTaTjGP0hsSmNfOf0ty9dQHy+KlUOljTFyxGymLe0\neO8APFNLbUO24nhhnXcjyxr8D9YJoS2vyNrS1zw28/2GguHRXWf7dk/2y/n+\nRXOBiMGXX8vjwl+Ux9BEZzMrRpCCJQEbvK8lj3C7LwGD6Hx2kVPh9SFLntzq\nv59OsdvGAQrUGxiOEE+6v9lgK/JmYD0mIe2aVQnqVkf/SnPmn6x+0cppNkGq\nqWGhUHy7pF27M9xhUyVUDRkPlHDfeipSpQIiJhpJDlll+vdm8wmPnpzOvLaa\n1x6iegtdWgbxBdRkesS4t/nuo9rboJwGp7LrGMRzoizMu9oK5roPa0yWdOZs\nYN5livFcMfcmzb0nMrKUto3UFsaNBII+iZeCrJbN2uLBKHDyCpro1QGlxK2a\nZOT5xFSQf+cEDIIw/U/OsGarPouSO/ehJ6caKkHJDP9jQwp4TZxNWbRSO3j2\nzhPNCLHD0xjnA9JL6AdDeTpGINDVGdkh7vwKVW5vC+IOsK6cDX3cHVJ/lS1J\n0I4URh1XFlOglDhnzM/KRenbgWv2zfMoq5IhWPzPbXJaiJZKUoxI6pImMlDn\neEAvjKoDX0V13ahyx3LVzxg04bj8aD0zhNu+pzSBrOXeekNnsEZRhA8xM7ut\n8ahy\r\n=3LIc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e6950b55a.0","@material/base":"8.0.0-canary.e6950b55a.0","@material/shape":"8.0.0-canary.e6950b55a.0","@material/theme":"8.0.0-canary.e6950b55a.0","@material/animation":"8.0.0-canary.e6950b55a.0","@material/elevation":"8.0.0-canary.e6950b55a.0","@material/feature-targeting":"8.0.0-canary.e6950b55a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.e6950b55a.0_1595976810532_0.09769875939876349","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/menu-surface","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"25c923f24050a91d47a2f021bfbd5f1706b64edc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.5e51ee38e.0.tgz","fileCount":40,"integrity":"sha512-BHd2JbjJHB8ZUHvVzjDtUkKeQV2u5ODUCsSQ9t4IhW9vxTDmwa/Hk3r/tzaMCmB8CJ4YQvnkFgfK46iawB96Jg==","signatures":[{"sig":"MEQCIHbFWapjYmRr8wNp9K8f0MDbVXTTrVClN5kSuXiHgA/yAiAizDDBjYMkSx1xvuu+ZfRXWl4vU1aoOXHRvdghZ7xSDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILHZCRA9TVsSAnZWagAADsoP/2KuogF15Gx2Bbrrzo73\n78rgBqU5/ml7xKaHUJcyYsiardIX1qI7L84dRZ2dEgtyCu5+ulh3efwQq/C8\nJP/bNFOp3Q6qPzmD1Xs5gWrF2g0dbdyBgpWJ9qxAQ+d0y12HdRTpJpAOoSiC\n4hmb8myOW6OJJMPvJTijQtmJtORKVXi60DaSZ+87QGCBEtFYW65755lc+y7/\nHnmxSk8wT9tVGxOlv4dh3Fv4xNwAdW69a4iRhIVOeCjPhBxvnjTjtpDRZFx2\nk9nkMiNyh+cevPFT680CqlCSaGGSYCrSLjRG6ydI5w6Mwmwt8s0/PnKp1rTa\nzjmbpDE5hOUylc979iwgMkMq63lfDWBz7TBXLBsF1SavQH4qK7z8RJhFwVWF\nFbPPAzUTUPqasLrbwX9zjwClGRN2lrXvSGLGppxA/FVQ8LyhA2J+hhXMtp5h\nHLC9yJQvV3uyB6a7Dcs8G8netxTX9+4Ww++ehdKTcrzUiw8DfIKMbVkDg7Jl\nL04TMyLeJsmW6K7IKUUBfsKiIgyb/4cRUDVhs4AC98+0vOVOH7I3LAaVxM88\n4VMpssGDCWHtT6kis9F9u1Un7Dz6lNS4Ov9jkcwckqKcSFIcWewmlKr0NjDA\nB/KhuEmWHv7Ut1Nask+eub8JygmISOzJ7/metC/CZor824b/Rrn1Bt5oVV8r\nEMGX\r\n=iJeN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5e51ee38e.0","@material/base":"8.0.0-canary.5e51ee38e.0","@material/shape":"8.0.0-canary.5e51ee38e.0","@material/theme":"8.0.0-canary.5e51ee38e.0","@material/animation":"8.0.0-canary.5e51ee38e.0","@material/elevation":"8.0.0-canary.5e51ee38e.0","@material/feature-targeting":"8.0.0-canary.5e51ee38e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.5e51ee38e.0_1595978201219_0.32816238455490243","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/menu-surface","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"bf82fd90653b21780917558b7872f2728ee89a80","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.a3898ffcf.0.tgz","fileCount":40,"integrity":"sha512-XZwCsUSGKROKWJEbT5Yg473j8S3sto/wP0nNkXjxL7XRPqXo9cTzSwbkLt8hQ8ydVFj63EVKekfB+hxloGNIww==","signatures":[{"sig":"MEQCIEJ2kfptG5RsfOFL7tzx8hVfZUg8eGywnOejP0z3RqU9AiA29LazEAeyv0bUUReYFlAaIZ74ktoUh5cIjSBICgQolA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMSyCRA9TVsSAnZWagAAggQP/itD0zJ5opebPibXDja0\niHzr+SY8vAC201DPTF/M9FN7yadOxMOgIxB431hB5vmhXOm7ebez2nLwtGUo\nj7Jwu+B/8s/M88nhxZwPCDnQrAhBPbIe4imz3Y/BwEIy+6iXzbgYLzDTuLww\nF5x9bHWOcSjJ0sjik8cZU1BAqvVlL+ssnHxhzLcPt3Zzu+fnw5XEv3UhauFQ\nm7a89mMUOGzM0r2hiDOu3NP9VCVRwOy90YsCrYdhO/VPxw3MC8rjbq5FFT3n\nI2FzM7Evn3hLSkiGZWeDMUv+RnuRvpFZnkwYckiWpegmYjsfoHGk64qtxrqX\nPYUhhRi3r+GgsN9F9251C9/YkyhaHBPQv15F9YXcP1EhlC6f10RP3ncCKMby\nV0CQVqZXt5IEu8FqO/1btw5Ia5ifmfsYa56Dg9hpDPntKjjaZZRV5AtBl/yE\nMzgC6TqnXARKV4Qd/9GYsZuBP52ZwAx74ZksUCLunHqcC0tDIpC5OH84Y8uo\ncqU0UEQBqyGAOwJUjVtWW68yMhbiLv/lo3Wao97X4MWqvCMGxi73O7UR3O6d\nmri3zhVCQVJ7xOkYZ/tlaPVyyguJFF/JUSFxTnbIYzDAdF9BpFRgi455meYz\nmjj0NweZSLP94g92jpRIIhsFpJQ1PGjKeDq+sWpIN4OKiOwymlAROk/+2OJ/\nQmo0\r\n=cGr+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a3898ffcf.0","@material/base":"8.0.0-canary.a3898ffcf.0","@material/shape":"8.0.0-canary.a3898ffcf.0","@material/theme":"8.0.0-canary.a3898ffcf.0","@material/animation":"8.0.0-canary.a3898ffcf.0","@material/elevation":"8.0.0-canary.a3898ffcf.0","@material/feature-targeting":"8.0.0-canary.a3898ffcf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.a3898ffcf.0_1595983026279_0.5526094365982255","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/menu-surface","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"bdd7de624d61e38b0c7f5132af5b3abe0f771798","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":40,"integrity":"sha512-QBkm6kjjDLGDAFi2tqhLHBYwXPLJNSnRxh8KaCB+2TfBG3w2IK0LeKHxkj+EWByP6WL+mE4EJr1mKTIzBMRwUg==","signatures":[{"sig":"MEUCIQCPTTc2r5aHQZ2Ja8MhNG6foLlMuTPnnzvMQu3GoRoJTgIgIzcmg51GDGDQa3nBsyJzfhG/H8kMA8bOIFLy7wiA2cI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMexCRA9TVsSAnZWagAALxoP/Rr9AYLeGh/R2aeyLdyY\niu/rwpOZeIGdAlEbb3kNP+/nKP/UfBrIdEF4gLIgt/qdAfVVx4QLByQT/DCi\nO6vyM25UR9HNfuzQA20n1UB1f7t4VomtGafkieJDnEkmJ21ZzgyARmQK76B1\nUrzk7G7ljILgmnmQPKx+qMwHCKJ2H6PkkSETtmaBlnH+qXXwIZ/m88Dk5jKp\ns/Qzyh7xn8p69IJIFY0aIeCUtRXl9QhdriS97SyHwv5sY5m7oWjRIo5f66Yv\nfd220AhLDg8GoBWldKKrtXJXaZvYT4tH7AMpz6YG2/O0yoaJMQWILUgdgMrh\nx20ngRuhBpUm4kXXcBNFFNkYj/U4TtyHflA+1ozkN1VdP1TXewTgAvBgzG1k\nJiOAxXnsqj6/TymivI/i6hjoqCAsPw//tpPpmPg4ktD7lSkmGkegQetdmfvt\ncGRSB4GYhawxVMJMu9tpyv0ZeIjMU+08XfEj3MTS7falHbDt9lvPSnYwiRyN\nQmdT8kolv1sfulPHLtFsTyAuPFfPkuUoxO5+PIW7nU9JCBj6+9dc6/jc/BQN\nqelWIuvyl7Jg5htTGVUg/2mslMEO7mUqDoiyfUIdk3QxDNgU1RrhR/ULMANI\nvPqQF+aCuE3gToqgEEJVP5qPP0RdmjSM0nhfNNVMPm2eoqkyjbCyeomwhs/G\n3tDY\r\n=d1s5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.bc5cc6c96.0","@material/base":"8.0.0-canary.bc5cc6c96.0","@material/shape":"8.0.0-canary.bc5cc6c96.0","@material/theme":"8.0.0-canary.bc5cc6c96.0","@material/animation":"8.0.0-canary.bc5cc6c96.0","@material/elevation":"8.0.0-canary.bc5cc6c96.0","@material/feature-targeting":"8.0.0-canary.bc5cc6c96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.bc5cc6c96.0_1595983793528_0.980670556849198","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/menu-surface","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"56863171d2889308ce1141237eb52444b4b35d37","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.9bdeaf928.0.tgz","fileCount":40,"integrity":"sha512-bMDqU0KkwTwl3KeWX3aXrcSG55IvkTv48zDF1p2FyRjPvnOlxKuaYQw6e+nnLHd8TiPTKZgVUe27RSI2i/Qv5A==","signatures":[{"sig":"MEUCIQCgnfx3Z47IJJbo7D/R1xBePHL4j4jDVMc+g+0BVrlWJAIgegbNJK1XVtb04sDb14D8+iulPfrDZU6OjBG/J834n2Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM8dCRA9TVsSAnZWagAAe3cP/20KVFPvvoJWVqnGysAO\n4RF2eGvlOS9YnRT7DIzkLutdA8YKulBx+CCfv63OyMnEwnUFQND/adk2JKx9\nwjeDNfJ8Ndcpscq2oVUHsBYa1e0McnoHJPvObdpmqB17zLFUjAdKff9YVr9I\ntwmSIi+yluCstcodmqcy/XoawPtvawIOd0HvsUEbgC9jlnX5beUQqt1koQ8X\nQSsQuHxs/QHMWG2z4hJ3b2c++6Z9s9cxDdAt8CmH8oeGBNYe4jE96EO0a7Ng\nwTFTEahvcP/U8p6VecMTz3kl/KVHB8WJ0jATfybWiv0lJ6pPBEXJlKOenm/m\ndsaurY9soF1JZBemXhhs3W9xpS/huEtruALMMElwY1jhmFQkD/LAEt/uPZ0Z\nF0BJXohi3ijFdXZTNUixeGRIrS67IPbiqt+o3zdL3X+DJc+1RCY1tzCgKkHa\nG+HXkTHlDmJ6byVrqhFWHKR501G3iurm7pDZIc5khZnfqEMmL23RwBVFJfYi\nG9txNXeh7iQdVhB0ip4saYR7gu//W7V9NohRtmR+11Q8S3Sm+9XTzZi4qhQ/\nAq+SpY8L6i2bOvL2iAoyfjWndX1mZXNl7E7HG6G/hVNWn8T2Zk6b4yjJmhpv\n+MOhXz1JutT8FWNwYtgw/ORbDY06WAxx52lWjLWyHFRZLXhvCx+2ovwiLn06\nLs6N\r\n=QJC3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.9bdeaf928.0","@material/base":"8.0.0-canary.9bdeaf928.0","@material/shape":"8.0.0-canary.9bdeaf928.0","@material/theme":"8.0.0-canary.9bdeaf928.0","@material/animation":"8.0.0-canary.9bdeaf928.0","@material/elevation":"8.0.0-canary.9bdeaf928.0","@material/feature-targeting":"8.0.0-canary.9bdeaf928.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.9bdeaf928.0_1595985692866_0.23778865545198125","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/menu-surface","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"80e5a45a385bec69348555b5b87884a4ca2b694d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":40,"integrity":"sha512-GCnxvNWV1SuuEZPvZhB2NMfEgaK+JIvP0YxYr2puYa/xON+16k325eHHPkkFnBoSYLpGsH981IVdfaNB2JlxIw==","signatures":[{"sig":"MEYCIQD4qa+zOpvrRGfmC29wSCLqzYZoxh3fFaSxsXUnKCk94QIhAORm2hcc7iN4j0WQb+fG/aIfMipi/KYhWST9jnbNbCpg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINJtCRA9TVsSAnZWagAAuYAQAIe9E4rNdC2cccuJ+Xjf\n/loPFhEXyPy0iqWRCgmVQo614gx/aBRqDDoWZEzSN6zYUl65xyGqiguvvlP2\nNgXvwHXKXV5AFhvyLdGNv1isilUGsxjtQS7EVrWMoko1QQCJztvEoDlJJ+aC\n4FYrDzdAbswTPyxgSkxveBV+MDsdIbfqAMxe86stZ7m+cf4CqWX61CFfRvI7\noncg7DGzxFFbJMpxkX8uMv8fQWIsifrkbiTUnSBbZKpkrNkVMqjW1NfxeDwi\nClskgnDISobcy8O/JrQCJrduh3/fEBtitQFnJ+C9G1Qzri22uZDiaeUJy4aT\n+Kvq4V9XqnOK/GWaXEplglf2WpnKdsUTvNfo9ZxfXnbxPpVq3KzOtGWnLoi3\nCcsjnEQeaf7j66HAgDVQUV3lgvp0Xgay80nNpm5bH0iZkYgLFoPWvrhbTTIt\nqOa4wUUc3fbKDhrZZiGk6l7w33PVWlHcxzfS2an7td0AfJPi+KcDxPxOfpVR\nL6AMcuY+MLpnlNSTfiQCFxYCMNJp9tvk/GV27wrUNyuf69HuvorD0NBHz/GD\nbW9rcLf6uxDmTlfaDdgsJo+EB8CjXzc3T8K+Ahv/+K4Rh9v7eLdorv9pW1bg\nJU7B0WBQMkow1juOO1a8xhMO5BSRZBkYU/6qoI0iYKSwMYQ74vPC4VsDGg63\nfY2C\r\n=SDOQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fde2c1f9d.0","@material/base":"8.0.0-canary.fde2c1f9d.0","@material/shape":"8.0.0-canary.fde2c1f9d.0","@material/theme":"8.0.0-canary.fde2c1f9d.0","@material/animation":"8.0.0-canary.fde2c1f9d.0","@material/elevation":"8.0.0-canary.fde2c1f9d.0","@material/feature-targeting":"8.0.0-canary.fde2c1f9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.fde2c1f9d.0_1595986541392_0.9793362316076137","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/menu-surface","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"7ddb54ab7ac6400000326166c7482316a664852f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.6b3876d5d.0.tgz","fileCount":40,"integrity":"sha512-DivYKk+6+kSovob12L9J/Szv3rdZMWUJjekFb2BW6rtRFIgzkHcZ0AXTlxKLA6+QmD7w5wXWsPrQqexSIUdSvg==","signatures":[{"sig":"MEUCIAaaeOtehH2qKuODvQ+rhgEhDHmPfRfRkK/TWn2xa8RAAiEAn0yYPMSJ5zh8leo79UFwcJ82wtIjoWFGh/31Ar/cyvc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINNXCRA9TVsSAnZWagAABiwP/02ULYsiKv6vcnK1Ca1c\neDevwXRcugtM0Y9JEtJH8/Gc0Q/htaAhgzprDK3rA2AwLf4lanQm5Cym4jkm\nAWTviietHA+ZNsltUdoYNLKhuGHJ/FB6E1gLjq4Ap0i9THbPEcJPJYJyOPAN\nZDBvLKvB7zdIbjs9FFeipbfCeJbaU5QyPxUXq6qBDu/z5HDkjofZLkMoXQjA\nBnB+6WODxnEpOQJu08I7UcKppqM0oAvsvGXBBKpWYiLZ5ZnnwO2ILKMzaZII\nWbIn/jjjxqLtKQBETPV34fRcYmk6cxlPoKmALTPrktKxHrE+DTWjYEBRjJNh\nhxeOHKShMtv7NLAISextX534qr02BFoHPPiZ2CkKZf9Fw4adkR/rM4W2ZEKl\nF4tzAN7Rszhj/GFMO3ZdBahsh/N6ht3RDeg+u15S40BX8H4Gr3S4IMYqoDh4\n2iLt+4qG1J5yeCwRaf2s3hVrB4U9U1kUW6nY2d7rxQ2HheDg3Pms1c4Ns8Kf\nengKsX1JILv3JX5Wq0Ui4mbBtMkV5BOpohAW6NC8zO3HbGDxRTtkL0bKc8Eo\nN9gokfvZd6xEI2+3zm0ilp38ndps/qKgurzdAusfPL4KgwJD4xGgdW+MUxBc\ndneEgoEmy4DkWfPmSJ5/UipV9O7E9omLV6+gvsDgKeUajy1m9UzlSo3nYpxa\nUYad\r\n=KgNu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.6b3876d5d.0","@material/base":"8.0.0-canary.6b3876d5d.0","@material/shape":"8.0.0-canary.6b3876d5d.0","@material/theme":"8.0.0-canary.6b3876d5d.0","@material/animation":"8.0.0-canary.6b3876d5d.0","@material/elevation":"8.0.0-canary.6b3876d5d.0","@material/feature-targeting":"8.0.0-canary.6b3876d5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.6b3876d5d.0_1595986774720_0.744450125410498","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/menu-surface","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9ab202ab6122f9b4752f3be65caf296108f9465b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.30ce17873.0.tgz","fileCount":40,"integrity":"sha512-1Es6vzphte6jPofGcM9wWeKfNfpf3EFygHUyL1qpmatiOrtVnzKqvYyfqwLJT20JXJIOK/yvXXOvopL4N+IIQw==","signatures":[{"sig":"MEYCIQDXUIUJPp59TuZwxY55ubNA0UcvCrdTy0fteKK7beWB+AIhAJn+3MH1HZWDL7IjVngMicW3SxtJ5KQ5/+Pi6188pQ0/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa68CRA9TVsSAnZWagAAKHkP/3NKWf6ohviNfU9WreLh\nlQ4LLZnhjcuQpAVeFasSFwEgiS2pgrUFY09Isg8VEmZJ3egeH2ZLeRlSPLEg\nLMgwV7WDg54Dj2YZcnOyWhIWa0vnFzFfF8wCGyY+3rJQjuofBSh65KfJQ19S\nDyF1qx24pNGX4DSeGGiIjzlTcxU7QobBjAV57/nS+/EmynakxEyewrn46Nws\nBIYHQcZsmjxvA9u7VcwHsSNQU0iYlP/iMRt0UL0tXn+CbtDBsPxdaJXNmATU\nXjNbqyRipUcGkHqxZxE/34Xa8uI1Uiuv78X1noJnrM+eTYuhO/7fv6BIxCJI\nDLn7aBUh7X8AVuBAMD8O45mIc/2c/lyDMsqbrd8iPWfInJtwJTHy/Jd3yM8z\nsuIW/KmVYgvG12sd1IOqm0LzeAhWOp1IjUiyYzuzO+O6vFRugWixBuO5imwO\n6AdMOVo/iWiZzw5LOhh6gmb6+XkeVqTmIz+f9Tt8ZpEQtbI1hBCtdi3jdIq4\ni67rwJU6g8hwu+ZpPKavWzZnnTlt2RAgiAH0Vo27x6N9LM70Jpp0VjVA6Jgp\nQTWDnY8IEhSoMZb1ViDgcepbpixpAFRy6Lxzl4vfWMow2bpkfRnszPduY6ZX\nEaaVkH2zqGlpefY+PleMzYoww6Ht9IwdAIWKZfIBnCTCeKOmlv7jmGj/EM1v\nEe5n\r\n=71qP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.30ce17873.0","@material/base":"8.0.0-canary.30ce17873.0","@material/shape":"8.0.0-canary.30ce17873.0","@material/theme":"8.0.0-canary.30ce17873.0","@material/animation":"8.0.0-canary.30ce17873.0","@material/elevation":"8.0.0-canary.30ce17873.0","@material/feature-targeting":"8.0.0-canary.30ce17873.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.30ce17873.0_1596042939689_0.9843927860391304","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/menu-surface","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"707cd554f3ad98cfadf193bc595a1d1718ef246e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":40,"integrity":"sha512-Jh6lshY+7tCnDX5GgNP3Xu9209eNEWO7BWi09ukI5y19btCfZFYa3h3ioaFzUVekw0yc6OZBy2V/iTMjKBS8Ng==","signatures":[{"sig":"MEQCIC6N1AIPNUqDUu3u4rLVD8OzKMtjGGaLB7SRwsaL7tBpAiA5H23emNRIiVmoF8TwLF29QGPEIbWSOcKLwYcwjmFxPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb9ICRA9TVsSAnZWagAAaWAP/jVFyFL83fCXVCjQdrx4\n4IGXiuCUj70yDgVIU3ku0LsI4mkKJCDOA9fGXAnD15hvl4XpILR3SMRlnKBF\n5GeE8I/0eLvhhgOoqdBMbP4b5HgM1v2imlYmTuOgklUToMF2Ixo8Q/LoxKBx\nNWhotLWehdbJAfz2aIaBTIuSunNF+uGAC3Mms3aIGTmzDmd+SeqK5jg7GD/U\nrJNpZfoDGnvVbua2o+C05hZUr/SLJgvouLhbTvNyKW1/r2dTIfo0dHKzApEN\nneTOBl7kOhDwBja75k99lbHb75Er+92ITeK7txJEE6TtEGbnhjqcaWXErAD8\nWqVRJjGmmXO47IkovERO/6mZILY2RDPSKXNvOof1LpFvN5rFAgDVu4uIZe8z\nu6MQnDgO/p0/m9WjcbBkh/YQFb5IjCUy7Goljq/VwwmKRwbURcmltMPr1Csh\nTJ5gEr9r++H6BSYP9f56eEyTq0LQBRpaedmn0BOvmdi0ICV5sqFbB4XFODFS\npMrWvpUkUHnz8TefC7tNlY4O+JeJ3/tPtE6oHWJGqZldNGMrtCgb944OctET\nFKIM2zzagQ+o7JEK1ay8RUi1rZ6SCl9p+aYsIDVTiAGiyt54zz7Bt0MgjyOB\nIzI9ZP78CTC1qE9sqYZKA0QDh2Y+N7e43qsSLJGTc873hKIjgWSceDwrE8BM\nS1Ne\r\n=/FsE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f6bb43bf0.0","@material/base":"8.0.0-canary.f6bb43bf0.0","@material/shape":"8.0.0-canary.f6bb43bf0.0","@material/theme":"8.0.0-canary.f6bb43bf0.0","@material/animation":"8.0.0-canary.f6bb43bf0.0","@material/elevation":"8.0.0-canary.f6bb43bf0.0","@material/feature-targeting":"8.0.0-canary.f6bb43bf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.f6bb43bf0.0_1596047175725_0.24449164971791082","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/menu-surface","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"5ccf7b325f6ef453a373a5fd1ec71aa3018a3087","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.6af75f6ab.0.tgz","fileCount":40,"integrity":"sha512-x0O/KthNlSS9lkLzpyUEjEO88q9kSeI2PrClwedZ+0zjk9WlO+A94aOCjCrvxWzHie/Ta0r4ifbTu7sHT1ZlGg==","signatures":[{"sig":"MEUCIQDh9W6c+Uesqsj14nAviTymCRe9jAwBO2ezTA7FB9wpqgIgIEw2KF4H/3rB/jf+WTJgjEBzhVpQm0o5QcSE0VouXmY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg4FCRA9TVsSAnZWagAA6u8P/1pXev5Pbgy7WR+oSkcw\nEc57qe8BcZfwgmmtg7zgnwpYN0SnKItMWmdalvYCe7XKrBi5n+2rDSH5U4nT\nGSTcdEygK/XgmfVfA5PTpvoUEPfuZIcX0dqCGjGljyFHB68PWjggXkBLGzRr\nIa8A1N/KlEvqmeAv/G18sAbV3DC4MfsWlRZlNiA+6hsLLFiAKnohixj78ARo\nr9IQsft/qP7OF5dLpLw1nDvNwriKXIzY1rpMeOrsHvTJXq/hARDKn3L18Mta\n2kGLIWqqRtlMXP8xT1eDiVzsSrqi9aZT2I3K1/iUY6c5UnzLN1NOALhrCURO\nVHffNZxJijPGr3b6CyRCc3qhiRRl4N9VFKDvsOy70agoX6lzngifHMrrAXdL\niBwsbd//htPGUT4RDGHY8fOZ+cOpeUq796Bgzay1TpkWzKjX4l8hP0GB+ahW\nTksAlfq+6vBlpRNVPi+7g4gkhZbj6qmc6+sm6fct1VltHceCZMIlnGgtcMme\n5n/f/f/Pz6Dt82sw1rHFqDuDc340dzAkoq8poGwuQV+rQK0Xxxfb9kdIdzqJ\nGGv09FxTojItA7JChePonv+rwEVbtTE36rE+V/cXDzJL14zE+594ev0ZPpAW\nOHrTqf+ACVZKWO5roVWuHyHReFcx83BkpvnlYrGhGz+PBrGoJGv4r6YuXzRy\nlCGZ\r\n=PfQa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.6af75f6ab.0","@material/base":"8.0.0-canary.6af75f6ab.0","@material/shape":"8.0.0-canary.6af75f6ab.0","@material/theme":"8.0.0-canary.6af75f6ab.0","@material/animation":"8.0.0-canary.6af75f6ab.0","@material/elevation":"8.0.0-canary.6af75f6ab.0","@material/feature-targeting":"8.0.0-canary.6af75f6ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.6af75f6ab.0_1596067333428_0.9925970872482801","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/menu-surface","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b2ab2218bfbf30642092187565fb2e27ea5981fc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.42d7a65aa.0.tgz","fileCount":40,"integrity":"sha512-i4ZJh48oT4IJ7huDpazqtz/p3j5FB3utT/ctC/vqhHvKfVeFBUOEU8evF01Fc2xAcowZIB9GvxBkHv5rkXoQKw==","signatures":[{"sig":"MEUCIAV4Wt4TrcRjIM4sbIaBbx9KJrjwAsRiob4qJ5CcKl0OAiEAzlhOfT786daNfQDWg6PU4LjX+OyjMnFn7+jgT6s0Ums=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhApCRA9TVsSAnZWagAAH48QAIiSA/PcI1uVkwFNwHrh\nsvCn5jvhdSgm2LaELTTrkw2In+zGqrh8pI/TeCJQKxSMiNclTwDLSiMJGM01\n0pw/Q0u6021KJSgpBJGmInXmII/0ntN5WRefyLcDYF/fZZmtAORQaMbkY4tm\nxNVFm4W7oEc+U0R4CUH7JoLJnYXKT2msW6beJCpURuaQPbJWQh97oRnUBOTP\nfsx8dQvgNEOJKvGBcfMtutFa4/9tCDIMYzk2RL3pt7HwXAaMalpB05m3zKGH\nHGWQSFWaQbOfLRdOzlHRhpnqQIfuao9qdD6tJKAKsH+92QPLd/UnMy2WVni+\nTKzF9k1U7784BYXGzrpW06v6SNeIlY8ao99l4EUsp1sQMeTGJvfL5UeZNTM1\nUIw11mjv0OEHW+YjnsTpEks/M8p70wjsyznfU2ph91AeD12MVM39+ZMTdXkt\nlNyPgo2tT2zDwFbiJ6qxgz7NMLZEAHEJfFP3xrzgbq7HOdWHcvZ0M56uMmmI\nbVb7qG+j5AYshtF1GsIcWy30jxZjRXSbJlsd53inpJvJGZh3dBx+eKqrAzE2\ngRzJgQ47xuATv7R0kDFjfGVLUr3vTU7tKlSAn/4855v4NR7NpJ5Sf3e4b4/V\nGnAcn4/ZVhtao6Yp1xS7psNtHz9fyw/SsUBQdk5DbLW4zh9LtXBWnliSmilJ\nX+N0\r\n=zEq1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.42d7a65aa.0","@material/base":"8.0.0-canary.42d7a65aa.0","@material/shape":"8.0.0-canary.42d7a65aa.0","@material/theme":"8.0.0-canary.42d7a65aa.0","@material/animation":"8.0.0-canary.42d7a65aa.0","@material/elevation":"8.0.0-canary.42d7a65aa.0","@material/feature-targeting":"8.0.0-canary.42d7a65aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.42d7a65aa.0_1596067881235_0.26046123885536665","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/menu-surface","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"939423098b66ba838104f4cec5f027c2abfb87bc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.85abdabb7.0.tgz","fileCount":40,"integrity":"sha512-kAusKZZ/Ph/EVJ77buL3izKs7HUIoQtOeVc2QiDoLm5VvTvWxI1M/bt7Q89o1kUL3k/46esHY4t+iVoGYd7dQg==","signatures":[{"sig":"MEQCIFfCcXhcQ2CNbe4NKNydsVNIUr3ejecYK6DuK/hgRihVAiAKJLc9Ve+IMYSdE2XR0vrr9YBu5pD/pzWBgFH74SoVNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhFACRA9TVsSAnZWagAAchAP/iwRH1WsPFE61gZov9D3\n75rHtHY6ePO66ApKrZnFTQTfpcvxNSVkHQSXSJ0RQNLJGXS3rOsdQQYORG9X\n3HMaLHz53mG5IcWtzLOAQOjSJ937nb9jxvkywTmW8MTcKPso9J6YuorT9nIW\nJwjGnBiCZ2gZ83QNQCp/FMv6w1KNvayRIwV1ndYhJfC3PcvHgyaAdTc1c8U4\nQ8ur02vXXPzl8mh6vgpwmdMfy1x98g1w0JpvB/fm0eh/TT4kbfzdl6cGIo30\n2h4XZATOlr4OfRdH2p3tkk7VLWlJ5DxZp8t6KfxDDbuZNNDA7TjjXZPS5uwD\nmBXExVALkJ69ktvBpr9To67A8H1hr6Br58pUpWT1PGQWgA8YZSLjEZ/V6WET\nrxwQJRWIgWWyYaEq6JOWt67YaM/lHE3I3NyvJ7f8QZlxJe4WJbVWmUF/jElV\nACUtM1hAKqy8GnGbN9liIYCfq1IQdVEUmJLFQ4qXtGen5+ew5PK6xh5CycML\nQHIgVmakelehGcAdj5jGWqnqyVn3JuWqFlvDDugZU26idxhk3yyzvjRy9pxL\nSI6cpSsGkxbuhWMbmfPK+h7ACjYVIs3Fu1BxtVqyFFm6NJEE34xQYDwMVSrs\n0BTHa4hNGpy4pqOiEwt8yj/4UkDzJWRYLQZ25b4tRQWkR3v6CvbRoPvyMvXh\nyc+z\r\n=de62\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.85abdabb7.0","@material/base":"8.0.0-canary.85abdabb7.0","@material/shape":"8.0.0-canary.85abdabb7.0","@material/theme":"8.0.0-canary.85abdabb7.0","@material/animation":"8.0.0-canary.85abdabb7.0","@material/elevation":"8.0.0-canary.85abdabb7.0","@material/feature-targeting":"8.0.0-canary.85abdabb7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.85abdabb7.0_1596068159538_0.7000687570523552","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/menu-surface","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"f4c4ad98d8830a7210a5f3dfc734b1386cc3fc96","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.49fb20ca3.0.tgz","fileCount":40,"integrity":"sha512-cPO0muqcFg4tvRCMtanvb+4kNRi2Cv/Ox00gGj/9GJno4BchMuxhUeniyxzWs69itBKVHcNvSNL6k7XtBHy0nw==","signatures":[{"sig":"MEUCIBtLs7XFSu2Wf9vfU4DB4yul0OVon4LsK87zmIKcI3ISAiEAkroXhmuEvT8NF+CqNDdeWkBv+sSSgxUQXYrKNWxCq5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiIyCRA9TVsSAnZWagAAE7oP/irGaV4w1tcxdg7pjsaz\nwHEtjzXrTfJopTAOG7t0KCy/NWs9XeboF65OEBzD7U4C0rK2NLuvfXvYMAwG\nKARKT6xtryqRdkJibdrygZ0HKufk0TzLkz/EzGmElAk0v5Nig2Ejyfsg6IdA\nbf7oyiBQ7IrLSmGo/Ac1h/ahiURRWPicoq9nt4q5MK7qOqIZ0z3IGZuQgwtN\nPBHbYsNzwGcHk07wq2vzNM+c8WBY6K3R3GoXFr7yG/e30PjOhrrFFnV130uX\nC3Qacoz5KyidZt8K4WrjydsL/PIn5SGiTTnmZC9ltHZaVkumzRsDe+RMijVT\nPCQEyfYdBDSSz7zjB7669VUuIyilpjZV0D0W5t9BinyTbdOz+YNIaEzIxFLB\nNjphdM0I8kMLDwAnTTm3y6wzySIFrKj4KDpbJLuWcr/5F9u+UUmmInjYykyg\nHrbcfKhQsNZ6LKM0iVUT5vD8eskXb7oYL6tVOS2+NatOzUFp3uKux3JtR94q\ndVfY/UursK3QJaN7RmCdSokZzS6EtZnGdBI1N+24sTj+Vc8Q3sCnRzwCfsXi\nrHdIbOymr0rseyK4+pE3QqDZXJFEm+kfgN63VUGApsJ2xhrc07hRDLslMtBJ\ndgH4uB12bfFdU7twzGeoPfFbwQVwDSWzutIYwyWd10HeJe+8uAj4UKKnOQTU\n+IDP\r\n=1wYw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.49fb20ca3.0","@material/base":"8.0.0-canary.49fb20ca3.0","@material/shape":"8.0.0-canary.49fb20ca3.0","@material/theme":"8.0.0-canary.49fb20ca3.0","@material/animation":"8.0.0-canary.49fb20ca3.0","@material/elevation":"8.0.0-canary.49fb20ca3.0","@material/feature-targeting":"8.0.0-canary.49fb20ca3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.49fb20ca3.0_1596072497984_0.33233708320840205","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/menu-surface","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"97a8e6fc5209e5871b551b6abafbe5050b90f825","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.962d4abbb.0.tgz","fileCount":40,"integrity":"sha512-EJdQ0ei84RhB9MEFhgmAY/NVdP1uL2TdXjIF6RpJ+JcyxSm0tctCXzoqMvX7Vv5JC9+yubo4JfUXk9YshzFx7w==","signatures":[{"sig":"MEYCIQCWhY5RqXWsH1Khu3GbPovWJ9mFBTvVWhwAcFF6C8mJ4AIhAICx+ZYUXxztDy78uQTecq7ZRHCcccN1tbhau+hBwx3g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvEVCRA9TVsSAnZWagAAqNYP/jLUx5bw0wy1kUg7wQXf\nw06ANWAXBCob/rUYRcgoVOlG3ydCJlZqDGMyedmBR/G0/Ahw86ELQCmFlg8H\n1/WPx5d5dJmA+Tp+n2xKYH5WS2T6PmoMJPX18PQ538qRCfFLZgogETyqXVAe\nKxQM73RD7z9wmkwFhSLGd7w3P+aNo9F8pMGB1t186hdlhSerAIJhLAygIm3H\nA/rPnMKlvlVJka2+8/0SFqKgmy/ZH+qluTkrBLijPfNB5H5mbdSYn4a1T6+5\nviuhaK2W7Sz0gS7EGtnipMdm93ZaNpbjqEwhtgOU3f8+cmVX8V4QYNnU4fFR\nUztYpeNOzsLHOGonffOWDIPWpqEhHwPkGDXay04iv6bpHc87Q77aJVxSEn1Z\nMqR2S9+hSripqikxnCTLWCzNqsm/JsIIm6I8L888hUdVclBHbzI/UvXim10d\n6LBKxh/+hjev2cRQN0Hdp7KPKWp3wo9Z4icd3flyp6Hi2Mx9v64+9l776ovB\nIRApLC5Wm1rKefa0MxpkRWp1xMepNQIEu8tsvfSy4hz3sUhpKuPPezOP4dek\nhh13STlr7Aw3Q1EPBgdhC8rm2J8Tr26In2rlKD9w4DRele9ELBS+lYCYKy/1\nFWAy/eqYixh8ADq6NLdkwy6f7Fea4IQSWwaQsxBYgaq2KRL34BmPaOn5axR3\n/P3P\r\n=ZXC1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.962d4abbb.0","@material/base":"8.0.0-canary.962d4abbb.0","@material/shape":"8.0.0-canary.962d4abbb.0","@material/theme":"8.0.0-canary.962d4abbb.0","@material/animation":"8.0.0-canary.962d4abbb.0","@material/elevation":"8.0.0-canary.962d4abbb.0","@material/feature-targeting":"8.0.0-canary.962d4abbb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.962d4abbb.0_1596125461118_0.678561143179468","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/menu-surface","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"0675fa21e39f3553e3278d030d6de4dd7e860f29","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.2fcee40cb.0.tgz","fileCount":40,"integrity":"sha512-JSRAVZA+L4NwS/IB7aljgg1/nUozESFEtY2kbwIKoostoU4mZ/HFlsIJ2/6U2FRwUy6Ix2WsYG+1ZfJy7new9g==","signatures":[{"sig":"MEYCIQD52LZhgqgYt+x1E5Oe0uHiwX74KPxWj9LzaZ89ZK5FawIhAKL3I9NXmvvAAPBDnrHrL9WkOphpdRdeDQhvCG2pVYxC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwHCCRA9TVsSAnZWagAAsjUP/RWl9TLYwa2tbx9yrMqi\nXK/uX6NAk1tV+vzpm9hSJB3tmBnaPQ6LPW6LX6qMl3hsiGDD2m9J2MsTgwrn\naXj+RUu7QONkva1qbAtSayc4p+m0Sq/OQA35mQ6JrUjiRK5LKBiXvDgRcXiD\n8D24/P4Xdun6ivpj7ca1P2LFyW6+uRM9xgBw7B96x9n1XERFFRLpNl9xwhOv\noq4/6ZAXZjShBdUWkbWyAMhglrfQReCdA500GRxy/EDTMB9Fa4yR3BiqKzgW\n0xLVEuYWirYf666kg+uvaG34VtVSa8JKu6zldzFRaqv+T/aQ8emSSiRxo6d4\n5uxNr0Wl7GdhJbRNs94VAoUMN9+G5nC7rWCJfp85HSy7Ttq34jIsdonnlVIP\nviIRX4RUj/JghgfKXYBqaqpzOKp8ZXwMKa28OiK27rVAQElsyM4y3uNmbQkQ\nN1MdCcXncHmEwglBpwb/GhrhrjjUBWM9EpSRXmat4o7MEYbngIXpmy6daeFl\ns8MwxpQMLX4sMI5aejqXZW50QvWE5fXdqVFYBlFcXxspUJXPRHmq6zq0OvP9\n3Tg/37MTvc5LNqdKL1lTR45ZiTsUGW00vYO9kvnyJeVrDVd1N4ttEsC8yWMZ\nHqhfi/Lg6t7Ugv9DuG8vsWRTzTB45VZZj1rPNWzz3lon8Sjll4MYyH6Xibwi\nw9VX\r\n=xQXj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2fcee40cb.0","@material/base":"8.0.0-canary.2fcee40cb.0","@material/shape":"8.0.0-canary.2fcee40cb.0","@material/theme":"8.0.0-canary.2fcee40cb.0","@material/animation":"8.0.0-canary.2fcee40cb.0","@material/elevation":"8.0.0-canary.2fcee40cb.0","@material/feature-targeting":"8.0.0-canary.2fcee40cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.2fcee40cb.0_1596129729916_0.867532636627165","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/menu-surface","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6237f3619ca3f52d04dbf639dd2296eea974e829","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.bd5987f5a.0.tgz","fileCount":40,"integrity":"sha512-5MXy3LJMIxACXoEqvL0kbZOgsXMiDpBstcst1TlZ8XGNzuX76uEIv43SRX+jXZuROe1ps1n0c+BqNqWw5BUANQ==","signatures":[{"sig":"MEUCIBRjRzcA4jZ0IlDc40WgaKFtH7mKFzP4CVttwG6oslf5AiEAmxbF2dl2fofTxbAcfF8I5q4KQXDjmNVVRVHH90hiB9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIweLCRA9TVsSAnZWagAAFkYP+gM8PXP62ZEDVsZv34TT\nwKUbQYF7vDeSY8No4RsAqdVIhWHwz4leo8tMH7eofjPrvEVVutSngVUmKWlA\nOYueI+YKKY0NAwZxncna/mlYRh38AIUE7dieyG7HgA5rNkFc3JIyVYLzcWop\n1pd8b4dl7YwcA+5SSWGVmMdWlMM6ugT4sqkrKqX6wMA7e+BCOxQHtgcSDX5/\nWIlWhRWYlkp94teetoDilELINJvOQ0zFCyKwwif7yek1QLW7lZbU4CVcSnJj\nYf+Pdy2ifoqzXnGIAz4SkWxfWC6cRDOh6bDd067LeuZnoUD8aeRQ12WwGivi\nq+ZgFtjdOW68AvdBPpW7GiNpq0m1wutL0Pj010UBNBpAgHY2nVsgWNyYrF+N\n69gh5ZNXcogd70jXH2JdjBtcOih9PBI23iayTow25C+QIMoD4V0KSbED3YDP\nFaPLtdgPxy1YSWZ01vhYl+7zr96fnDoLALwBk5AbdvAV1qTIdajrBQkxS+d2\n35MThmampeiPOSxjaoKf2BCvFTdzXH+q46LjznKnES6BJ2zw+arG5KfvGLkN\nEs6DcPZXamzJTUQMFiUinZqs+3iAQSxhjd4hxJ0lYVl1o56OgdBPYrPUGCij\ntmliKg+XgFNyulG/3mkQS4w6lWD5pQHcS8Wd96IaEqq8spsCe2EWS0GI+tCJ\nDX6+\r\n=T5NI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.bd5987f5a.0","@material/base":"8.0.0-canary.bd5987f5a.0","@material/shape":"8.0.0-canary.bd5987f5a.0","@material/theme":"8.0.0-canary.bd5987f5a.0","@material/animation":"8.0.0-canary.bd5987f5a.0","@material/elevation":"8.0.0-canary.bd5987f5a.0","@material/feature-targeting":"8.0.0-canary.bd5987f5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.bd5987f5a.0_1596131211067_0.9370943354781194","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/menu-surface","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9d2ead1d9c3f334ac5812bf1186756476d593a90","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.005e86a9b.0.tgz","fileCount":40,"integrity":"sha512-RTnz/7YQzsoiu4t4SS9FuaxncIpefMOenTs3sGJmN1VW9AnHxJai6OpUcni2uHhL0VaJ244MkZnVbZTnI6lewA==","signatures":[{"sig":"MEUCIEff4ehWmsvVUbMJ+x7igLaqWSBjBoU0WTGvOdP/xKYYAiEA7tt293GXbK8oKL96gkWIAxUdYW33X3kA7Ohsifyunu0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwrPCRA9TVsSAnZWagAAj7wQAJEpU+JydZkHEd5/r8OR\ncWwgK7kXxPfBVzrWRYepN1W16Pt5PYqbsxqsnLN56HwUooIk0+qIfNbmHesx\nfxmkigm/zh8+2+ieVWj5MQTVUpGy2ywlaEisUQYzjCS0rr+qnoNYMa4iMIML\n9Epm2CleRyzyteoKa+WfzMiT5Vtv3v5OOHkBdqhwEk/w5rPTAPyaYQgGGM3x\nVRf4WXu+VmEPb52JT0nxn522SyLBpJFMwN8IjuPBXTEX2RsEyipU8VgkJ71k\nWPuPL9kfu9jcLhD7zazXtb1HsfjKpW9zG/f5iY4JOU+MqjoIfu2DJnS49BMD\n7QVuYpSazkcq6SLeo4dH5hWeJbOkTTCg9BvwvlU7Qbn0ZXlUIdZ7y10GQ0ty\nDeSSlQ8tDPJ3f3BGc3yivJDxpaEngSSDK+GPTU4sdonwEVfIey2CaTlkHAT4\nL8NmyimU70zjqczefXcdnFaRWtj1jlxeyXQ2iHK2h0p92Z+Xxd8pEYZ89pLs\nt2TI4nXBf1cdIvPWZVQG/4ZN6H9A38Ba5jhudBatPwM/qHmit6vp658CIGsA\n/qqO/LXdtOkxd2h/hYyFtySv8QlXJky7W6rWplg5tBy+HViplQsy6TSOgW9M\nnwX9FbWN/ToMpMcm7n+EK87ezKPiMFOoRS4UrqwQyyyVsSLg4A8F50d2/Jz9\nC7E/\r\n=/JnG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.005e86a9b.0","@material/base":"8.0.0-canary.005e86a9b.0","@material/shape":"8.0.0-canary.005e86a9b.0","@material/theme":"8.0.0-canary.005e86a9b.0","@material/animation":"8.0.0-canary.005e86a9b.0","@material/elevation":"8.0.0-canary.005e86a9b.0","@material/feature-targeting":"8.0.0-canary.005e86a9b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.005e86a9b.0_1596132047147_0.3620879395085972","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/menu-surface","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"5b6f3e260f52d091fc44066d5819c5de7d92a7a7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.e309c7c68.0.tgz","fileCount":40,"integrity":"sha512-E2rrJBsLpj/P0OI1nFoz+fXq5CfvTMrU81h16vqhOud+H6ixWNECPNDB/wfjD3+TLqyCk3Quj9pduDv9Z+03Sg==","signatures":[{"sig":"MEUCIQDN3j18vcH3OJyQokg8I6FOvsEGYVQKzQ4TwhQY/wl5+gIgNZONtqUZkr95oTbR8HVGWAboLMZod/NCeCF7CfEHnY4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwy9CRA9TVsSAnZWagAAZzIP/AhS8uAg3d8OjLnn8HS3\nxqhSZ+2md1za/sRii7xqEyd1p051zvuYHO9QqTJz9IWu2SlEPmPEqPzc0eIe\nqpyBjmppphIdgJ5piD8KwA6Z0R56DLLbxeRw+3EYM50bgn+C3VemLP9B6zCB\n4Am2gHAy5oDj+9bADR3bFuDy0janTqeX8b2024LwLpLQjj1mVMLjsk2sFmEx\n321Pz9hE4jHQaPr7LaEyLutwc/E5im+wrono8iz3620wa4YAMJUfHxEkhxcG\nKpZhmNv+Mpu3g+fHuCtOUFhT2IC0imMMlVs4cq+BYyL6lHvd7M/UW3I048b6\n51kqadya1yfnRv9PanGqo8XptqSi2u8WprPJ1LnuBt6+dHNum9jDIb6rveZ2\nFJ+9wtISuWKI6DisFlb5rSz7BkMcE06ahdAFQphgewwhCT1GoZd1VpAJABsW\nONrGL4eB06TAh1OG5HmGRUPnKSoCMwt2oOjzyJxXkodDh3P0Ddq/eDAlLRo8\nD4qLaWLhECLD2PO7KOIYPZVw7PqMVfsJTYgeakbDrX8IQQsMqfMvbL5x3fZz\norqMUGM6nuxJCz1tnRZu+ITwGEAbFBn4WcXfdZ+Lrr43U/cAYqFWQRlkG1Ze\nuQBxcn7uBSyA8qHI95uvvqGTAgNSOE1okHp9B9Hsway/WQ5gBEtig4u7ficS\nv/Yd\r\n=AUCr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e309c7c68.0","@material/base":"8.0.0-canary.e309c7c68.0","@material/shape":"8.0.0-canary.e309c7c68.0","@material/theme":"8.0.0-canary.e309c7c68.0","@material/animation":"8.0.0-canary.e309c7c68.0","@material/elevation":"8.0.0-canary.e309c7c68.0","@material/feature-targeting":"8.0.0-canary.e309c7c68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.e309c7c68.0_1596132540588_0.7491843760208354","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/menu-surface","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a85ea94ad8349e4d29f4b7bda080dc323073ceea","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.935a51cc0.0.tgz","fileCount":40,"integrity":"sha512-rBReGzKyWJ3gQ7tFolRTIc80B2vcU4TQNwpY/vqcjQWLCTQkCmV6DXzVLDX5xepBoVdTaMYXymN/cX6NjV2aMA==","signatures":[{"sig":"MEUCIDrDkITGg2B+Q9STwE3+XzcsMawZPMJ8br9tzGqVbY8RAiEA2c2bmLgfEYTwWUvOwPB82X/3d0n6iT+kPayMPbWE5is=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw+QCRA9TVsSAnZWagAAGAIQAIOG07myP0JQzcgyuA6H\nFkF9jNUsu/+n/seR8DgCjDrhGs6wfVkMoBfztURyKq3r0Y2qoAwJIIFMm0BY\ngKZa0+wYhXL4UUOLT3+qnG5KAQP80XPeAHu4ajd+PzOYl7jCbhLt/FzZrSp0\nTo1fVGxm66NNGDA0enYO6q9E5kWHW+TtBqTrhQUTohVu1efqfTpkiPm67l3M\n/QYHJQGRbuWqcmF96qv/fGXWh7DI46bgZz9foHLgbPtCXJJefhGzJLUZUTQ0\nyiQ60fyO5u2x2irj3AixOZ+qb33DjJALA4V6rrAqMwme/fnUv6K7kfeQWS00\nkrO/sSSpgjC0X14E3c3SGK/LG9tXgfJU+We7IfdU3c8Oavf/ovPtMOI2sMQY\nmHet7RucYgo9MA8w7HZ90nzU/VN+7dVaPvbIGFxZGWY4xJui/gnpHFfZg/W4\nCQn6QH4Fx7GofNnGGahkzTNg0xIJ8jSb4C8uKUWC3MeCMdeZIN/s9YJCNdRW\nrGExR+uWZ85YqHeo229gJRORbUaY4JJ4vE30vSW43M3OG9Klw9rigKc25/k4\nGd7vgrRBN2eCPk20PmhdJy1Lkyb+j/STIaTq+RGbebEXOY1xC9rUmECJZEos\nhuUo6ptkFrkx4q6FrcsFnC0VnoOZgHzimwd+u4WbIrx0E/DHEuOIJhaX4Eep\nhUBB\r\n=LVXs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.935a51cc0.0","@material/base":"8.0.0-canary.935a51cc0.0","@material/shape":"8.0.0-canary.935a51cc0.0","@material/theme":"8.0.0-canary.935a51cc0.0","@material/animation":"8.0.0-canary.935a51cc0.0","@material/elevation":"8.0.0-canary.935a51cc0.0","@material/feature-targeting":"8.0.0-canary.935a51cc0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.935a51cc0.0_1596133264431_0.4075898793797743","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/menu-surface","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"1e12ad3d2400bbb7de647707c2a43e6778e3aec4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.74839da7b.0.tgz","fileCount":40,"integrity":"sha512-byR1g44X9UfFn8fCMnXA9uVWUYX2iVbHMbvv/xxl8RxoFnQ/kZexs95KMn9t1vYuJiDxW3ZJfDNCDniQCTd8rA==","signatures":[{"sig":"MEYCIQDMgNXDeGyeJnS/S/oED6frBVaRNnu0+KYsP0CABW0rDQIhAIaYbqWcU9jgaBHBsmGJh+krys0PWmobYTpSQv2DTjEd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxIrCRA9TVsSAnZWagAA1z8P/2z1UecZhkBFBzmsFjcO\nEboF6KDkilsm9nXUNDzlmiNnPbGpxqMEDwRdhG7zopqdq2Nc2M6fxzO/n9dq\nlidqKfHHosfg8rYJy3Tr3V4/RYGKQhppBXmuY+l5pt9v5jx0lxBs7DcXxawy\nU8aK6px8WTtcCb7qxtAaKhG7eNgBXzlZLAk14/0akfu+kKR6DyyBCiT81gf5\ndj8K7avSvsdJr4uYcVeT9KEB7ayOprKyKLCvD/uF9bPiQuFlV64DZ76I0mqi\nrj9XUrpW9Kabbw61Nnkcvvw0nHZwx8rRtw7Gsqab2HZzS/nyK7KxPR7qf/j3\nyIbHKT/HJPqJb9wyfNmr+Ld4JRyr8GFH1aPG9fdhjrotdqsOGVjjBMwBjcuE\niFRyjYWGxrlVf9l+5Pb7LusOZWlnph7O7s1zTJIDpRxrARQdrR1WyiS0KmWG\nsT2LWnx2TV0FuWGE9esw2mx7CvYuhquaKsYXaBP+BzMwKNHryeL5jTfD3KIT\nzoJ9uEbyd0AzHc7r7iJ1cBpB4/3it+xaJx8ZmKcPqF9nLV2gzUuHngjLfMNV\nLbmNElSLPilXQ7pFjhDCuQ/T/mLGfG5n7rAeV4o7NzWv7MA6sF1ymkk0eQt/\n0VztFhaw1UioF8Q8fvKi2t2VDowY1NLgZCN5m76fur1V3M8cmrsoAorL7s1P\nDaKQ\r\n=mdvF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.74839da7b.0","@material/base":"8.0.0-canary.74839da7b.0","@material/shape":"8.0.0-canary.74839da7b.0","@material/theme":"8.0.0-canary.74839da7b.0","@material/animation":"8.0.0-canary.74839da7b.0","@material/elevation":"8.0.0-canary.74839da7b.0","@material/feature-targeting":"8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.74839da7b.0_1596133931451_0.11673391801664001","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/menu-surface","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d62aa1d0b1e00fa935f8ca13dfe023179d2067b2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.f041a48c9.0.tgz","fileCount":40,"integrity":"sha512-0yjMpwRkIEqovZEc/0dm5gG8mOoDgmSjLJK00EEg7OLsC3H0iPS6s45u+ntbnXzXYi9uXZWJWm0hOVZ78rzSPw==","signatures":[{"sig":"MEQCIFgbWycFkQ5uiyJH+jRKvE2f+GaryaEiVhW1XrQBj3oKAiAD3Z5+cCzO0nkyyrZyU/0NLUZ9ae9unUkPqJC4kQVGDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1EJCRA9TVsSAnZWagAACBoP/2/LE7WWDpm7sMf94YFP\nisfx9yCX7LYZhqXT8ASJro9Wj1CylWVuqY/OLS+oiert635GvjmUAD3BuxZT\niPNIQM+8TwMH1IbX7Sw2Va4YFlajqPj3G5z6TGT71FydNbrz3XwT5xI/WSSx\nwFaL7ZbJ5Ei3QYYXga4d/u1Qb9x4IJAjdU3ab+MlnlLOShp1XpgXvhDQzT4v\niGbZsx3EZ8gzu7jr3bHs3gCPnSWS2xYgyF5o5Y6FN0do+TFR87/+vycHh+pr\nwOZ0KmLf290x8rUIsYw2YrKA/dYy2ln771zs7qvdxGSpsf5K4E8/ogvakU18\n7y/cZdkaxDRXS4BFmJiYBRzylUXyC2jgVaah+PGpaBpppQYDng/WOlC5/WGt\nGngsYQb4jKnnvvIdiJtBh/XbpVSteMcXDoUJlzrkgKRHrDt/rC2P+Gs8mfrc\n0gk9z4jXbFAeBokH78gSMBUtOPnzEielmN6W6ElL27clTv/H/BRvARwGnPFV\nBhpEiqM9MFRnZyUYsiCb3cDZAT9IWejVOPOyMOgGfgxMJl8XXZ8cpx8oBa4O\nxGQd7JuH3V4m4e4Xgr66m18MH88Bm7bcYocB/RHDNwOLCLeDgaBP44qgYxOJ\nm3mAsWuly2FLhxL7Wp7aIxL7vYFcYHErzlWipMIa4fXTe3/ro34ym4Y7L62U\n/qt9\r\n=5AJT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f041a48c9.0","@material/base":"8.0.0-canary.f041a48c9.0","@material/shape":"8.0.0-canary.f041a48c9.0","@material/theme":"8.0.0-canary.f041a48c9.0","@material/animation":"8.0.0-canary.f041a48c9.0","@material/elevation":"8.0.0-canary.f041a48c9.0","@material/feature-targeting":"8.0.0-canary.f041a48c9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.f041a48c9.0_1596150025045_0.09045538183460566","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/menu-surface","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a44a4913d57aad3e88225dea86d72d55d192dfe0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.fbb1381e1.0.tgz","fileCount":40,"integrity":"sha512-v0Z/xvvKFKmFqsu8O3R9TuT1MB3QgQAUkfL8QQeF6OsYiQwd5P+oK8oGQbQ711a7fWkVpH4IduE36wBGZna+1Q==","signatures":[{"sig":"MEUCIQDpseuhqIO5AHfeH0M2hr3RQewqBGBvkQnLUZll+lDQ5QIgXyb9yVTUpIoBZTlsLxhw2gOi2PeeSajOeKu6X3BHQso=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD3rCRA9TVsSAnZWagAAOPYP/RIHTkwtFOpZf5axJcby\no3OtJ/v8u1awYcQMi/zq1SjCiRBaVSOXmB75l+r9ADExlFSytQ+E2VczckZA\nNg2YtTtWelWEzd/NjwLJw9yxhWFlAzfIdYMiVLdnUKdlKQQT3YKHA+WNkoSj\nRlxvgi0xggL1f+EEDKclZCVIg+5pJb7kucvoK1/ptD6/kwVNMAHQObnQvyVM\n8ygeW3+1OkZGA5dM3fBk7qgRHEv1oEEPgmjWFsTzxxcqCuDnQqedg5It2DZK\nUlVP8OVuOJJuHNp/COn673KLb7Kd4wxjwM8Mahu0AcAsNVyZsrIHjQ28BPCo\nzDoZzKhx3f9/tCqRl35VL8j4lxo1loVh8fNpm3AS1fvlzzfR9KrNglEHRr7U\nfxLMt7kWdxFrfdhiJ1AufuYkdu49Kr+TP0b+Cu49VHO/Z+BHjCb8e/ymdKvp\nrIYJ52qg4kpSBBKXc4a2KEflew5uJPdKT7sOVfgMAOipUzut0wd5K+hFgMdD\np+nVgbYH7JluwL/fW+W/MdzJyR5+O2OM2NNtsNGbcd036PxdF7hn292hsM1z\nLID/b/7AyEciIiQFA99GEbh+JclHik79vjQcpPiNTTWscxXrv+/i7tDVT7FZ\nMMcv9O0L4td1EB4qfaIX9ooP7vrT0koICdoajjEW2cnGwVkD3rJDgsFENPTb\ns7oA\r\n=eue9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fbb1381e1.0","@material/base":"8.0.0-canary.fbb1381e1.0","@material/shape":"8.0.0-canary.fbb1381e1.0","@material/theme":"8.0.0-canary.fbb1381e1.0","@material/animation":"8.0.0-canary.fbb1381e1.0","@material/elevation":"8.0.0-canary.fbb1381e1.0","@material/feature-targeting":"8.0.0-canary.fbb1381e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.fbb1381e1.0_1596210666509_0.3299684000284675","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/menu-surface","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"0f5ee65b1b9b1fa6868c4ef235cc3c34fc8863cc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.7f61d5785.0.tgz","fileCount":40,"integrity":"sha512-3/oeyqfWLyqkw+Z+9evvXwUT/5oPkJYdtfZNTrAvT6NcO5FKd3vpyZxjb9rQERgRtery2842ipat1U55+Aioug==","signatures":[{"sig":"MEQCIGjYbO50RgwXET+fypbMKJBNFs4pF/53H/NMOgKA6uJYAiB+veMW1hoJKhSHJDR21ymI9wh5mFrydGFzGpx4sThWRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFOdCRA9TVsSAnZWagAArQcQAKJ0KNrtrOmjI0rbOrxK\nMHmUBUqjxCv0GJ0XIn7mjIcOKjfPJhW9zh0nHonazHW3SkO9ReiEzPMEm8SZ\nwCMK+esI8C2whMhs3aI838JshTP3qW5QsSRdxFNaCwkwpObyFRkJU5NhpHtL\ntRJRZMspBGfvUowwGZQXNNAahStWP400Ru86NEXKTBTL9qCXjAoVYPOIRyvq\nx2fxHbyEdkwxhjvZNnk2w9L00BOa9AsvtNhKnJi9f5sMFyyRFSHBm2MFZGyU\nM2dqZuyice2na5iR6gU6Xx3hd0hXrk5OuDEyeWQCjJbWyYMrNIglDJ/PRot4\n/wcNTTOwP+1m79ZzUgPWueq/IoDsgYVYhVx7HHCWwQCBkat+hWyCYjtIARyA\nj/tQGg1amIsm5fhfrlPYJAMchmSrTovt8aPMmGR68fv8t3H8YnQLy+2EI5Qq\nz9HNOLWP11ePJWUGWAeaX9PKfaeELGh8WKiw4GlVbcg2qPv5PAZy9+WVkCrz\nwS+cGGt69o3QZ/ICVfTNQdB+hLlYWmXHl3oPJvoPiaSmKcUMQ0Z5202EDrWy\n0loUBZH7Auas2BIqqz5epJYQcIKoLzXOrOE0jvu55r2dJAQdza49NLtzdhR5\nPmBKog11sb7GUomddxe+yc3Hnku/qJN+1mFNezf8GooADuqePex1P96bx0N/\nY+4u\r\n=P/Ak\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.7f61d5785.0","@material/base":"8.0.0-canary.7f61d5785.0","@material/shape":"8.0.0-canary.7f61d5785.0","@material/theme":"8.0.0-canary.7f61d5785.0","@material/animation":"8.0.0-canary.7f61d5785.0","@material/elevation":"8.0.0-canary.7f61d5785.0","@material/feature-targeting":"8.0.0-canary.7f61d5785.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.7f61d5785.0_1596216221355_0.42976841414853495","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/menu-surface","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"ceab0dd06dc8e241692950a47acc2dd5556af34f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.e1bc84d10.0.tgz","fileCount":40,"integrity":"sha512-hWbEJ2drzavm1JaE0aeOeCqmWqwbKdtLHOS9oBvzNq401ef3450jpmN2+XSuO8gJp3n7+f5isu4YfRqDycUVpw==","signatures":[{"sig":"MEQCIBG5c12ktHwc6JBtO+I8axA6pKJTD+lPyYMFg9Npnb87AiBcwUiXQUwKS+bzgqYtUNd4W2+YsTzWyejY0fmwcTUW3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE6NCRA9TVsSAnZWagAA1J8P/R2YAIh0A7tXYHkWbuQM\nGrkefTA0LkwDKQK+5c6GzGZ98PhKkCc5PyRjc+4IxgVqnVoG5aAgkPXkJSp7\nVYpviTsiGYjRLEIUC3bHeTLStMZk/On2u4K3cVEgA29N7v4y/7Puz3xKwe1m\n36IYZuMk+UFFxU/DysWYgIxCrHRYZKEMTE+VYiFcANmkxScYzrmJhncAJ39m\n/uS6lN3op+eoLhayMRTmNjR+jNOO4YJZ6YyLc1f7O5G+oFtNRWJHhJUGTIA4\n76YU1tIw1VmzI2k21R6DOHVg1SslfZZVGJGMjBbkA9I4Yk0Zy+NDsGcq9N08\nJUhjTO0SZeYQ8sW0XqBTeXWBo0VMppHRJf60dBN3vvZl6IOTOrpx6E4uBipu\nMbdMOhweaNtEeKrK4bIWDWVNIIaj6adNblGB7dbt4EjftEsgSehP3T8U70kf\nIrXl7PIu5oXS/eMXJKEbiLRYREA1Kuu5yDuJOGsoGQyiidvtimKYCThBoi1E\nE+nd3JX93oI6z/wDaHNFxbDd2WFRbZscqyhkvm52VxMPky2H+uiyv9eN9I/N\n8mUny8Bx1wDyjxyIrvXtFFcmejPjLhraosY1IT2LHq20Z+XiLjSnBi7NTdFC\nlG7qcYp7fsvsvBZkNApUudYzPgi/3TJ4zvgsPVPbZIE3S5LsSZPDeNksVkae\ncWll\r\n=C236\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e1bc84d10.0","@material/base":"8.0.0-canary.e1bc84d10.0","@material/shape":"8.0.0-canary.e1bc84d10.0","@material/theme":"8.0.0-canary.e1bc84d10.0","@material/animation":"8.0.0-canary.e1bc84d10.0","@material/elevation":"8.0.0-canary.e1bc84d10.0","@material/feature-targeting":"8.0.0-canary.e1bc84d10.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.e1bc84d10.0_1596477069174_0.3531399983815333","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/menu-surface","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6a4d917f5af023a702472b59c8b2de621a038d6a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.096a7a066.0.tgz","fileCount":40,"integrity":"sha512-ptqVYtyzB5xuAZrVC3Psc0T8MnrKEbiG8AmMRE79TBtIwdGEQccEsx9RmhVQSWS7SQz7BbBXm8A9x4cfu31C8A==","signatures":[{"sig":"MEUCIQChP6I0UH5BXeL3zrG27zmWQ8JBkRLHm7JtuMQ4LEtPqQIgXNl5/Fxef8nzM7aXdQKKPNtwbUrk2h+B+Hsqnbqc4RE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9aCRA9TVsSAnZWagAAo7UP/1x1aQI6QL0XZ3Aht8T0\nhgNUTJHnPVKX/r26GicO+g1oVit2g1suzJqlnSU6C5hNC/YnxngJhRmLk8+d\ny0vM/tIE1DmFM3PmXCW7wXV/F3FbZV0jmcGfNwgZTKCGYBmhiK5Q9HlFIeLH\nxJnESyRwAjcEjUV6jLzSVk00MJtUGIpCkS4Uzl8ppAuMWw3ukMAzuY35xyN9\njc94xzcIVFzm2A3r2gxWiUhvuSU1TWZNbLLpEFCvkoMYvz/nAt9paaKeahOi\neHUjUUDBa4KWqSvP1mx5s8HX7yksB2E216aeKkx0gIVTP4xnyu01A88cjuMV\nQs8EuRa3x5Krzeng0iqBNQ1L+ZKTgW0fW6B7t5CdfrqAvZlJVc1HlRd0mpDF\n4osogz1fuF2mZ9vpRT+8XJXRAMfCCIMvaDN5/Dk9bZC4Oia4jWnr5R55z8Df\ni9gWyVs77RCq5wQeDJTeWlscUqMhWl2AGcKBYYgp2DHsqh4bvvB7nuyrYK2T\nlJpdceDENfV8N3A+o2otokcly1n7il9Fg/t5nkh4APvAcFIX8EoEgzDkTfxK\nqPJ8N1qEoQ9pIaMWS2oxj1nwr1budPswyuzaqmz30v4UbRV1GM8n+Sk92hPM\nFYD1zCb5vsftOU5ODSeA2zKRnPMrUUuwUb63H9nrUzcIZZAemB6hFt5fWvRg\nNk/g\r\n=fMO1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.096a7a066.0","@material/base":"8.0.0-canary.096a7a066.0","@material/shape":"8.0.0-canary.096a7a066.0","@material/theme":"8.0.0-canary.096a7a066.0","@material/animation":"8.0.0-canary.096a7a066.0","@material/elevation":"8.0.0-canary.096a7a066.0","@material/feature-targeting":"8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.096a7a066.0_1596477274039_0.5683644913769081","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/menu-surface","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4f327fd276156af14101163dbb7c9014e4db39d7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":40,"integrity":"sha512-oTi67zRPDRLWepr4eUMV/I23/LI0Jv3jSrmz5YzZupasxKnKhaBBWvLhgEN0ltbIjO2WGdZTvjUS5InvgVqpBw==","signatures":[{"sig":"MEQCIHQvrZwtioCG0ja9WTk87wkgYgwJRJaarKIx34r8xocGAiBKdx+RY+H0olp8kV0hG6aR3aWGQ6ifKK+ml8haOyCPiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE+KCRA9TVsSAnZWagAAtjwP/jXK4E3QMI6uQlNthzbe\nAAqlG9livfK2yS3GYa/BrAqCKCxbMygPAj0pIghLG/EDdCsBvPGKlbJt5z0r\nHlVKJQ3HnSJJCLuFGMfjc83YgKUOp8VBSF1GjxCixPUVNXJ7p6IKs+u8CAzk\nHtjBHDpDlpB1TkrOAw6RunQkK0wZeszfsPOal25nKAgL2G75zdOnWtylOjVs\n2tr9uWjV0JDADZDfI6+CSLlCrT7faXGC6dTSQVarxPQ30NQtEUjN2V5kJqUS\nfrMlLbtfDnDAHuNf1Xgrpah0qp5fa7Dx8xruFLZNxD8SesQEbOCed4krg+DR\ntncIDR/HlSXT/9S8iopoee3khFQiOvbaqyEV3+SQijrrC+9zLNh8d20O0par\nY7UDQSA5yotVVz7ESvNRkIu8hFa3TYKa7vaee9j7gshv/A6jcF9sFcnCFdEH\nYOYabZ0WnC0m3g/4PP2noyFhhk8Mbkai4ETB31VJJ22tEoKme6JwIaR/IG8U\nhxfr8sBUAoPx3Lv0Anicy6BCMdRMjzCmtT5q6SaUV+f/dSq6l8Lw8oJWYseD\n8ThUgA0hzNClPS4tqSNuuJKRt/rCzoXbUvdy+yn1uTJhX9cvewB1/CX8z0XA\nYOm6NgueCvKhBaTOkzRtzKGhKCd2fV3ss5iqtcMs1z/BIjlDTvjQOj1VImBI\nw94/\r\n=jQpe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.aa3a3e5a4.0","@material/base":"8.0.0-canary.aa3a3e5a4.0","@material/shape":"8.0.0-canary.aa3a3e5a4.0","@material/theme":"8.0.0-canary.aa3a3e5a4.0","@material/animation":"8.0.0-canary.aa3a3e5a4.0","@material/elevation":"8.0.0-canary.aa3a3e5a4.0","@material/feature-targeting":"8.0.0-canary.aa3a3e5a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.aa3a3e5a4.0_1596477322085_0.7400965791739551","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/menu-surface","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a1946afcde65e592ac1a3de8a2521a7435a7843c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.5903d39af.0.tgz","fileCount":40,"integrity":"sha512-F5ikrsO5Sv8DIJoML2+nT9Ull1rHzt1594pDo33cmOjNcZNBjUNKs1e2PPiuA17YuD5R5+j9iBYy7rMB7xtziw==","signatures":[{"sig":"MEQCIG3H7bBZRb5KtwKyPO8SZgI8krXKGSc/7lMcS46NNxS2AiB7lPp3ubOQZP9+gxXoWs8ighVD6HREKHZj+ZAeTzXz2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE+aCRA9TVsSAnZWagAAIu4QAJK6+lYvdpMowMIi3z22\nBuNuz5c8cOt0R3UBMS8CmejY4HwlxOCXaQ9zuYBK1Xe9pSVdGMjmE7OwQR1N\nWbed3XJUZjdZdhQJJ8Npdsmx/R9I02CqbWUAI7xDS98qpyvkH4zngjCbNLcN\nFIilZ9cSeqC6Gwz+s4Z0vAwpnNUhWy5kN6I+PkbEno0PglaYIBdZ6+fshvtN\nRDqqzKewfr2nhkGujvO5ooUzv4LvVDkHPMrIHiWMmo9tHNhoCDaaCDzMLOpf\nz+9/kMtkDvB7PVXex8kXJQYVNkJJPCKeaFg/BPaoZ0jEQ+57eDDlnO277swq\nhPkdfHvTkRiX4MIKvap3u3Inz+qpR4hhLdLDoacyj0Ej7Fc59PbIJcrxLpco\naYRj3StClWltu0bfZWIKzUpOTvU8Q6v6fmZQ3DmfWVQPHDh3komr7doZxUEn\nX1JPPanp8Su9dpXSzU2Ra2aUYBKL0FnT5iQMCx3FDju34u/puskZvJEieLiE\nj+Ta5OGr6eW3ED50DqK+D/AvA2Sr7yD7ZUU1Jrwa8WCzxaJ6xD9UM2uiy9W/\nmSTn6Mdl3iJpe+IbsAU3LkpLdgqA5OgzFjJaTByanAdKtAfRgmn6LwmhIZhv\n2IfEh1QrN7WQLaxJLcBxciyf3Gk+OGEzHNWAwfWW02t5eeyLhlUkLcNCLcoe\n3vP/\r\n=Fqk6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5903d39af.0","@material/base":"8.0.0-canary.5903d39af.0","@material/shape":"8.0.0-canary.5903d39af.0","@material/theme":"8.0.0-canary.5903d39af.0","@material/animation":"8.0.0-canary.5903d39af.0","@material/elevation":"8.0.0-canary.5903d39af.0","@material/feature-targeting":"8.0.0-canary.5903d39af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.5903d39af.0_1596477338100_0.5553359572638721","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/menu-surface","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"428d8d72794304017de8dffb21af10cb453a9dcb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.72258f898.0.tgz","fileCount":40,"integrity":"sha512-BwbraO5KbSp7/MtQRQR0PYyOYrz/GBB1kkOVDasdV74/flaSWtrN74wk1GdUUy3us6iMNcKWEUKpU6mWNqjjjg==","signatures":[{"sig":"MEQCIAe6vAroyT8Rd5egqwAHtW3/Ic4UzqnY3t7ian6QhMl/AiAe3Edg9imzPrdc1sayxNUBgrhpte1HFTbRsbRp0uKh8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLdMCRA9TVsSAnZWagAAJpAP+wdZ9zq8zI9C1EKHz8jn\nWfBamV/GiQH4RhxvjskGdSyG3NGOFxno2YHbOIz1exAeuDOLwOR8tFnRHw88\nCjhG8/XufpBkHpni9LMay1eJvNNccGL0wAO77yzTaigvlwAoQhqr2ZvW6gKF\nBpOBQCFC+J8HfXkbjK+whzZkXXOU2nVj+txRXI6hTF4UsHST/ODMZlGNRHyA\nYFnWUpJj9Mdsv4WO16ywyAND2mGso7HmvPEHgiaTirE1rP1Bsrp+dqiJk7dC\nnfgg7BsoHHvhdBINMUabxWaxsu2Uexx3MMfxLC+tebITGvfcaPn+ecIfxl8o\nFdg5RUItEx1286IKgaMSr2yB62JwaJqLlsb0baRRFZ3l+/9eyUue+Sq5yLqy\nDQ2Spy7Il98dcjUTwoIfhr1ZgLoFptbuqQIyGADC80R6X5sFDxySu5vnw1C8\n0bNo/KR3/BS356dnx0WhgoJJetKoaBPCF42Un3G8DPxBiY3Rh7NMzXZIuwLT\nDeMII0pQr22itL/ozTAc+IKQj7mOawRRZuVcKUBODqRmfR7iMyEPtru9Tob/\nWWsZILXZbHyJhdH5+fnwf2vDoWAK/VhwNBsfxcRbedvPmJFZjrmwrzXip3UP\n3hGQAw9/z4Q501lxKomqzFgL1cLpZPu/wm61u3WN5YzO4Xf4kiaqGMDmnyEW\nxI6M\r\n=OUbG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.72258f898.0","@material/base":"8.0.0-canary.72258f898.0","@material/shape":"8.0.0-canary.72258f898.0","@material/theme":"8.0.0-canary.72258f898.0","@material/animation":"8.0.0-canary.72258f898.0","@material/elevation":"8.0.0-canary.72258f898.0","@material/feature-targeting":"8.0.0-canary.72258f898.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.72258f898.0_1596503884417_0.27232409102973665","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/menu-surface","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"793dbda753a4c921840a5aa7e4ea7f7bdb8cc0e9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.1b44b43c8.0.tgz","fileCount":40,"integrity":"sha512-2/ijrI88X/CezsbjD2+YshvPaTv7YaTYDR1IHIYQixCQ+2GBvtEH5pf3fVf561xiSE0NWBGSbwQQnYNOvfy3BQ==","signatures":[{"sig":"MEYCIQCCvQZlGhytGAHM1OU18utOcKv6IVl9Xl3coSRkGjL7PQIhALPln4aKNj7ELjpJmhANxgq3rpGxL1+zxYnSRdt1faEg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZGECRA9TVsSAnZWagAA08oP/16RmrZcx5z2bknG8d7o\nN/lMqbprE6MogkBNAqbMI33BzgMJs7o4V1SO1matkbbgC43Aup4ZaOylOVyz\nf5g1QnG/wyF+azLdwi4yqj0bb4aeoYsav+JcBOUgYO65NEFyGgl0+1OzTrcQ\nT1pL9xmwaOMnR1ImpnW3lRMMNyMyHDtaTqcWaqUmYbkfG2UIn6NPAesYOVy2\ndywbbJOZFiRTO/+YeRsBLSr7ulSGmcezfB4d1B2Ag079i/Br/AII+IbWUv15\nX5LOzOZumUBxjrfcUrff6ZqeRTJt8SqYbL/FEi4h8HxhiasdooGe1F64Tntg\nuqR30j17TY+8Grer1xuPpFz3TAqo7uvHQM5R29Hibl5nAVrDbIv9j1LvWQkt\ne+xVHCGZtLROlWkrp//Q119vZ8dJ/uL9vTk6jSXHcHQi00Ug8o1ym56Ihq2P\nfSAbBXukAG68RM2osedGz+RyqT6ZhU0Ucrxx7US27gFT7ECu/UMPHUimMH3x\nb9PMogMggFxvgUx1JDdaxUBHxdF30v6PBmwT6sPbZunuj1VyQL2lKtsxYkTu\nqfx87qhm4mmZqIvnEUccEHdw/D3CFp1IsWMGZ6zQCq4HSfaTABUMqvQbZuPz\nyYaGz5xocZQO28MCGKl0pLLA0qlcBClQcphgn/74Osj+mLNSYNcvwNTaDr1p\nsexh\r\n=5JXn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.1b44b43c8.0","@material/base":"8.0.0-canary.1b44b43c8.0","@material/shape":"8.0.0-canary.1b44b43c8.0","@material/theme":"8.0.0-canary.1b44b43c8.0","@material/animation":"8.0.0-canary.1b44b43c8.0","@material/elevation":"8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.1b44b43c8.0_1596559748394_0.24776504843358116","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/menu-surface","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"de6dd8ff55cb171dddddc8957952460131c8e7d9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":40,"integrity":"sha512-TnUyuzI15lGXIAb2BfQHadPZ44LFhp2gt84MvEC/e8OlKh/0J27E6FoDleKVa+WraT+76DkcNEOMgffv9Vb8sQ==","signatures":[{"sig":"MEYCIQDvqgRHlyxEmHTZqAklhVGUAKK1p11JGyt34Oxq+uqStgIhAOaHCrVsKSykEvOjBHkPh1Z3FD5UKOvu2ExduHNc3qjI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcQXCRA9TVsSAnZWagAAT8MP/RW9HNYwn7XC22+4QCzK\ndOBoDbXh98Az/1dw6y5ELNneo3hbNE6cwGgv+gw2rOyTpoEIB8XZ5EcmnI7h\no+V8v8EBR+TqKTWofzPmOyXH2u/wFT7E7YNTZFbU+dAEUphg4zmvoggSX5rx\nmUvGVP4vKSuz41stLYlnTyUW651OTvJHtdX6Ebzok9AdjW7oqqBBui3QGBTX\n1fFu3gAuFffhTwd3DGepUehUrTkyQCS08vqz1ufuln4TqmNm1ru75uFFvi/q\n+TQ43YGEEpKmCFd0lIk//c6WTKU8qd5CKorDHPqFmtqrNusPbnq6SCHxgvSQ\nKQhh177jBOLFtQxggpRnwnFC99jNkMHSwPCA+H7Jlp+SpmiQ/2RTQVvb2HDt\nYscbo2DmgaYoVuqQJp54ICaOVm312q6Glyhlh/JL6EL8Tsllvn15wz8W8HTC\nwfvgYCj1uaSCqlFcOVWfE4emtidaKzoWlBdyiZHi1HmhS678jXH1lK8RC7We\nFUEoDhh5Qf32RAg3IUTB5pLfr2vboTj0Mz7acuxsozpYpNtp2epWBC7AyPl1\n3jOQM9Ghz+4dnkBuWHM5FaxJqadsyj1OlkyNrQP3yyEzMkTdy3oPIg8texFT\nZarwuDUG7rbrT15rlnxeGOkfgDPvLGON5VZ4I4QioDGX1kOoW5RdDUFQ3Qra\nK9aT\r\n=JRjv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e9d2e2f96.0","@material/base":"8.0.0-canary.e9d2e2f96.0","@material/shape":"8.0.0-canary.e9d2e2f96.0","@material/theme":"8.0.0-canary.e9d2e2f96.0","@material/animation":"8.0.0-canary.e9d2e2f96.0","@material/elevation":"8.0.0-canary.e9d2e2f96.0","@material/feature-targeting":"8.0.0-canary.e9d2e2f96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.e9d2e2f96.0_1596572694833_0.7787998014548159","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/menu-surface","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"fa6b5207cb5a5c42534c6cdcb5cf6b9c92e99565","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.b9dff0a19.0.tgz","fileCount":40,"integrity":"sha512-nn62LTz9WK7CTz1C6Sw0JeXmPTaXenlAZlWfGJlcfkWyGAYb+MvTyuuSjo/qnVFBR5SHI9YIIfH3GgGdwlUlRg==","signatures":[{"sig":"MEUCIA8I670GjTKZdY/16WtCjjj10uiAkEoAGLuiw+NzbodPAiEA3ePM8wDrTsl7re1v8jzWm17t5qXwBbjg5o3R3qYpRyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKixLCRA9TVsSAnZWagAAnWoP/AyexEeFf8NWeX0vmNET\nYiEzmEtyRf1Pw9yWfet+jA5X2Cz4LAI1R/iF/D91ryDSjM9OXDsndURCChhM\ncK8/KFsbA0hvguw8gFCrqPNyoXPJ7qGHglpLId43JZMqXqiPU5K3pWSLRgt9\nKA8kMBckOCPUrOzK/jPzeWdXuqTbI8K+EA9E4te/CgqJUoW8DwQsgMO5KdZA\n68bPdn5wJyzrddxR7A7lJezODDsXfl9Q1tkt0pDZ3sN57VvWEfAnEPfQ9gWq\nlAai0Zq9awxXyRG3WTd2w1RiLJFuk8z8IQQ+K9LU5yw7NB3yF/+dyY5t2jAb\nDgxfT2efmdDxto96g70AtlObc7B74ixL8tYfXdrpa21lDb/19e3E8TU7ZPIQ\nvl8ESc/Ew07CFhzYxd8ZznJauA7HiqnRfMBl5cfFkaFDktVBkdOIxaPrZ3OQ\n5I9lKCN3JjG8KjOjxiF6sj7p0txMe6RYr/jbey2+ecZLUCQxDmcUZfYjlx3O\nrwd4+xCP3BAHkyAOwTrIdwuogFchA8ymzfUV8eZO3/OPMFPBHau6dsIL8q6J\nIlTv7faDIhy2j/oAtLqxggOQ14SeUPRSASyLx0jp3Bji3hmaCDmXy940g36W\nANPhl1E0D84R9lPIpnR3ZxeOE+g/AdXB3u0AMYfd9cK/nJI/agtymrGSyQYI\n4DRS\r\n=LpXH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b9dff0a19.0","@material/base":"8.0.0-canary.b9dff0a19.0","@material/shape":"8.0.0-canary.b9dff0a19.0","@material/theme":"8.0.0-canary.b9dff0a19.0","@material/animation":"8.0.0-canary.b9dff0a19.0","@material/elevation":"8.0.0-canary.b9dff0a19.0","@material/feature-targeting":"8.0.0-canary.b9dff0a19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.b9dff0a19.0_1596599370809_0.41453863990911","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/menu-surface","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"24df88b643b717734cf0cbf66d0657c4ecbf3be9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.2bd09a706.0.tgz","fileCount":40,"integrity":"sha512-yehX2Lze6I37af4iqYSEV0VDmPaLp8bWqxQBMMeAomCuh9Wv5iLV0JZQnCfoOL87tWKFSKVZ+klKHV/T7VpaiA==","signatures":[{"sig":"MEQCICPBQdBhvVzaTbaLo0tIYlBBTrT7s0isbGwzTKfs23GyAiBzKANHlLWVOwEeZBH2qIwFeFeUhxwwl0N2q2Zf/+s+uA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi2FCRA9TVsSAnZWagAAWsEP/3ydFEGndLgERiA+ABtr\ngyL7KJr1+K+OMinogHY285Jo9gWesj6FONKXZU4xzUaqUlBxqqCXO+N4b4tJ\nTJqstpPgKm7OdUYBCsKb677X+8nxEE358/ZAqGjcRRRUaPXRUt1QFfbnnXa+\nfwHdoeGx/PdesnGt3Hzj8gRyJGIVGtDZuFlSa6xjvoqKovWO/4zATyTMWslg\nwZmJNQJ3LH8Ab778tITWTG6AWOcvxPgu28l85KtqilHj3uC7iq1iPopF9zyM\n0K8z4bGCjeaZ1tqESlAqdSuaZ3Tx8NV1koz8NZKflN43yN6a6aXdg/x5J/tU\nTCw0kqoIS7m41Rq24EFgRi3J12TMLYIVc8doefcfd41ZJnxjzGg4FMZJnlik\npBKXfenuWbBMWLxATRiZVdtwRl0OKICwNCsLULwP/cV+P5IwN30owOijBSNx\ntG/6gfoXUM5/gnOJcpF61XRz1qVlKSzDOQ65sB+sCkp+MIXqHhL+Ds/6RCxU\nHee9LZOf8nHkgrGRvApN2ojSDC76UQmK3rl0XYioXb3OMkV/l/71NF+uP3Xw\nVlE1nsQK2+goFPopsInWCYouWymDoI5B36rAX2XA7xFGiWP3zLdSijgv0PuB\nOXDzWw8Xya9AkERVPEhMb4P6Ser7qjR10hNq22QojCymX3PXCukxhhPILeBZ\nEXzy\r\n=vaw+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2bd09a706.0","@material/base":"8.0.0-canary.2bd09a706.0","@material/shape":"8.0.0-canary.2bd09a706.0","@material/theme":"8.0.0-canary.2bd09a706.0","@material/animation":"8.0.0-canary.2bd09a706.0","@material/elevation":"8.0.0-canary.2bd09a706.0","@material/feature-targeting":"8.0.0-canary.2bd09a706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.2bd09a706.0_1596599684817_0.18720247709144755","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/menu-surface","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"6ae90e4b84a9ad02127b0c5b54dfbab1df857c7b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.e0560522f.0.tgz","fileCount":40,"integrity":"sha512-/GD6kThA7ReG+iykMy7+ne+/XzSyzj6ec+ZX+Y5+aZAzVGlUwnoiWIPxja5OigoYs2PKYn+n5UNedlUkJQ8mvg==","signatures":[{"sig":"MEUCIAkNcYAWXGrv+HipE4aY0QJf6piG/1K4A3b+tJO9L0lQAiEAzhS3bznIYGpqX9RcB9nynhnTvmV0H67QuVCsUiTyks4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKuptCRA9TVsSAnZWagAAKccP/2W4OCuR0Fg/UhtG0Szz\nKL/h3e4rafLHmr2s12iaxn7Q0xSflem3IQMbiaqQvS3w09jnNoKMuxXMMI9g\nDlkQXWcoap7kuV8LHUF6Og8Q9wv+gah3/lwulBCY17jsLAzn0Awq/pozEBgv\ngi63vflxixIc2lGrvZjgqg6b/nyspbZdRldymH4ZrHY8DutVndXQCM8wHIga\nZ5il+wjWNCSoo3FGS0gD3h7hcZkWmsw47vppGvJsM6W2N9GG2gmSLuW3AVLx\nRd5u8EdmV9KFTgJa9JpsEh2D4JntdcVod2S6USElh3zk67cw+Z7/CunLTPiK\nGorIWbJ0Gzd3dPKkh93bC/VqbyDw4wNL5J0aTEC3hnMDvDeen6FrhyUxgaNr\nceT4SWvmy7l8fgUpi9597oS5FWVdfr/xlzVTxADWa9+Di9bkpIXr4qTdu7Yh\nAVWiPeebFWLGTw+cZexQezH2B7ZiFp3rPbPTxJitkeeV0u76j6OxQqW953xG\nTxb3Wbyh30CYjj8PxS6pVtupy15LcphXpudV1y8lO2xq7MBdvADAogEjpRGK\ncQCWoXwpX5f1DLiie9Hvaqgt/ded10+Z518Nk70aPlPxdZnumKjJW48DhMUQ\nMuXcq+91h6dm4zlOJknwDAOV4KjFQkh1ob3qNtQDK3zGTv0cpkabqIfE5UQE\nABPe\r\n=s+a1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e0560522f.0","@material/base":"8.0.0-canary.e0560522f.0","@material/shape":"8.0.0-canary.e0560522f.0","@material/theme":"8.0.0-canary.e0560522f.0","@material/animation":"8.0.0-canary.e0560522f.0","@material/elevation":"8.0.0-canary.e0560522f.0","@material/feature-targeting":"8.0.0-canary.e0560522f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.e0560522f.0_1596648044906_0.6914892339762719","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/menu-surface","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"fcc41e3c2c5b4fe2f40a4c5c45a880db6ea3ec42","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":40,"integrity":"sha512-tcDhcNzp44WEayUdzSOf0r48oz42qqomB5vcds7lvdRtiysXANHvJ6RcBbpFvIkch4UExRpVzCNgD35cwTQiRQ==","signatures":[{"sig":"MEUCIQCbnIn5O82DXg9w/YOS4kEC98Had71Y9Mt5UaNX+qVwtAIgESyN3BqMLune4a7FoO/Fx7Yx7e4rbi05SmuqikiTbPA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu70CRA9TVsSAnZWagAA9iUQAKQUiwnfO+wGjmkA/94Q\noSaYPyBVuv1Xjk+YDTqG5WlxrrFN6aIlcc8OvCM71chPpDg6jGrMVYk1ycMs\ndx00QLQ3QxQ2Z2Q/6bbW0LXRvj6DqqRr4dvAFfnFziPiJ10ArF8dvxDWcTjC\nHLDWfLg4js1COk1X2f8tP6Xt+5p2q8Cq4dc0b8YusraGzv06+R+ZQRAdmoGI\npF2baBjDx0rfK7QJHtkjMPkMG4ZguH570jqR1e17vxg5VvTCXa325bzgFd5m\nDAZZtm7VpYs+oH3YMpTJdixZ7Ov5JyXDZ5GGoxAyQBh5rAVnFNaF39Pbiyxf\nMh8nPHqRweoQpkBdD5KB+BrdZe+9XoIRyeI2hCMtn5BKQD2y6E/TjxeaFsEe\n6rr8zxGLZFKrJpqYmKqlKy/M+jQn972gOFgK5WkYtLo/ADuZ6PRsspSs7opE\nLLNQcsGsn8HpzKC3lzGwFfEYnIIdVPuLbrfIpBmV00KVQTREs1bdakyYpf55\nz1zg0aJHMwW7alAnpEONXR/ZgV13qwwiHs0ulrDGisGVfr9cIyJ0h/R3SZl5\nnjrW71rgQjKXWR8y1SZyI71L53T7y4jqGLjMii/QfsGtXbe0JWID9/5HGDpw\nIVzPPeEWAYfqaIDqbNyGt9umfn3OFud4s45aPNrDQn+QwSHnPTvILttmuMar\nR4iw\r\n=56Ro\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.08ca4d0ec.0","@material/base":"8.0.0-canary.08ca4d0ec.0","@material/shape":"8.0.0-canary.08ca4d0ec.0","@material/theme":"8.0.0-canary.08ca4d0ec.0","@material/animation":"8.0.0-canary.08ca4d0ec.0","@material/elevation":"8.0.0-canary.08ca4d0ec.0","@material/feature-targeting":"8.0.0-canary.08ca4d0ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.08ca4d0ec.0_1596649203810_0.1665032462280167","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/menu-surface","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"080c7bfd7d05d16e81e8701b7acb8e2dc1c40097","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.08090126b.0.tgz","fileCount":40,"integrity":"sha512-opNavaIsMcuJlpGEKWVD/lBkTYDg3RaMvAQDBpqpMQsx/xOzq93vdq728p5+9gk0RbQr0HSrc5+7GmBkrSCdng==","signatures":[{"sig":"MEYCIQDCM7u6mUPVQqd2ns3t7SeHc9rSNoeXHGZyFmDeLrSxAgIhAOTvZN6uCwpxasIUBZw7XhLS17pHrfcB4VKCCPXxuvLN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFr+CRA9TVsSAnZWagAABLYQAIug9XuKsiT3W4aVFLrY\nVUI7rRvTrfe+GBBXz0oTcedNi5EwupnlKcaaL41fcCci/E/aHbQIo3JAIMr2\nBMsIOWJZ3UByK06qZHMhKILvrUtIcP+WzMJCXLiw5/JX43602vbNJl4IF/Mx\ncNVtTmpZublEgHz3wjlG72HpJU38Jsl4iRcOO5uZD3rfOepJWXXKMow2CKBE\no+B0HPYV7/nDNU3tcWIIWHfTFSr4nEXxzqBaDGOVm+3XHe/T3QhSnvDH7KJu\nVH5V5c2xTGHOvTTVTWsPepp0m9MKBbnyzT+r/GNKVe6OVXKqkjLY0t3rQqRV\n19P01yo4KkIRsKTxS3GEqGo1B2iB05hHtHjspKSVkzl4qlbkQ3q4JZ+ibOz6\nPG018CTHs188MI7vRB7K50uXcCsTSHuWwHJbxMgTKqd0IHCDP6e9dHVaqbB4\nxlw6JHo+NDq8SxSQhayWpQeN6mod8xGMaVPNL1BRrRJq1YJSvt+cozlKEghH\n2mO+QZ8fv4e2rC32IkpcwuE/l0HZGsHjI8iCbwRzeuy2WS+aCIaNazMoogWs\nLQEAVWEWk2V3HLwutPu3/QmFRF1+MDKSNV2aQtHpTHMt6o9lxWXoFBpmkW5I\nvrziFxX+m43/Da4PMTg5+MXZ4gp2xtgztpRD1GA3shlfQnX4CbowLoPBvmxF\nrFNf\r\n=ygBn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.08090126b.0","@material/base":"8.0.0-canary.08090126b.0","@material/shape":"8.0.0-canary.08090126b.0","@material/theme":"8.0.0-canary.08090126b.0","@material/animation":"8.0.0-canary.08090126b.0","@material/elevation":"8.0.0-canary.08090126b.0","@material/feature-targeting":"8.0.0-canary.08090126b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.08090126b.0_1596742398385_0.25298214324805235","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/menu-surface","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d4e03b36a2dd5a1365afab4af6be02c3fd8ac379","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":40,"integrity":"sha512-pCjptINpcWcPjWUBz491Jmbrxe4lWcSezWV7ARcOHQX2UFgb0/6cwJd8UsP9yqE93q2oSai/SOblV+AiU9LeSw==","signatures":[{"sig":"MEUCIEhIT3a2CUwWI97kJsaQGIigR/SI2TapFRzBqw+Je+aaAiEA21Qw4UhTtI1BGLnP0t48ayDroVKAPaYqsZvpOCwNXjI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHs5CRA9TVsSAnZWagAAadoP/1SMIUriBAs8R/TLKqCc\n9Ps+pJL5x1HrnGHl/P3vOFCQjgQZtAFpJUj1jq+ZMnOdMUUCMPhlT2ssj2Hu\nvEJNu5Wl7lFHGTkiXJMKeXmAid77QLaMKbQEaX23SmnWMuGG7FGr68UAUjHN\n0DUOtxjEUFpkWmpsb3k/OcUil+Sk+9fxMorD+uezTKaBTettAFpL0kOUMSuT\nIG3qxpSmw5ZPJ+D0V4DavBo3fEyMBpkNQLlq727pL7RR3ZirrCG+2ZUuASoJ\nj1XC2RDN6xp2ujQzFvtTd2XV2iRukecPjetmRRWVl8b7/pjHhsvfo5XmWsSv\n64N43GnH/zXsRCOyZgP5PTMo4vjHDVq33O6+w3Gy3hO5Y9JjBmfgLMRSH+Yu\nxqs4fI9CNPAdl0kwpu2XUxaASe+N1UQfs7c9n6FauJYkrSfVEneenhjyTLXX\nxa6kVt7l1gjeFE6E96XpI3LiYx5K14OhVNDnIMASszrfESSK7BO4Epsau4Yu\nrluuRa3LAIQGkB02W/3yA4T8c6ywy1HSJWmdshwmqydk/BBSaRJaXYkM3Cey\nRlZp0y1eRT/N8hmkoMAVV4vIPPaD/T/XWk0Cj44/4oBMb0a4kaIxRqfYPC42\njIMYvqgUBhHUOLdvjcQC1+6CD6o2FrRs7sdBDe0q8YT8OmN3OdR4fZEHoqbX\n7g5D\r\n=O6S1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e8bf5b2ac.0","@material/base":"8.0.0-canary.e8bf5b2ac.0","@material/shape":"8.0.0-canary.e8bf5b2ac.0","@material/theme":"8.0.0-canary.e8bf5b2ac.0","@material/animation":"8.0.0-canary.e8bf5b2ac.0","@material/elevation":"8.0.0-canary.e8bf5b2ac.0","@material/feature-targeting":"8.0.0-canary.e8bf5b2ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.e8bf5b2ac.0_1596750649213_0.3551288701968338","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/menu-surface","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"aaa9306041adf19e46f10e444a7721d25a913823","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.e3b746208.0.tgz","fileCount":40,"integrity":"sha512-065wfuDGXqwW5SviVxsDuBrQXuX1mNHR9bxz+dpajTn6M1C5SEkHd6gxeXD2gFeVfugpvYXwEweris0U3rMrBA==","signatures":[{"sig":"MEUCIHhWPP2v/YDFzUmXLpvUUGKmFKX1NPLQQh/jzVRESWFBAiEAknJIi/duklVVQIhic7xAA6jpZUl8CKJjVph925sgw8s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIPPCRA9TVsSAnZWagAAs1gP/0CuyLoRJzI0OGWptR8i\nDtlKQUdUbDFi3yDyBwIJ+ZN6buYN+XCr288s3pWbHdxj0PsniPmoSTlVUCyo\nhBIuyTjt+FJkbOGLvgVWDBEya7xZj+gocBr1ppdR6Yoj9Y4w0ZIw7/5oveSn\nzBWpPa0FohCyFI64a6G92mqFEZ66h6co9JNts3jPSH3AkYsbeARss46wS7Dj\nPDfOrksEYDH47/mLhQU3jCHjDAVlVRfu5pOvs1PqDQ1njhF87W7lHCZQx1yk\nEOJMA01oktq2o1gsNmHMIFW6KG3tS1+UjCwWyTGWYhjhALwdAQDKkEjOp35u\nqC7HzfeRZC5WGNwVTogT+3BSrHP4ncykXLnEJREkLmfbnmWigdZA6q34VcpC\nuzE1s+ANKqC9+EQizYU2anrGG83vp4g3SkA+NasISeJp+HNMoZLnLV0RtDp7\nif5fHqZD8KQ8RDXZg3GJO8KCkbup37ZrNIq3JUBPiLbj3NvdKZ17dB8AkLx0\nf79zzoDp9THhOiHye1rfijv4Qv9RB/9RS/xnMvqE6yfCnN8m79HMTtMeN36w\nlxTu1nGnzvEXIJP1mkt6kWaAuoE5C5jRNlnuVkLTZLMRWQk+6tBwLwrbdXCS\nxgD7sqCPQ8K3yXn9uCpHb/XLBuOFmKT4xA0TCk9nh80AahaMAcBque3j0/pr\ny+qf\r\n=RZ7k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e3b746208.0","@material/base":"8.0.0-canary.e3b746208.0","@material/shape":"8.0.0-canary.e3b746208.0","@material/theme":"8.0.0-canary.e3b746208.0","@material/animation":"8.0.0-canary.e3b746208.0","@material/elevation":"8.0.0-canary.e3b746208.0","@material/feature-targeting":"8.0.0-canary.e3b746208.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.e3b746208.0_1596752847371_0.4106536533850653","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/menu-surface","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"41cf08ca65b8e129c96a1f452d5d7bfa679e8fa0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.96a640534.0.tgz","fileCount":40,"integrity":"sha512-w0F6SIzWBuKLGt9NDFJz5hdJILI2brXUBni3j0zaDWI1vj/ph7FGvnZvaFcrsbK25Xy9a967qGR98huOXULDxg==","signatures":[{"sig":"MEUCIQDPJ5kJjGZueqz5FRAftpt1xNDeXTjBX5KmzXp4V79KNQIgBlTzTJJMeUTm2trpQEiYnLwt95yVoIuk3TTeE9oN8QM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIdICRA9TVsSAnZWagAA8FgP/i/KB1tK4CEbyJ7sXWZo\nLamEt6MLqsIBXOwXj3vS76La2HYE65nGmGtAJIfeqojU19jr/+zxXBLTeGl7\nRY73wJl+hzYQRBHHSCnHS9QAtB9gVaQtXqxRF4ZO94vMTubDN9lY3LcpuEQX\nOvH1VnIK45zem5qXHrLIzPYqHK5C8h7FyuTEgr4WDBVQ/Kn/XluKh9M8FzCf\nxY2jEZjWhmRn5K0MFZe5JPbOMhYBWx7lSu8b32ArkppvVEqLriHjvTnoeCz3\nhVmQ5/4U/KBAoKPTJUlw3DLmDaaJ5l6eUunpI1FJSXUSqNYn4ZPMovR4ZfBw\nX+tpouf9SJc8YND09bnuRjCLIBqm5XP3blHwa0SA9etHIzf9Xxicp7ZfFgkF\nQ8E1aamZ2EC8RcW7Z16SV+FaajES2kg1OoTtr8h672hEXXQyKdAYLlqQcBTt\n2TTX08ZdsuMqXiHD75y3v61LlhUQXRQbeS6rutAp4TYQU5jORAIZd7M1hYX7\n4c31+ztBvhfLxvXV90jkdE+ySkgKlcylzuPdQXV0QLbVKA1O+Uis9l/tsb3T\n0YVAtoBtFdjiuql+8+ULIiCoRrgvyUueqEQ9XyYe+dQlpwHkWCuPQYYSuKiZ\nEoa9A1y2U+YiSEyBENeRD5T/IWe/opQJV4jUcLh4GWgO/dv/jaJRgfMbhB7t\nOBLO\r\n=H2Se\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.96a640534.0","@material/base":"8.0.0-canary.96a640534.0","@material/shape":"8.0.0-canary.96a640534.0","@material/theme":"8.0.0-canary.96a640534.0","@material/animation":"8.0.0-canary.96a640534.0","@material/elevation":"8.0.0-canary.96a640534.0","@material/feature-targeting":"8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.96a640534.0_1596753736230_0.1561377897460825","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/menu-surface","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"bc159020b6552408fe74b1ab7c0305ebbd85ae12","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.9f9aac825.0.tgz","fileCount":40,"integrity":"sha512-3P4n0dNvoyFHmb7S4o4Q8T4i+YiYoncRGhZsgf5cvvm32+HkCBuJBafu2sRutKTjva+vN/LVRDEw266GzXMlfw==","signatures":[{"sig":"MEUCICB3osW9qFBlkWn4B9AYaGg2tgEKxYTv7iLBp1HD5qLIAiEA7yJaTioXBTGEwmD7Dia0eAkAaoY/J9H/nY/8xcL0w/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb7xCRA9TVsSAnZWagAANVgP+wQfRb4UzP8QFqXO63WO\nGDBbcu+R/ftd7P7RFaFApPCgZnF82h6VppRV873qQ2Ej7fIXo4MQJSBqs62v\nDp98xlUdHQH1LamisE/O6MaSkmczK6iwyzfi/J92rusTlW5fpK7sSmEIar8b\nYfLQEf27eo6gTtGtxOUiuJDoDDvyk4P4dWaLziS0/xJhNwzjPSxKwVS7PcJh\nZMeqjSy3m97c/d72L0MEfZtF2dQoR8wox5b5Z0LSjGdnlP/OpmFIgTHrhyA5\nS6XlyubxSpYSfAhAyn5Wjf88MuF7BVDXSJBGR8HqR/+JkZTrQk8sbUv9en8k\nADMFlb4oQGSJyHr9t77UbKIluYeXy/14HvM4Tzn2YFIDy68dCytDmbnPg4la\nhkOa6p/YnYq0QPr3jr6XvPCiMT+D2HkoQvWeWxXqkDW3+9dKOGngfY5fSPXl\nno9+CJ1JCnqxuaVsy3lKkTIEIoJ1oFiJ+hkxfnM81I/zk5tIArRikWytOdpE\nkTiNqyqpIxWwIjJ0pgg0zN1TAcEgm/3jfknXJxOLiTjmYy6CFc0ybSbUKOeV\nYQocp4xpr/59YWfGKjt6Zbfyb7lrmLgBwSkLZE+rChos0hW9fxbEZMfpzZYw\nYFOqaK5xb119Ylsa0N/oeUydMgRXSaHXBbLRa0M4kohbTBNBPpH9S5ZdPYbk\n0YWr\r\n=uXbX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.9f9aac825.0","@material/base":"8.0.0-canary.9f9aac825.0","@material/shape":"8.0.0-canary.9f9aac825.0","@material/theme":"8.0.0-canary.9f9aac825.0","@material/animation":"8.0.0-canary.9f9aac825.0","@material/elevation":"8.0.0-canary.9f9aac825.0","@material/feature-targeting":"8.0.0-canary.9f9aac825.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.9f9aac825.0_1596833521364_0.6794113769308887","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/menu-surface","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"f5d93ee24aed1019bba7ce1d62b92e1bf91e87a2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.fc65fd00b.0.tgz","fileCount":40,"integrity":"sha512-ltFHMfwtBdprZF3DRNnTFBJItwa5vCoeo2hb/ruSjffGybKa9pSWpgRX0JeVEX0TFirkNvdkp46Zlbn1OVsbhg==","signatures":[{"sig":"MEYCIQDkP9VbmXRtXwB2t4vxlbaOyr16vrJ10G4gWMmKeahCvQIhAIURifHh/So8DwOHQ8qhAm2JYyDk5D9f5l1YC1vr5p+W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":336085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWX/CRA9TVsSAnZWagAACOQP/iQWribeY79wXceRLcW6\n5TV+M/BCKsjlb57kwsjsOLoZEligbOiYt1H4BZWF3S9/UzOUHwmFKQLM3CDo\ns4QHLE6WGLxQPKSsPaUUZ+pUWMoTEUlvUsGwGvW814Esw5uFZvDSTnJWOp6k\nMhT9Ixd1ux40OuY/m8+nMn6OIUIGtnZXo67ThtY/rHilqBVAygK9rJu2vk4d\nRjL4ty50xR3uDAHHfdW8u7TIsCsUhyhIcU4gjxbsnQuZi3Ansv3/qqnxfa7U\n9goFRb2gnNI4imolYfWr0oTBGTXMK2iW4ZGKnjdoRBqPA8DMMIX5Wdx+384p\nF7YdmBKnwQnh8n+2v//G3/JCs5y7j+Nj2cesa3wGm+6hHiKRaVVkh4UCnsbT\nAraJmS8XMJUcrf3qNoghvuw6Rftbn/Y+yxwFUcjH7GgUQqo/TTxyJmKfaaki\ndvTpjDLn0LPxr3WSOLib57FCK7wIzfcqV/VJDY+ZF8h7gbv0YjN3zdrjnmG/\nmB0cNJSez9qJxmkC3jyS3zukSEslKWxdNtPg1VloWL/qwKOFOU04XoWh4egw\n3aD0pyJUq8kltvH1WcRzDaCPd+93lw3uoenM1bR5160kCjgbx89viEhlWXD5\nyYDQHJa8zsW8/EZOFNR8upl+O5nTWzO8HahLTrU6wrDDf6ZEqytxDU0TJfpz\ni/kG\r\n=x9F7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fc65fd00b.0","@material/base":"8.0.0-canary.fc65fd00b.0","@material/shape":"8.0.0-canary.fc65fd00b.0","@material/theme":"8.0.0-canary.fc65fd00b.0","@material/animation":"8.0.0-canary.fc65fd00b.0","@material/elevation":"8.0.0-canary.fc65fd00b.0","@material/feature-targeting":"8.0.0-canary.fc65fd00b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.fc65fd00b.0_1597072894870_0.09586150259419268","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/menu-surface","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"dfd8a3292784612c65f30cd2322f41a6346582d4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.02e372c5f.0.tgz","fileCount":40,"integrity":"sha512-eX9+ohsylp0yQmWyBC2i3fhQfDWAkoQmDH3UZy61XyX0FbJKSTBkauuvlUIPoRAfgUOaPcV/8q7+rMGje3Tb4w==","signatures":[{"sig":"MEUCIQDBgPESB4YWwoF89uq44tVNEx0GcqNa6lO2SUpx+WhdIAIgE44IQUJ4ZGkhEE0ocvBbg6FqkodPqN1P2QtlgxWAe1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":336085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWyLCRA9TVsSAnZWagAA7yEP/0HuVu8ld2pwjSVKi/gj\n3pHVeza6f3CFhpgVA3Xtt8cszmReOfY6viU5NV9mD10/FPKIvfYaaGVo+uXq\nk/fPT/Vt25bhGqdOHcjg1oc08NZ9Wa9JTj+0VkNWqQxz7/7HUdmzxCQx2+dj\nN9rtA3E0G5i+eteKzl2GmQgam0wVmgaezerIminkFh1USOvsmy27Z4J82JNz\nUgGdS/6HYnAQCbJslt2XVkat+Js1PRfU5C2dvAFaADkat4FbFEuOE43Kg0wm\n4sok94mgVCIA+fgvBUtLhFNNg2N1I9EX72VxSI8MzxDyZ9d0xYsBl9n4+qIA\nBQQbJn5f4BB/odlzHZB4gz/LVhVpij9gKs0h8WtVoQ6G1h7gU0+gbP9BMMRy\nOjElzJQ80xxXpxTkPPI8/6AG9K8LUnBjcNUqyVE30imoGItrOCyHs1DBWQe+\nbrHStQz2xXZkCMhNpifH5bHIbBJumT0YAmO46IIawxHi8sHMw4AVMmvTkrOC\nAe41iWaLeHDQNyR/H122l4KVe28XaNCADYnk8G1uq5yS4xafPXF4cmQb2dTY\ne00FO44dbfpPwh3iW3MYn0dr1vLudu30G6KTfR+08zrBea3zprsKVyBoxD9B\nMTw4F6sGqbLScW6x1uVzZdojt7FZ2wMLAD/SkeFsKt8rOH85fIg6jFjviW1T\n39rx\r\n=1s5O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.02e372c5f.0","@material/base":"8.0.0-canary.02e372c5f.0","@material/shape":"8.0.0-canary.02e372c5f.0","@material/theme":"8.0.0-canary.02e372c5f.0","@material/animation":"8.0.0-canary.02e372c5f.0","@material/elevation":"8.0.0-canary.02e372c5f.0","@material/feature-targeting":"8.0.0-canary.02e372c5f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.02e372c5f.0_1597074570586_0.35544755699086794","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/menu-surface","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"89f2ed7353da9cedcc46823f53d2660e11b5c198","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.66669e3b6.0.tgz","fileCount":40,"integrity":"sha512-tyDx5AbnUZZRRA2MKitN2UImdz6FTxs/FUpRSUBXMMKYLIrQlogROjmRudzrkf2cjRu/wsW2xY5dE1mwVjqneA==","signatures":[{"sig":"MEUCIQCWKecbLYxhn9d+YXIaqGQOBkq7W6dsRimZ/y1OhvMBpAIgMTtTwjZPtngk/9OiYBgHiqrgwBO0R2nndRvgQxZS8E4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":336085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW1vCRA9TVsSAnZWagAAnPcP/RHfACf+67uvglM0P4Ib\nKzSldbfcXeMsJx3KKJSM8Jy39yxrok7hXSCcL9wBnod1/Hw+ej8wT3pyTeSt\ntfmE4yhvXA54kaAmg60NKYVTg4mLdh3DtCyeJU7QYu9LXQunbkLu6vC8H6LL\nA5p5cgzbpB3whD+rJ1iunLx+BlfwW+xIUbdaHELEkW0xCAq3CljsV2mQY3d3\njuJVqy0R6PD9+5CgEk1IxRoHgsM/WvClOX1VXAHtRC+3i20ObHFdr6du8s8F\nsSv36rkSPDa7ygzNU3ll+0L1ZDL3LH827ejI87mtPgWh9KGXsdjSmSF2AUcz\nJM618EXsgbAVltIrvWevuqf21iJSNbeQqBqu1pMiVXhZIHgkQK4rv3ke1Nlj\n6LjExKFAHp+uGF705Oib2GkX7fGW3kSfXeeZBG1XfooX9ABgvv08N/oZ4B1I\njAGFwnifPF2A221Se7A/ARevKutCgGqFXbfCuxoLYHVnkQ5uJDDzN3IMG2Hi\n/gyxe4l2LOj8KNa3DGVXqCs1O9/X4izaeNrKtoGQDUIFtsTEewfFKkdF4M7I\nTlNmFdF4gjDBakvtuQwNJecfSQytrfAASn0d+p5RZDsDFx8/L0COpYrARHry\n/XElfi6qfSQlQ7uUU3L6scWSR76TQ5AFqNunMyUaOklBiO620HTjG8nbXG2H\nOLlk\r\n=vAaA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.66669e3b6.0","@material/base":"8.0.0-canary.66669e3b6.0","@material/shape":"8.0.0-canary.66669e3b6.0","@material/theme":"8.0.0-canary.66669e3b6.0","@material/animation":"8.0.0-canary.66669e3b6.0","@material/elevation":"8.0.0-canary.66669e3b6.0","@material/feature-targeting":"8.0.0-canary.66669e3b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.66669e3b6.0_1597074799096_0.7372965046930295","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/menu-surface","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"53a0b2acf337f0316070053975fc26a386961334","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.6d1ea9761.0.tgz","fileCount":40,"integrity":"sha512-X33///eODTCZZwyUEZBkfYuW/j1V0E1EPYkMWtcfEX9lZ6PwDBa6jTdfKWu4DVHWA3M7MPqgm+t8HYtSsGTWQg==","signatures":[{"sig":"MEQCIDWeHmP7Gl+AgdCeqvxeuxVnlKgQS8dy53XFzTHbFZpZAiADkxL8iajldTVFcQeiObB9/q8Ccdz1qYj/+xk+P06ZEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":336085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMqvKCRA9TVsSAnZWagAA8MYP/Rhc7A9VUh+auDuUnVzM\nM7tNgjJiTwhq6hPMKO/3X6d0XupdrKIWMU/XDUE9slv0nxvhwiW28SHtfZ+T\nCpOB3vw1okv1SDjQR3EzxeOl/68ZWOTAa9AVm/BQBJp9g67AeEK6b26qrbkj\nnUy8gfSiKTt8Obze0mUm6Ue0QFb2ZiHftb78lKvSo0gCvz6Ap9ZLZuePc8n4\nr8TZLGBqvAZ9es6282U0Hnl9C3p6m0/rrb2puORpNVgzzWWbdXhl/RJOWFQV\nQzynlO1rI24VwqKmDt3kPrpDvl9eb3zK0Xql0AFitZ+XO+DDomHhEOOQF2c+\nTgJ4voMt0h/FYd1C6hueXsZ9h93WR5y28QDrwpzIwWKKkZBMZSWvUhyvLnDW\n67M+TVyGlSuDs+ISbhY6v7dLtG7TdQ5s52k5dg3AtdEe86SISgl8jdzzoZ3o\n6OSLAvKgw5J3K6ovP6zOdTzczrbaNFcptYuIkt3+I4FkTIUwwVtg/fMK1n8j\n9eDzjOO/bshpbowc9igNLj74i3l26hUmaSzFFsnVrCVo+s1VLBV65ox0tliu\n+VaJdLKyBKl8OzKS0x+h6t7MAesXOFJ/kpjKv7K05UL16ZlIaTLcyhL27SrH\nvLwqMclN/r5/ENm2NzC7WFhCHQMIhb/b0bq3OZ3YU0Y6+J6LPDtqomZN/93B\nugLk\r\n=n+L0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.6d1ea9761.0","@material/base":"8.0.0-canary.6d1ea9761.0","@material/shape":"8.0.0-canary.6d1ea9761.0","@material/theme":"8.0.0-canary.6d1ea9761.0","@material/animation":"8.0.0-canary.6d1ea9761.0","@material/elevation":"8.0.0-canary.6d1ea9761.0","@material/feature-targeting":"8.0.0-canary.6d1ea9761.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.6d1ea9761.0_1597156298270_0.773982275253768","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/menu-surface","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"af320bd12ddb3e60d3406a0510a05604edde1e42","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.79414bf9f.0.tgz","fileCount":40,"integrity":"sha512-BQZ9Zgf+LYL0mOo2fc7/70c9s9KZCkWJIn/CQpgWEw+O+yTeJ3Z/xEGnu/vEnSy8w47haK1UaGSQ4Cp27qKk9g==","signatures":[{"sig":"MEUCIQCBDX0Okt7y5KQh5TSiS/QGKSF59Jon1moh+/EGTgR0EgIgZo5ggjnRO+MNPjsp+TdEevdFGu7PEK/y9fqew+nS5mc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":337718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMutWCRA9TVsSAnZWagAAYzYQAIb34r8KXKtaB+XyQmp9\n5hxOZ8yLVZxfczagCNLvySmzDbI3jDelNa4O5JemjWuzqqOTH29V/8EXyYW3\nTb0/Sjjkol11xHUz5Br6zg+m2tt40ylGBRfp3pc+wYunCip+j8s4Zwkt4uvw\n/H/nds0lULrWhxYgECzgs0ouimVh20mdCwBmLqeX+v8WSHNPH+hMAf2tHSNo\n9KiJ+LJhUuUziqLR9DnYfiGrVl4ndVwUtF/AjY5Wo0u3TeDZfMLaFHHIHpGr\nBBwLFQAs7iN+snsCKw0SnM7IHK2Di/FQjLG+HpAzJkm5QcXSXx+ut55sw7Oo\naOn3IjubtIf+kL4La2Y3PFqNJVQKVvOeTEtsavcqeJS8ESJMHEC7kHCwFf4v\nF9yYdSHKqr6dZW4SqKtIwHZvlMfPRbJYRymzjIpWxlEnADs4YKikyqevOMQC\nmD04XGNtufzgrIps2RZQj9y+MQW8YR2IYunRpU31XBE09Y7xSVUTJF544w2c\nmPpunfUef+5do2NtveR/URKcPxbaHG39wcHqnLTt8NUIvDPZrKovC/rzkqfU\nfaYhA+8psp2otjWX17MHaeB5k0Bq/pKugHmntHixQGkOqqE2xtYtPpfiKe6q\nkkxSsc21ccok4NDREakXGD5yvQLaaA3GbJioEZi45As6fJAGWIL9Z9WLNmBs\nGoCb\r\n=I9QL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.79414bf9f.0","@material/base":"8.0.0-canary.79414bf9f.0","@material/shape":"8.0.0-canary.79414bf9f.0","@material/theme":"8.0.0-canary.79414bf9f.0","@material/animation":"8.0.0-canary.79414bf9f.0","@material/elevation":"8.0.0-canary.79414bf9f.0","@material/feature-targeting":"8.0.0-canary.79414bf9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.79414bf9f.0_1597172565793_0.3543020005159465","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/menu-surface","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"20126d6294e1d61f1baf5e6f5b671e704a065d4e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.85a5272df.0.tgz","fileCount":40,"integrity":"sha512-VjXzP9cLVVdV1GRMkcM3cQMjOiEcEKVeDDyILPdXfe6uBIDKv1GwAaqzH510JvXi8o0lFOkbs9QQJaYiRm2a9g==","signatures":[{"sig":"MEQCIGYaxmRTEoJrKpv+FSTvIEMqx5J7+ro4hRvzgP+yvzvCAiBJRSrL+B2gjtTYYAD1XiJqeJoUCQm/mWVzoCIrEKNADQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvrWCRA9TVsSAnZWagAAFfQQAKTx+TCu8upZo0nbiKD7\npLVNnOWhXuCVUMmqbWHPbjZ+SMMNgwUkgFRiHNU8uQGpmJ/rFpC4vv2yNIyb\nDPRV6N4+UTBMhgxZmAI9WcjoTDF+U6HcAd4VewdzKFcDBUDTZjpaYuiJZLDy\npmNd1b5R2wE/laOmnalQomEnt6yLwVJa0f32xkaWtGNTwKQX6hRdkTRJBkw1\no7vdMkE5qlbIpZ4w9eXdjnOQEY2iPeNV3bRx+EqXFoj63vVExJtiXF9r4NMH\nsIeB4A/F9s/p4pneWMntBWZdLhCVjlx7u+o8rURR9tax4fUy3hXPhdChbne8\nYeBTxAIQMHnuXoJCbrUQcK1KLP8QtB1cL5kaSOR7hfwG+Wmfy3HABS3eIVXR\nO0HrRgWtEsovmyYgv9qhBGYb3r4PHhAlRv98hkizzQrQJyTtIHUtR/dHrR4o\n2ScjYHnJG4BVZYldQ4+0cQW3z/uFoUeDBxffT+tWONlXzbSmAwFIsLgn2Oel\n5hnvLqTZvonE2wcxQtj2cQ4u6jmsSFKE9grB0YX4VhfEyIVZnyvj4W4q3u2u\nA1gm9N+1+Tb1M8hqP3xSNC6H+LjfOBzLBqu/Zvc0TjCzekTkbhPoqpdVVsvi\n/D2AzeqUHawzF9FCtFLVhePisXhEYGjUrnEtK2G67+DDsrT/rB8uhfbkbPWr\nQ25a\r\n=GuVw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.85a5272df.0","@material/base":"8.0.0-canary.85a5272df.0","@material/shape":"8.0.0-canary.85a5272df.0","@material/theme":"8.0.0-canary.85a5272df.0","@material/animation":"8.0.0-canary.85a5272df.0","@material/elevation":"8.0.0-canary.85a5272df.0","@material/feature-targeting":"8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.85a5272df.0_1597176534299_0.6536657119265821","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/menu-surface","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"af648798db8dedadc007958541fa2a1507142433","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.fda053eb8.0.tgz","fileCount":40,"integrity":"sha512-iie2O8jdr635mbHJPSz+XzvRVx/5fhbUKhEgIKaU+QkefHrn7/HzFgT11JvZN2JwEuyjs/2iUDR3F/xmW2Ezwg==","signatures":[{"sig":"MEUCIQDecUlGJsKLBA2YUBUR8lY2UyFABPCP0NAaQn272fxxjAIgD8x8uxN/KF9+jMQ3GBbdngiPK7LX30h9K2MF4gJAdXQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEtmCRA9TVsSAnZWagAAzUMQAJ3sVkju+KvRahNU3vL7\ncV1ZG8irB/XhQF2Y6OxMkl+swnh56Euv4Z1xSnwsHrJQ2lcd3dA8RnQ2usSe\nltXBdwnFgBYSjjOfnwApy057JcbLwNBOQyZrmC9z8PvubNUve1lOrEr5wCna\nXZgO9+bjN37/b+/+geZx49t7QtQ7RLAKBAUs5OmNkRYd+dVtVkIqEhWz/6H3\nD7SSv+eQcgeOKSF4Gwvj0d3uqnjUv1b5xLrfrn6cVQe/XOvHkMxORQi6q5/a\n65yRPkPAv2qnSYHLV0yZi04JemuIKb8wzb551qADg7zFIP5XkCyuMP7vUKYP\ntSV4Tm895c+24vgldL6GJg1zQpUux3ZjBSsz8cqUTWe9cx7C8HKZFW3hlJbI\noNT3mC0KFGxSfPBKVOdprc5JuLw3XvG8Z1/k2oQC5oL6iIVdzyl6MPbFcNSI\nahN2jZ1XiVq14zg6WFhHmZ6LVbDXsbCwgI4rHUKqPSWAk8J7m2aK/maNM4yx\nJwj/8CT0Z+yQTZWyT0lyNfiCpL6ISxy5nbi/8dLgdO70Po1At2qoUT1l0tWH\nMZLNWQaQOwyeGEh+2r+EyPE8Ym0juN8DcmymlQK09HDNQEZCEe8/nQTUPPBL\nxQBe0zipD2GFJZVd9MIkyJLh906Znkq7ay1AI3j/WrMon08QPCHchfR2z2Vv\nFYG4\r\n=rO2L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fda053eb8.0","@material/base":"8.0.0-canary.fda053eb8.0","@material/shape":"8.0.0-canary.fda053eb8.0","@material/theme":"8.0.0-canary.fda053eb8.0","@material/animation":"8.0.0-canary.fda053eb8.0","@material/elevation":"8.0.0-canary.fda053eb8.0","@material/feature-targeting":"8.0.0-canary.fda053eb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.fda053eb8.0_1597262694369_0.4519929331155168","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/menu-surface","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"5127bb3b0b778431c2eb920aa5905fa331a25fbc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.760873445.0.tgz","fileCount":40,"integrity":"sha512-1NokWoj5L9Tjs590kgRVRjOwXsWvLSXaADlfjyaNWV9rtHA65BZVVCIO3saRXbsGF6lJ1sQio0li1JxtscflMA==","signatures":[{"sig":"MEUCIBUdxobnzSF/5uzqYsI2G5Ji3bEi/KOJON/+MyjhFhv4AiEArbsSlFdT8Huaplda8g2QtpaCXPXZQ8HUdNnDqNwwPb4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGKdCRA9TVsSAnZWagAAqIwP/jFsmhGdoCiuEf2KQToC\n8XDu4lzO+ZU68wsMEJEggtooddQj0JYvb1o6wlt3QtgUWCt0iL5LnNpt0r1e\n8u+nxCh5CAnqxw9S9EfUFR5qA4IqhGgt1jipta4Xy46CK2U203rcH7Ww0ly7\nj2/wSD9evXVhc6ymNpyAQp4SZ1xWTZlez3zmGJb8v2N+1HO7S+pF0Oc4Lukp\njnLpbLD2LmbgqoolKfdKciIcivVHkyVjlDc5iv2HLxfcz38aDUgnP6YX6cWl\nsLA4TvXWiQYD7bEn+fCezMvXBg9nkfNapfUW0vQp2jXP9pcKWqzmCfc0a7uc\n6+jCSvH/CnJxPfB2NUc3bE1pCWk+kGAEJPibjiJfjg2gR2KgBH29G0NTzXgy\nkiP00BpeEH9pKLkuKdILlNcMd9WEMt4jUMvgEUUEY2GVivRMo74NYzEJtUNi\n+5rzvrVaZCfFW9fOnbPuOC1tauhHcasAvUDR07pj4J+euy4LYIoFRDMTnlxv\nrwwd8NygCw2v6mYlRLhjksR2l4NXtHLErq1Wh+OS4wEqhBl3x/HnNk3KdFPJ\ncadDzUM5I+0jfVgignUH782d7sYljBbE16LCx4b5UMs5gSs67cbrWbDTkLIe\nj+TStwncvaS9QZzYaHFVnADwd+PqAbM2YydqU6rMpFivLjluZvbLggucVGui\n+o/X\r\n=BS0n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.760873445.0","@material/base":"8.0.0-canary.760873445.0","@material/shape":"8.0.0-canary.760873445.0","@material/theme":"8.0.0-canary.760873445.0","@material/animation":"8.0.0-canary.760873445.0","@material/elevation":"8.0.0-canary.760873445.0","@material/feature-targeting":"8.0.0-canary.760873445.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.760873445.0_1597268636547_0.47549442518968466","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/menu-surface","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9ad68d124797f0e78107f0620a28b82bc4d473e2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.2f4711a30.0.tgz","fileCount":40,"integrity":"sha512-qsOAiaEF14aU4YE57g95jZx6RShfhsLDgiNlXqNiQSzX2z7vtmcRq8q0ljA6R+y4AzaLKw9JAzUyCTlMeYcQWQ==","signatures":[{"sig":"MEUCIQD1ITsU1pioq7gtHUeF3TN2gHiDVaWInKGSTmCEMIuXxwIgF3FC40huEp94365AXORZ+iOl+RNKSc6XNE8DyxN7cG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGT0CRA9TVsSAnZWagAAZvoQAIBbz9D4DPtTS8FjYzvx\nTh1Cp8pkhDfDrNuigI171O9m4nkd7xt3Dlfhq97gOefzD8Slya3+5/RFi8eK\nmD620hYlirOLThMU1wpydkRHmnlLejFEDvnDs2xBhp/O8LH949OjgMfoqndb\nt6CaGoo0Dm/Lnujz+2JAWI2lDCuzc32a71PQUovxcfqmHY31NhJNSls9bgr7\nYx1IlHQIpYYyQBWLMe+Up/7Novfh0V4+So0yJqPve6lzgCCNuK7dk0rYYkOc\nhEamigRT/wTpIaYRxDkgpBBaPld2XRrpiPXvk0iJo4CS8A5iuEQqeIBpFP7I\nDcotNMjf6vkCvdxrmftmX1Qpzbe7+HDCWJH14mp55dtmjsfmndmcn7Rc288r\nO8hZWMsVv+BIXk7Sd1V7XyOiI+n5gvGXbA1z8YOaRvj4wd4t7DRNb+FZzT+0\nDIn7+GGrFOuHa4M7a+xOeicDP8lg0VVOE43zLTnM1Xj4S86GJG4oYEiF23dk\nnO5m7kxb0vBnHZ9MsYb5pr3wzsKGbP6VQYxIH48MCAGKamk6BMQYvp0/AEz4\naq617TLoy2GDmKp9bM+FwC8Xjc2ITH7CsvW/+1iQT5YJNOjTy4wVNk0nQEwd\nb3aBNiFJdhYQwFFf14kIBAY7FwxXrbDxaxQpA/nqe1wrNn9rVDceDv3n+41D\n/z3u\r\n=1ZMK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2f4711a30.0","@material/base":"8.0.0-canary.2f4711a30.0","@material/shape":"8.0.0-canary.2f4711a30.0","@material/theme":"8.0.0-canary.2f4711a30.0","@material/animation":"8.0.0-canary.2f4711a30.0","@material/elevation":"8.0.0-canary.2f4711a30.0","@material/feature-targeting":"8.0.0-canary.2f4711a30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.2f4711a30.0_1597269236058_0.6359218464841638","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/menu-surface","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b1f08a1df6af1d5b3d466786f300b06873980a62","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.2d72f3659.0.tgz","fileCount":40,"integrity":"sha512-Rvn/pEo9/uDBHPV2yj/qS9XrLIzTL67IbXh82N7E2z5eavZA0blJEkeZ2n+sV+5mzQOaoxZhrDS84piS4QDsSA==","signatures":[{"sig":"MEUCIHo7G8vkhORRrZk/R08B+5QhyOMZQ0zfOKidPIxLmzAoAiEA+B8fgdqrG51zI+K5aTwVvh4rfKiMVaEt6Az8SJ7EJVU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGa+CRA9TVsSAnZWagAAy9cP/3lG62shT1GB1o1u9gLj\n3s6wLJDuHMQJDoG3qs8e1vLwpYL1xi5FZJ3TBWDizaw/lDPh0LeKBYY9vI8m\ng6MYUlhCmShQ+ZcDNz7S42RBNIwqFfCrWn1WzkPQUfUtMX1U5Qm8WR3ykz+E\nJZD0qCQLUK/bzDok5DNXWU/YqYyZb28WfmbJkbLs+Z5Pt2A2cgT5v/C1yq8g\nwjVPEhmQyoaaWkqt7fIdwKSb6s1s5uZ25jamKaSjizFfwKewTetSw4nZC7Pg\nvOAY3+2wG2WtFi/D/+UNSGOg2Q9ttsYvQHb08czxJentprROwmRZHqJS9McZ\nd9/bbjBdxHs2iLmD5bsvSORwUKDmjR1HXuA6tyDpvahfAnhI9++J57SulGaC\n88f0QMDp+d+Addu5hpYu2rXApMTmcMQ6Ol3LWRR+QlIBdnu407WP/qh6btBd\nWx/PW0Z7ZTbqEog3SSyYiMPWqV2o4IjU84QuPrgoTkjCTwZmlxFuncd8K/Ii\n/K3BpDEOa7vdYOwNKnAIGAnjqYMlI54x0YEM7zAojR2mC9L7NK9ISUohCK7w\nB2LytsrxXLbXE0E3wsaZQudkL5vgTFxjydMzaIyXqAG64MnVLXQawTEGh60N\nFs5Lmk+nZPq3Q4rJtzerVOqlNULOF+pVXjEai/bRxBYaL2DWNj/+nkjAiFuK\nyanc\r\n=queO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2d72f3659.0","@material/base":"8.0.0-canary.2d72f3659.0","@material/shape":"8.0.0-canary.2d72f3659.0","@material/theme":"8.0.0-canary.2d72f3659.0","@material/animation":"8.0.0-canary.2d72f3659.0","@material/elevation":"8.0.0-canary.2d72f3659.0","@material/feature-targeting":"8.0.0-canary.2d72f3659.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.2d72f3659.0_1597269693944_0.05650004901520678","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/menu-surface","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"a75abb28c7c8ef0325eac9b358d24569da20878f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.1fee70a5e.0.tgz","fileCount":40,"integrity":"sha512-MTbBx84iteWfP4XEuKyul6YcreLd6C4RZ7y74/Q0p9j+PR8/i9K1PQds4AdKp4ZmD4Uf1+J6CXtUhn8H2sg0bQ==","signatures":[{"sig":"MEYCIQDpzobYf0RtNGGD6uNClDN5CX3E/XXtBfh+KOyjGUCA+AIhAO2wnedFPRSgn1X18JvdLKFjLQjhchYUXMw3+GTC9Ij7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHtUCRA9TVsSAnZWagAAb5gQAKJ6ao+lD79pb4lpvZhT\np/5hRmM/l//tGhCHvR0jRY3NMB7hiXkr2CEJ4v8gSrSHSp6+HoU8YW7OmsPO\nyzumikdOJHhjDrdEhX8JZbTbJ/BP/+l1jV7HPC7wXyJ5iHrc2ln95ie6mYWd\nv/K6Hllb8UhA0+KAWBJke0Vy/BTEyo5c45qBiYRbVHEizkUdrsc3axHl8NGt\nRjnWxkmuvN1hh73o+6uN+fzM4iO1mjmHFK7Pit0Pvy6xk0NSmoLFbVlJDehC\nNibmeiH9ERm/ijckildH5CitscNEWQDzgP0Bt7voBBDBq7FLX1x1CktAm0Yk\nXT0BkRXVoGmlUKhsFJOPeFzDiyKq5Tx7l+hi9aFuNT/YwoD65je0C8JadNi4\nF6DU0hzL81lgcCp/qQjC2v4NhjjAgNg/PuPLeNLZhE6NyzbMYEp/YPaFMxXT\nHJfBrp5h+1zdFYFzdpLKiBCXmuDLHOQTlfW/wO90/LSt48RydUqSKOf7Cdzn\nD5belZts52fnhUZ6qeIfDbHirD3lzVUazhk8nlYFKOT2+sCfferRABQNyFl9\nI+zw9w7tgJgoSoZWKIEKBxxzkiKbrynLAti4VKGBvGq+J7/45zzp2osse7iX\ndwn6XJ3wwzfJ7X75TmEV04cgubiovS2VZv6hFJdedxI/HAiH78WJdbFJV1mI\nEMAx\r\n=x8Td\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.1fee70a5e.0","@material/base":"8.0.0-canary.1fee70a5e.0","@material/shape":"8.0.0-canary.1fee70a5e.0","@material/theme":"8.0.0-canary.1fee70a5e.0","@material/animation":"8.0.0-canary.1fee70a5e.0","@material/elevation":"8.0.0-canary.1fee70a5e.0","@material/feature-targeting":"8.0.0-canary.1fee70a5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.1fee70a5e.0_1597274964165_0.19891111394622407","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/menu-surface","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4427907fcc1f1b22b05223155afffd47176b72ad","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.023f3fa34.0.tgz","fileCount":40,"integrity":"sha512-TQ+adhlVFkr/I9UrE64WnA3PWg5Q82Du/ECQ6zHu0h6e+l+WgxBTLmDBJLWiz5ZYi/+OtbyrY4j2pbxXg0vWog==","signatures":[{"sig":"MEQCIAybNn0ba4fzW283nuk2siC7QTak7xLql+3Ty4XbMWf2AiBfKeCmnx+iMvCbi5rDnVBfG+DpXAeA17QIyZICq4654w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJOhCRA9TVsSAnZWagAAm3gP/0R2Q2jH823eO4+XTkus\nnpOUfdfbXUM1KEXEQVRFTkZHa4DudR9seOo1EeZ3unSl490rVTbQm1mdC1y/\nPo37ltiR+F0Xt4pCiHOseyQfIUtE79WK5Guovraw7DzX+/HyOUB7LVm+7iqs\niiZXEp/6Fb3KKGSRc5NFSvI7rE2y0/or44pnuT0gpyucDN3iVMIh0hJ22akA\nTCdQevDevFrGFPympM8m/COtfHSb/MBcAYj9zQxQb/rwJ9T2BkRHEwLuWkYR\nV3rmj486vKFpyckl5mILFU9S5jSGmbUfD+O5ZMDR9hEmy60pbHuCZBqXFdrb\n77vf1BmK9zB8nU6Dq/0TaPEkaz1TppKV6ZjHYggKnLSeKdk3A3e3EqidWSj1\nstATYTrUG+yUKOqomr2xNCSAY9oQqqMMTsGsc55IvISAXZ1ss7UICLs742Gi\nyi6WeILoFsZOKw0WYZURwjwdtis1jqjdXU2ws1lU7fTdhqUwufQIfzgjtlsL\n7InUt7KfFWsO3hn6On5OcbdIriDUqtP3GA9Ytm7rA/nUBUU6kR47HpdZ01HV\nqtn/T6IPL5IK3Df74KcRZuSCfnLfiLKB0E6C1wsB3f4ykcT2I/aITJUs80DE\nkQL8EuSOldfcRbWkOj2XNrGwE9hryPh6XbN6Z+Ftf/ZjOuIEmj5ehTleCDwX\np4v3\r\n=uyyJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.023f3fa34.0","@material/base":"8.0.0-canary.023f3fa34.0","@material/shape":"8.0.0-canary.023f3fa34.0","@material/theme":"8.0.0-canary.023f3fa34.0","@material/animation":"8.0.0-canary.023f3fa34.0","@material/elevation":"8.0.0-canary.023f3fa34.0","@material/feature-targeting":"8.0.0-canary.023f3fa34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.023f3fa34.0_1597281184605_0.38883469361312617","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/menu-surface","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"28485cdb649591daac5babe114c86d38cf4a988f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":40,"integrity":"sha512-o38+xwQNFOe+AXhoZatkO9BJxHsdSUDJd8m8ZsRX6zTQ3ac9Kh/wW3d7YJrg5k5DWoI6Zz/cg1T71i4q4Q7B0Q==","signatures":[{"sig":"MEUCIQDwuPK0aNDSqOXkXyoQk++PeKekcY0HlSOseB4ZnILYkAIgEmpYNBxIm9fhum6zbsAgkIHMg88pCg/skYo4zqswpbw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJePCRA9TVsSAnZWagAA3kYP/j6IH8EGZ4TsIBuL1YSe\ndDvQdEQ5ObN7u02Z7MqhQt+aYYGhPa8/FwCfP9e2P/kKyxHg520r8AagpeMc\nzFHvTUeM+ukl7MQD7eizPfI2NmHOdT558nadrix+x1aZOML3Zr94QmAmpr0j\nptJfLZC7qVqjJ9e9duwUSmH+m4EwbqSoATPrjojOsDyIFITGnEQBUyxanvIR\nFzBXf0P7OyTjfq1dRnbsJP6dcYUEoVVhiQY2kIT9VlkVA7KnnsZu3nIQb3yW\nJS2Q3o9zXlL5lAbkFzL+lqSz/6PJkbi36uBXtnevferFMRHzAjlSwGXh2nCU\nBfxoZCeGRoDoM3mRu1kcudSlbjxijbyDq82zFy/eD3PX4c9DLAHNKOvQSKy6\nqctJZXVxsSPlc06+avkWh640Gcix2X5RMx+9UZlkxHkR3ng/4ORIizdzQsEt\neIoSZwVyFAfF8vihQcrbid0Nxof85EBJsEbgssBYlBnGOXAeNHBojWZX74LF\n3kV/VnonbVOz0RwZwmr1r4qEDULujnLc/Ff4QRyTvHn8icGDUGt+pLMsG0pJ\nyj1uHCbwPv7h6cUP4jeyfoTBRRYUzd3VNqZE/JNJw6sSvH+qPLfrKr91k91T\nx7Yrtoy1TrjgkCdUXA/6rSqAIgkdpI0vJHpbmv9OQToXSvYsA3IuK/Enl9HE\nuNm2\r\n=lkUi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.80f3a9e5d.0","@material/base":"8.0.0-canary.80f3a9e5d.0","@material/shape":"8.0.0-canary.80f3a9e5d.0","@material/theme":"8.0.0-canary.80f3a9e5d.0","@material/animation":"8.0.0-canary.80f3a9e5d.0","@material/elevation":"8.0.0-canary.80f3a9e5d.0","@material/feature-targeting":"8.0.0-canary.80f3a9e5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.80f3a9e5d.0_1597282190722_0.7885481432205952","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/menu-surface","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"dbf1c8ba4b754858231232f95cc53d7d88c1c5f1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":40,"integrity":"sha512-QIv+AzZwmFyqNpnHlziZmy3+sXy5k5UdtilJs2ee9idr6Z7jd+gGbNsDsbG2Qrw/aI0IvM0FiSp7yPA07LLS3Q==","signatures":[{"sig":"MEQCIEVfk+oJXY/gIWBNMp6tE0aXnaqQLc9rQzRzysfvxDijAiBmRgZMLsCZ7f5QWBh4gY51mgMhSxyAnrxUt2rnM0Ahsg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP7uCRA9TVsSAnZWagAAC+wP/Angp9BCWw1N2UpRLy70\nIR0xq+XrF4fgGhR7+30nVTYIP+um1fpGyQD5GypakJHvfbx5iYCPmdZ8Sm9e\nH3ZK++E2ZqDTrAu6xOJIGehMigPrG8bu8dAbXf9yCiH5K/3bg2pnj/kY8miX\nCTqeUMMKKdttgcvRHY2JEwjXGlBsxPV1SHxDPSo9t8GP3lJfXO/+9c+XysnT\nDdDCwpuJViUH+ukJIRQrKeJHlARgf4yalTkWSnmEj3YBdom2Coy87uWA8d7y\nRvw2V8aDuIwOS2fil0y6y5LikTbMeQdLRLyAYJ/D11m1lSDnZIN1GTUwyHlD\nNYpIV6bjmgaWpxH9jZ+4/Un/Rd4mZCUkF83CR3WmzmP0kE9o8s/EjfX9x7Wo\n2fgr4RMiigAw+Y/mboEOobI8xBEjO6UL0EMh5hOmmbIUEodsAQPK9bimsjWr\nM8y3fZXLPCRgG/GvaYUF3aGdBjSqToyAoUmyx16PuS0mRf1/0c2aY1GleNGq\nefzKQ2jdMsN9HpOq9V5tSgIwqvf+gH/jbdVhUQRL4mPNj2kIveM592hMQBzU\ngiGxRLgiEsV0H+J/iSCE+b9c5GxnIcFki3WAqZBYPxAYAVtnI84kaJBGSc8B\nUgnDUjh5OpypjYpTyWxtIWb3zRclTR/BUunksdXD7sWTr2tzlbqgBoDh2p00\nDVve\r\n=Hzac\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a1dcfe97c.0","@material/base":"8.0.0-canary.a1dcfe97c.0","@material/shape":"8.0.0-canary.a1dcfe97c.0","@material/theme":"8.0.0-canary.a1dcfe97c.0","@material/animation":"8.0.0-canary.a1dcfe97c.0","@material/elevation":"8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.a1dcfe97c.0_1597308654126_0.7094015593362495","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/menu-surface","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"45f12b6fd9e9394635c2b51657b9d2ada954f08f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.af332d5be.0.tgz","fileCount":40,"integrity":"sha512-DbtWEfRLfw4k1U430vDrpaFJKpB7aJAKlGsvGX0DC+HpaWqhJbFI3TPb1NYYqY6dLntaHAnwyVwCNjkAR7ycRg==","signatures":[{"sig":"MEQCIAfSB11/m1ZJwm4/wiDcvvfUBQkrM+ab5ori/YPN0n4AAiAr1nTA82kB2VrgCgODJUZmjHuM0yurciUY90tFdmfRmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa4RCRA9TVsSAnZWagAAWqwP/1I60ZeISjCCF7U65toi\nkUaGKNm9Yu3K+oVogLZBDOukKy81m/2IvqwTbWpgFwDt4XRYc1jW5O+CDalf\nvazqcMpi5AObk5hJ/yCQgYLXESqkoLatpfFMl9LF4TQ5D11VXUs3F/6voWkR\nIRcaxF3IVVQTPwubbqUciiVIofIyXImoSI4IV2rM18K8rf32ARWDQzHe1qB/\nuLBugYFhKpakBgKt9Z55tA9pEijwTaUZphkdllH1gUX5/vu0NL0nGWHj3Ocw\n3l+okKtFe5qj+6saOlEEjPAbA70G4DPtBcjTQFQp3OngG13aSUHmA5KdwcUW\n0G9MxSoBBKgMmcvpLI1HFBPQHhfACNSSYnq5uiV+kersAyOacKAA6C1pDY/j\nmxmD15hd8tEfeOUHp6DkbvWVxSOzm0CW3Dd8nnG/ZP3stFsOgdwu5M6hqDlX\np/UAdBE++jROc0eyu2fskW7YKqgVVO96m/piw4ebfZNvl2tGZVEUyMMN2/pP\nbQYaY9Zp+CJljF5mxiBrVlD7OmZFlgSGrIvuGP8cjsqbGMyOTRg/Ebawa3Uu\nBo/yJpe63lLk3ec4BkJdvuAbemwpmhW/zbZH2Upu7Lg5rkFqcptEqnC1CWqp\n+uDcAYHvstlvbnhiuWBy5HJmRXAbZje7dnzTh0MiIee1Hxz6nRk1gEfotdPA\nIPRI\r\n=oaEO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.af332d5be.0","@material/base":"8.0.0-canary.af332d5be.0","@material/shape":"8.0.0-canary.af332d5be.0","@material/theme":"8.0.0-canary.af332d5be.0","@material/animation":"8.0.0-canary.af332d5be.0","@material/elevation":"8.0.0-canary.af332d5be.0","@material/feature-targeting":"8.0.0-canary.af332d5be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.af332d5be.0_1597353489138_0.10665177748624188","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/menu-surface","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4f70629429a1f87e2c61afd88de9417d055d6e2c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.7dd4567c4.0.tgz","fileCount":40,"integrity":"sha512-61h+u7YSE7CaGse5OL+BIaVfnT8PN0Y/XOrODcm9ZokIpkFXLWyfzsHQQd4/VHPA7Su7ht+Io4eJeip6HWescw==","signatures":[{"sig":"MEUCIGOUEk6yNZNFB6LoRmIXmdwkdt//pWahSRi709h8iW4TAiEAjAQmgrCDOtTlYeeenUeCH8nfoz3rGZZ0rUPF9xQLNQ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeAlCRA9TVsSAnZWagAAX78P/jam6xf6Z62z0iw1Isbz\nifzB82S4E29OZ9oXDfTCqLJkhNU9LrFnp2Z/yT4XbHtiM4JdPeGfcrzqu7+K\n9TWdzNEVA0gsQ9eRaE/o+RqKDDOXq42q+/tmBOkPiBARg64fH2Ivq5glGTOQ\nYfi4h9vIayESzxYQyzhk/DKoOyyqp+405onIixSVSgYIcSrI/gipJ3D3MnKt\n8noLSXNyIASjJF/goHhnECFMFWg7c56qMSgAw36sZ2xfnSydRGi52T8f6xeI\n/72UcjsJb4FJ6LFNXdGmMZrGsuAXwEWoHaQIPLC/lrvPJk9hEDGwh1VnfIiq\naY8WaRuEtTiAJyJm7LKCRJGN39YSPEBrO4oPT9y4sSC/Mmfl4zIGDjJpm5+B\nG88MWULK79887PkUB/RCTJJgQq8Ghgl9Hxcdgg5jgG9aUv8TQw9WL+Jh5gVe\nBFU0d/30cXcn+7dXptv4nDuhGJuxG7h6xhNKuR3hplLAS2BjFpjLJFcT/zVR\n2o7oCHZgKJSzoX/CVce8N5h4lcRG1kFRSYFy+34UtivLJls3UpkaohP/UvwK\nhAje/htX2lnw7hoc0X01N03omkBb7hkfvrxqasI6rgTMoBbrRlHGdEhgx789\nNvApQvzWEqxFCnJNc4BBjFzkVH1oNVKFp4N1tj35bLazK2KaN6npz4/s186J\nGOBT\r\n=qvri\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.7dd4567c4.0","@material/base":"8.0.0-canary.7dd4567c4.0","@material/shape":"8.0.0-canary.7dd4567c4.0","@material/theme":"8.0.0-canary.7dd4567c4.0","@material/animation":"8.0.0-canary.7dd4567c4.0","@material/elevation":"8.0.0-canary.7dd4567c4.0","@material/feature-targeting":"8.0.0-canary.7dd4567c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.7dd4567c4.0_1597366309114_0.7073894054530145","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/menu-surface","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"7f493642baed710d45839482b6193923885d22b0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.ff870005a.0.tgz","fileCount":40,"integrity":"sha512-eCsX+j4Krycke33Q9vKoGJuNqUoCNZ2/2sL1+NAqdbyojDVPBn2jXz6Cecr9cSSD82ML6XLXJQnFuA9gcGOnAg==","signatures":[{"sig":"MEUCIQCnHCuJwJGM7RQBNZOiiyyBpSy/HDVq4LtEnyfP9iC2eAIgE5giQj4WuQtOm5o7XMJLq7uFeupp7ZXSIFzpL6GWQkM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeYECRA9TVsSAnZWagAA0BwQAJ4aeRwJNcZMz1Ihs4c6\nxsJLeeGHG2Pg0IKpuNPLDJWs2FH/LLEpMjB77EzWeLgMnqsUCu+Ai4C0grij\nYuYa9zSDVILUFDT/I9bFdr1jsx5mDp+RtzKyS6V6cWiekKFp/JJ6AIzgb+LY\ncJGB2jB4KCGPTaTlELAlLrVSVmEuwI0PrLwDqlwdSwSPlimTMCNU3EWVx09o\nNTETb9T/z2qwdgTG06c17w38oVAd6oXcy7TuQV12ogxkpmUM3R0xFwf2PNTX\nNcW0G0tPYTWhE69IPMFIr1QJYo6oi5Aq6yol2WcmUEbmjSGYUuNuiyhuJram\ne+Z06uI/nImxlxEILeIdvwD0CHGQbvmwLxKFOSWdItDqFFsBAZbVg7mzbtH6\nOmtwly6scCs9mcrR2YVbHs4W+fMyLv7rigu8VZoilSM9YDONLYPFF0MGI01Q\nne6wTkelo5sUmM9XfwuiZdKtSF+z8ONUaP3VNRn/LyY8Du0CAx9p77QMZr/C\nSB2/7gAw7nWEB/FwoB9mYRnc6+dT578E49Jsf+61oZ81V1aT+ftpqDNaVA4P\nGdCrSP8TKd+Rdl64u2KjvSnDpPxB0UC/sgmCjouDBrHbjmfMQp7Vdtugy4CU\n6LI9RCrYdzET32A3rO/4zAQ/wgRlAgrfSeH8qohsNxSTewN7waA6P8YvEYXB\nU+ml\r\n=lF8s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ff870005a.0","@material/base":"8.0.0-canary.ff870005a.0","@material/shape":"8.0.0-canary.ff870005a.0","@material/theme":"8.0.0-canary.ff870005a.0","@material/animation":"8.0.0-canary.ff870005a.0","@material/elevation":"8.0.0-canary.ff870005a.0","@material/feature-targeting":"8.0.0-canary.ff870005a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.ff870005a.0_1597367811766_0.8552306250353281","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/menu-surface","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"5b331edf5044df110677d934ef20d3f342dfcfc3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.150f427a0.0.tgz","fileCount":40,"integrity":"sha512-PpPC202mb5VR9Ip2VNq8nVY3wATnEde1giW5Aqm2LtyyHxAnV5HV7/3oo81fn/O7hWK8qaGeehZ5HHrIqMNDRw==","signatures":[{"sig":"MEUCIHqllLcx/K455J1y4FKq5uIUhh0qjjj9Bz3434hw8lHSAiEA+T8yTdov9EIWRQKZXroyhD0SCwLpIYJTqqM+9FUw4Ts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpIECRA9TVsSAnZWagAAW0UP/3y4u+0Sn3qMFcpBPow5\nyTAOP9ELkBgNPZ+7mqgzdir5qJOe8qXdSagBVM67jdzBNW0aSAaqRftSSKZe\nWrB+ghww3iEvUGqUEPfLnzm2+N07z9ovG2ja0HdADnLapoLyGbO5fxtwRQJM\nHmkSqxl2KHtjL3YpceO7clrNqUjJj+WlK/7e3SrCE1yQn5IZvQWHATu6LmUx\n/B3BhsJsJgq8G34CnJS4H6U1cpHZuK8Lj0KIons5bUVKjzU3pYzdgCk8ftAj\nI8oNTiJGkBEWdWQ6X0wareWx9khoR+99BGJ+y9h+BlQz1M0KIZTyW7AIM/5Z\nKaQVu+hBftGpktVS/EBUKK/dOjqcbyLFOvNTOBFJP1V1q/aLkoWhmsrD7LFx\n3iPLsb1Sw8U33Bm7+/yQ5BQ+oKz9ch3asLR9j2+e1DJsgUbom9nrpgSVeBUh\nWRehp5LQ5c+bw8tzNbNr7usv39pD3YNwjSEd8I6ja5DwmCbKDJQhjOOGT8S4\nsTMEZq9aLBqX0hBvQDmJ9/iSW295EUTG8od/CBHBDOkbiUhW05teVtTE3qOu\nGMqCbdqo9TmQJQEAVWaOHaTpgA2/Kp7FSzyxivv+zDFxGQUQya+ymv6N0shk\nAJlAtoVQa8a1LhY8AJ14cttO0oTrUXkcxgMEwRsu9YjnfiT+Z9B47hV5gcWm\nbJzm\r\n=RVE9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.150f427a0.0","@material/base":"8.0.0-canary.150f427a0.0","@material/shape":"8.0.0-canary.150f427a0.0","@material/theme":"8.0.0-canary.150f427a0.0","@material/animation":"8.0.0-canary.150f427a0.0","@material/elevation":"8.0.0-canary.150f427a0.0","@material/feature-targeting":"8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.150f427a0.0_1597411843403_0.7621675541424029","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/menu-surface","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"1b9e2fc01e951fc2bcf40b6da4dbeca30f12ac37","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.bcc58290a.0.tgz","fileCount":40,"integrity":"sha512-JauglKY0ftCrRuATA+Z/0JOL4rPQ7ivhM6qJVdMabMiQAC44mbZH8xICeMb+/sxg8iL2TGqJ9JqE6RGxZZYshw==","signatures":[{"sig":"MEUCIQC6RJyHxNvfylyBDLDzOHMhxXgqpiQS2kNjH9GqOT12uwIgE9a0D7kr2vGGh5KxQaKZMfIVrHEPGDbxlhgW57U/n70=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxzdCRA9TVsSAnZWagAAB/oP/3iYnYsRBqYZsDOQuarJ\n/yYoFm+iGLVrroqNDtDfMzV5MoKcC109BT3exc3iErK+SCIBCwgNaSLD9XZw\nRMXantzmr706WpHX3KYqqNU87pj2wu1YScJP2GBdpdIuJfv2ox5PabnTZy1V\nH6DFZS6xU3jxuNW8pWW/bOfbSY6nbY6OGibaTymnAEq2STD4bUlzG92r8kQ2\nW+qcj5/imDxYbdg4v4/AqkJzuit+/XxsLbhN0dmg3AyTpSWs7MJpQ6flQnZq\nsfJx5MvZzagGlSEW2oW/80nB7QUME/aifylOfgeo3VPP24t6r0ktmV+vU2EM\nTDmMON8pkQpg26FPKwnfy3Mp2n5sBTptu9A5Gfdpdpqkmt8kcJ+nZhMZ2H8d\n6p3gcdQjrVTFiL2JfsL57KzsMli1+FblT+6iKalaOuBhp07p9YyN74p9vWR1\nXcLLLIV2zaGAX8OcNpmn6MJTeqhMfdqlIKlzhugQip+N37seydRw9dVRsDqu\ntLBHS9x18HIBF8BUSa/XXcga0pf9YcV9eQyEKs+HHqQmZOawRzv/Katd890V\nPsGuGkTTmnPhjpwnMmlyTIsbpNIeaX43j7S6rovU7xifCnIus2v32x1JU2N4\nFWcGm2idT6Ud3OCGyA1Uc1X15ehUAS+QUbcr9ZNXRKO0KX7lF7tyvh59AhmN\nM+GK\r\n=L6zU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.bcc58290a.0","@material/base":"8.0.0-canary.bcc58290a.0","@material/shape":"8.0.0-canary.bcc58290a.0","@material/theme":"8.0.0-canary.bcc58290a.0","@material/animation":"8.0.0-canary.bcc58290a.0","@material/elevation":"8.0.0-canary.bcc58290a.0","@material/feature-targeting":"8.0.0-canary.bcc58290a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.bcc58290a.0_1597447389360_0.8617580967792133","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/menu-surface","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"62f964f2c63c68bf2f6ffa903731849545e7a1b9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.4f55400bb.0.tgz","fileCount":40,"integrity":"sha512-+icK5PkNYehOAF3baF9UR0o8vRb8+8r/5HM/Bk392YW7CXCV31ViCd+wnxKqx5+3wt8IU8gyZB2BnIbiV6KB5Q==","signatures":[{"sig":"MEYCIQCmBRfQ+jPH57m85/rsIELqQHjmfYszVADDtpJRXgeVQQIhAOZSN9PiQYd6Zq8kcGCrj9atv4MtkvnksPSDRNg2xBH3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrK1CRA9TVsSAnZWagAAukAP/RJyZKFPrGarRXBp5WP/\nqVseKBXPz+FpGJcAOWvlGsJFK72EMgHr24pbxwj5GqSp8SZQjPnUBVvru9V+\nh3Z5pHsfZfDt7JaxZzsZsK0aLe0v3166PClgjvMM8cE9xwWp/l6hmIwK9iMa\nRmICMGQ4Wki1qGnsZ2MwXtw0xwa2+hshGvbqRXOfC+OcV4Lue/+3w85jh/bx\nJ9PrNc755VMB0vKh/33bYmf4z47DMch7VesATody5KEeLWNZK5UmlgLoMHqL\nGkAj/83id9mksMAEaJgc20p4tYahS3JucuSPwTA5fPSBh8OqSkAcIPUFMwpT\nAI0iHYWpSrCKFklg2seQPcgNptGol8DJfwAgSeE1lXnN6DsvKsk15iwPWvm1\nDAwZ12HELWH1OqqA8pxnMFGhAsSUtOZKFthK5LifikyduwxaY4Zkyqe37vLy\nI5zw6HDw3jswX8BTKdq6/LvdOCgWMtB4nIJq0NqC85UnF+JJOOihTDlsJmnd\nmDSeGYIcQ8Iq6j8UMgEoT5wwid5y458oIsxZJJjDO0bLrysusQ4Ct0GhhXmV\n9loYtB3CMDhjmt4ydxrpiWGYqp0E4Gwmvfz/ZsKnfziPw/Sp7N9ipQmjjj1V\ns/lATUTy/G1EWovp2uJZgN8EGKkjZ+r5EGMf99fnA0LHxqQXuDjhAdORzjbZ\nldZt\r\n=r79x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4f55400bb.0","@material/base":"8.0.0-canary.4f55400bb.0","@material/shape":"8.0.0-canary.4f55400bb.0","@material/theme":"8.0.0-canary.4f55400bb.0","@material/animation":"8.0.0-canary.4f55400bb.0","@material/elevation":"8.0.0-canary.4f55400bb.0","@material/feature-targeting":"8.0.0-canary.4f55400bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.4f55400bb.0_1597682356679_0.6640237245967402","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/menu-surface","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"3718f21765e67462fd885fc3b0a0767db539028f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.000d64815.0.tgz","fileCount":40,"integrity":"sha512-wAmn6WWmC1vnTt6pFckyAjrwyk1ptCg7nQigpb4KqanHjDHhCr//g8iROBV4WrF4t4RxIirgddaeizelILmhSA==","signatures":[{"sig":"MEUCIB7HzvknCOu1njb5ofTmYFk+I7YBYxA2UchBWjsRy6uwAiEAtNB2PMXYv/wI25ESRx/8OmbCBlBE7h+QE0w1cLxz5qY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOri+CRA9TVsSAnZWagAAU2IP/0dvZLdOry9EQw2D2UsJ\nkpRquCko02AqSk6aRNr8yN1iJXBUUaxpKKuU+oqlA7RBuFZBNUiWpHL4bKY2\nH1+ryVS2zVGKNwngXcg7gAm5WXszuNKn0m5pa8AlK7lAX32AHyD1q3evsj5d\n/lfNBCHRHkqsf2bgX9BI/9u0lLb+l4H7bpHIM8rb63jN88EeYLMfgVQcqACL\nIDrdpooi86U3YHjdoKghB6sT+98mdxIKX+7i0clpy7MugdSjS7ZPdI2rZv6A\noRkO3fKx4jTsfzgR4l/CYIQZZgcdi+Sl5rmvgZFIeQ3b/qUPwVGvDa3fumSC\n9LqvgA+kBhaTZWgg/7a1KJJbb55Ui7lnqpLwqfX7DUmdW00HRIbSTi0SrTl9\nM+0SsfVgodCoZzpKeKTw+4R6wkSf/4ByL4yk778Y6KVXq3/0KZk/lXnwlD+h\nFsCfe0fJngl/PhQOkPVjvzqN+R+J43M4lTbkc3ykCTHE3TgogVlAPu1UvH53\n5o+a2B9xHxWrzyyDiYBtaaTCJ+nvIAlSVqIyw5AQR5y7p4N0GWWubIKI9F1S\nEXyTG3igWDc6ZQkxModzkYfXAFQZSCCDwHRnFeHfaF0aNzuohx2PmMoqhQW5\njEXKF9jcfwCnAMQzJH8jlDq7F4U5GuC/rfnPxu9nPWwdIMrUKEqPbQd53iFp\njnx/\r\n=yoLO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.000d64815.0","@material/base":"8.0.0-canary.000d64815.0","@material/shape":"8.0.0-canary.000d64815.0","@material/theme":"8.0.0-canary.000d64815.0","@material/animation":"8.0.0-canary.000d64815.0","@material/elevation":"8.0.0-canary.000d64815.0","@material/feature-targeting":"8.0.0-canary.000d64815.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.000d64815.0_1597683902256_0.4909468619110846","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/menu-surface","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d52fd489bd030fd6b91f719a53d684d787cdc322","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.defa599a8.0.tgz","fileCount":40,"integrity":"sha512-FVoGOhAosjUktCcoLPwJ+GHmM+bFD7Wcgvr8QcRaxROsb39Zb6fYzZwSQ0PAcxZ1hZ0hN0pi0RaGk+ob5Qo6rA==","signatures":[{"sig":"MEYCIQDsOay68cWYkeGfXc2aQVylh+h/Ul/RJbEWAx/sBnhylAIhAIyCEsxdvvQ+d8XbAaGYgdX1wVZjxl86uonAxPL6TTUr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOulkCRA9TVsSAnZWagAA4pQP/RnmICGVoc5o9DXhsII2\nw/imMuxLnwpPprlhnWuTWg72Junga77c5u2b23FKP5wfTgcjQn2vTPCxLMcJ\n0YnEqTvW5Fl18tOquDme5/fQmIio9zS4yz034gx8ZB9rs3s3xAat06Ui6AjK\n3+dkqaaL69L1l3eZ73csvumo3Ku7stpIflHpacqciN6a52zb/hpmpfgJdR5d\ntTO7HIrMiY1Sl+LZsLVx/0kZpoupP8GL6xw67+N/9qJeQUxdwjT9TNa1Hqcq\nEehVq7RhhuPSkmQtnn44cIfbqDF77QddOcOKQ6PiemL7JRtOZIHovzYUkB4K\nxf30I2wsCdXEkoHaC9y9FiRc7o7TZUVJqH/8t6YgIRKnDTWVGx4sPrVz8+tJ\nqwHv0naexK3pwfL4+VXUruSE8ACCfYrf6BhirQKajZKMH0xuCkZOyb36XLAd\nnmzqsdmRi93OCBNMCy3RnLcsmsiTO7aSub66h8tAsWOlB4Z+x5lnEfEVpoVe\nRnpgYkLDYvR6M1CFNmaB3Twiqy5EK/272959NDOsYHwS2Ay3ukNX5f6f1C0b\n4z1wWviHU4z4Re9GNtmtHN5raez9MX5UvbsyqnXoU2iz1kDHykIRctBXgYDi\n9IifCaR0j6N2feFzVjZeeY4PMQLz0Yly1XMLaH/quGH6pY20E/VIKmGrscru\nMA/0\r\n=Lltb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.defa599a8.0","@material/base":"8.0.0-canary.defa599a8.0","@material/shape":"8.0.0-canary.defa599a8.0","@material/theme":"8.0.0-canary.defa599a8.0","@material/animation":"8.0.0-canary.defa599a8.0","@material/elevation":"8.0.0-canary.defa599a8.0","@material/feature-targeting":"8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.defa599a8.0_1597696355996_0.0211138564673925","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/menu-surface","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"8660c7407c11a720bf9eb5f93840006799989ac5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":40,"integrity":"sha512-a5c0JEQWLcEZa0W1YUBsntVp58PyvhdG4kOssKPm7ibu+0fcaavzYRm3FQyByo5jI9URCfmOzG8Wt9DPZ0cRkA==","signatures":[{"sig":"MEUCID0LmAb/in4xzabKPf7PhtbRmFU+VMhQSfBF/CvP/tbWAiEAkuYK3UY4vpXPnkZPxWrBPkiZcMPv4Z+aX2Rz8mkGiK4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPB/rCRA9TVsSAnZWagAAHZUP+wcB9+97qSgujLuCU0cK\naEEdD4oRXmDiJB/Hi5gmffEDE9LQ5sFgf7WH62VO8O/raLlKbYmt3T3f6Fo3\nrn6r/9VD/gULOhEhBLKkrocqfvSht1M7YhCY1JdYqTy5rGobjiQ41RFWkoZZ\nPV15S5udPJswMt6Xx9DdxlEXYxpl89pWkFr/SfMNupkNlfRnW7vs9plM+eFR\ntcxnnXI/eP97TJcEBsOnueZAByI+ssOWba69Xs5TWaPZg7uiVUk/QPkKpLuw\nTTjcc0FPASoBrmHYFYA7gHiy7Q3+Jdhn0u2InwQC5czImgmOSyC2Q3gNePaZ\ng1ctC8ppQHy1e5JQQEsTAwNt0fvHlLV8usRGq8I/naRneRWK5zGvCUGi3g/j\nV+hTPbTwx2MLx9OChesZUotsCTd3KZMD1HuHg7Hrw5dFtMn/KX7I0NquO/z3\nMsDLq4o/MJ6Euu+UYJxKDadgSkjjhuJlmjgTiIi4ZFdmt76HBWaJh8t4CW5B\nu+8ZP8VDRKjIqwQXwq7ZiviaKHXkv1DYagMlv7lLSluw0CaV+8S+YnbvutA4\nn9bEbWUdg10QRUpkBs1W+XzsoZEjFB0WPCs8dX8u4OH5UWWkb/HturVksGj1\ne3iGedUlNFsHhg5p9ahHO7/dGJj57IkDa+s7qmW4hptFAV0sX3jBSHB/U74/\nz1I/\r\n=uhwj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.66b8ed7e6.0","@material/base":"8.0.0-canary.66b8ed7e6.0","@material/shape":"8.0.0-canary.66b8ed7e6.0","@material/theme":"8.0.0-canary.66b8ed7e6.0","@material/animation":"8.0.0-canary.66b8ed7e6.0","@material/elevation":"8.0.0-canary.66b8ed7e6.0","@material/feature-targeting":"8.0.0-canary.66b8ed7e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.66b8ed7e6.0_1597775851115_0.39552052239356517","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/menu-surface","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"faaffbdaf48b7e3e242c35aedff671e9029c7dc1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.e2b1033df.0.tgz","fileCount":40,"integrity":"sha512-1KNXyrFVJR3PEkKL2xCR06WU/MQuf5GVWaGSWvbpLwQzSNMZGiPML5vDQqldLybCrhQGC7nRS4/KBJnaby096w==","signatures":[{"sig":"MEYCIQDkswI4mkUUA8HmuvXWjHBO2wmIAB65fickXhQ/BQNqLgIhAJ3mzw+XNTyFObEcGu3w7PgS1U4lpIRobKDzPwAU8PCq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXKpCRA9TVsSAnZWagAA7vQP/jJeQ9loLwrORczFSMX8\n47a9f48go7gsHFKqTRhRL9T6EaOI3E5FGYRxf8lfirZFNF1VavB8dTSH8FAJ\njzRZY2Y6ec/h9NfRuYoJfrxfcXGFdsFk+AlAUooWu2TqWFb7SPDLs1pzyBp4\nPA2HmW054CMX3Q2G10pQ1MkkhazMDpMQYL7eKzjARWsU2zMTWVil89T70sna\ni9ZKzbswVg4VcIpbiDjH/Q3Yh3zSfeiWIZcsCr7dhvhOOTUU1ZC3Q6J0EuoU\nDcSiDyC57Iy8p8+OJwp0/7d3Eei/SKw4EU3oL0np/iIT6/PKcDEaVbqymlOX\ntYRybKJ8G2i6Lh2/EAg1j4hsoHQMdiB65JNodEIU082rlmyxv5cu3TR7Z4Qq\no4KjP6NrSr9BJeIE7j/ddNttdlnwoQAz4/O4hQhYb6jrDsGt0l/Yr+/uCyuG\nPiC9yf/QCKJCOS7MZjXZi399Xhm5UbW+NTL3pxSB3jJVBTVcGXtYR4GnYCO3\nlNyceu/TveMOqUmqVshxObvlHwQ8iQ4fbD2y21AQgpDy1sHxg7+m86HsbL/v\nbkyS7J/hCVm13fnaBXwoZs3k/IpPOucsSLCt5kZBN0EwkXHSzLZAB6or7LNl\nfEwKIeVbLxY/M2HxrRlz8QjXHcZcRBBXlNyJ9Sv87+P1QveWqVGWo5DE2LVc\n5aO+\r\n=e23N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e2b1033df.0","@material/base":"8.0.0-canary.e2b1033df.0","@material/shape":"8.0.0-canary.e2b1033df.0","@material/theme":"8.0.0-canary.e2b1033df.0","@material/animation":"8.0.0-canary.e2b1033df.0","@material/elevation":"8.0.0-canary.e2b1033df.0","@material/feature-targeting":"8.0.0-canary.e2b1033df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.e2b1033df.0_1597862569471_0.33854156951430325","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/menu-surface","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2088675998cbd9d373dd4a4bbdd0ba0a058145db","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":40,"integrity":"sha512-REvD1XfLGxYuUz6HO2zH5QCIu2mObi4VaBFdwBAI9HFvEcRsORXb2u4/HghKc6Dzso7Gjn6/+vbGEAtRLxA/Kw==","signatures":[{"sig":"MEUCIQDBfHnrMvvZ3tPlXgjIyjssnuQpknIL+sAEa1gD2g3qFwIgNbEbz0P8PfiLT7OPYmhnqHzRwdP/ywrNghkSsI2mirA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXx2CRA9TVsSAnZWagAA+v4QAJIyJ8K0rbTjLGL0sxNp\nzOP1xmFrddVpmkfRvTnFL/SKVGMuGncSMDdLNnrHJWRU+CneM47fUIuT2ieX\n/FEMWWSEPPx8ulXpXPuLoBLXbMYQsLLUvBaxiicx339s0CbKK5IadPtPcgV5\nP8pg6Qx/fLL5mwbmDolz/5DGgaMhEnoIyQpFwku1Nel0Pantj5VT+yshGkpB\nfndyDgS8zQYc94EUTMc6qlVGEv+PRJ3dwOj10Y6NjPY9ZNVYYws46X+uTnvG\nPSBeE+VT/lE0HcxHg/ff4ckQ8xDo5jrel6YYx6YcyQUWElkam53WfZn4Me6g\nIkPXGzYbKA1ZTm14mFHrXi/XAGuAbJkEv5WYxhA1+dbbnIWGkoih0g6QXvZx\ndt3uWHrD3yV+hz0MJudbFKv5C0/LQoWl61Yrpr/3PC7Xq2K162e0jmMkov5o\nBnjE3EfAFyjhZaVGj0Zsdf2yKd4QqNYxsNCsHYMkAHtdJQ5Srv4bFouOMCon\nuLWDxq0yZNLxSHNcHPFhipn5uQePbJnx9z9K92eP1b6FBftiXFNGisexrO9F\nlOEwU7HTNs6Zw5uTCehak6r6h8hbW5kFLgvPxW6fqIjqzM7i0vLNZxmBJpGU\nbsR8d1+DwkG/fqkokxqiuu6/djvIM9hOhGyeNZKi5SVqFbXPyhg4xQJovBXD\nTTEb\r\n=tE6z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2e8c3dd2e.0","@material/base":"8.0.0-canary.2e8c3dd2e.0","@material/shape":"8.0.0-canary.2e8c3dd2e.0","@material/theme":"8.0.0-canary.2e8c3dd2e.0","@material/animation":"8.0.0-canary.2e8c3dd2e.0","@material/elevation":"8.0.0-canary.2e8c3dd2e.0","@material/feature-targeting":"8.0.0-canary.2e8c3dd2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.2e8c3dd2e.0_1597865077457_0.3191166677896464","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/menu-surface","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"763017de525d6d2afc22912e001b38cda025f872","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":40,"integrity":"sha512-0SFWDu+fgRbUZFC5ighc/xIXv6hA4+97lRxt7v8rLi6MR8SsFfLMYsJ/nj2gzszNkv9+bjzcgIqu5KEjkIu7XQ==","signatures":[{"sig":"MEUCIGPCFd9OguldeFJXLgESTKA1FybfBAEb4R1jEm36cAUvAiEA6mZWe46GmVZks8zZJSilZ9fxdtcNDwUYmxU2I/nwN44=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaX4CRA9TVsSAnZWagAAmyIP/10C24o1RmcThO7fg+S6\nR7yRFnBrNouz/E+tf4xYDoLMZXR8awknC3zv5zO/SVj6Jisa50pxOYtv1PMC\niLwpunE85jnrTW+DtvRFsBtJ0q/D8SsHqyQ9J7QSOoIcID4gInZ7VWfNWY+Y\nJlHhxY6F8u0hfdATmI0wfpm8zKXoD0BqdNGHbXLz8/fzO8cura3nTfP0nnS6\nly6bzwjJSoNomjsbrVzHMlON3KzbtdLXWWWADJko5XOq932cy9RWx+0DlA2M\nc92m6ZdfbBul9OTKWbtKly70ZNdLWYqYVGKHCPcnaRPH97vzeDobdv3qKYlc\nywM04KTxqdyq69zHvFLuJaaqKtBm6mVupw77opzpoYIFg8HmoxPzhAg66792\nYAu1UTyEe1w3U+iMWeGJC7JXluaPNoL0f0eNsPoMkp7qbMB+zYyulCkMmyrv\nWHhOkoWeaiXdO9wpylLClE7Dvx5h31iLb7pI9enMSRmkletivilhf6nAITBg\nJPgXJ6GeRnZdM3BeZ7tw6nj2Or87/napsImlWhIyYkaClPVzDSTWqQUWnt6s\nxRsKOjCMuz21WIPcalJoCzprL8X6esNdZfqoheJHOc+SOsoA5YqzuKBnIEJq\nZF4KsrLjYZwif2jTOJMJBMPEXUKAolb4EC3FfTSU4nMYiAIGwLEK67GAGmRl\n9UzN\r\n=3DWz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b2e80a5d9.0","@material/base":"8.0.0-canary.b2e80a5d9.0","@material/shape":"8.0.0-canary.b2e80a5d9.0","@material/theme":"8.0.0-canary.b2e80a5d9.0","@material/animation":"8.0.0-canary.b2e80a5d9.0","@material/elevation":"8.0.0-canary.b2e80a5d9.0","@material/feature-targeting":"8.0.0-canary.b2e80a5d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.b2e80a5d9.0_1597875703502_0.31998308150996446","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/menu-surface","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"27716f0d48cb743e52737abed0f0456925ed934a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.ff88df637.0.tgz","fileCount":40,"integrity":"sha512-88qgelB5qdaVAmF66YPBEiHFSZPDxvgIMn/IiSs46Qq6PTI9b8cIX9TAYDh9QIADM+yaeQJjbkPGHTyCqgGx3w==","signatures":[{"sig":"MEUCIBBPbu5+UKjSm3tUAtaepeWdskGO4IpMlni+rgR+rMzuAiEAzwe+yA71vDNT6O/2CzQoudJRxcJ6l9YGW+cs/ojXADs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPajKCRA9TVsSAnZWagAA2GMP/A1rhbL9LTEkgvRchPwU\nnhxGdQWfH4rOpQGdzcTp81smwwnclpb1mveaBHhF89bhvRJae592P8NceLp+\n+NtX6yy8R+eIV/Dj1fTmb7qU2EeHvyXRXid8YhY8/wx42+1VchAFyt/+5cRl\n2PQAm/9f0f0siEuEJ5qYtUZIP6lqFjjvtyTA2+PiejjlkIOtXMfmyj+105/c\nValDvf9w+FnrTjrapot06u8MyaNqBRpDjMvDTLvDc5ufcDLcq4sjwhBga1GH\nCRw7FJxkTBCWiNPZ2KQD3xYBodqaYgdVoNPsc0XH/1FPR4JSFIoNJLFpQ/Ex\ngrnmmktOOlSvishHMYamaRDAmW56KT7vgauPtgwFS345pGq4yJq+xdmtOTA9\nVX0B1DyeJgozU8OTIhVL2T/yBjCceJK9Kc59GheKvVPQVHKJ927uI/NDm24O\ngosW7S8AnQTmSd/BDvXwbIMt0ME/SQqA+B4VGOdvlVE/hgdSoRSr9nzLRuBm\nsfJgIjBSvYx3kW1bt2gxmX/DBGt+1MiPEKVFA8GVbTUVmxyVLE52g8YOf5VS\nyCKGeM6SpC5A4I6VISIxPkfQK7mWQEc87QHrYytWSvpHjKvDiVzSHjl+IAf7\nZkWE3BQ1wwmLU8KwARg+Fd1bCSNg7GKueiTdklwbh4YpCU8jh4lSF2kYzlTi\nsUAZ\r\n=YJ4D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ff88df637.0","@material/base":"8.0.0-canary.ff88df637.0","@material/shape":"8.0.0-canary.ff88df637.0","@material/theme":"8.0.0-canary.ff88df637.0","@material/animation":"8.0.0-canary.ff88df637.0","@material/elevation":"8.0.0-canary.ff88df637.0","@material/feature-targeting":"8.0.0-canary.ff88df637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.ff88df637.0_1597876426422_0.9200170813897457","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/menu-surface","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b1efce3019e8e592e3b5fe0a5829cb060ff97d70","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.32fb314cd.0.tgz","fileCount":40,"integrity":"sha512-FWKUrSka+PPXs3zvWZr9KRuoK/nDdWiWtz7tYaM2IxZoCSekCqhQX4CW3yqRlYtcVAE2AByhalkWsrov3Uoo+A==","signatures":[{"sig":"MEUCIQCW65xOaTEgVOt7uQY2AkSIo0GkssIRS88TWv9V26czLwIgH8b/Aj3UMwAVJ8WlXg49zlNpBPfrG872Y0mC4d5ko9Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlKgCRA9TVsSAnZWagAAY5EP/i7wm6Mvtp6Q2Uscu5Rv\n6e6xgcmSTyYzILxWmxOtuP0+Cf14qCc+9l6emSmFwpylOqCJmIvEW7AWaqFX\nSGYb9j4DTYR9AnFhQvsGYUISasj3bzUyFnx05xt74+pwjmqmHjr7KR7zxY4t\nXSSb6Whq3KQyfKnVQV/+0KQAvut6SzdrV8TeoP3HrDC2eIcKkJxu+36TC1AF\nk021bceAFsLU37t8v1E4V3C+gGFM5DLBSthCgrSCuvRMIvSlieC5C4irWbLP\nV4TPCi8mah9YaJzXZKkF6Zj9b7IkjW6plMMdnJ5Wzrocp1xs58iEBppVbXel\n33c5IPp6SoKEChSSHX1U/egQCcn/REdSybxdMQ/154lLHxqxrszXfyLn3v5g\nx7Jf+E5yS9ap5AKt0ncN2FwDLCyDZzostXsj+PyJ/7o1fKJ2a+VwQMkvsD7+\nvHYrfrDPha1SA+G8z906K2cY5C0lp4BpgGBLsKGbgj+5T6RlE3hhDVnMEq/V\npTXftzIPhWbx8ZqhdbPSBGfeiPlQKdC7n9QEec+/ANI79Z9vKD2ZVrsCndxV\nZIz8adCyn1S/rB1VDprVqiuPCYVxDFqLrYL/I5atdZpCY5Gp5IUZyinRuerD\ncpZmPDTB3wAKyIf5GQ/x+AcW+xG8Fngek2QbXfwAWlqlvYmhYYYoQcynuD9+\nhSpd\r\n=N3eA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.32fb314cd.0","@material/base":"8.0.0-canary.32fb314cd.0","@material/shape":"8.0.0-canary.32fb314cd.0","@material/theme":"8.0.0-canary.32fb314cd.0","@material/animation":"8.0.0-canary.32fb314cd.0","@material/elevation":"8.0.0-canary.32fb314cd.0","@material/feature-targeting":"8.0.0-canary.32fb314cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.32fb314cd.0_1597919903784_0.46958514669485996","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/menu-surface","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"58542dc9b09bc8f7460175c2d60cd820c1bdf534","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.546277d32.0.tgz","fileCount":40,"integrity":"sha512-XNgdXqPK6Cy827iw6Xt7i/bmDMTdSvkamuzQ+gdRJ1LIZGRBwjlmdYxFTkrzXvIAmBoUKzL8AtZ8cBOcvXQaHA==","signatures":[{"sig":"MEUCIQDV3UcnSp9LSyfwIjQM66Go+SvreGQ7PWau8GYart5JSAIgaieJb4yOOJEgFb3vrAAmjC++NFkms9mpMBIOm+xPwm8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqhxCRA9TVsSAnZWagAA3A0P/0/U9TEb/gIQkQXMZ3Tw\nUgX3UO/spry5EWXi9I6Gu5UGKcULAvGCxM5TwH9xbGlhuGzwAaalgXaAM/4o\nePMawMdWjQiejdFbAsIuxjaU1qxUOdt9SkzJ5khCLBMmDDhZfuQeMEiTbvVS\nTt3sSCJRoiPvxhtOPBWk44U1sgKNU6rXHo2h6mUpA+Kv+zLFypB1AZQqgsdm\nD8marzZzKiby5tGG+ByWvCD85mP/i6xHL+BSSMkngrHjUFrw+Y/jVpdIJkrh\nehKuyZ4p/oUjHXbRa/P2wkB1gfhZo/jjiweEJYV16NoNWuKcBJxOrmlcN1/R\nuTsLsRmhHswhHM+3FbtpA25rY9Dfyyx08m3pBGbsDMMkPOF36wa5jdqXmAxF\nvH/b287V6ZEFDHS9Zr8H3cuM7oMjZf/SwQei2B7Qvb9xDhTgyp1V19b09skt\nw1zT1V9W7PvPks/nuCuELNlajRnvGmSo/1YdmKHgN8EbB1tzuCHA+GwBqWXE\nmXvx+1w2aP6D48NbBK+lTjbneI5E+ekC3SP3WLhYzFq8E+h7Ww2ueL+Xo4A+\nX17PIRwZ2nGwdvzjucnN3R9hWUGFLb2/9m8xirNuNUgfT+p+lfkkTZtRKi8b\nLn1EeVS/jFCwt841Ch3x6yOmISKzumndw2LAvnUj92qV5q2BveDYbC0vtREK\nqKGr\r\n=cc+W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.546277d32.0","@material/base":"8.0.0-canary.546277d32.0","@material/shape":"8.0.0-canary.546277d32.0","@material/theme":"8.0.0-canary.546277d32.0","@material/animation":"8.0.0-canary.546277d32.0","@material/elevation":"8.0.0-canary.546277d32.0","@material/feature-targeting":"8.0.0-canary.546277d32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.546277d32.0_1597941873377_0.5615624780422639","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/menu-surface","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"8fd4979fed08f38e5a5ae3a7dc28ba4f9b9dd2d9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.da72839f4.0.tgz","fileCount":40,"integrity":"sha512-qDqzSksbT+hUqByinZSRhGuiWvNywiIVsuA3p9+kG6XliHL2KtPPlxQfSlmfljRFO3yLeXj0Wp6IsAjB48jf6Q==","signatures":[{"sig":"MEQCIHY9fiG2xxbin1jP1eZ+jSG9q/jBd+05cY6ClInSKu5jAiALgttSfvvirl3sfpF9gLEMmAeMDb2JwPgyA1vPP11dIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPrpKCRA9TVsSAnZWagAAdGMQAJjxIFIquWBeEIBFKuWy\nQJCX6v9h+s5uro3XveIYSIij4FWO46csXG7uVZI/9v1/XCTyqQPHKRdCe5f+\nKf793ih5dt/IW/1A8eZHYAD5dgJ65fswQ7CrK4u1oiLwCPKa2bgVWL2fJWtf\n+tk96v4Ogm/RsipJ1D1rL5uwnBph40gDCAkZcTR+kiDIzBHMiklWzffAzuUD\nzG+JIcCs5C/DQpBB5wHkCG8sqLCTP5iC+MRbZGiQ5KClHlTCbtZg5r59+zJY\nLgYjYzcwdxwKY+iBTgz4WzsYQYKTmz4rtsfHR37VCuXjic0XdTrj3Yqo/dgr\n0cKZt52uPYdJ5fPUF+qH8irWgE3poiqUhkDtTicfU0ROyEYB6bmbW8foTzxT\n/VgiqzvfAV+7ArvP47qCOn6VJjHuMDuZNtGYGyJ2ytOF2krGB5Mh2x78w3qX\nVg+f9XjUtgZ3HwYup2fRIiEt8Ty5lM2cjRXC2LUmxJSNoNGkmroQHe91mDpt\nAFWhm/YkgRBzsUgc6T+PPE/JDrb0X5q2ucOD3h5rOnAifYsSr38oNt308jjR\nWtG8JU3nroO6ZhTcWlk+XbIdJ7z9op3n94t7mPLPdrtWp8zSjReFdjIJDkNd\nnCW1IN+JS7k9/p6KABSKRoiyPSI5eIwpyYOoIw9aMvs4FBXVWazLrVAZvrDz\nE7XH\r\n=0b3O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.da72839f4.0","@material/base":"8.0.0-canary.da72839f4.0","@material/shape":"8.0.0-canary.da72839f4.0","@material/theme":"8.0.0-canary.da72839f4.0","@material/animation":"8.0.0-canary.da72839f4.0","@material/elevation":"8.0.0-canary.da72839f4.0","@material/feature-targeting":"8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.da72839f4.0_1597946441711_0.19721873604540874","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/menu-surface","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"508e9925131e03b5f6acc693694990f6ed79c4aa","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.346069ccb.0.tgz","fileCount":40,"integrity":"sha512-SyGix0zkVJkVtNxx8XUigzH1Ia/56i7GMrLIwhjWiK8g+pY7IBgOIXUKjH2YLOOv8ol9E/FOJR0qQTfAsTK2WQ==","signatures":[{"sig":"MEYCIQDlESlJ/rJAeFCXoXfiRflqz/ZtlgGZFKjjJOQO0sBlVwIhAMENdjTw7wM6r9S2kWvlVFEcIKozbOB8WACda+3lNQgo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr6nCRA9TVsSAnZWagAAt9kP/2NM+fwb1k7/89qJKa8F\nGKJPXsLFp1nQIDc/bmv/IB+aGXmU2w4HmwVJFNmlpqbEQcimfG8n3lQL2HIP\n52m911E2YglIUAvRhXVuEcATYOoTGrSJKmA1Q9pxN0s6aCtEn+WIKyGfXTUV\nDMb4mvaspFq0ofhLPbjG8tOcZ2uB+puhqd+uLJcWkAu1Fl1wJcpzxdVu2xh2\npM8lZgRvlT86v7UbeSTPG4qPJV/381ihfByWwn/fF62Lnx02KDSo9YNRMhfA\nWQve5FkcSQEAzh1Cdz9INtPCS6ygQoFgzBgmlQzzO0WCwDHNHXFjvBkdAZlL\nEr0F3ZNOGCQPF+GcHYGAJQ6PvUOSnMbip5TfmAMnIaotMyVCHWBcKsuaelk1\noY9ky4tSb8Altk0m5UPG871Z2ZoAeOo5+aKRso4RoAc3n+anvZN3NRfhRG45\nHdfFVSVWyV/5nghj85kviIm9BSuLLjswwHL9i6YBzDZ0gg9YGoCsv7zSAPLA\nILSI7tsCG3LR1iLUQddhgTtdCt/HzstNlLFUCZutT2HG5L0rhmLvhab45sy6\n0ktKoR7uLKxojA+d3GCIL6pqARf6A6jxPYtVnedUR9uULJvKgJdR0vM+Upkq\nbRknaUSu4igZn/H84EBz5Hqrww+TkBQuXtrKUcbCVCuLcGUfTp8vXPnJdySR\n18vq\r\n=TCbl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.346069ccb.0","@material/base":"8.0.0-canary.346069ccb.0","@material/shape":"8.0.0-canary.346069ccb.0","@material/theme":"8.0.0-canary.346069ccb.0","@material/animation":"8.0.0-canary.346069ccb.0","@material/elevation":"8.0.0-canary.346069ccb.0","@material/feature-targeting":"8.0.0-canary.346069ccb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.346069ccb.0_1597947559064_0.6271881247225026","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/menu-surface","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"1e41007e60bb72a05f89269eb5d9401a03c22e58","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.e27c5802f.0.tgz","fileCount":40,"integrity":"sha512-UjRbYMYE5kdD/KDy5y81atlpfAGdSWDo71yd/CCCivl7TSxl/8W/P+4baq6rSv9YlU9ag+hqybH1CoYpU/MTug==","signatures":[{"sig":"MEUCIQD6S4PleAav/XcDnxnDBXifcap5hOKMA583IrExqR1mYAIgUPI6eHBzYc8tz7IUXTPWr7GvRuH/vvrBABmFRuvpnME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsvkCRA9TVsSAnZWagAAonQP/R/saR8671eZOKfXSbJ9\nbiEDXt7eUTlrP16R6BX3xQ9pmU3rnlve6TrXuLwMftFRAC1kFgHcf4YVZ6Ds\nRq2t6t6w4y4r0fk+GvM+SqaSiIjexUxq5FVjfGlpdbXnMbJ75peAl2DxlEhq\n4ZFWVtfCoM02KCAA89/20FiuQZwjCQCfYqXnQRAycR1JY5vDcu3+nwFHB4Fs\nveKyX5ThHcgj6mCX0I9J1FzZPXVt0KH64IbGNyqUq0f/5GXIYgucxcVRC3vj\nU640IbSqH32vsTdVaZ8Z6G7MdAPrC56USkGbMqfGgIoenp3cDSE3SXg+bC9i\n7Te1tRB8MMvkTM86u7hJqIIVl7rTAZx70kw2U/vQeqTQY4xk5xR3RucXXTG0\nAlSWmyXB5vP2w1/JuJp28BboT+fgD713pcO3/hIYr0dBKG5xjeWQSHIjUqBi\nDSIed7OyvGUg9Pf1Ofa97Cx3Khgcf2js8indThkBZztyuom7pgakx2W4AMyL\nSBn03IPuJ+jY2Ap8iJyyzHXsNvW1PHSPXp9kT77kc1f8hCPcrVy7BVuZ4hCV\nKyUXIIdpiveYAvzoqje9w+Hng+dcFpWcmsOOz4dHBVq3zEqtG5kdqu68ZFoQ\nfgl9fDtJCn4QAMw9z76kJ1d9CnnvFoltGfLHoMpBcMKtpE+v+2zfsa8jSVVb\n/Eys\r\n=TI/Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e27c5802f.0","@material/base":"8.0.0-canary.e27c5802f.0","@material/shape":"8.0.0-canary.e27c5802f.0","@material/theme":"8.0.0-canary.e27c5802f.0","@material/animation":"8.0.0-canary.e27c5802f.0","@material/elevation":"8.0.0-canary.e27c5802f.0","@material/feature-targeting":"8.0.0-canary.e27c5802f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.e27c5802f.0_1597950948210_0.26100948835115934","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/menu-surface","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d9cd626a7c23893071430407733f728c9c2767cd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.f4532b9c8.0.tgz","fileCount":40,"integrity":"sha512-3AVuqyXf6a5DkFhLr3QSPRE8qpA84jnizTqzrkYlRRjdj96glRgSVNC8+D8bS+tcz1Yhb46nozg0n6dVFBidhQ==","signatures":[{"sig":"MEUCIQDhmDeD07uSzrPYrb6KJeLuc00kMcJtqmd256e3Mm43FQIgKkfbBuieR8AHWsa5uB5pd5WBBVpwuORcDFqbJVKdEQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtXgCRA9TVsSAnZWagAAoogQAIrDcWwHOUoASe/fpvoZ\nRNFia8VoCFwXrwq5m0Mklki/caUH4HjOCVK0dWmWH/4Pehx9TDLF0C+qPPIj\nzQixoo28Ai8k9mnBWx+zWK0nACd8jmHgKF1dZPSwqR9nL+WX8AaAzcqlNY5G\nsxGEXPfsRDn9FewCUn6H0r5an6BQLTSFyxGXXhaUfbyX6Tc1pj7W36k8JB94\n2+smcUBatJVkWJE50LDR50pDAkzApaxPe6K2T06DAbzEq+NbN+RDjdRKM0FG\nwREAw9cgca0gJHqK4tSp77znKc52mgLCjt6/sBRPwFI7SGezYJv7LlmpI15c\nPffUf6VyaIYG+g6ESQAnADziXPW2XyxwTHnrKsZNsGJGYCCseLCmY12G0HmQ\nBgzuARuqL5crDcccudWfmV0wPqgUhVLmRbjgAMR6jOFr7OlAHlRpHHQYUQVi\nCZZM35TBkHlPjyBlQGtW+jKjos35TJj6FBm+7lzST1EEJCorbNRnAg3IZoNv\nw0rSuxmbkl33cFF85CRe4dybvrBJ/HEL1bSJjuRYkEL3UL/pXqEZzyEfChfI\n/XF4IPadzjCwyZjXtl5UdyGgpGxRI6wACRLMyjlUZgpFha2qupMkxByd3J3w\nIUyN4MYQG1nccRoTI+IlkvtTdNmznYYji1PZe9fiL6LhSylhBMTt0yFlFywT\nh9mt\r\n=V7MS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f4532b9c8.0","@material/base":"8.0.0-canary.f4532b9c8.0","@material/shape":"8.0.0-canary.f4532b9c8.0","@material/theme":"8.0.0-canary.f4532b9c8.0","@material/animation":"8.0.0-canary.f4532b9c8.0","@material/elevation":"8.0.0-canary.f4532b9c8.0","@material/feature-targeting":"8.0.0-canary.f4532b9c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.f4532b9c8.0_1597953503613_0.4258476618603544","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/menu-surface","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"f797bc661f5d116c37372e2f2df4dd0e551e6f72","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":40,"integrity":"sha512-Om1TMeC5PsYwradhHjAjfiGG7AdhzeAjQei4h8V4zwuw3nf7xkq7pv3QGF9QTMPW+FbVESGnaI9U6ukiBtPYSw==","signatures":[{"sig":"MEUCIHo6+57hndlugNqXwgRrX7FkIbRVnZIwl6q5mtCmcgjHAiEAlxuDrG5tBunI4esndAmDzbtv6masth6t1AIBEoFaohA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuX/CRA9TVsSAnZWagAAhhcQAJ3yexqI9Boe5zlJ69R5\n519avxwqlaQfOicJ0iU4Hy4RqOcRd5MmJF5tv8n3urwjmn3RV+jKAD7MX7BI\n80lN1u1tE+lbo9acUAYxndO3EzTILnZFgsjWPEoB7nVGY3gvTbU8hj2rW1My\n1yFDuy3NEnMSCViqEaiO7yBKHzzky8kAmzPzy+ZDBGlyZRbRmYi7zOb+Xuae\nfaKAWjiqRui/t8yipwMvgP0Fp/TNYeo855ATVsDiJQWuIhdWuHOlToRYeFAx\nE8PH1BWihy+SAPd9/H+Q0NebD2ccYk91CABldmMBry+6H9PpGe9dYwBj/EIJ\n+f5IWGvY/iXHMIw8KTqIy4sgGWoysIb6naKUu0w3OOCId4B5MmsOuv9ie8pQ\nJ3bZUrt6JqgaDMJG2SnCoheNzEXMlVQ+TlGD5sOZ76ztbmPLcRUMuP3Yjawq\nRM96hvzlOjtnsnWg7RMa22Chl+Fb8Lv9eH4aLohPMYq0iYoSAeIJQzZXzZ4M\nhi63ahBscwsQ4Rm/C9tqAHXnf1dakVruQOMIcOgcfHSe7yaOwnelT1IL3xYd\n2z8/fnW4IMHtsNap4bfYrlfu++VqbjBQJXmowCD3ccQY6nrWYKYrDakxOkMv\newDdaFt35aQEygL4rulKqqHKBvl0d+E5Q0qHqIhvKuGxyhp/XqVLLmQf97cQ\nMYSP\r\n=SKEN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fbf73c2a6.0","@material/base":"8.0.0-canary.fbf73c2a6.0","@material/shape":"8.0.0-canary.fbf73c2a6.0","@material/theme":"8.0.0-canary.fbf73c2a6.0","@material/animation":"8.0.0-canary.fbf73c2a6.0","@material/elevation":"8.0.0-canary.fbf73c2a6.0","@material/feature-targeting":"8.0.0-canary.fbf73c2a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.fbf73c2a6.0_1597957630900_0.8998296019263634","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/menu-surface","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"e2d94ca63828afcf21fd36d7b385767220fef775","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.cf800124f.0.tgz","fileCount":40,"integrity":"sha512-R7E0/RUz3t9IO4kBlRZx0wX8Rx+J+sOmMEf5s82dN+v/LfWB0PhnjwGCRxlmiQL5N5oJiZYpEraKicWfH+8bGA==","signatures":[{"sig":"MEQCIA7YmMir0t9sQfVM/t5c4t0SyFEm8aatUouwlpqJgaVHAiBVw8U3l6QSemyC6nYmpot1KCXOb29ykl4KR8CW2ZbhAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvDSCRA9TVsSAnZWagAAIL4QAJd0SaXLCV3bS8Htpyhg\nDZNspXMn5FM7fnKs2Bs/+YF8FJ0NpoOIT4RLPd+LcucNbrPXXUMn0908puN1\nIYcxIrU8B/zuPJ428iFHD0EqcSNpPpJK39uNQyIMnK/fWmE6CVaQvoc1sUMD\nbRQIDAgc9AAee2ioH12dqN1yKDXsZhGwtfVeXMhUAIzRWLaXUfLnd2Inzi/m\nCKpK8sGdy78p+yaEoQt7mJP5lVQDvgqw6R7/fu+IhfAcz80S6n00OtTaKYCG\n8HZBV4oR/AsvYrnWMdad0i7xniQOzULB9XoWfcQkSit1cgIQML2xytVdhSbR\ncqqehIJUf/bsNb2bTTjhs4dVcsS8j+a+namrEaAp+wdFJFDbiF1qrzg/p2gN\nfjEdST2++KOhmfta8z/dOLWp1EcfWOXmGqxQtWuBXl6kct+ST9YCM6QFnY6a\nMmx9vlhd13VkAiRt4expeDoQXVb9fkjfw4R36gcck5DAU8qfLP4bm6J9XZ92\nl7pUArb+QR1+IJukOJdTme4xCZW1pke12Uqt45vFvV7gS0pbbsjUcoubTQ4Z\nY61BawvuQ/oCMCFvgwnZzQzD6z1gW1fLoaM1Oxu4uQHxsuYha+aSxyK2NByM\npjjJRKQ1fySBLg0pXMJUKNUqxjTdYDtbOBVTzqT9BQZyK4bReBo9hu6icuf5\nw5c8\r\n=/NrT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.cf800124f.0","@material/base":"8.0.0-canary.cf800124f.0","@material/shape":"8.0.0-canary.cf800124f.0","@material/theme":"8.0.0-canary.cf800124f.0","@material/animation":"8.0.0-canary.cf800124f.0","@material/elevation":"8.0.0-canary.cf800124f.0","@material/feature-targeting":"8.0.0-canary.cf800124f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.cf800124f.0_1597960401757_0.4002088864445208","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/menu-surface","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"2d2f41cb9ba3fc866108842f1febc9106d259e81","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.95e4eeea7.0.tgz","fileCount":40,"integrity":"sha512-+myJlhtzO8WqGdkcBoklbo7E7X1yZGunszHZ/v3N+zaBJExPob7E6GWowF3gPsZ3Tl56HvWbeqtnx+S6wX0pvA==","signatures":[{"sig":"MEUCIQDFKNj3SpkFK40n5+pjPLcxEHdxpuKXygUFpZyNVzicfAIgN/TqJPsAWYQ1Un8tMYoVGVmb5pj6+EQuiU1uIK7KZ0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPwdcCRA9TVsSAnZWagAA6PAP/2w+NgYRPQD6lKFB4bti\nzkzW8WWXoD6dwBDinvDClrYrmV1q/U3YCpukyMROFo+QqQi5wDGPznpG+Hbd\nnZEzscP2PnF4ISeo3pbhMm1IokSYi/fQJiVDIltJlL0/4PAoWNvjAddWbsTO\n2pGWRUeGFZNaT3nnrl+smMidl12ACxi6aBxUcPCIS2pP4F4CFGWTlCgd6b/6\nr6Qubu4ir98PeaRwJsTflHMKjoqqE1yF0rwTxU1IvaRuDEPS9CyMLNVsCUR+\niGad6ZEPpJE9HXUq9e3biBq+dsEnnp8C6aERJXoUZXn2rfbASAO91ItWaFYp\nto0mibFibwU9iMs85b/gCEFzD41iG5J+2uFHotnpqMPWiFMmpHPV92CZszUR\nPaKl38bi4vSN/r/fAPH1SCPgGlUd9f2idZ3dPT3gkMkqh+XYRPcvN7TpZMmO\nE85Wu0eNvP9y379g1+Y5znh8XZOwPXHsWyT/o6a1hCxStVFbpOFEWHJyI7ZA\nKGSuJVQvXtKFcRT1AH+M7EPKBly86F4dnhtU2WYXMelVW+BX/E/Sm85s+zQ5\nmkCAPZMhhhQFcAMWg4DtIkPAF/bjO4i3KCROp7MFAYGSCLFKAVb9RiSFZ82t\nn678qgAMz8dB+lzuwPwjN9+h2qs9N93j+FQCEcuwnXqTs44A+QfT98L0Z217\nC0PR\r\n=tu9H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.95e4eeea7.0","@material/base":"8.0.0-canary.95e4eeea7.0","@material/shape":"8.0.0-canary.95e4eeea7.0","@material/theme":"8.0.0-canary.95e4eeea7.0","@material/animation":"8.0.0-canary.95e4eeea7.0","@material/elevation":"8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.95e4eeea7.0_1597966171644_0.1654668296330366","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/menu-surface","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"4d3bbf22de542ea022848c9562fc834a4eb3bf3c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.91ab1c62a.0.tgz","fileCount":40,"integrity":"sha512-5QcqyFiVIfKXeDUb5cwPs/6ystNZtd5FPuWqRnO6ZC7evbh4HL0rLP0+i4nhccSwWPUFf3yTtp4Iu7hOZLq1dw==","signatures":[{"sig":"MEYCIQDK7q6CSmy3fEV8t2agbFKXxG1UXfR/fCZD+quLqsr65AIhAJwKw2DN8wsraYOjJwv8XCZn5KSCK8gvTkmIs8SevG83","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+RZCRA9TVsSAnZWagAAujsP/RcW36d64/E7xkSBJG7Q\nBqqoxz2q8Iazz7EGwW9xxCCucTY6XMtVJOMWqytY0cAWnXzwPyD9ghp1IpaE\nTwzB/z5mX2Ffwh2NfzFCYDMLaEu5LcNssbwezFKR6r/SpX9o7Nz3Dres0iOB\ndXqmsdBPdQkn0oOSjiUqZD4d5orh0xZuci+WDkBBsev0/nRkwisz1gM909GF\nGvnbydiriSp0iOCIw/Qh1rOpXNpE9VwMg8zcQ8aulzhq92wl72i4UWZdjmDx\nF6EtVXI5BWb9F3rZGZACZr0Y/EcPDuTZ6S4lOF40fLgsJdh3n9nzLEMorW+o\nyWn97x5ndB3453ytJFkOwGXQuLuYJVAe465n4ktMedmJviQvrUSeSpcyYmHY\nYTB053mK4YmDKIXKrDNhlwBpUmw+5C2cPBDGVfbXBQa4e3aynoRPBubPryVn\nc1PDm8LW/XxpUZmbCkfEUDwdSlxW8imEww5YR22diXo6sw2SphpQDeD9CXLz\nSzjcv/TlRpIFPW2tu5krqxndkAdN1mTeiAs8oNmPWy4//cQHtZJ7iNOPc9NB\n75WigbHorwUHXln4orkHSyKjQodSLOxp5pGFIxOYF/kpICciuVjrtEOKNG/4\nQd+g7cOhWNH23cNdkZLNf3Mz+bW0ISxj07xp+IEjXqGt6ksIfdUVUmtM4DtA\n1HeS\r\n=rdaJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.91ab1c62a.0","@material/base":"8.0.0-canary.91ab1c62a.0","@material/shape":"8.0.0-canary.91ab1c62a.0","@material/theme":"8.0.0-canary.91ab1c62a.0","@material/animation":"8.0.0-canary.91ab1c62a.0","@material/elevation":"8.0.0-canary.91ab1c62a.0","@material/feature-targeting":"8.0.0-canary.91ab1c62a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.91ab1c62a.0_1598022745286_0.4221487087154685","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/menu-surface","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"eab8c43b2e7a9f14d971de008875ebf24c9c2d7f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.58eaa9f02.0.tgz","fileCount":40,"integrity":"sha512-xeIu2l9hVs8KdjKIeO1h2gVxFl/9/CdbqaMk5w4Sz5sIJcPlnH1wzSwCopaslczIOnm2kPp8JG+BReEVvLJDeQ==","signatures":[{"sig":"MEUCIQDKbuRZxmPCACpn5IvgKPsLI67roVtBk8VGuzkfFwi/vQIgCemHnmeKt1ua3GSaTGA/awkyyzYELjTzYKfpVkXnnmc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCgACRA9TVsSAnZWagAA2KQP/ROBo+PutXUiRIxMKY7o\nN2XbMWRRVYcqlfW2nXuHqcAIoRcMpOCEXYCBkihIwITKe2fV9lZPi5DPtgxw\nX5XhqpsYUYWhJ1eDky4WyDj80gc66IIQc6BCvnOCDEakzAM/J7BrwwYbHwr3\n0ewES+DcuMyK6sL9Ys9WBSFqQZJvqIfQUMRJozVz9mcCbWnJhF0LOiG+UlHA\nYHFZDHGYDKTA3MAo5Y1t3A7wySvAXGjPJo8auTEf5w/HCV5mc6UGR0bM0veI\nDQClkDaHMeLDgIg7QVA4YfzjateVYiMcwuPeGfStXb7cqDwQ19YY7xL9EkbZ\nYb2lTHj63+LIvXLmRsvNNZEc/42Cm8e8WjvI+aDnW105yC7nR66k0oQiSm1T\n9vw9aewqnAPtIOo1Lqwxbynf8XORJtOAHFdNUQKXVg6cPV6pjN06hBC/l1h+\n6FwXQQCe1hgbviUu22jmuGOF2vkxpIWciJSqwynea8tHqjDgMxuEiBJRC75n\nTFDfWQ2S0h0B5+vG1gEaZ5BOG1pzVPNO4G+hzSuRDrRaAbOJoxcjbNGaqklp\nxq5tVBpq3qvmMGte+Wlib2B7TOYaDS/MFS/C4S/eJKtNAJ2GN8vB3F2IBATK\nQigFq7R78a996S252dkUUAiCi4sdoP6JxSgZN9G5/XxBlhZLHdS8q4z2ticx\nWWl7\r\n=AHUq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.58eaa9f02.0","@material/base":"8.0.0-canary.58eaa9f02.0","@material/shape":"8.0.0-canary.58eaa9f02.0","@material/theme":"8.0.0-canary.58eaa9f02.0","@material/animation":"8.0.0-canary.58eaa9f02.0","@material/elevation":"8.0.0-canary.58eaa9f02.0","@material/feature-targeting":"8.0.0-canary.58eaa9f02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.58eaa9f02.0_1598040064352_0.0709501864185762","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/menu-surface","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"b21101bc5924d8cd83945554879daa565a9e0df6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.238216fc4.0.tgz","fileCount":40,"integrity":"sha512-l4pPO0O9WHaZj2O6c6u16g6WFAOydz50cGYm3SHy1NvhfdCw75vVdHAZDOOwnwFe+wiPrD8a3vwDc6VOrPUILQ==","signatures":[{"sig":"MEUCIQC1a4gnXEFNy6vRVyHJrJ88Zcv5t/VafYx7xliWFqXeHgIgUNUYM5S4ahc7IbBcn8lg1Dzjs1g/UfPb6ShjLIhkWFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ9+sCRA9TVsSAnZWagAASrAQAKOwAIIw5vtGyYX7201T\nThIv8wyvjTFsh+NZnciu3xp00q80VjMPpnAtG3oLKskTCEXAszGXZy9HIi2W\n88VBRxjv7U3xvQNdUugA3lZLFOkduHCusStK2vteop9pnpLRQiczadUZ10sj\nPkVBMbulTfMbmC2/GaeNHAlfVm6ZzciehSpHUqFlRkm3RNb9BCNST+qU3ZDq\nlYERxunm4nMkNGG7gquhpLPrmspZGZHEPBQIoiYD3P9aoTy20PUlfvF3iV5T\nJU+xttzvFvR4jJErgHa8uslMrBj/aYjptW/f1cma0KCwQ705OJaYR7DGIChl\n1pw4bm3DXAY9DF9mRikoHcKOxjhgO60Mfa8qUbLNKXutgnRxL7Z/IislM7H5\nwZchrOvvtPIWCZP1dSou+Nc63SZW2u6tffGoSqWEzN6qYoBknf24WNyN3Yg6\nvKlnASscHg7lqSI6o27Gcl9lW/bRCduuTvqPFN2X4dyXSFbivRkFQ6mUszRe\nhud4ZscPa/5PfH3Xz+kaU3YDPKGWtGoXoeUqQWOjnTxTtiSxyPwU5Q7yVc1C\nVpxyBIT6g/gpaxRxe9IzqMniaIGmJdOkoJXuRPWot2pWSzfxcWOpFDJ/VPhB\nINOPm9jcuUY1qq3QMNWZVBiJh/GVjGEzByA8BvNRUTbi2g5JvT55YmYhG4Ca\ntdAG\r\n=wNBi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.238216fc4.0","@material/base":"8.0.0-canary.238216fc4.0","@material/shape":"8.0.0-canary.238216fc4.0","@material/theme":"8.0.0-canary.238216fc4.0","@material/animation":"8.0.0-canary.238216fc4.0","@material/elevation":"8.0.0-canary.238216fc4.0","@material/feature-targeting":"8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.238216fc4.0_1598283691988_0.899658170018039","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/menu-surface","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"f2f934f659ef13059e3059dcabf99ad43783468f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.a1c65593d.0.tgz","fileCount":40,"integrity":"sha512-eV3dzS6Rci35TNcs4SBC2hHoEB2mcpi1lg3neeVRQzKEMzi9KCJWnWFDaDvgKSjNEC4/Vhjjwihty2zy+rSiZg==","signatures":[{"sig":"MEQCIBcFSfQTiBApwD2ORcav0LaGQt6WchgBYcU6MQqJpfbEAiBOBeCK+2MdRVXMF2IdX6oZWazGT6K8QKb9nZRviRnxfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH+/CRA9TVsSAnZWagAAGB8P+wYawAE74I1WESiHt1eG\nYhq5WpEBhkVfv55TxnxU5a0TjEzt1H0AjuuHyf8KH+IzXBCabaBjCJ5tzK3b\nYiLZJZAjcSXVI/7AIz3IDDAdkMa3h+bkLA3pc+BqdNpIvpuixLegvqIgSYHW\nMTQ93moDH9GTcx+H+E2xX37V8v64/lmq8OxoGRaIsacrjB86YvP+XMGSPVb9\ndV5Y8EfsZo8cbxdzDFnidk+aDC751PsIMgHbC8QZHVyJWIx6M4oD9D++bbbA\naAVlV31yam7Ih+b522e5WJnk4PH+vO+yY3eqV09uA/A8cTErGDfPvvDyZT5a\nxUTVMpEzQ2BX6nv9ZdeBaaAdU7d9kKo0YyMBRZ+dsPlAfbY29ogbNZ35H9p0\nlVLooFy2g+LHo7UI9+vC/w6VA5siwtf06boYTEvxoujTA7KURBt04R7sbJXt\nj/ijJL11UnZ5LcKuOOmufgNHzQI3pvWSCPfV97RZP3r9I5UvIaaewxbRMU1l\n8AUwa0v/+c30R9mqvu7dwtbnn/FLj9AcFiPFgWH2LjmjDCp+91hRWwXpyqqY\n0SGZDV8Hpqv5hsHdbd+sbeYSem0946/dCZigg1sZy2IfNEIrGM5moKRVp+/W\nf4td/QpdfMGV4I68kttAY0V+DAU1nPBnEOnrWfHY4E+T3DmrLpH/eBNvp7UF\n8cPR\r\n=S4cq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a1c65593d.0","@material/base":"8.0.0-canary.a1c65593d.0","@material/shape":"8.0.0-canary.a1c65593d.0","@material/theme":"8.0.0-canary.a1c65593d.0","@material/animation":"8.0.0-canary.a1c65593d.0","@material/elevation":"8.0.0-canary.a1c65593d.0","@material/feature-targeting":"8.0.0-canary.a1c65593d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.a1c65593d.0_1598324671398_0.3288119200668702","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/menu-surface","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"9bc275429b4014c870d96d1d7d3d8a4e1d74599d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.708cc09c4.0.tgz","fileCount":40,"integrity":"sha512-2Z1iy4dxR2nke+Clv5sR2EaDSOSpiQoS7R6QFhgBVmbB5ZH4LgAbpfeVOUgkYcDCf60iXIfu3/yPPKfRXqzTPA==","signatures":[{"sig":"MEQCIB+meOcLIBwM63Te8OSRPY4dJJMMfq01ZjJ2GQgagUmNAiAk605zGK7zAtZRac0S7So1ff1fmnBGin2+d8D4MksWxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTTRCRA9TVsSAnZWagAAQVwP/RzZdTTgr78i724V6Wfr\nrjlQW3uN8wE4V90DlTF9mwuArzfz7obGDiOK0U4Y8Xuu8faev3jgSIkE5qRM\nqOo3GwZOuk00Bb80jGA5djieoXFNEGQkhajc7CMPrvDyiUugroz8Bj1rXQiA\nTOPfaKN7QhfoaK6KMFJ0dEpsGN1qQ8vs+T9Y5PLsWofTVupCqwDbkDR+68S7\nmcXcA8W2iOwlpdJ7av8ZXitPvccCVHBZoUHoYZctrNFGhpkz5ixGtJ5ZK9LS\n0uPA0LWzqM93tgAxQokEE+uBRFfrFV1PRupnmsoDS/q0axr1Y9l/3VQgpCbE\nWlePBFKwviMgeeVSLm/3wIbOFC0bPXLIPn+Ser4lZIJDyCZTma++v9iSV+4f\n9uAIMeZocHu65B+3w9MWMMzfFrzi7TuTc3Q0FF1VuLG+yaQeeABh3X1Sdq8t\nIfPMk8XTd2C/HEw5VRunlUrLKbn3eTrYc0jchbHW42G3rmykfgtX6xBsBfgj\nCOJmmFIatx20o7oSk2P3Cy5twPpLSlT52FZjZPLum54LcNouT7L+IDcAnCmH\n2GYo2wxpR9TfSDr2cHSStkKeczRXsuSid1g2vAQMPGwW/6woPWWEqmnr1+jQ\nPcW/6aWmmmTPAf49VHYvGQNSHeWYerpHHwi4SB3Ey1QYrVpic+hFqkx8kV00\nIAw0\r\n=vZRZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.708cc09c4.0","@material/base":"8.0.0-canary.708cc09c4.0","@material/shape":"8.0.0-canary.708cc09c4.0","@material/theme":"8.0.0-canary.708cc09c4.0","@material/animation":"8.0.0-canary.708cc09c4.0","@material/elevation":"8.0.0-canary.708cc09c4.0","@material/feature-targeting":"8.0.0-canary.708cc09c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.708cc09c4.0_1598371024558_0.9781986892759869","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/menu-surface","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"f88134de787e01be86dc005fa9ad5bfaaa164d85","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.19bea2ad3.0.tgz","fileCount":40,"integrity":"sha512-SQldtcjdiYIuGhECW18a8NgAkD3BJjJrxxcLP3f381ru/aUsmpkydghvg7+o3Blcan8r7qhqny/RrES2EHjZsA==","signatures":[{"sig":"MEQCIGkKyxgrYK6BtimJv2h9VpBCQiewXooj5Vvj18zS/gv7AiB7i8BS2wQE2sEjU6DYHgwW9lYiNA+irESEfsfbDCMyHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq7eCRA9TVsSAnZWagAAzK0P/0/71ZH4/rMW8flYkleI\ndmLyUcf9b4VR58LZoFg+g0JTrhWjP4bhBSfQ1ko0m8W7I7x/LCKqt13Ye71B\n7ojft1SrdVh3X99jfewUzpNc+qPCSxA6saQ1yJTFW1FpkEOAUPUM9YwdtpyQ\n8fVnuG5WJObJqnUd1mryyo85sHL6hJbE9NItmdixJ4Cq4uYAzQdCFOIS5IMJ\nuglrTAHaPy9LAfCsO+OWouyFVVzVILmqPiVXImzKze302Qrp/Hj2Ou6zNDVt\nBfNdik6YQHfTJ3V8XR4YyTg6/vfqx1oQsavUFrM00aWHmCJJfRstwFitq3rY\no1BeVOXTYXrvdccg9ebK6CD+/1EZCwGIMXlVeD5MhHDzHYzgVS9twQUfQOwY\n27sqCVPID8YVyaMO7nSPpTjYTsGqh8VORRV/LWbbbRoxgNZCghNnGwoBhmqA\nvl0+lWHH2v1FMjmEZJJm0wh/jLHGRCiixKE3H79XsVtsFKgjhPlU4zgOontX\nmy1TknkY/Ot7JQPfl/kIdxHKqHCqqOEYwCCnauUNvi4Xh8x6h/fHA2ypP9YI\n3wlY42CfYkhyXuOzYH5D5sf8feKEke3cn49/8vnfPKiQ/sFt8ZL+GszMqTmm\nTj/zwaoVZ4oXkIZyREQD2C/LhwwkkveFo7wt/QfBBCiSR6fpOcOLzj5t+19s\noRi+\r\n=IPxd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.19bea2ad3.0","@material/base":"8.0.0-canary.19bea2ad3.0","@material/shape":"8.0.0-canary.19bea2ad3.0","@material/theme":"8.0.0-canary.19bea2ad3.0","@material/animation":"8.0.0-canary.19bea2ad3.0","@material/elevation":"8.0.0-canary.19bea2ad3.0","@material/feature-targeting":"8.0.0-canary.19bea2ad3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.19bea2ad3.0_1598467805910_0.06730380870633046","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/menu-surface","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"ef076e36855d27066cded50a15be3c57209de33e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.911014711.0.tgz","fileCount":40,"integrity":"sha512-eEe70hF6ga2wIhkpROuXxZ02O97kqFvUmMhflNZ5HqLuc/wbZqNjmyDZvzSmMt4TvkIOtPhfNZfQgnFayPorXw==","signatures":[{"sig":"MEUCIQDNpZqH6TyMfNLsXqUb6cP0p0T3+9POUbuVMOANbzbzRgIgSz7PquvyEm2iUVeu3kGSBgclVBGOxcmMLHyWMtDjc7M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9qSCRA9TVsSAnZWagAA+7QP/jsDMEeu6NcB/4o7ldUR\nArWCJ6OYUg3G61wqu8Lu8FZpQWDK7a0qdTXduW4opzVoUewn4PRLMHk3w2mB\nEqFmG9of6VrYrXvIyu+dZn9mFcxaLyrJ7MYWa0pQ6Z9bAbhO0L1W2THqYTat\n7AA6hTfr38d5dk216Gz+Cm0u/DnZ05HSM3fQwnSXi+ZSfLHb1AJBVYHaA6q+\nvfxpsBGD/UU5vgbDNA4TdYYR2CsFRo6oMq5qnmG+2Qi8SQ3if/xzjrqmJslz\no8NyCO3RnPhLBKzfzdA1Hz+D+GR56zs6fVo7/Zb3UPNelIwG0ujOhf5qfyga\nXGxyU6JZEJxq+n1gCQadYw4wa0eHY36Ly+VbZYwEkMJqPOU3KyIYkjemiJch\nG1kn/A4OA2QjIYEDE4WNnHrvf54+VKMdQcD892XIz7gpyLLuK7mKCA/q+Iok\naofD6i0SzbYW0NKARGVyJcq9Ry75GQXSavhYkX75L1mzZ2xNbfgKcYpMAIpW\nJa7brzPSMnX8EB2xkC6hir3in0jZMOb74QmTAAAt3rWYXizyLixClTwLUHEr\nDwZV7wZ6PqRYFiG+8a3nP1QUeX0ASBR4AtHeVwFWj/NbRXhnEQaGJQvEAP9g\nc7iJ6zYENXbVSubB+0243W0NsgbvrZ/7clqxIFEHUc5Og/FQ+JG6Zn+4IySS\n/MT9\r\n=pQxS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.911014711.0","@material/base":"8.0.0-canary.911014711.0","@material/shape":"8.0.0-canary.911014711.0","@material/theme":"8.0.0-canary.911014711.0","@material/animation":"8.0.0-canary.911014711.0","@material/elevation":"8.0.0-canary.911014711.0","@material/feature-targeting":"8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.911014711.0_1598544527028_0.3453532671445261","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/menu-surface","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"d98edb3c51d99f808829b89feff2a457151273f5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.d3387f54c.0.tgz","fileCount":40,"integrity":"sha512-vAWpVkWbINwF899vwyOAatxB+/QtZ9Spj3jfXDHyq0/HIiMJ10yBAriggr5snZ9WpnmxL2prJRBhp+QG7Cxw5g==","signatures":[{"sig":"MEQCIHIj9hBn0bOEiKUi327gA33ZTJsfHc7DdWrqiLPg64TZAiAMi32EcnYikDnN4cbub49zSyGFyiBRxmAYCwp1WZz7Xw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUViICRA9TVsSAnZWagAAv0MP/3qVbncML1aXG5PuzxvT\ngtCvifTQqCotAnsAvOQBg4PCKLVQjul5C8C/U0SXAQJRiI2/rWglmxZqWhm3\neMxyf5DizpIBHLHvEPWF3ulZR3BJDWCZBxbSWDgVENqVUqFiN2RCqVSqHCU5\nWyxnoymr941Mp8CPAU729r+JRLFRIlByafsv3d2djeApgNNZH1TonhWKoUHD\npmEl82qUOdZ5KxFEZxP8Q6xO440azUq/oZYz7WPy+2dAws5yP6iZxFiqSRV9\ny7eCulBfIBSeYfJ+RJBoH6Wu+RDSqMH5ujAga4wwQH3hider1zObsxwSQso6\nNwqN8DXWFETwRFCZQv3r66i5rHVEa18N1Wb9jc0XO75MwSzKrbTTluTFn9qI\n73e+Nh2AF+AeXmDTAKtgJb1r0oykW5Ibe2AjpkltDrm3XiAqxc6uBOHmbimV\nPvfYZbICoX5mRmkXZg0iwfkIQQBls4lV8iLKZhVoOHdJP5R7qTkx/KsHTxMx\nME1uRrjzSUp2FFk0weg3PL+Uyyj+L/Y4HSo0JxbhL17VILXyTFMH4e+LBbk4\n4SoHwQY5+lNfQ8ZUQrDK7PYHJJKbVKFMum1t3kuP58xTUO1zD5e5SP9kr9Ty\nG63WC4XdM0bVotSikonHD7Kunni+fJFYGz2wyWCBAaLfiGEFadO6gZQrB7up\n0ixv\r\n=RlCZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d3387f54c.0","@material/base":"8.0.0-canary.d3387f54c.0","@material/shape":"8.0.0-canary.d3387f54c.0","@material/theme":"8.0.0-canary.d3387f54c.0","@material/animation":"8.0.0-canary.d3387f54c.0","@material/elevation":"8.0.0-canary.d3387f54c.0","@material/feature-targeting":"8.0.0-canary.d3387f54c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.d3387f54c.0_1599166600480_0.5097663609528504","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/menu-surface","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"050bdaa86d0a3ed09b991a9984e35f14e8e7eeb8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.2ccf996cc.0.tgz","fileCount":40,"integrity":"sha512-VQjYvfkUM9oKS7Ji/85Qgi714gFaOdl0/CvaC6AHGzuA2V1Zdu32QpYx5OVs7UtVx/1oMzcJzmWyP75i8p1nag==","signatures":[{"sig":"MEUCIAc1dLY1Elug5mSBlcLOrvtKt7NCo8JGQuLhSGpSI0bKAiEAifv7pmu9VqgX2RIE+h3ipFaJeRmaSyd0DiFBeVlYDcI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUViSCRA9TVsSAnZWagAAHMQP/0RQiGTyhiQ2bsdIjjcU\nANts+C9lhOg+voa/QXfaCzRXdijWpo8WdUvR19eZVidqf9cDJjodf6zH9tuE\n1NCK7nCaAplFZWBrghXPg2k/xoxLSY27cx2VdeYUaugMQV1hNqMsAjNKo1Fq\nzzv0eNdgW3DdIROUox+JlvBSVbCSVNHZIjwSADwtFDWFsJCCVbI26anFGkMz\nDdN9Q/TbGWNr49YWut4LRpz1mtOXJvbXWtVuUnu7p3NOJeL5yzITYi+q+rEf\nNczGORBHiuzEyww5Ch1y3rCI701KwZfqtED1E0kDVAgmzGrstvY24Q5tS231\nAPAFPJ2DdJgA2b3N2ykKkRE9vIxrTQH8rV1X97nELCAfugEroihxLp9ohqeC\nekS6mGJUDv8/gOba+gQQpFAFuqTy2icKsh9gE0JTNgX2ljNQdvZMK90Yohks\nkOvT2UfbXnYcJaEVCq10E7m19Jci0V1Est+K6dsAgrVDBM+Zm7hwg/hZYu/Y\nXX+udmxbvFDh4C065hJV/AkCONm5z1q9Al6y54AG1MGc7BSoYdZfiGZl2l5D\nG5BkE+4DfCuMldNycFMBOqDK+dm+MpIEjAIOp0R4Xtudbw5Tsj9jznvG5Kbt\nDHl+k6RxHEN4dMJhSscUmEWnhzeWbawieZL6MuzI5pdN5V9OrzET0HMhFLMM\nAqGm\r\n=DXOt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2ccf996cc.0","@material/base":"8.0.0-canary.2ccf996cc.0","@material/shape":"8.0.0-canary.2ccf996cc.0","@material/theme":"8.0.0-canary.2ccf996cc.0","@material/animation":"8.0.0-canary.2ccf996cc.0","@material/elevation":"8.0.0-canary.2ccf996cc.0","@material/feature-targeting":"8.0.0-canary.2ccf996cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.2ccf996cc.0_1599166610161_0.557110772824934","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/menu-surface","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@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":"29ab257a69ceac8960008cb5f466bdb666fe6f1e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.744bfe5d8.0.tgz","fileCount":40,"integrity":"sha512-g7oK2M3Pg/fWKA1BbuceF+N5+EagCBA71k/2YBMfMoYA6mPFtEDpru+krHn7mvUs2GAC7nPnkjPk87fjAmxkCQ==","signatures":[{"sig":"MEUCIBPvRZzwpy7YEJwtFXQ6Wy9ebCwDFjpp/r9HpQCZ6pekAiEA0ulqvlXS0hEF/lpDFId7LHq//QoWwtrIN1gQCIKHyPM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVjXCRA9TVsSAnZWagAABf0P/iO/Ue5RzTOc9q62QnpD\neE2WzWrIEBtowup3CekkHxiIa8/OE+k78C8xsgqvQeoDwyE+e67CHk3R6inU\nRvGliNaSLwURzbMY6InAv67yg/MI48FTdgIy8rzsj7OLuKo9eYNUGLxwAEGL\n6cM4XExInQPs0D5DSjxBhe1lGvwDr9E2twwDxuqcZXNXv/kK+lT6au32TErn\nxWn9B9omdsSdBx8SH1eutEKJYm01aTRJGJCEIVPWcb93UKig2bHTbGLDp0lK\nVCJkU5FfR5mS9sQlGMpQLE69dtc8D1+Qs+3tc6nPoncR/WddlrTteeOBLI6t\nUCw+M6mHCzzWKKNRSC3XXqgSulaW11Miaat9qxF+MTxAiCWh38hb/lmlY1bS\n1GPX/AoVx0GibEFm61t8BBUZiIYlczT2/KZoTKikpSJOhSboDq5ubSyr0vuo\ny71p4SyWAnF3xEpqRF25mGDI0+nkiO7gx0nbHad3XUWwdqSWeiSHnuLC5HKI\nuda+RSic3bf7E9gE173M2xWSfIazQSFJ5RIRQFUaydRhQClcxvKHRxTtH+2p\nuQmKB3p3ZyE7A2I9D4Uump9jVjoJd5MiikI72Mc3mCI4A8AObMO1ILIDdZcQ\nkZV+TzHGda51SKhyEPCxtRD8K+4Pj++XjXhoajHCZcl8Q0Oe2zXVadBtwjHl\nqwui\r\n=Gxs4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.744bfe5d8.0","@material/base":"8.0.0-canary.744bfe5d8.0","@material/shape":"8.0.0-canary.744bfe5d8.0","@material/theme":"8.0.0-canary.744bfe5d8.0","@material/animation":"8.0.0-canary.744bfe5d8.0","@material/elevation":"8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.744bfe5d8.0_1599166678742_0.8133040682825345","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/menu-surface","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.78da96eaf.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"06a3905d0ab037c1d69c8c54e6712d0db246efd7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.78da96eaf.0.tgz","fileCount":40,"integrity":"sha512-qEYAyk/GuOjw59n1WmBHe5+VjYv5elfekAogtrFItCXY3bMR6nagr79w3/LD5LHdIbbcKx20VBOBFZyTUiVS+w==","signatures":[{"sig":"MEUCIQDHAWw8eh1m5c+AK77XIdEx4+3aKkakOqPb9GWBalHxCwIgKA80q4MLXIDK0E+HahN7cspnW4LV/zOWKzTzGrvHLoc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9fdCRA9TVsSAnZWagAAwqsP/2Bs134HepYnQqI41kqf\npDjoGrV1VOnQJ0dt/q9yHz/sYK2ee/gCw9WDzEulem37X46iNt3zYlpfAL+c\n58Fwt4rqe/mmMRcXiZ55HoIaKEdoJH5UY4YogQOkWbBYMvXUoNY/u2BiKIX1\nvSbhp4sQja8sz0lAu8khvJ5GuTmH7M6oaHZLTN0r1P8J5I7jsEtcoS0SVStX\nLPXmfhpK2ORZWRJUvEX705og3wqnovWbWSSkLqqwA+o44Gw57s54qdysLaXk\n3Jeq6Fjot12kesrePoZzCpXXgbByJ6aXvVLTFnzogNZtfZvETyAl+ZNBnsGp\n0iUacPqTV/ptWLQ/i46OnObGEeCZKqTSpWSrHs8kVfbccRtuPDydvwV1SyI5\nbSY1nFhXM2uzPE4ROykleU2tJjGLKNRB5blugy2n0IjcaD4E9bQzWj4MUUnT\n1265whdfhHwpr6RlmQ4JK/tn5jo7myaBeFGUsBU5BS7mzHxwEJLtU01kRUFk\nZNJFOlL6idhhzsmFL33aQtdd0/Sk2p1ERTjHWAojdekbXoXxJq/tJxcbBADL\naJNN8RAM7ekqfbLD/JbE6HUHXELuz3fGjWmYpYmvzTf8Sv8uOJFZkp9Ea/ER\nIb+itYOWY82FNSoPRMUVgR1z5h6K4K1R+ESEZOt/jhJGTTkhGW8NCQAj76WX\naQ+o\r\n=cmUe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.78da96eaf.0","@material/base":"8.0.0-canary.78da96eaf.0","@material/shape":"8.0.0-canary.78da96eaf.0","@material/theme":"8.0.0-canary.78da96eaf.0","@material/animation":"8.0.0-canary.78da96eaf.0","@material/elevation":"8.0.0-canary.78da96eaf.0","@material/feature-targeting":"8.0.0-canary.78da96eaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.78da96eaf.0_1599592412807_0.5736423727541533","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/menu-surface","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.b0ed593cc.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"880d88d58980fc334574bcbf292c282825a11e5a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.b0ed593cc.0.tgz","fileCount":40,"integrity":"sha512-2udnBHQN4oaBXYeNIqUamYWGVQipZPIdTeU2pEoa6YPrnvNHQ2XSl5nSnRj2Zmubv3GYGn5xNeIhSO7qIFAWrA==","signatures":[{"sig":"MEUCIC/5palrLelKvjvFSZgmUEmTjdtIc2/4VZULfSoTEV4SAiEAj2ypAfFOGX+NtMMXp5PEF839tN07sSGghGBPyaEMlSk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHNLCRA9TVsSAnZWagAAJjgP/0cKJTN7BqmBhDlm71Ze\nJYW9Q/RBno+ChIsk+0ScXbeZJzSOJqzx+KapPERAKkBf18XgiTDaTq5RO+NB\nI90hxUzuXwABcAaBW3JGFgv7PY2ZJ6ZXgXMgVdQNxNvl+ipm8iCwqaxBjSlX\nXDwc+PsU0DYdz5FVaOz6+od1BKSGhQPaYQpUupoL7G+2EShjUcL74WITIkbA\n7YrKIL91eg0hykdqF9Jr8cg+IvDSOZvfDO44IhpuAYdD14MbIejcakhwtpoI\nA9xKOgTNFr5gJh7W/tahSYM3ZB5tiJ821gt6xXJWIQIwpRPRYvvZddEf5EcW\n3fcQNHN3/PGOFq/BAtE5yFQs2KoSsT05uNdoVhTIC0KjrKebaObKanumLIhU\nvruUHSoIGnoE2mvpo37dL7YoCdXnUaOqYlbVvIx3mk7iXDn455IDZUpAiKP8\n1TVc8jjbSYLYc8nK3AIKeIf7jWdIsVaWmihytfkODtZXp9YdozCmaq0DfzCl\nxRkuH90xRfOCZ273t34B+/1rAk39K02UxrZ0diUdN+8dshhVcd9fkHigT+iL\nwPBrmPSqQok9PciwlKoliZE0XgmSkxJUuYLDYLvTaFLVuvc4nBtnN1lLRjJA\njB8OMNuiEMa5m1VXPl+XybVgDTQWS7H75UhjjnHQu+HK3lDhm68gQorDbZug\nWGRA\r\n=fNMR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b0ed593cc.0","@material/base":"8.0.0-canary.b0ed593cc.0","@material/shape":"8.0.0-canary.b0ed593cc.0","@material/theme":"8.0.0-canary.b0ed593cc.0","@material/animation":"8.0.0-canary.b0ed593cc.0","@material/elevation":"8.0.0-canary.b0ed593cc.0","@material/feature-targeting":"8.0.0-canary.b0ed593cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.b0ed593cc.0_1599632203029_0.9060456895749558","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/menu-surface","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.85a1fa9ea.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"2644e72c1093ce1bbf012dc4d2b52603c28019cc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":40,"integrity":"sha512-T6AJtCvsUa6BVz5p0HUmaM2bqlLZixiI1/n2yC2oteXryRQXngQ4a1g2uz+EmkQqx6/dhGEr1nMLinI0jm+1yw==","signatures":[{"sig":"MEYCIQCnMsOc2VA+qX8s8eKzKD6ev+j6jlOGhn7WtejlzgXtGQIhAK7qWlBKbL6paP/Mng+0x5XUXsaTjaPbw+FMd9UqMtEm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpZ8CRA9TVsSAnZWagAAnHwP/0OM7kThd6Xg/j03wKOe\ntIPRAJxwjKUeChAgBBm2J8yHO9+ExW+8S1ITsKQKtwhzLboai0IWOzkiWpda\nH+iPlID3RuqkV9HqYhmFliFCokVy8YOQa3EVcdlBmybrkH6BOPWhV76RIXAO\nBQHCw/iOOEC5KWtsOCLgp1NYgcE21rkmbFyK+U0vFhBOJmgAPkDwQHcvx7TJ\nFBQXH9XbHZMtaWJvARQG5PNbAgoEin8pxqipfYlds7zd058At26uHvTFwiHd\ncvv7MjKxVt2N75am3gvoi6vakxtpCa329Jech4RxWfYcCGCuPsZa9V3IQtzc\nl+7eU87OfOvLG4SwG8OtPDY7j6xatTIbcYEsIvC6hErLY/sl4pEUpj/yN9oN\n4ywxdNbXJ1fqPabuZr6M/0K1VtgIe5DynIc5Umw5R6PlElVJFOlxnby9bJ9j\nSx6f2ub+YHNtCisMWUOl625X6AsMZDACRpyt4Nt9y/fGuOeItvWIVQCUgnMg\nqTCU5CT3REgaiSqwMPJgg8MEVWy37YLFSzwp1XHQmioMHqkW+IDpEDs6N4ee\nRhX/PtcrkaMwa9CgaZ/wO1KjcdhqiUlfx0cxFDuIJ56I/e9KnW5rx3TQF/kQ\ngjKNSc+ZKlgbyTVEjPpoXsH5mmNLHhkAb0cHwL/EHQiLAqF95QJ7yGne59qE\nVc5q\r\n=LyTn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.85a1fa9ea.0","@material/base":"8.0.0-canary.85a1fa9ea.0","@material/shape":"8.0.0-canary.85a1fa9ea.0","@material/theme":"8.0.0-canary.85a1fa9ea.0","@material/animation":"8.0.0-canary.85a1fa9ea.0","@material/elevation":"8.0.0-canary.85a1fa9ea.0","@material/feature-targeting":"8.0.0-canary.85a1fa9ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.85a1fa9ea.0_1599772283887_0.1671880099196219","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/menu-surface","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.0bc41a9c7.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"975b71398d7bc5775418d94e2cec91f66b236278","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":40,"integrity":"sha512-+g8XdaMNN4RkSnTTYOqdxrnmVEgfUPjQOxL8DAcqOs4lokmM89HG1vwyYBIan7tU+kIGEweD5uEYZIQ4Yc8sag==","signatures":[{"sig":"MEUCIQDVzZVitpnwGCdIKnAAPrOOsX+1oy2I0KrFz4zY1ML77QIgWDU6K3kBRlcDrfq/EgAJ4tX0nMZdgXngOTp+Snok0wU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7juCRA9TVsSAnZWagAAQJwP/3TO+TQWie/l7zrGGsvy\nRLRMP7WH/cPw9cEFrMkz8NwDfl+oFL07gzx0IjfIWlHywsHiRRdlLaHMTnXT\n5FkMi0Lp64yYTDlmTXiet26lqPRtwsGv0Vz6OuvQpd4A3w6hDCu7U6aunt5E\nvvIHWt16FZeV4s9t4w8scoZC08eRAnTrZiee64yWHUP1UzE1OTbMTGZRr11y\nZChcm/hPoSbXCX4+4cSGS5sC7F0ueBsmESt07Zf5mZitUdkbNbZuhxS7tWgt\nmc6ahQ0QWk3cnn/IxKoXB3oNH+NeaE1aMbRlshiFn49dgb79gHNzxhftZ+Or\nr0Ao5wTdhDHt4TfjmGqG94XyF/G2PkoIZopHBntM7whfXXHc5jEV7B8tcTJP\nkTrhrepDCKyoScOP68YS715yqGq/azExy+m+pYe5HjRpZ8UbI94LFhaUSQA7\nMX5ZCONgYABxwkr+fNTR0mKWLOs54FHohy7RYaM87ha9p7dEZWtRQkfaMhU9\nLCEJihXhFUW8hoHXLBV6wfjem/swCkPqJSirl3lP3qVUqXRAhR7dg+E33jkd\neEme+FykBCfYPquj9En32nE8LjI1uZbMwmwHhvEXvJjONDu46eyP2WfSt7Yu\nUmhGP5BGX1t3EPH0qKusxlnIiZx++Kq7AgvM59wwBN3x2dA2G633Bm6Sqq3g\nZZjP\r\n=a6AZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.0bc41a9c7.0","@material/base":"8.0.0-canary.0bc41a9c7.0","@material/shape":"8.0.0-canary.0bc41a9c7.0","@material/theme":"8.0.0-canary.0bc41a9c7.0","@material/animation":"8.0.0-canary.0bc41a9c7.0","@material/elevation":"8.0.0-canary.0bc41a9c7.0","@material/feature-targeting":"8.0.0-canary.0bc41a9c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.0bc41a9c7.0_1599846638348_0.9827815123408246","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/menu-surface","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.fc0eb5013.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"9d9b796e94bc4c964d810a8ccc8cef040540d47a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.fc0eb5013.0.tgz","fileCount":40,"integrity":"sha512-DcmZgkNaIIrNQL9jr7cueZ8BVXgRYan96a7I1APgrVfaVmDVEZTMzlfxmBNUY5Wd5NNv10XfHYpdB0ataCIsoA==","signatures":[{"sig":"MEUCIGwBmx3CF/PvtvoMdqU1U+u498+IkKuijuZAUs50ABtZAiEAq70hfejOWbwKfkR+T8Jb0UNEYMBJsFKY8RNHuJBHUgM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9ZpCRA9TVsSAnZWagAAVpQP/AsnQ/p/skzlRCPpP6c1\n6xEQiSlJ36aT9iXXaBrpZJwroBXTr7Tgi//UdoK/WIVu29xejRusU+u9u+SK\nJ9+S+QqBQKGAVbfznr1AwdnKngTY13R75A4fph65cWDh4C5KmpdFGhSHp0Yy\nZzZBUsgz2xCsF76N+fxTOzL5NK+6hIDu9JzsABbXuNO1z5/Lcf27FxxtlJ6x\nkuQ/iOcJzL/dDjB1dgnoRBx2Z2YtWLeuHJsFwdOqtItdrwyt9SEZlGX5ckST\nW2hDciuspFtvTmOZ9aaQUbDrwMtIkEOCCa8MrRV+wNLRxEIrY+0psi0VxTEW\n5NrsVzQ1b2sVMxp3RtCijhQtteTehn1zDE+LczDEzhzKx2T+WI5KpF97ez5f\nPMzk5PoNWwBNbDmAcvf183dU4gcv5bsNNp03zdylmydT5tKBfDuKNHbl9yB5\nTn2J/2JtisVJ+s5SNSH2hplP4tHQAFn2uUSE/BI7RxqTsjDcUkpX751mJhAa\nN8zK+vjMUZbLb6Wz/8VgTvEdgxfdpMpXnedfqR2jMM5QQhu67ggKtzEn+JlS\nNBMZKUmIpQ8ehiRopEOFvAmPDqPOsUlCev7FCFwV3CEmjGMw+y0ka1Tv2oQ/\nGxOX0tqeIZW1VTCHZPz/ARhUT8vLN8Ve+rq0WUrUhzpAskWczo6iDKE9Ga5Z\nTMsC\r\n=GMA4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fc0eb5013.0","@material/base":"8.0.0-canary.fc0eb5013.0","@material/shape":"8.0.0-canary.fc0eb5013.0","@material/theme":"8.0.0-canary.fc0eb5013.0","@material/animation":"8.0.0-canary.fc0eb5013.0","@material/elevation":"8.0.0-canary.fc0eb5013.0","@material/feature-targeting":"8.0.0-canary.fc0eb5013.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.fc0eb5013.0_1599854184581_0.3589175449260167","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/menu-surface","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.319bf66de.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"8df527a791e499829a23d07da2cd3f40e1716873","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.319bf66de.0.tgz","fileCount":40,"integrity":"sha512-lGUptsR+JkxYETANDwu5a97VsedoVPvzfm9bw+jmmqXWIHyPm3kOS9hXfdU3kIwcsHB7Gpoc4uv/h/fFEo3XKQ==","signatures":[{"sig":"MEYCIQDTlcqW+tJ3u66EGaLgONhc3hxVA99X0GEghsLgy7Rb1AIhAP6Ys5+KuGppNM/gxAmgOvNER9RbHupYvGxIVlCRiHEZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAQBCRA9TVsSAnZWagAAXUEP/j8BEutKMuRx0ljdW5m3\nRVb2fxIfXZ94ebIM3kP03HrnRHexkawn0B4UkU3XCSv33OGczJXVEbw69kKY\nveEIYIB5lAC7yj68rvJOf4bX3MPc+LdovI98uN58fT8fL0syPM5ZgHZtDJYy\nTd+eoVFANNxJT0QS9F52bswswaAjCrZJ9sdsH1WrOoCOjPZx0Tjoqs8Ml8e5\nW++KV2ONxJXtL9KZtBs4qSVCV2nUDD/EnBwTFC4OTolyYF9pKd1EWB0CTs4G\ndqAr/IrwYNcZRvtE2+2FTzntDptyRBHR64ejUcM88kakBaor1C5LXSmCmolb\nBVFnyTMSxUmvQ/KKC8TVHW73XsrnMIrv29IXikO1M1bVVKkmF229puS2OU26\nTg5nBl4jHeNUUPcgp65mEEgFuGwK4g9hk00l5qtLUHKHAL322veJ+GqhURrb\n2d+yTFMH8F6yHBfnNOtfLw3kugP6l6QaSbvh8Hk7EuVZgWtKzZOYMByCBYTd\n0jqxf0KA5IwnFSxztJRBgWqknmBXup2VrcVdh2vqCpORUb50EiIi+We/Xp5U\nHmH9mw8L9yH9CYtRkCzk/hFiL8p2vWLWO5pk63bKGpabbSUIk/e7W6gvDgNU\nN/MQd9zu2wZy9DS2/DcVq3jl7fUCljkcMs6UME1Hjz/JS586Qx55FMP3MRm3\nM0ye\r\n=+Q0j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.319bf66de.0","@material/base":"8.0.0-canary.319bf66de.0","@material/shape":"8.0.0-canary.319bf66de.0","@material/theme":"8.0.0-canary.319bf66de.0","@material/animation":"8.0.0-canary.319bf66de.0","@material/elevation":"8.0.0-canary.319bf66de.0","@material/feature-targeting":"8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.319bf66de.0_1599865857005_0.5892929685118709","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/menu-surface","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.5bfc305ec.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"00702c7b59c0f7c12a94c67d9841dbc4ac21c8b5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.5bfc305ec.0.tgz","fileCount":40,"integrity":"sha512-zzruZYLAuNC5dSA957BxuY8cq1XVZuLE8lTsK29ITlDJGIuvh6bRwTGpAt7edTBvvoFdJnSKNfEm68CG+YrTEw==","signatures":[{"sig":"MEUCIFXVfoLoFIOw8SoYtN6WeXaYqtORjsl36wwOwK0FUJOwAiEAh9IIkd4qnuRB9bu/yWTVldhN/VCEXpyODEOiBTeCyeI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqSpCRA9TVsSAnZWagAA6eEP/2k6WLWvPBFz5NKraugF\nGFhHbxHRFH0/x+oM4m1DK71RwdqLWkKkXJujQ8/W5aLsDKRLT3YD3l7PD9xk\n0JesG1WRlYasTXY1TH5YbAVqpVDNohwHAHF7yOueGQCcth4oMYrXTTOz2amP\nUGpqQ2IxLWa+pRVSroedpPYdKJ+I2AWV1Y06FMOETPQHJCqzgoUmlR900Phs\nl62qmtwP8b5OmLueQqoUyNGAd5wS/JY6AQctFsVmIV6zpBxOFg2nuwvf+Q9p\nrJ7MqCOHocLr4GOvooUP/jFRdsxGtLATXWwRQumhp443pfmFgi+j1x25rQYc\nhHZEXi+Ah7qfHg6tcKcs9uzKIm+axxTGg6clFJ6hcYgvwDzIqebp57NHZdEH\nqHaU8yWipgI4Mjg1I9SvdpaNpRlJox+2WMjBFsbHzM5R915iruwyCVJSRJ5E\n/0cUfKLWnRy0P+HsZHLH81kX60qXYFE1naz+L5o1mJPbk9pcqKnKN4PwPgDZ\nGq+pKw29NcKV0YIU2d8q8nfPMJscKDujFmC2drmGblmT5dqR8q4H2k7iFl0Z\nxdWXsC3swsEc+tcnOcGI9p0/ddjv+OJ8kHrNzRvG19nvObFmTgtA+sVlFaLH\nz1feyO1MjnAOuRDN7cOBx3n+nW7l8ppSaDTq/dPk5Z4p2gaZMqlrIzHeSOJM\n8b7X\r\n=5Ndv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5bfc305ec.0","@material/base":"8.0.0-canary.5bfc305ec.0","@material/shape":"8.0.0-canary.5bfc305ec.0","@material/theme":"8.0.0-canary.5bfc305ec.0","@material/animation":"8.0.0-canary.5bfc305ec.0","@material/elevation":"8.0.0-canary.5bfc305ec.0","@material/feature-targeting":"8.0.0-canary.5bfc305ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.5bfc305ec.0_1600038057464_0.6832781482714865","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/menu-surface","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.83d83f131.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"654f2aace9990ff46ab743a13bf0fc86c47a4f27","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.83d83f131.0.tgz","fileCount":40,"integrity":"sha512-NdfuES/i+2EtgmwKvLo6TJPHFg2rxPHpKUjW1CWcQYYFKG0r6UGXXaDIUUm/025cTzDqtO/d56FTv0zRJSGMfQ==","signatures":[{"sig":"MEQCIDuRzTaLUbdWXqlXl7H7mpOpRD5u511SaMQ9FFVfYLLwAiAh6YTqsDHo5euKrzbu+JLWwAt8wsHkT3PZQx4sIzHBSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXrpWCRA9TVsSAnZWagAAtrIP/iBleunBZAOUphmrlynl\nmhVF87gIF/ckce0at7ev8QSQOAnuTgq5v9qZVuiRdE+jFJG8W7xQApSuZhdm\ns5klewGX9CUBJtWy8umDoJ+8P4hIxYmKtiL8KZfKZcnZcB8jf//sX5xTAv/V\nzhf9dbA8bDzhArMo2V/fa/YlAePqXZVP2aj6altnbrWHBLL55lRi9BBHRq6w\nWqujtv9vP/+ces2IZLdGzI1SbBs+QBD2BEkec4UxW4umrYTw/ox61uKrgfm9\nvAtvs2FXi6myuJgJsNuHmJtLKKfNCMRTPb9FoGJilZWbsUeYr7V1sFhptpl1\ndPfp3oDyNFQZCKVL4ojEl+I9K8Iq3p7IZlT7t9NReD3KdaLDgyxtX/jzgmyP\nRAipb3MiFtY5rwJCbDvkouVm6uZSg5IZ/RIXw1ngD/DbYElX4a6JH6873Iv4\nRAhVhrf/+wUaZ2+/WtyhPBSAl1NyBERxVZB/UaU0N4K+aEiuKE8Iw5KyTNqb\nsOYOyK9uAJrhHMlwzXw3kymw2PILeaP8BBQKYrz7mSLBx4qq5uzEaBR9bCLS\nCXLDQWaM3EpqPN6Nf1KUIfaZ39TEK0S1mk8P1pxVXL/DO/qKBHm49DVZ8oxB\n01DWUMG+ldGKlcY1BtRhzHA4tbAtqGxbqCr2UMfxlPqC4Ax664iLy8bxXNp3\npYVn\r\n=xQlT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.83d83f131.0","@material/base":"8.0.0-canary.83d83f131.0","@material/shape":"8.0.0-canary.83d83f131.0","@material/theme":"8.0.0-canary.83d83f131.0","@material/animation":"8.0.0-canary.83d83f131.0","@material/elevation":"8.0.0-canary.83d83f131.0","@material/feature-targeting":"8.0.0-canary.83d83f131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.83d83f131.0_1600043606296_0.46245030836491474","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/menu-surface","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.d52b165b5.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"e725abae99059f93bd486b3ce49543418c027277","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.d52b165b5.0.tgz","fileCount":40,"integrity":"sha512-MAR0yNr08DvDpZzuFNgUSxEbePHWb/B7xoKUcUsFJeBtTmoqnPj+MWdaPMWmlU656k6txtYXGN9vODnRMQqGkw==","signatures":[{"sig":"MEYCIQC/ZP41eIYiCaPJLFLa3yPIpoY1pzSIS5DsDb5/4RQCaAIhALyzFjQbufiKbyBmlbnmiQZ8aTja5v68y55LP5ZB/USm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNXNCRA9TVsSAnZWagAAK4kP/0eeAxEXvUQjxgsIciFO\neXnOVesFY9m2kbbhu5cfwFyAXkdB/zgNgKIt6somrAr3PCCy/MoOE+jyFDmK\n8NZVrfID0mfrFak5ycJ4CwE847Hm0Emt/MI0qtgLBM9+IKwzA/qtQjw71uWt\nM69iJgYv1w1YqlGqzbO2a7VR2mtqUs5QDn1kNxZHGirsuwRGVCTBnZA07v9X\nIR/MnXRj/M5TaXirzLxhYco7Arm4ilbgwvCkCgnNPX1gh/beQ9bohbY/bw20\n+rf47LOSkz2Twkojj0s9xhMLFDtt4eaiYmryayzOM65Dgq0ssltDTh9lOLcA\nBiNrXO0EpFZnF3sXHyyHoDhPB42jYCIlCl9UpnIBQRgy5/23TJXTZKixrbdw\nxGE4aJbDxscZ+qegAtclym3riuDIYBmJQZdb+AaAwWyLZXf71cY92c78Ncu0\nze3PgPfhADKp8/dTUi/E4vj8foMw4rD2OjawZwLu74B+lNZwthK8x+kAzSej\n4j9y7mnrMCz7jozg/QOkZPIM3QDF2/gYJSGT5iJ1XaYzCMnDF7a0Y5Smw/J9\nu+/zd2w6z+9bB4fTdcO2AVyfMYuouF2FNIv3dZUQtW+dDsTesoyQ/fFhhhDp\nGfsvpV5eQI3KWQaTZHGBI0QbqDg4+FaddDVHv1IGc1Nojv6r/sD7JEz4hzEx\nTWj+\r\n=zBoN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d52b165b5.0","@material/base":"8.0.0-canary.d52b165b5.0","@material/shape":"8.0.0-canary.d52b165b5.0","@material/theme":"8.0.0-canary.d52b165b5.0","@material/animation":"8.0.0-canary.d52b165b5.0","@material/elevation":"8.0.0-canary.d52b165b5.0","@material/feature-targeting":"8.0.0-canary.d52b165b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.d52b165b5.0_1600181709538_0.6550844940481926","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/menu-surface","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.a831d4799.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"ad418aec84ead5aac17587dea4ad9ba6c24198bd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.a831d4799.0.tgz","fileCount":40,"integrity":"sha512-thhhIe2IoEy22ubTLvbTvzSAVJ14v0eWlvgXKfik3xt7wW7GmVSvMXYxdyZtXlkj7Nzqei+V0Zd97pgbR+oiPg==","signatures":[{"sig":"MEUCIQCnujtpKEQpcp/+wqgCh0J1rojubMCuDW/+DTQU/DHBWgIgLsf3KiMONSwb7/flezewOX+x3u1vanUxRyDYIiH2CIw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP9nCRA9TVsSAnZWagAAMhsP/jm3e+ugV0q2gBkQAw6s\nWQ0pwZorRPCP18Bnpp7jOXIV5j4U1Bhhnb/tVhgDcC8whTcDlaEJo4zMSrSA\nSsbpTUXYz6qg6/3ULugazjPzo/90AGKdO9BIo2cQCj8UoX1EfpOR10MWINm4\nYloaFlmL+gMWC9mlX3PpYGLGJEBjyBgOz7XNiosXiUxgRZJ41rzP8umiSUwt\nsRrCZa38zPmJV3Cg2c3x3kSBSsPpth3lsZt+IirdTYKNyc7zafOWpPFcijdO\nSFRni5zIZ2074wb2a5lUbLtUCVWCqRwc/Mz54jb5X5EQl4YG1zHRllbrPKcP\n7uYvyzqdFs5U07LLa9vbvBNwuPuNvDhcbPih5SYfAqKFnUE6J9pEuXXVdoF1\nmO8h32az7dFzjJZxej8ZHpPKs80MrvXPOmNupPMvY6gNZaFEH18ZiLbNqlO7\nEh6hCKSS02SQwLKjYLyBc9SY10nV4qnksEyU6VVYFx8FZaUJ7WJ0/9TuGnuz\ncFvCLIKwk2VJteUWk/HT2hB8qpHzE67KEWS4fuR6AfCGzg3cH4segmqYFrmu\n0Y7b5OjsNUvgpdMQZ8jpKtdUVZUG4zEFhDIAfbQeoUHgAUjiHkN373PWlO2d\nuOqCBjczWx0mGka48IUDMScPI6jPy8UwEahFlal/bJqyK5RiDzoWi4ypEaNv\njqkF\r\n=vPwC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a831d4799.0","@material/base":"8.0.0-canary.a831d4799.0","@material/shape":"8.0.0-canary.a831d4799.0","@material/theme":"8.0.0-canary.a831d4799.0","@material/animation":"8.0.0-canary.a831d4799.0","@material/elevation":"8.0.0-canary.a831d4799.0","@material/feature-targeting":"8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.a831d4799.0_1600192358737_0.6280739866480463","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/menu-surface","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.a306aa488.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"509c57917dc4a7e55de7747124cdb63bbdea8896","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.a306aa488.0.tgz","fileCount":40,"integrity":"sha512-qpI7zlH6wQIsFeX0gkFEreTOoW/nB+wmNiBauuBECHX7pdk7jQ9mSvFffx5hPzif3k/XLbe5PNguKi2itGwTlA==","signatures":[{"sig":"MEYCIQCKmLaNM6RNNPowJwtuPpQaI4EmipPtNQDdBTQ6caV/2AIhAPK4iGB6Hp7nr3vqGcfrVDSedXN3jsZv4ZGL9sj56/gC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrT2CRA9TVsSAnZWagAA2eoP/0HJEt4qCVlvR0UBUtJi\nIYDYO2VF9eAbgwDnPjgZkFxp1CAtIXvMMBBCJbUhvTr2AqZ/h+9G4RQVoBDX\nqZ+waIwN0V7XhmHLzJLzRfhcUeA0EWO1FmKHVt6mUj3Sr54+xJr656HQvL+5\nXS5LkzDmUnIneFn5pM3XP/cEZcopNArk/6YVD5G4aWC2gEYksJwaDdInsgEs\nNjUojKIH+yqHQzrVaVl623HcDKAIE+/SSv+DRf5QjbRXTEpMLw6+UWB9whmy\nE7WoJLon045qY79squfNzdav9ALFOwvWqDlkoTpwJiUfz9J9ZWmnEFyn8d0H\nnMs8DRLVWRrYJFedKMkKA4g4k2kdd0ZqLds87eUYxN9zVN3K77dB0d8IUFtZ\nxTM7Cmv4fUh8bVzO0sUT/7NR31Jhvrc3ZFrvBITvYSpySkroVDvUv1AUu+tu\n86bjyY9qOatHuI5jybe8EVORvYrBCYdaBS+aJMJAWKCkOaESdM8YwgcpkdhS\nVTaxlAiNn8ryiR9mFZGLN41GjZToQ41iD25gC7mx3tDC5i/4Nf6KITt2E4GK\nRpidiZz+RsK9sa5idf+GW1Q6IPmUEhqMMYBnY8wtJu/0DL/Jd5HxZX7xt4ZR\nx9c57klE+unMknJVpU7N6SAVYfuiAdTJFKhuXatZNZ4PtoGhiY5kNr0AVQ8T\nQ/K4\r\n=Fegb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a306aa488.0","@material/base":"8.0.0-canary.a306aa488.0","@material/shape":"8.0.0-canary.a306aa488.0","@material/theme":"8.0.0-canary.a306aa488.0","@material/animation":"8.0.0-canary.a306aa488.0","@material/elevation":"8.0.0-canary.a306aa488.0","@material/feature-targeting":"8.0.0-canary.a306aa488.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.a306aa488.0_1600304374412_0.8925652542969589","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/menu-surface","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.fd608ff66.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"438421704b6eae7b0a8dde7c05ef242a2f718138","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.fd608ff66.0.tgz","fileCount":40,"integrity":"sha512-tmxjDMkaJSWW3tPnLq35yd0SWJYws67aWubfsm4lN2pP3OAI3MTWUIf/0N9ROdAE8OzNQVUelQ2bx0vgvNxFNA==","signatures":[{"sig":"MEUCIE1k6KtrNVfRzI5zvCMJA9rSYEjZKTFuV7DEGgnF6Q5aAiEAr1IaHFUymM7lgIregrX3+50V4hm7JPpkSlhVUojp4Z8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3IhCRA9TVsSAnZWagAAln0P/15HWH6bwoREFp6Ub6dp\nzYxJ1lJY1pNUtpNxtgjvI+arO1jfqTtpaSDdJ7AkQMlf1fOQJF9aWigd+hTU\n302v/WcGNKv8SIOW7+srPo0ghb+b3tU0z/6j7UR4LfXvpEBGSRcKq0gwl3a6\nDay/GSqjuZqFOavwhxB53+fRuzWeK/XNYni6f4cCs2aFeqA9gqnbBCnLFjNs\nlo/Lrj2SrsUd2FX2AQerwKPobNjOImvZRvAEvdWxEPZoIrEeSxwUsMQmR6A3\nSt3VAD1bJB9ga8yxOhWC57vv6pbSuGTTsPci8xSBV/KNYY1TGKt0DjizRb9x\njnZTKiTXTDFyJoVGDykaeL+nkYgJGkhl5+Iket4AENiGRQCnTjs/c+2J8+0x\n/2fJyarb6dpoTKIKM0YvFCjBiElM/8lUnP5CXaMKQ1LnWdU7qFlbekAIn0zV\nY6+juyoa8RsXxoPFhlglBOfFlbpwvga05BPaY+1CpKYBcyhwvcsez6QyHtgS\nAsbu6ZXJtfR5/ePtPZkXyn87a7z/VvaqjAb6XahPlXvDT4QISkRJNclStJjR\nY5r5MHP/1CgTd2PbXPwCqzyGlR27wECL6BRaLbwL85r7TZ2qIZx69tcYbJDA\neNbLIqjaMPRqo2jVYjmAMoXxE+zm4C6DpbwB96z+1UcYZ794Bp4EPLL8HncT\nKu4Q\r\n=3wcM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fd608ff66.0","@material/base":"8.0.0-canary.fd608ff66.0","@material/shape":"8.0.0-canary.fd608ff66.0","@material/theme":"8.0.0-canary.fd608ff66.0","@material/animation":"8.0.0-canary.fd608ff66.0","@material/elevation":"8.0.0-canary.fd608ff66.0","@material/feature-targeting":"8.0.0-canary.fd608ff66.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.fd608ff66.0_1600352801467_0.7696423702198785","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/menu-surface","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.3e435ba57.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"1be9c37a3648dc67c6ccd8808c94c25a8df2a185","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.3e435ba57.0.tgz","fileCount":40,"integrity":"sha512-zq4ObW/HijTgvWN3ukfuUC4UA/SpqRGqNFxXoZm2bHzNmWZJLe39zVH9YC37klmKQpxJD7QgFBo1eS6AXp070Q==","signatures":[{"sig":"MEYCIQCyo+99Fg6bzU+XMv7Hx4byiDzF4kBRaE65uNwXnZepEQIhAI6fHumDG9bROviUIcbGVq516zMitZQjthm7ck9yjK9E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3YsCRA9TVsSAnZWagAA8tMP/A2UtJHJmBJKt9hGAo1r\nnp4dgDN+IDTdOvewmmOMrEFDn+dWMYe1X84eqGPywyA68WId9I8FUb0ITXJw\na2TA3BpW5PZp1sIZka5dPJ1EBL5sJzUa1xYr/Zat6o6QMZ22sysLQOrbp3Ld\nRuE1ekO+rJ5dBZD7vR2FL1WzSnVoPlrXNWcNnusDbIacHBiuK4XIc5MUkon1\nHop1XW/ONcfz9Jnqx4yg3tagkPQVDR+Sj9BUlAOyJNq3cNbTqaE8tD8a4ZZz\nlQgCLnrAwUB5+HjsRV8TKB2FB3VdFq/jcMSIAaJo+bnTzlo6ENjTgQVnRiR6\nR0qIgobwQDMH6nwyiJciyUeL9+qo7wR8o44wucF95enfCuzmcnCv/VIF9nEX\n2hlDlamSsMAfYuGi3525ckjJpLNlvZCR18vE3njk6dsBBUoIht5c+ml9d4uY\nRzPuFo/tthyFDjjqZ6xjaQrPPpd8PHsncA0QFIGXvlao5/j5IlvVPcHxLXc5\nUllfDHeUVTnbhw9FTg+/24PpIMblsk0LxgUXDPWsxPbIAlVGVOAlAA2/hTzF\n23/AuCAZJ3VKhIeegHN6fU1wbm+lAap6dHisW5aCcqnllfCOtW5oZVJH44C1\nd/3W3JISB3SPl2gi4+GOGMaN7XQb/I/MfBS0vlpVbeJ21pQZRDwwMXY8kFbb\nHcbx\r\n=YjNt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.3e435ba57.0","@material/base":"8.0.0-canary.3e435ba57.0","@material/shape":"8.0.0-canary.3e435ba57.0","@material/theme":"8.0.0-canary.3e435ba57.0","@material/animation":"8.0.0-canary.3e435ba57.0","@material/elevation":"8.0.0-canary.3e435ba57.0","@material/feature-targeting":"8.0.0-canary.3e435ba57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.3e435ba57.0_1600353836375_0.20040530420026403","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/menu-surface","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.c250ec52a.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"e7dfa28724b41cd78e1db9083e14f2c0f2d6ba25","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.c250ec52a.0.tgz","fileCount":40,"integrity":"sha512-CtqqSZQ0wHufKzmkWjFBb6NJHM45wFtTSP4JHE700ywHy71ebsbcU/BZS5tyGMDjnHud6YYJMwzzAFAI+n9aFA==","signatures":[{"sig":"MEUCIFe/cg84tjR3xp5LhfPrC0nAUI7wgxd0nZzvUDjwEZmHAiEA++71qrt4uoq6tCyMtWtM/QgkhzrS9EG39A9yY/G1d2Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8LlCRA9TVsSAnZWagAAGnsP/3lrlmeGkQTdhPrhXss4\nO6LAwW5CGoL++fpghg7errVhafF3D8y0VCX6mzijtTpccUvGn9l+4GmUY76a\nSfcaAa1gfj+3WiSxjk6TGS+bjD2HnmniflXCxsAKDM2687n7W4nzvzG9lnYP\nmCrv81aUZbuJmHPHy60Lif7ZDhAn5D4qaoaW+IV91nggaBiJu+BX1Xt6Gqqb\np/LoY8Joik/rqT/16vJQyLXqDX68hC4U/kXC8RLkrgB0hiQAHVdKWWsGDF3d\n++Wt1SoCpIp8i0qglmFkJMylp9bqWsze82yf/p0RB5IbFdrsIvjo4Wdb7CoV\n+OkWDQLHqh/5UDwlD3iBKgk77CAUVIghCKOh8Z1vMBtyAFXb1Krs6eRLr5fR\nInUP8JodKFoRNa1HOuFXtTTY75xc54f2elbI+WabYSzlGRNqHYE9oM5MKupr\n+FUvEh6rQkh4hQONokLag6+vR34yD3F5MtI7DD/Myol937qldlg5Wrj5Zr6F\nmICK0U9X4Qj3dzfgNbx00McU9V67UqpRSEP8/XnQdzRr4QVgz/+7m6zbqmTe\noAxgfL8QayQV0jgufesCYHfQAfYGsz4A8GlJmO73vqpOKDO/oz6rmrz1NbBT\nFa+YkyWsIx0DiO4lnOYza051rK5zy5r6kxxPJ7OBQW+YL96P22lDMFsg9iqi\niIpq\r\n=hUx0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c250ec52a.0","@material/base":"8.0.0-canary.c250ec52a.0","@material/shape":"8.0.0-canary.c250ec52a.0","@material/theme":"8.0.0-canary.c250ec52a.0","@material/animation":"8.0.0-canary.c250ec52a.0","@material/elevation":"8.0.0-canary.c250ec52a.0","@material/feature-targeting":"8.0.0-canary.c250ec52a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.c250ec52a.0_1600373476794_0.8342432869044318","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/menu-surface","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.e34e411b1.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"b597f5090cab3c1392704bbe3fd2220b9985dc0e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.e34e411b1.0.tgz","fileCount":40,"integrity":"sha512-9L53kgSq4omYCwkFoKxRB6aa/4Af0iylwUhwQONBbDxJswK+uG0hQt0nF6lbFRGeiC3sIcp/IX6fytvcAwRBJw==","signatures":[{"sig":"MEUCIQCDtlyFCCeuK5mfDrQRS+ilUHXB2eodB7aSxZJ221SIlAIgcikOqypo8wLo8GyYR+H4KQxKNOlF381gmgpS8jB+kWc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8SdCRA9TVsSAnZWagAA/xcP/1e4oOzT5PXaNzbWuMah\nWGBCSOEvH60cwRcz/fVGNrqRTJtAfXXK1R5pNfCYDDtrReRNbG4F+Be9Sj+d\nxON25XmfsnR1wr/Ifo6uR3kAnlK7n3TgPEAec6L76VuxqvN9N3ApRsc+VJJk\nEbMwraQ/qcddBIeD9CfMJZWJVZjGlql9yyt6JLEMyKALiNYzdxrbrAW86T7R\nJTF0eybcIyM82WWsWtvbLVsv8bYbzq+ZSAzqFsRaFKdul020AOcP5YjjKhSt\nv4d/CYwO5W65lKSKShJBoSFShCFAyE4sh24A+eZPXRPjuuU9NkcZMbuZKqD8\n9YNAZp0fYvouNRlqghlT/cvLio67sXO8PrKCaPORGcScC8G6CMDElKeyZz8Z\nHYvqRu9nVv1fJ+Co31hUgGGO0T10bz3sIC3CT0eiNRwLd0LosKuXh3/QhsC7\nm9ShXmfLSWgkeKDrbU6bjB8kfiO5hUw+9nFG2WCi81H7lr7fRAzsa3qMECni\nF/QrENxo37GdFfPQwk2EN/HhKJgCUlKEjIGR57qff8x7s3Y+EuKykt1p4tx8\ngkbeH+NB6DMZ1h6wqXguWkjI0B0ugS6SreAInqmJiuzgwYxOzbqSndQPhtpw\n8fMCrZ1/Oxn/JiVYmnETGfZ/pxji9Ffg50wTMIwCyuc2UCu7hBe46pbMWv+d\nYmzt\r\n=vSVl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e34e411b1.0","@material/base":"8.0.0-canary.e34e411b1.0","@material/shape":"8.0.0-canary.e34e411b1.0","@material/theme":"8.0.0-canary.e34e411b1.0","@material/animation":"8.0.0-canary.e34e411b1.0","@material/elevation":"8.0.0-canary.e34e411b1.0","@material/feature-targeting":"8.0.0-canary.e34e411b1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.e34e411b1.0_1600373917083_0.9178918108291487","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/menu-surface","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.4e9343929.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"1d31e4f16682bb66f6da51c9a9c083db1f73d1ee","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.4e9343929.0.tgz","fileCount":40,"integrity":"sha512-OvjnbUO30ZxaudSEujFXtqwfRPCfrrcnYtQDMT/yk5ekuQhVKf3D7DZiInIDpzOzcdsXKNUA238HriRLryZ6dw==","signatures":[{"sig":"MEUCIHCOH6O+TSvaZHqj4xMWZmn9xoalNDLvGT4gamyHjP3mAiEA17mFv6l2OpcaNUhSP247qGHXrQgLJwFzmglOd+tqRtQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8qPCRA9TVsSAnZWagAA2tcP/23ulmaTDD+VpD9f0V8J\nT7wB5qFGGsJ+elMQNg+p4HGaUva7hVAV3J/huVLysVg/Ch9Eig02d9ZXr2sC\nL7AqKyNMAtrcsi0OR1vPynZ4rADNmWu/kb6Iue2EOgVBnZzWaJd4OeXu2s3r\nL4Pq0N0Laz3Qbk8f8SXWigXr5fade11hT586y8K2aYieeppx7s/2F4F9xnww\n1dLgC1wuJ0dO2Grtk4MO4e/m0YWGNVQ6S/cLRQNQY9M2Mo3VXONlCcjcFhjn\n0BOnObuZAP0yb9loz1or/j6RJA7waAbH8uJ1elORPVkQiGYcvz0md+iYYl+Z\nQsX0yvEPYerUu7MGBovxfiIfe2q4gOHXv61f9c/CRKz+u5ndI9THHSd/oXe9\nRpP3EKiaQXOskNhLCrCqpUq/D2cAcG0klJCNoBSpRcbsVW1C0QR+Gy0TMKJR\n+vPUqI7oa2ZPr/bGrBGIyqNFDmyG+HKEpmmLDwr5Ddzz9wUbHr6WIblCsEYm\noUafv/8ED2GND4AcIXQlYdHs3oK9YtzzbngCLoyegYZTuaFDBKSvNn3BdAIT\nD10XkV/8MgfPOlomLhlQMZrzfToBaYWvapC8CNiH4D9iMpH3eZMXbEyR6Q2F\nrIOkNGv73H/OGu/eIxThtvmcnkBHoozZiLjS0KU8bbfsZNccjfdxfcVkoOBg\n5lQJ\r\n=yx30\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4e9343929.0","@material/base":"8.0.0-canary.4e9343929.0","@material/shape":"8.0.0-canary.4e9343929.0","@material/theme":"8.0.0-canary.4e9343929.0","@material/animation":"8.0.0-canary.4e9343929.0","@material/elevation":"8.0.0-canary.4e9343929.0","@material/feature-targeting":"8.0.0-canary.4e9343929.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.4e9343929.0_1600375439444_0.4945224543513773","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/menu-surface","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.4e5c350c2.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"03ab0d0cd48f0d4baae2f9a022dc2c50091125be","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.4e5c350c2.0.tgz","fileCount":40,"integrity":"sha512-IVN5i6dNDlvTNDHHHT5T2XPEQ2+lHyNzXWVoH3dFDUDk0bOxrl+M4fD01uYy9M7RiISK3kw/3Xku3VWo74WVYA==","signatures":[{"sig":"MEQCIDjhF8zIzs7x5gqjkNqiTSXhJG9nV3xfGKJdaFls76RiAiB61qpX0k7GYeQ2OTX9cBPvwAIaifbTzfnyJ0gBZpPc3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaRfRCRA9TVsSAnZWagAAVv0P/3Wisr1Hf/cN4B5LnJ00\n+5b9tWsf7UaJP9cf8SdDg8s001MpWhyE7aa9JYLnWmq56xdqevuYE0afYy4Z\ndJvNBXB/9LBjrXpDr0+KYiPsW7HCVHLX/yZUv1Czxk+4YKdG1ZSSD16WTKfd\nXyXDb53VBjA255mkNAj5Qk+PqPw0XSCBIaAeSvCI+M3b8gyCTve84bZY7mHe\nqU5hT7YcOL90EQ2jZ0UW29sL0Xc3DY6rI1rw0RWIFtyFsot2XHABJoqGYr0a\nlOx/S5owsAX9h8eJBx9SCztE7hFumaBxYbj51v+bcdOJHQp2ENvpxKBj1Jy4\nvnbbv1jGs9UtMZsq0IOwpQQnyY9gv1WBJZ40jqsbjD9ranv3/9MWpixClFpT\n2WH7vdOMXV7GaPGHR5khlhsM1n6/Y+E/81sSQO55a1jaVrqR/x1nyNtnitPs\n9t7VA+7GdIxb93mpdHgrr4I27/rmHggypyyK334cSbxtdIg5E1J6vt0rxTr4\nLBkmQ3Ewe7Paeq8T5k7nCWy6nnb2jBFJTQoiHYu6/TNcVtullR2IrL3yUltt\n5XeFkLtU3cIqnXXtHTv1qt3ZUKgqGxDPoP1j0beDdx8EbrDS+SEMKVtD9iBs\n3IORNC5z2LXz4EQLXFKY3WekF0tC5kV0oLwLI0QNuju2dnXprDPdi0QgGPRX\nZuu/\r\n=mepa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4e5c350c2.0","@material/base":"8.0.0-canary.4e5c350c2.0","@material/shape":"8.0.0-canary.4e5c350c2.0","@material/theme":"8.0.0-canary.4e5c350c2.0","@material/animation":"8.0.0-canary.4e5c350c2.0","@material/elevation":"8.0.0-canary.4e5c350c2.0","@material/feature-targeting":"8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.4e5c350c2.0_1600722897337_0.34160640748398863","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/menu-surface","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.16c563ef7.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"6b0dec7b6145df7c0b84365cc5497be9da20a579","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.16c563ef7.0.tgz","fileCount":40,"integrity":"sha512-ZxsnHpd12f9lSKTnDbXcosIng8/BDoQ3Gn6cwIDKK05bi/eRO9Cy7bs84rLpR5UMm1aKnPoxsXZeHu86eDoebg==","signatures":[{"sig":"MEQCID4C55sN5T37asXKv2xG0axekqNnuW9UZSmuGVGGBY0TAiBxvbos5sPVhKWIn18uanmQh1MQUp68ewIIBMGUn2ygYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalS5CRA9TVsSAnZWagAAKYUP/1SclO+9nGXAf/srhJXa\n8ojLDisX4vaxhzDVbZCUE1yBJ1XLiMrHkWMv/ha9HmhQ/AHe4XJ/mSgRyQIP\nGRf1EaAU8sT9RVVrGJnS6ucACo58CVzSPkSSlB3nyGwP1Gg2p7KP86hVh7Pe\nigTp8TH6OniybsvjzqL72ZG7jZ3W2SGfZsbJ+iCvUKyyNXsjxhUsujnvk/0t\nabmB4OaidKhRXOrNrERV++zFIJPEOEB6rHqvddL+xsoriZ8O/dQvO2M+Vxnt\nY6eg6JGr8uZDbV0NOpEwKS/lK0lhcMx9BzOaKrIDM6ccLzpH2+7EJXA7hqg9\nJBum7pjbhsl2oPT5TWrw5Zx7VS69DOIOSXB4cIYH2XRyoUt/4/dWL09uuF+m\nXiqxavS9ez1cPJQh2jEp4OvyiMtxsNR881jP003wvPDRAOV+bwiGSgvjvR8l\nZarscDhmZoywIMmYE8GYL1BLu/QV2qtMxxL0b9xgoqx+mvfGLH8jDYnLPfaE\nC8vhUnE527nqXqmTTzg4pxnC4gtrGy348Vvgj+U9kwTnqIl6OpZUapebkhCI\naJy4XPA1dunHeLlvj976paw3EyjBw8z2KtIUfalZDW55Z7wdUemiMeNK2Jtn\n4+FiIOj/2SuEo3Me+fIR+kmt/JgGYUUqHlbA2zX4kIORokuKX2AyPZX1jdkx\nQc9k\r\n=mwtL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.16c563ef7.0","@material/base":"8.0.0-canary.16c563ef7.0","@material/shape":"8.0.0-canary.16c563ef7.0","@material/theme":"8.0.0-canary.16c563ef7.0","@material/animation":"8.0.0-canary.16c563ef7.0","@material/elevation":"8.0.0-canary.16c563ef7.0","@material/feature-targeting":"8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.16c563ef7.0_1600804025436_0.8752346729580873","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/menu-surface","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.fd8af3d43.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"e8b4c71fe77cc21e13967ab420df450e259cf3f3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.fd8af3d43.0.tgz","fileCount":40,"integrity":"sha512-GHTZjNblFA/mRu6yRLIlWoQomuQxXy84ZePaZHgjXoWpPTAbxyS88caS/Cs4FVno7bXG+yIzMt6JHyyMFSenmw==","signatures":[{"sig":"MEQCIBz1tSMAfX+ztIkR9K1UJHh97aE+I3l3jYtr1ZRvepazAiBwBUiwhsGKWx6deCIufsIQ+v6vOWe/xmzgcy9LgmVt1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6LyCRA9TVsSAnZWagAAUR0P+gOgyBUhcPuxHK8KuFyf\nDP+62HqLPekRej/+t3fnoD1jBTr6zH8xe2mlDBahhFIw5Zm5K82geyy4IUQa\nZeDaA4vnp0q6BHCDbvK3pdAf+sSHguglInVh6JxxfcuaibdlBdhDqZAqmOKU\njqjKKhftte75biC94O8T9reDtz8MnGHdnJaoZFYmmOZP6egubR0UT9J6R+cp\n1hLhjXhTawUNekXk/gfLh8MTt+1CdjQaax/1MqqDfRG7QqcCk35VUVMUWCBV\nTBbgXI5Bg6YOzPfMFPQx8jq/pWuZAxmzh9sTqREumeUC1zsYw1S6i+TJHMB5\na0/7lKeQnLQ2fI0Cct2ttanxsIe+k0OdJIWScJ8KJQHp7/nw1dn1JSMwJzbQ\nEVSIwYHL71mcPmjgIoIEetBi0FNeFiOurpwS5q8MRJvMdOAGTu6dEjdmJ/Vq\nPbPvebcHD/WMi8sF8/Xy+96kIcY48CDURl39GyFA2EfVJYHCfgkBgi65/E1X\nYcmiggj9uvlZt9d57KaT+QzphFTECeAyEiwzIEZvf5owxR2+1VMbKNGd/Wnc\ndsA6WSNnqeDjBipqei0WqmVKGojlJ6A/lfAt2mgX4ntSfAeLLtgpG5PwlktM\n6HzxLKC8iQ+AvFsXCN9a2jDTu/cU+yTnDTeMM6UWXHCXw1y1MAY26VBkLbY5\nI5Bd\r\n=Pk8Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fd8af3d43.0","@material/base":"8.0.0-canary.fd8af3d43.0","@material/shape":"8.0.0-canary.fd8af3d43.0","@material/theme":"8.0.0-canary.fd8af3d43.0","@material/animation":"8.0.0-canary.fd8af3d43.0","@material/elevation":"8.0.0-canary.fd8af3d43.0","@material/feature-targeting":"8.0.0-canary.fd8af3d43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.fd8af3d43.0_1600889585670_0.29196821104428894","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/menu-surface","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.d4cd83a85.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"faaf4e06bd0f15676067d374259adffaa9e07a39","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.d4cd83a85.0.tgz","fileCount":40,"integrity":"sha512-PSJBA5fEhZ8QB2dIVV3B47oSF+4j2R4QRVgBnUPPsrP27M7mQZzC1RyyraByp3vHu55KkSB7EvznTFd3PhpLtA==","signatures":[{"sig":"MEUCIG6mLBV6K5S241kNs5gXLnsvJoaOoUVHnVjb32npTPiCAiEAhiUUeEOYoOPbKtn/GlzhuEavWl41YRrab/RCr/qre9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTuhCRA9TVsSAnZWagAAp04P/0LjN/V6gymH51QjX/rC\nErwvqZXtc7mFWr4k5SLEbeo2gkH8e3xW+r35hdLcUysDMbbHEVf+zL5t9fFO\nWn9uqOkdJR0Bdat1vo0s08pjuSoZ1SvmjCQE4gv8uQtJHU+gkZ4+pp82JTwT\n/AxXFqIouowAZ/ZYVKuJFv6Y5wDhccucf+VtnGkB68fn1kOYBeffsV8Tf2QJ\nHxRIpsYWgGZzUGFpIxmajula5B/oTl4BLcpqfiBAwsr1Nk1rOhm/+nBvjdNw\nCtRlNat9GojOmTl8k8yRMostqM7cU+c+rJ1HiFREJIwOlBkCqEHYQnfwMbom\ny1Vgl2/7/9Z3idD67VkWJi1sk9jaAxVx2KGKC30OLyo8bgKD8cPMBLwAK7RQ\nePVXwEEp2sRU95kIMhBwaP2ta7DWc7IBNEwtp3pngP0q8buh/v2ZdRYqhWlE\nlUhmQjedJvzzqGLqRDTSnCxjPxWQGvctIkcFm6VtMCAIpeilVyWwhOiliN97\nQki4UbKOZjQraMpxrWOBCqysvVSk9Qo/oAt/oGFoTvOOBpTb//n/AuKIHgB1\nfTzmEDSyUboj+ENYh9B3uMdbvQDLNuYx4TuIujo0TGMxgCxcK5NuG5klCk4a\nb5JzPnpNhAjpbf0KWjk8X6v+jBmAkcE1w5eSfvnBBXZYKhiC2eDkcWDjExx1\ntRKj\r\n=I517\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d4cd83a85.0","@material/base":"8.0.0-canary.d4cd83a85.0","@material/shape":"8.0.0-canary.d4cd83a85.0","@material/theme":"8.0.0-canary.d4cd83a85.0","@material/animation":"8.0.0-canary.d4cd83a85.0","@material/elevation":"8.0.0-canary.d4cd83a85.0","@material/feature-targeting":"8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.d4cd83a85.0_1600994208920_0.789922348753612","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/menu-surface","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.199aecdfb.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"c651437fb7e5ef9bde5e8f002b113ddce32572c8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.199aecdfb.0.tgz","fileCount":40,"integrity":"sha512-387RDZkrFum/OyX1JUbN64qJpIA1c2Uyh8O5dzY/RhodVtm98wZbwUB0vIaWCmWyizXmhp8JjKAjtXV713WO3g==","signatures":[{"sig":"MEUCIQDVUJRputjMYBeDNLPCPKjphO2XehrGX98/i4PaoUuyCgIgRLqD6BwS+JLXX9zciRpGwU6Fu1youTR4/+UaNffLnqw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhIuCRA9TVsSAnZWagAAHQYP/iGrmYCoEjQhFSeh9sEs\nmqtj4tKgvJRlZhyTdjCcg3+NAeP3l5taVfQmBnwCd7Lm69AuuGApVHq8ig+T\nx5M5cI+w5ncHgHVwF4n/eCg0C4fzT5YxfsVZWHZXnJca3bneZuxQIpOMNkLv\nTL2VNa6cDaazRUvqjDe6cbUfRAzMVIBfXxF51JsIHIiHzcxTvMm1aNdPUYqu\njYAUl1U60R4dWHuiPzsXBJfnEw7nAsXQqW6XT96g1vDvaPB8c/sgq4coXBSj\nlETm48zeL2VNrbn9lenNZL6lWFFayCHE3nfqOXEEkdwGupwZP9jx9WoXiL+h\nC1V4J4YGd+epuT1MpHcYT3sX6v93TfYoMl79/SUeVSFgs0VWMdQHcamt9bqi\nXxifxiYvFV8tMJuNyrvfJS4ZXu8mIEA6sKPfa3x2Kh3de9xphazxJI2mdzfJ\ngJnymAtBwcAyEdaJO+I9S6kwhT6rAMFOsxooIQshW0aj0tPHUgOiCBe68PNw\n4O6bmiNve5Lkp/EDN+euSuXnmORVeAS1pAB6AQHBRrWOuCHm+kCqFHiuos+l\naX/ezH9sALFqYqJ8K9uzHKdWPgRPAnS+dntRZfG3FX7LpzNv/GwXcHs+oIwm\nRDfJrzg5Tk0BTy4O4ZaSB2vxAw87cqazcCwzydrh955mP+FXWXUknsmX/aiq\nHHl/\r\n=PxZR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.199aecdfb.0","@material/base":"8.0.0-canary.199aecdfb.0","@material/shape":"8.0.0-canary.199aecdfb.0","@material/theme":"8.0.0-canary.199aecdfb.0","@material/animation":"8.0.0-canary.199aecdfb.0","@material/elevation":"8.0.0-canary.199aecdfb.0","@material/feature-targeting":"8.0.0-canary.199aecdfb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.199aecdfb.0_1601049134114_0.4990745315590501","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/menu-surface","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.38ef4501f.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"e38b45c8eaef6ce41b3f75f74f1e3050de778d25","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.38ef4501f.0.tgz","fileCount":40,"integrity":"sha512-1eVQcUO6KZ5WrY0X+LQK/6Inh/7rXZ7Fci/RM+WzGK9ehSz+gDTnfhMrrBaDkhN+5Pws4oRSHbQgBiTLvFq7eg==","signatures":[{"sig":"MEQCICsDCsQH3SihfsBpJlpii1F+zMBhmyYU7ov4LzeCQ7B2AiBZWWel/dWjyqblfAteetX901hVLeg1VpXa1DhcpUEggA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM2UCRA9TVsSAnZWagAAfnwQAI+5tRIcjpAp51O0vcrN\nzAb1J0WrQ+qp8sI4Pv17oCbK34Nt4n6PYVZjW/bFnw2B9eWamwDxpw9RLcuE\n9/ILdt7bbMxe+y8E0Gp6UEo/CAdmiZzwpbviKLZx+IEBkkFPlf/2LI9Ih70g\n55cCb6rq6FuGPOkK9t8VWuM1AoOg+jV1MbuaR5gvwiVB6HLgyoUWdsHlxOQM\nlt2ZpdHrxGzUyJ5OWWKlTl6D2bMM/PXt+p7mWJlrJVuhvo/EWzWIIIIaI0jD\nRSk2dL7oJwDBEKgh1Rs20gl3b/Sqnn5BeruRJi15Os8+fjtrMM/0uMwbDye9\n+WocJb97aHTC3kncspRDpani9ShnZ4rWcIqctUv08YJbjw9o224I0hXe6O7u\nFDnFm9OibY8ts/L6tbdlyYhqdAr6BPFxqoWLDZHo1ekmNxwQPVwBiEG/Ss7a\ntycOPaknTZ7yX7hP+tVxG33SiJCoEndvr6yVumsto1ma7nt3K+wcuY/fFaIj\nl2x8muTvap9PSbI5znBzs5QWM/UVFtE+g0HjPL8MJhIQayj+jSt+KuCleMrf\nFyc+YAcRjSoRVKz/M8j8Zyy2HI+dgd9E6eP6Vnzrr5hMHv5rxDiIax1pz3Xv\nJZ6cUkiG30aCcylQh4EwEu33y/gz75stjDs0Wiz4XyQEBLK2Qh7kMBwqp0YQ\nzRaX\r\n=/kEp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.38ef4501f.0","@material/base":"8.0.0-canary.38ef4501f.0","@material/shape":"8.0.0-canary.38ef4501f.0","@material/theme":"8.0.0-canary.38ef4501f.0","@material/animation":"8.0.0-canary.38ef4501f.0","@material/elevation":"8.0.0-canary.38ef4501f.0","@material/feature-targeting":"8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.38ef4501f.0_1601490323515_0.6762784847543704","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/menu-surface","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.774dcfc8e.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"28ec8825166d254e54e1a70c9793d0ed1b80d67c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.774dcfc8e.0.tgz","fileCount":40,"integrity":"sha512-3pXu/9ftKkDKgXZkNj4Bs/RPHb/1eZCOLXSW5ilrVb4jHt75jLvPCcE2qDDFL7JxHAFGPYGr6e5NJLfu4fpaMA==","signatures":[{"sig":"MEUCIQDkhXeTb6E+127hcVwHxJyWK6x2fYpzotr81koc+CND2QIgaZt82dEYVH6RZdsvjaJCJK/ih162Yn7+sk+P03bo/ic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdad9CRA9TVsSAnZWagAANRsP/3VnaQnCVe4vzPD29ZzZ\nmluYg9rPN2c6a5jWbNj/VL9+vysJvWBaZaLqYHLqYX6iDJMsbIQJaJSScSvX\nWTdQssbJ2a8qse+Dm9BQv5iETIKnNkcIW93pYilGsPNLxX4YEfcN+n+nKg/n\nGLwD13nKyFT8JRtibJCQ6LjvkeNteX83WMb0lARhkR1hxRr3afyL+NhUM1jx\nc5KP8ijtCKwxQvSMAZl4fuCElodZQ0w3QZVGt/5QiM3ql4N8dTVnCj6aaCad\nQX57+gaMm9kv9T8Q2tj9DwGa4RB1fmavfnTe7nWoaeUGEJw7QxJ/7aHDl7Em\n1qMbtyUygI18WKsKasDxHw0iT+EDkzLXqAXjNCikSr4+4CXR9bKQzMaPsfYw\nGiTjD0hWKoXdxFJY1vLpcidrf1MRVYn1VuR6cWfN8psIySI+kmQISJReDGtt\ncWc5A/Ki7QnHv5hHbhwyi8dwMUXeIHsoO2yVnKlks8D9zogyzBI8iLj5AxFR\n89ymBhsk7yiKiBwJKOkVO8QoWUVdclYDn0w8UkJBtNRHXAlkX3/1Jw3EDeHq\nChetxw1cZzknSlSj607+9pzQi7qvpX5lgzoF8Gz6DcIuqSVcUhg7PPpGXJtN\nWofPhDntgmmsLxUwiOheHxY00yhMvAS26GJbJjTHXQXTOtNukrTdVfRYHbrC\nHLUM\r\n=BzLQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.774dcfc8e.0","@material/base":"8.0.0-canary.774dcfc8e.0","@material/shape":"8.0.0-canary.774dcfc8e.0","@material/theme":"8.0.0-canary.774dcfc8e.0","@material/animation":"8.0.0-canary.774dcfc8e.0","@material/elevation":"8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.774dcfc8e.0_1601546109216_0.4447519046577013","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/menu-surface","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.0f60323a8.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"da3b5fa7d59aca9ac2e89870042da8a05c720d14","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.0f60323a8.0.tgz","fileCount":40,"integrity":"sha512-lKR77WDHATXDfzcIKlg1oAUvuCzSMKrYeixqKaHr5JYq2EVofdAuLcfOsXnoLRQrHtY0XCXAwzcMxgouWjFq4A==","signatures":[{"sig":"MEUCIQDKZk9LhSv9Qfq5GWkthLQczDQLgliLoTlHhzcGdBnXuAIgASQOc+xZqgD1CSIjgQLp6UjogwsbfsEId30flM+Fim4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4BfCRA9TVsSAnZWagAA6qcQAIWTESD2cf4wj2Jlksnn\nIItwzkah5/dYDpmxx9KQedxqL09EIkvgndQ21DsjcglnKm6FzyPyRHV703fH\ngqV+x4v9c+07kheiBjSmzusrw8oA+/NQjQuqocz54KLGgbx8G/Ji2arAYIRE\nf5mw9bhppNBOexNz/D8GeXjx+mRqfDERYI/QTYL/y6xGmB6QGGSWFSMDMYWf\nCYOgBIyFtBsmKTrCSXCJXWMT6p4iBKJetdTXBwYTNBhIS251FCtDEFUgTsob\nIA+mXd0Fj4Iq7l+j/+KRMaguxVLzEA4m+Cw/cv39W8NKZVQYqh3N3duKy5kb\n/Lm804cC7ZQPUW1fPScypMx5MOPOHXmMsgYU6QN73225PsrQXrLtEhPQjdnU\nu1JSlBSU8cFMujQ7FHTdG8h3oO47yFdBumRacS+GaM3uiZWeMwd0kifNvhX6\nDUjSvlmBr08la3UIe5nkoPS9pj6NrM9YRoA7HWiUlc3KXZhrmSfcVpYdU9nE\nnXqlPcjmp5ndl27XnGaTLcupUScaSubPGXC+/Aca2WBHJEU8fiqIB0V+x+7k\nLE64MkEfym2ITIrQPUoqJgRkE/Rvd7jwhUjBdUHAj3fSNhHsPrfAfgWgp/fJ\nDn7Sj61oFveE+u0mMdjnyXEV03KoUMqgo7CrpD5k5UsjV5tbPqrApMnESR+k\n53kB\r\n=b4VO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.0f60323a8.0","@material/base":"8.0.0-canary.0f60323a8.0","@material/shape":"8.0.0-canary.0f60323a8.0","@material/theme":"8.0.0-canary.0f60323a8.0","@material/animation":"8.0.0-canary.0f60323a8.0","@material/elevation":"8.0.0-canary.0f60323a8.0","@material/feature-targeting":"8.0.0-canary.0f60323a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.0f60323a8.0_1602191454651_0.6539382781768348","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/menu-surface","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.d71622574.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"51a78571738054d4ecfea06f9700aec0de7ab400","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.d71622574.0.tgz","fileCount":40,"integrity":"sha512-xfK3mj/nXPuLI3EECkSYk4bUdAXq9YhGuLdORB0rG0QX8aYSJqyhllcK/DkWIMGTLE0dwPxMuxir9dX1Ingt9A==","signatures":[{"sig":"MEUCIQDnMQD4OleQ1uHb2sEM+/1egh/9UtTDKvDdHfXsR4QwdgIgf4VcRwg3bu15PbQOhiJT4ImGBTvFJVtl4EUTIsDg31o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJCrCRA9TVsSAnZWagAAsaoQAIWa9HVIphZNgVCnR6Hc\n19bCp+zFQtma4+Qqcni2aasaVPXkfe6JUCbCVfCNW+SYkJ6UTG6j/dsS0iBI\nd7G9EfVkV6yGFPYRRmIco1bYDqyYmDtCpTFjDxh8GwVn90gNquKljsm+PV3p\nCcBOka3zolEvIIWI9EVr8XuwvgutMccROVlC6KJ33yTRZnSdUHTui3TX4Zgi\nuBh/EOXgsToHejIqkSVj7KPeunUEgudOW86vFpktTaqDh3J9V+fKsepn9USe\nEr9fWPe5BOMOQO8fYT4euHsX+RYm6obVuJwE0iqqL1iI6xn4QuPM9m5vbIzs\nMUSwf9xrbJgOlzDXB+Xagco7MDsFjcfWQY5cOyGLfqLjAXdHntRoZ3ljIWjR\nYqjldNVrJZWx7nOSPIkmIIXpnFjKvzzuI83O0SLYYSFHwOdhwT0fzYN3cGQa\nrldbqb0L48BOwqnAKzTw80q287JSLj1lvgI56rkpAayxTtHaYsZfJG5tJawA\n100ErlMdSlS6sJCynQ1/doSots7vs56CUrqBuaEc+V7cGgquDYF6oZ9jyat+\n7MYV4J7KVsG+mLDKiR8ojyMi/EdH/haHjXAZKgYC+ic5g1SibRRhqwRgQ2on\ny6OU7lBpOCiwRSfhxWUpOjKPVWSB5CE9UezNZ0FR1p4/1hYtE3DeaX/PXp3c\n5v06\r\n=Vgu/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d71622574.0","@material/base":"8.0.0-canary.d71622574.0","@material/shape":"8.0.0-canary.d71622574.0","@material/theme":"8.0.0-canary.d71622574.0","@material/animation":"8.0.0-canary.d71622574.0","@material/elevation":"8.0.0-canary.d71622574.0","@material/feature-targeting":"8.0.0-canary.d71622574.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.d71622574.0_1602261162904_0.0051092997572919074","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/menu-surface","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.7a9afaf4b.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"7272479e183fbac54d2b7e9a0f59c5caf9eba810","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":40,"integrity":"sha512-sUFfvev7xBgtUDrDG7Ob3ApKIkcEsF8HYzcGgZpf8KtqIqtdZKWFgltVNdHhNWyMstQLYHbz5zlVzVix6qAW4Q==","signatures":[{"sig":"MEUCICTxi4bIdcoy2w4+uCgy3M8qYlX4JAaKU76D/kuD/lg2AiEAr3eveXDCPjvfW21aSsEbZ37g/CJ8SVe3mq/Pilsrmgc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOo/CRA9TVsSAnZWagAApxQP+wc+trQrp/fBmK6GR5od\nHfVIA06lZ/mmaPARhb1OueuylE6+Q8SL5ugvxIQAEo7d0vmmqmrp3GkL2tf2\nU/YqULQ909Xn8YHkRV9q34rZ/Rm7hJlpVIXe34n6mZ4MxGlt/EUuk8dU3hmZ\nNi+qMI+vWrxjYrX+ifgOaOALboUm22e5ciDQqNE+bOF5yAHhMtUDyQogBLUh\ndHruRbwuDGVprZjae6JEG3agLAC1XYrUDmELAHgKexMmYWXa/VhuzNHZZDdE\nhuVXv87tRrMFZe7IanOxD4amwYTewjoUSDsJusuDEDs95uQ0AAAjb5DvB493\nDphBS3joP/5dmb3y80H3E1zGU+XqH3KoRSz2bZEFJh4yXvyMoEgBE7B12LKx\nNLdkT+tM0tcbPBuOBAA+3z/vC3zdF+AG81tE2A5WUX+5JU26BFSmVcxB9LZn\n3ea0xvhTjR2mcC14B6kNUyj4Rb5TASVbsslsnGWF8GZtUYog8o5bjpL9woWP\nyAHVc2neMMfSV5PfaC2XxvBSW8oENAAFoGUfwdgNWZFQWVyX73G9Ylv6OhbG\nOUh0Iq1HFMmIXx73Ap1gmAw8aJ2LbtaVa7U7Da5yoSgbus929UTPr8RMYD+Y\n6GDG6pGewk55RqbGRN1Cy2kO0pHlrqLjyDWdyNLfOwa/3M6XkqNpNnEBsOxL\n7zVe\r\n=nJCz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.7a9afaf4b.0","@material/base":"8.0.0-canary.7a9afaf4b.0","@material/shape":"8.0.0-canary.7a9afaf4b.0","@material/theme":"8.0.0-canary.7a9afaf4b.0","@material/animation":"8.0.0-canary.7a9afaf4b.0","@material/elevation":"8.0.0-canary.7a9afaf4b.0","@material/feature-targeting":"8.0.0-canary.7a9afaf4b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.7a9afaf4b.0_1602284095026_0.2721568152887368","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/menu-surface","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.8a39352c8.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"6b0fc55950b73f8c288c529c441aabad431cf9c2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.8a39352c8.0.tgz","fileCount":40,"integrity":"sha512-i8ds4NWvuQ3RTDzhj2iTBOO23MHIbRQpLeOgmG/64aqa2H1MC2vtapwFM3PYNKLhsI3vDTn1F5Q2Tez4EVyRyA==","signatures":[{"sig":"MEQCIBmB12EBefj7GCaUKV7Tw3az2we5Bik3LHOFk75B9qp3AiAPxQ0sB5hZNeabxVdILisFb0qoeQTFQPxHceEbGd+OdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJakCRA9TVsSAnZWagAAwwoQAI9XZTnUAqh9y19unXuM\n96vW3kIjhX5EpRsugAhGO3FFSIpQ7Vi/Pl0jxHIqF7W8pcDmxTCAZXkx6lv8\nVr6j2Ij2LyL52oHNRwj1uvuRcmAgZM8bQZljv/Vi7jkb/l0Pbqcwb0pLBN4e\nvEJLsNzGueZiKUQykLgi0Vq8jGFj4cakubwh75kxf83XStGg7OrykcqAhYzq\nODbfRAqqGqHq19jS/4Myhhp1Ql7/6lGYh21TtCeewEAzkh8xEGtuZRDA+oWx\nQCIXK4Vqu7aC9BtjJvq3ntzN5lrqDZlZtfQY3ncUTDxgVDEiI0jrXLH9UW9d\nbrzKO8YiJPnhR2gF1CJMQiJS4kJpboGeqF5YTD0u2sQBWqECuUI1Yt5HBsTB\nMMrxUoOlhFb/s997xeisBx6kyJB/P+w+trcfWithgsL/h4iJS+2nhgLdhenR\niuAoSpVCXFxvx8q3rr4pQLQCxMJr9TOoGc3j2dcMg7tskJtSxHT0EXxMp+Ev\ny8oaBg0tLEkyFVgH8yxbghguxSaV5VM2CSA2u0npshVgDFotFmqtGBwkj3ZK\nQy/9evycX2KQSc8g2tIPI2fEWD5HeY/Ffy0V1rPkchxWDWDqI17skm0dX/aO\nNbNQDJTMnHiyFTjXDPlJuGJkmdHUQ/SnVwdEUvW+OGlX/f2loc7Ft4vZUqNf\nr/Zq\r\n=PcSM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.8a39352c8.0","@material/base":"8.0.0-canary.8a39352c8.0","@material/shape":"8.0.0-canary.8a39352c8.0","@material/theme":"8.0.0-canary.8a39352c8.0","@material/animation":"8.0.0-canary.8a39352c8.0","@material/elevation":"8.0.0-canary.8a39352c8.0","@material/feature-targeting":"8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.8a39352c8.0_1602524835989_0.9205924301105974","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/menu-surface","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.790ca85fd.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"f82f1d46cdb3c54811437bd86882c463e970b9d7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.790ca85fd.0.tgz","fileCount":40,"integrity":"sha512-dy57CLd2K9EDmUDwvdzkLzB8mGn7LqK5EASUT85EXpXuwOZxKHoyFbPKZeOUGBBY/Z/PrBeLdrs5nHpjaWRxwQ==","signatures":[{"sig":"MEUCIQCOR+ibmNdGRT5M5eGugOBIvyya7FDorV1jTeSZx9zAggIgRt+90xyIbvrvvBIl8B78ZcfOJhpmk9mi7mVgnYKx2HU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNFRCRA9TVsSAnZWagAAXJIQAIYUlOfY6dkP4OESs/ku\nJi7ITD61mR82weY62dU8cuougyMeFsadbp0nTxk1bvNeZmnArsnDxd/E+NIj\nhCQo4GjPiy0bDKan67fSL8Bj81R3hrKl+pGy9qYNKpo2sq4PulpWnxZ7IxmG\nsv8xlr9szGYGSd1+bhBMZE+2W8Klg/6M8+V+PS4O5pdO5CmP0Kjmg2hoBNnK\nIYbreTPGno5lHGBDckSWRl24TUG/zJwqNKLNXaTTdd1gSOw6XmMHNzsBjMtD\nsXcfhkpGs0HlLc0ob5QSL1//JjgIJfrsTRV2VYo05BIqN9tbh7BlX0A85yGI\nYPcRp6lCaODlpYolc5JPVDj5aI8MJAr58oPQbDbRJWzn25HXxB75/u1/lCK3\nZMvF9QgjFj6vEk+8LUZDP2DTm7lOZl/uAVprnAMOquh2dTPE11qKUE36Z9yq\nel9u2kCoxtaO3wtkVa2y8r1wwFmoTL0+llOP/5CiWGEJT6twr5WIuohCHJI0\nI1N0PDow4z/RUB6mRYOsPVMt+cMk2LIJonkyd03VeNVD6V64Zvbq/koyE6J1\nUSKHrRwK5R/1qzdA4y5UfSvTKNjRLeRBwds9o7ZPNJm1/IJK4aX2Boh/wgtu\n7x40c+INNSeOVvnDS0UWLlH9qBLddCECqYdw22DVQjOZ2YfKPTAtZHJRZ0Fi\n9oY8\r\n=u2kt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.790ca85fd.0","@material/base":"8.0.0-canary.790ca85fd.0","@material/shape":"8.0.0-canary.790ca85fd.0","@material/theme":"8.0.0-canary.790ca85fd.0","@material/animation":"8.0.0-canary.790ca85fd.0","@material/elevation":"8.0.0-canary.790ca85fd.0","@material/feature-targeting":"8.0.0-canary.790ca85fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.790ca85fd.0_1602539856610_0.7478481167626194","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/menu-surface","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.174c0becf.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"297cdfc7e33677373c629e20068752915c0164bd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.174c0becf.0.tgz","fileCount":40,"integrity":"sha512-YKN8hqB1pyNnaHfhAAMLUBvvH6rFZJMpmyNOLoLoG8OEWXpgUVvvJsYhbUFckUdfMANz3/417lpAVUsNh914pw==","signatures":[{"sig":"MEQCIFANMWsWLTi97k632RY1eMcPMHf6Y6TXN1Ggi8YRf7cIAiB1vIElYrJA46PSYnfzB1lFSfPyoXe7FQxTT18DO21p6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl9+CRA9TVsSAnZWagAAsBkP/04MAF+IDbeFV1U26276\nJsKitDtrYNdHA44c8dN4QgehITUX+mIq3tVcW9TVCx84E8txAlPVGAMQalTC\nVmR+P8ggmwU27RB2m+rAoRZSE4DNZjo1Jn5kclxcA9IQKpACgcrj2UiOPQXd\n7XwOT6hSy9DG8YYB7d9zj8UXd9Nruhrfl7HGk+8BuFhN05tdXnUmF1YiILAL\n/P63kV2A2RrNGYVG++v4215CTpBFyWR6RQU331xadTbco5IpK8qhZ3/DPOsY\n6PxVUYWW1nCAxpw/6VoIrQQhfXTXxhk3JL5P339tIaY97olyX0A4wHtPWPiz\nbOpCcwIW2RFY2e/h+jBEr2LYJT2s6JzfmqvaIzOW23wsSGqqzhNFL0AKLUOx\nX/e5+ZrWmSueaOrIF/BUoPzju7Klhnzl8Nw/MbmqOw0GMwFfsGFWY2FeLhMk\nAyARzjo87ZgdI283TsS/evmZFMdis/idlM1xmICzTpae3GPxHAiH4eNj8GqK\ng8S1BkM/TwvP2CbxJFtjQFgHR/Z6oOoPOHysVFpTu1/WGuVnpci+S5pcJzHy\nFyfqp+GHUT2YTabgyIdaE2CrMu7NgDSWzc5sYM6oFH1nalKl2WRnwJoMci0r\nhjAicDqwklAhHnQP4V8U9xi5Q3Ukdsq3bAd5ukCSya8UoaehS+2qb9X4X/Wu\nYRup\r\n=JlWq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.174c0becf.0","@material/base":"8.0.0-canary.174c0becf.0","@material/shape":"8.0.0-canary.174c0becf.0","@material/theme":"8.0.0-canary.174c0becf.0","@material/animation":"8.0.0-canary.174c0becf.0","@material/elevation":"8.0.0-canary.174c0becf.0","@material/feature-targeting":"8.0.0-canary.174c0becf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.174c0becf.0_1602641790238_0.6705534656081464","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/menu-surface","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.c71ebfa02.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"5f752c117bc6c67376e7ac2a711831ff5d5af13d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.c71ebfa02.0.tgz","fileCount":40,"integrity":"sha512-1rs61VqsYZyR3nXFxAlLAW2o9CDYnEW4NINA7Mlb3z8Xer7cxRYd2TQdhMQWB9pMjdDdHUEiP8hy68m7ArAO8w==","signatures":[{"sig":"MEQCIFTRaly4gjfw0f4A+S1LCDfgDANLYrUjpSAQWVcYEUDBAiAi8RmyXXktoaFezQoDsH3tA/LE7rN3wsuUZN+eV9Kkhg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnwaCRA9TVsSAnZWagAAA04P/0CLCIuqq3Pn9+D8kzfY\nZuu0Gh5vYf6aKt0aEk0xgXTOHgJiMLbGswfnRWYoVdHU7RGl3jOiy/H2bMM/\n7fjIwzcoT3Rh56Yut9BNeF6pv0u5zahs9dDale3U53xyQvNzi3mEREWQ9+f+\n1LfFozkrKCL7/mc6SdNSurmGMZnMeGLWuGqbX+LZcqbKI2REJHZHbYLYvH8o\nfTAoZDauAg/FIDAGZl/2e05QVRejI/Detyc3CqBjmB/Fq2TjNWaoVMHPZmwo\n1stX8XFL9+XK6z9IyR/yaan4MJLUcv8Nn10eQ4BQLosqmKHXn99JYPVxONX+\nHQryyYP45sochow9+xa6D82SqgfZbmbttApmqWZ3ZxymO0+06/523e5GkdpN\noodP+pd6KcONR1uJ4hBOqled4Qi8N/+MTZ6BaYx7KKFFBEUndMPja7ZzqqMM\n+ql/l/1HJ6wbf+HyarQKP1TxiY0RNeg1iwDET9+uRh2nrSF3Uz4Wx3uWK/mA\nMWZyVR/XT6t0iEz51pfO9pZO/T594HWlEnVgD2wgv2vdWTYnttPcx8dH5lOP\nORYi5/BJN3y8fAseaJH8DAGqHo+u97t143tlUKjhbkOFJZdvD0pPZK0ftJk6\nEBWH+NNEYvWsypY8zqpLoGAqpqvcyC1wF/fXSj0F3CufiF3j9b36bOWTNmlm\nVPZY\r\n=YvzG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c71ebfa02.0","@material/base":"8.0.0-canary.c71ebfa02.0","@material/shape":"8.0.0-canary.c71ebfa02.0","@material/theme":"8.0.0-canary.c71ebfa02.0","@material/animation":"8.0.0-canary.c71ebfa02.0","@material/elevation":"8.0.0-canary.c71ebfa02.0","@material/feature-targeting":"8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.c71ebfa02.0_1602649113663_0.8199780281099436","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/menu-surface","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.2ab716cbd.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"6ed443dcc855e6328deb18c7817e021d8073d3db","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.2ab716cbd.0.tgz","fileCount":40,"integrity":"sha512-9LGgNOORlPmEE+AF+6QheYW6jkPLsD4rWhu4bWkYuhUFhcEtUD0Ytz/Ct+fZqZqpCQ20osG8cCGvrDSs03hg8w==","signatures":[{"sig":"MEUCIBELyY8rgePiI4pJQlhbp1+mdT/U1XTbEgIOo/yAW47cAiEArhP8NinIkpjcDDBtIl+Y+qSAMgofd8lHCazKNs/hstI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOO2CRA9TVsSAnZWagAAk4MP/0cvI9/ljD9tV3KwsrT0\nHcML/OozKA61Jlcy8xsMDuGfvL2oirVF7QnygmvprBYV3ZYT6AaB6CKbhub3\nM8sPJL/4C7Y4xztHrStVDL0AeF6N+e13Hv+rtUUBSxM6Dv+LYvA07uw79xSc\nbQB+U+azNdQAfEXC3CiVeUc26moub6R2qjRgPsxQdUtidkZN7J26Inijmy2D\n4b4a2uIY8Dylb8h+uDBMUAK1odRgOHH2QlQwgoD9iOrk4wXORDanY4unodbM\nDr+pCIRF/TKT2JKbTU4ym4tuqR422smDynTjQj95CE1jztGaxnCIQw79Ss3W\nRqvN0TBxhiXLjcm+CFMDo0yYPprWRPwh2rSJXFFIUl3Wpe/EW1NufMNNUbqg\naURpI66qj9U3Xj4uW6d8GvgvpfB9Ydadowjyr+LVAScmRv3zXG5atNrezrmC\nEPmJguXRIT6YsfIpU5Vom0fFEJyVRb+oFkDA23doJv50ovl/JarvknJ3FOhn\nMxHs0GdrIiQ7tr5tREpQGmzoqCIF1darjOgfl5gXOKFGIS9jbWk075bPvAnv\npbEVB6xOYvBH5zbWvUInMa+h+uM9XjTmSYw20pxIieIXHSPQTeDFz4kiGlxA\nlR6u0Vi+8w2TLPE1cJtrJLcB6dLb1eq6KW8+u46sWXr64rt7WZ9I14aTWQVF\nDXNF\r\n=X7/t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2ab716cbd.0","@material/base":"8.0.0-canary.2ab716cbd.0","@material/shape":"8.0.0-canary.2ab716cbd.0","@material/theme":"8.0.0-canary.2ab716cbd.0","@material/animation":"8.0.0-canary.2ab716cbd.0","@material/elevation":"8.0.0-canary.2ab716cbd.0","@material/feature-targeting":"8.0.0-canary.2ab716cbd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.2ab716cbd.0_1602806709940_0.9410398118177672","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/menu-surface","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.43c1c5e2f.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"0741bee10f666330413b258697273f02092e9c0c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":40,"integrity":"sha512-SCcmQdSUx2xp9/JhldkEFiPtIsU9NdPRIVz9oVyCbb0139vbyxJWeQEXrmTV+hgOIBjwNgdjsem4cfwqUz5PyA==","signatures":[{"sig":"MEUCIQDDAV3NREfcbRR3ZN39g/i6Yv+em7eNMwQCA8NWKlFCgwIgGfyJYoU+icnrWRwQcGJs7w1QX+wWBSE2eeS5QStRK1s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ4ACRA9TVsSAnZWagAAjSEP/02ci/shTrxu7xcRLcte\nbBkdJKyTa4AORoqsXqSdmrfua3dFERT3oAJwQuXnlxYU9kkWBnX7ASuG1UCf\n6QnhiCb3gA9PqW0szB6tnRhE5peUmuACa/0vH0S3iZYXQ5KrMDdeHWQamK4S\nvHGcMPU/aTaxFurRZPQEhwbaRAnZRj6ihTy156t6bpAZ3QrLFwCJOWRGkJk6\nlyzwqAFnzC4twdDyVznhISMzvLYz8JuJPbIgwhVREvGZ6Gz7I3kBN6H1PBlI\nPRg472Wv+Qd3Kck/UKVHtc29MrEh6ta5TrRAuIn5ur+wDyqCOLnwhmLBrCAz\nDOgEQu4MvrcQmu2jtulEzN54oZ5R+On4ZhoKp0oBk1M8/DXjSaNt+9S9H8TA\n5i893Z35yLbXGHHegSioSOG9S//i2LPVFsmTEAYBjzKjpQ0o3d5tQQKfSGin\nWDo0A38F1EtK4oS+hXgCTCaKywO9IdywGELbxOmrbcaAZPkfs+W3Z5VZ677e\nIsnMbBXidzWhpbVj3WkftbCO88lBPpoUpDHwpXnsdkPpv+jWe5cZrmwwh5Vs\n6y+hmOtRJlQ1pb5NVGt8wWNz8pI7YMM4WOLWN/HDVubBZiIrQtlfwhwptMpJ\n9BLwWWjsIAdoxAjQts+fiwtg/LSHp8geaUQB2Q9QInvUiAp6UFDhg2OekUA9\nkWm0\r\n=/zdz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.43c1c5e2f.0","@material/base":"8.0.0-canary.43c1c5e2f.0","@material/shape":"8.0.0-canary.43c1c5e2f.0","@material/theme":"8.0.0-canary.43c1c5e2f.0","@material/animation":"8.0.0-canary.43c1c5e2f.0","@material/elevation":"8.0.0-canary.43c1c5e2f.0","@material/feature-targeting":"8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.43c1c5e2f.0_1603116544267_0.6126869063360842","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/menu-surface","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.ccc64eea3.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"02d6e9826c296e71907d84ccb3cd467fe2dca1ae","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.ccc64eea3.0.tgz","fileCount":40,"integrity":"sha512-rar1wvA5ySkJy+nq8j2ETzADQLHvFTZ6KyoaMPkWPcZBl7DcU4iAViSsJrP/z45o9uLHHS7lG2wVEIOzRS+hKA==","signatures":[{"sig":"MEQCIE1FEU50pcPkuMrMm4r/8qHmc8/9nR8nkSpZcdHmzD4rAiBHkix+wVKy6h+2s+NhjYi4vwLXMYgtAzXclUNLfAG99Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1MqCRA9TVsSAnZWagAANjwP/A+CVTZoEjGoYP4CsrCU\nLLeBkQHec1FWB8cFJUU/Zw+/wQEmKRpCWm2nMGmiXCfUc+Dn2gxS8q6NJ55/\njYbrFro+38aITwaJwMloaTW3yhHp7KYlZdS2Y5+4S4bq9v/HJaD6RxLRWt/7\nbxd+fJ/ltk9oqin4u2vg82hKb4WpmmUTCCiM0xKUZ8WXj/kwlAIeMgonx1ou\nA7MvrDG2X4ZzGri/DUIlR23pHvEEbqvltP57sFIPC8mjMzMqi7gDhwKuONwP\nkpK5Fs+E24tKT3JY+RgYasXkES9N2mY9aS1gjB4cqZiw0T2odISWHR7/YQHG\njCHcXIPbzUwg2sBx0QMtjRU9ljJsqgXcOvM8m/zHOXhd3PZMfs3qU1/PXj/F\nzzP/77qrkHhuC7aXrxdNYkhTeJeLrdvrb6+5GaTPop8uHG7WpXTzWEgKby6E\nHaBlZI/y+YDyljIE5qzPwj/UbCYCfcbMV/LZ4LLQBn9olhFPy85ps5clm/H/\nhRFZnX+ne/hu98DJDeL+NhFy57W4EdWGi6fodOTBB6JCqss/4cjkYQ8gsvFl\nBWQw4PML2FybUXS7JaRtIC13MSVbrf0Pu63AeZLUC4MZucSAFmn6BaBXoMNV\nTehy79aJ7Jrew66QGRgDa3Jj6rAUqaP8eiq7sVkycN8+IRmvaHlxKXaf5QoH\nN0S6\r\n=dDti\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ccc64eea3.0","@material/base":"8.0.0-canary.ccc64eea3.0","@material/shape":"8.0.0-canary.ccc64eea3.0","@material/theme":"8.0.0-canary.ccc64eea3.0","@material/animation":"8.0.0-canary.ccc64eea3.0","@material/elevation":"8.0.0-canary.ccc64eea3.0","@material/feature-targeting":"8.0.0-canary.ccc64eea3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.ccc64eea3.0_1603752746342_0.9910078805063423","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/menu-surface","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.a79cdd019.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"2f685e76b9f478fae00e511b57a503e610fdedf6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.a79cdd019.0.tgz","fileCount":40,"integrity":"sha512-nkY3+peP9mi2rOx4P57Ue+JQOtFMtlH/7CYoP7C/ZLN5j4VGAOerQCMgSDmbqGd166PZu7vyL3k7jl3vjOMD7A==","signatures":[{"sig":"MEUCIQDRn0diKyVkDcn1jluXA+tmSUKdT7o+9GmrPnpNqzVEPQIgWEuoUxLs9PcjeL27cslP0xRKuPxUISGq0rQz0u/N0b8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEugCRA9TVsSAnZWagAAoXEP/1Y494K50s31QsnLXfhV\n+6MeOJz2gTqq93ogJzQJGLMKEJrRpO4tD1iR3r2p2QrzGmc2QZxDTHDfOnqB\nYLIipVMGq1TowoFGaUTH9csO0hgyc53eVoKC6PmjZrBSpHysmmJGaYbvICmA\n3+DiS/M4ermer5uQyXogmU4ReLrogpvyM0AP3C+ujZIfj4T5Iw5fi/Mkrkwu\n3eB7HsQqiQtxjaJ++XuN0xrPuPo4aMFWi7L4AAAoH4SDSRiqqMU1k5e08WLP\nmjWVEjGncGIEma/HAtepNVJBlhUNAh1jnmfLNW3Hm1jIct+yTDXEdw3hvaPn\nTMSNLsy4mHssdtiIsgRR54AdUJxpDduv1dae92GUw4LCmo+tC9+U0HsgjLf1\niuFx1/wNcYz8hwmfVwJE1NE608FZDqYPwGI4JTdmE28cM+xWJD6WklIrgmbQ\nKq1TVubz7Qj+DhXmk95pPkX+S8KNtyGYdDg2GlLhchVc/QSwN3NBWb57sojc\nma/ynw5WcOdmtiG0CRwkhA1ylkMPlnqBJQTZXLl40F58TBjuO7Gr+rn71BgO\noKnrmEDZhr1YP4US9b1MjSQNjTtvZPyXOBtuK+MqWSepHdKuk0TaY6poP8p7\n+eQ8e7X1aotPQ7qWtKWMBGI1nZKSYE13aTKvkR7G223uxNdbIBHoEUFD0DT+\n3vl9\r\n=IOAP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a79cdd019.0","@material/base":"8.0.0-canary.a79cdd019.0","@material/shape":"8.0.0-canary.a79cdd019.0","@material/theme":"8.0.0-canary.a79cdd019.0","@material/animation":"8.0.0-canary.a79cdd019.0","@material/elevation":"8.0.0-canary.a79cdd019.0","@material/feature-targeting":"8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.a79cdd019.0_1603816351695_0.6453834237587313","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/menu-surface","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.596e98424.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"1d1de22e1821e67739e88180474890c5fe579e70","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.596e98424.0.tgz","fileCount":40,"integrity":"sha512-siwGFEMK4eSiNn6Hf/Vjd2aLz8aNJRfEIj6mJtVtrhU21+s+uPMpc0yjaxzAsFmKtK6JlZdemqpV9TJyIVegrA==","signatures":[{"sig":"MEYCIQC7OTo9rOOe1o4VoySqBcJWwLp0oHvbmogq31kuQlLpawIhANKGf4q4rFRZBY32jGac9VuT1t/w9/qb0xXcT/zl2D5e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZaUCRA9TVsSAnZWagAARAAP/2iBTMGlqST3PAkPb4Ue\nJOpRMGt8kjUDMVqAJjAGZpg95j0P45C73XE7WR5qOzb/GkdNVgtlLm6QjtBD\nqC4g2ZRqiqGaMuzHJ6CxzKYoR8GydXVlD5Wd4cbqqU+6huU7BABDIw3334B0\nPNXOb/79556WAO08W0T3BjjCiFWWmglaLz0zB3NQZ8TwgDsyelYnclRUVXIm\n3Xo5KCTMlRfqwtSV31+y56OkBGuIFfW1hpWrDsisRB5JNdGY4gSaY9+zmMib\nHfasWYKrzSFZEWzMDTCbk8afC5Cth1wz6Z5H1847QdByjc/ZhHl2auY4IDPT\nxa+HYiRapUB5XbGNEhBwwxqZQW4o0HnGAffNmEMPInQxu+cLbSxb2+R4n2bD\n5muEPydoF8i4T/LdNb8Miq8rUG/xF5gEae3PceojTOij8oxGpUulq4NTgMB8\ntSwHmrG0iP8iYL4zCfJLPIA9WIrynQfkyBD3NtVuWNueQmVvtD+ZTLImNC+H\n/enLre7jBJj1NU3+jZ2VyfgUlfGNDkajaGiWEyURfICOXWSeXXkwDMRCdCWO\n8L5hIV1ik981CEeqvEWzI+KHtiQN+Z+wtfWpS8T8Kl9ORaTCMP3a+fNa2pjm\nWQjf4XzNWTzKONy2X5TK1eT/VdTvZ8GBMpMJOgwMjIAd8AseBDwD4OgTYJW7\nDDzn\r\n=sxso\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.596e98424.0","@material/base":"8.0.0-canary.596e98424.0","@material/shape":"8.0.0-canary.596e98424.0","@material/theme":"8.0.0-canary.596e98424.0","@material/animation":"8.0.0-canary.596e98424.0","@material/elevation":"8.0.0-canary.596e98424.0","@material/feature-targeting":"8.0.0-canary.596e98424.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.596e98424.0_1603901075530_0.46722414797808587","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/menu-surface","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.05d5facc2.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"900b8e5251a4f08bf535981bf8ae8c924882398a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.05d5facc2.0.tgz","fileCount":40,"integrity":"sha512-cmRpNV2BsDPs/GYVgWU4V6g+JMFgNSnopcgbvnzAKruZlw70Ok2599pS+OJhSmi6gppDcY9/3sGD1sR7S2+kqg==","signatures":[{"sig":"MEYCIQDooVtSA1Hspajn6frhBCpDB9i4JlwZTmFDkKi6L5p/mQIhAKbxrc1t0lJ1Zy4dX248HxjCZClgACHSnlTtop6A2Yty","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZibCRA9TVsSAnZWagAAurEQAIPEkIxwIfiPe12rn0u/\nmRtrY0hsXRFl4nuvW7OczH4pR49HVq59MZapr3H/b46XT6T7EO/XuHntlLmC\nJhZU1uvmdrXVw2mymruF5Hy5G6FgsGDerNnbQaECE7Gr925+4tpefnLCY/Ol\nJuYt16yqm+MhvmRda4k50rkWnJMcqFq0KmfksZGlDbxmb/4IbfO3/2awQssc\n4hAwyqXz0NY331240bsQmRAEyyCSPEhUeCnsmVQ15+Ar6BFNTzhPomT1nMHT\nmvrs+fI5IBVHtY5FaRGxb0DokdxIqa3m71BpaxHNKyhhI9leU2FecFU2A6iP\naEmTRdbQ0agfc46+ZVtWhCNcgPqeJ3R7p8dT5CLUlF90duoGT0wF5S0G3fw4\nqv0XnWTCirGtcBK7xnE8looz6PzxCPNF9eqL10pq80xz2Au9PLLHC2YXYZtB\nWppQ3A+fH7hejn7W05aG68Zc8yxcu6c6dg7tZbIdbnyc5BmNf9NY+xR52jny\n8iQDKaGw18EGJFJya8fXgvENXMIQEnX8ZzrgZhmYd7tjHLFjkEdkM5qWnhLj\npFHyZ8Pjk1OdR7lw0kXEL5pNOPPB7c1EwtdgpAMxUy6GxbbHssplmvSkMjfW\nqhLDu59HHfiXWnE7bXYeMnRozAx9QYRezriVNmHvmrYSeohCN+YE8G+rjdEF\nOe6L\r\n=mwzp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.05d5facc2.0","@material/base":"8.0.0-canary.05d5facc2.0","@material/shape":"8.0.0-canary.05d5facc2.0","@material/theme":"8.0.0-canary.05d5facc2.0","@material/animation":"8.0.0-canary.05d5facc2.0","@material/elevation":"8.0.0-canary.05d5facc2.0","@material/feature-targeting":"8.0.0-canary.05d5facc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.05d5facc2.0_1603901594754_0.0013337535636386288","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/menu-surface","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.291b3553d.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"cee93b63bfb9a88237bfbddae2ba6b5a683d6725","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.291b3553d.0.tgz","fileCount":40,"integrity":"sha512-49FCHr56E4UDY9VOS495gFhqkjEpRvB+pTKOhb34TmQ0hk6LHOCm3EvVxnbtQ1TAv43SEY3HC8Aw7t4H2ElTlg==","signatures":[{"sig":"MEUCIQCpo+LR9IDJECMlrMwQ8O2IDt0Cma+N04TaMyGlJ0BUDgIgXD/iEjJsWicBdsl2+kL+EmM878qWrlXk0uC62dnm0pI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma5WCRA9TVsSAnZWagAA5nAP/2862CY8qCnj2fstoR/R\n65xMSuABAJrzwU+OEzRmp2cvOq38OcwjFC9E24Ib4gRk77p5TtJSp3VRc4KR\n0M2imK/JiNb4lAu07EWkCr0rwcWvPWK474U9okB/LCI2RXy0s6JA1iqONniK\nVWFVsLpYzRANhBexaq6PpwxdS1U51giaUb/JgUIqfKoxobksLveM0XVJjkB3\nr/ZNggHk9hDhxLtaYRMyY8R6+r8hE0/EXykymP8xGnI94gok3mgyFmXSyPLC\n2pi/WwXb58IDurfrDlN7SSz/jIxlKy3KPNCnvYefJjUZdvREjxpa3TqcSKwt\n1zy1hDEQnH86wrqUmEHfoBOQ43cs4bEBEHueCvnmmW7i5ut4RtNILAUROxOJ\nBvH4sDzcK1pX1RAYzSUvMshTyES7s++WjkTMhbbg9pTl0LYn/Bk+5Wax1eDG\nWknV37vkLK50MlOjXVs+g4/ehFZmb/o6jf7XN2Uxm6JNlzpEiA+Z6RsTW8dm\nHflHnmLaG87Lrgd4n4UecYjJq33DK2j/bgJ5eFXqTDgC+l5Sk3+Slj3TjjyN\n33sAmqt2NtAShPKYfl7YXUQOn8t5QUXXNlsC9evyvtflDQMZZy1pUoVy9kkL\nPGFzbY5ql3y1UCfaX8O8IRfV3cc+iax2xhg7NMBfvPsxsdE/VCLLMHlifSnQ\n+cVF\r\n=6Tr3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.291b3553d.0","@material/base":"8.0.0-canary.291b3553d.0","@material/shape":"8.0.0-canary.291b3553d.0","@material/theme":"8.0.0-canary.291b3553d.0","@material/animation":"8.0.0-canary.291b3553d.0","@material/elevation":"8.0.0-canary.291b3553d.0","@material/feature-targeting":"8.0.0-canary.291b3553d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.291b3553d.0_1603907158112_0.05216893253681776","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/menu-surface","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.dbc449b09.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"7d9650e94549e4c139cd3da756ebc62e4598509c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.dbc449b09.0.tgz","fileCount":40,"integrity":"sha512-wnRHoUckUIr+lvpO9FYpJZZqtYOJQB/Sml8pmu8JdKgv53hpwHWepfLPDdIVMaqsuR6SZbTdtPUXNYnFgimA5g==","signatures":[{"sig":"MEUCIQCsrJ7QMijUEJ+41JhD1itQSqwqCBq6zcxukKf8lXHAGQIgZ0xroCn5uXrtxzqnK7UHyR53ysTjoifEh8msMh49eIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbTSCRA9TVsSAnZWagAAfggP/1GxQ7oD+jVCmGpPjh8D\nmMXgH1wAxInd9vFmXUpt08R4BVq80qn/dtBoxM9qFiH2dvowWni0W0CpUshO\n19tWVD8nw+Bkbb7kHdwczu0h5+KSJ56oUChhNFhOuaSyBlCZ6n/IiCZUjleY\naQQL1bBpTYoNQ8kjn9hMEbqqCCyRJsGQPukiDbxe/2p1phzNzA7cgWlcMbJT\nth2rugw2it9+QqO7a3AaXv5uQDza1CnZY8OFShhZrHLF+1vN3CfMwfcNiBjo\n26tCW+Bn1Yku86ndatUbitydgsSCNMMuH+dDRrzubuxJ4RmKCGZ5slc1sgvt\noZg7bVca0wAbKEb38fyPM1t+7nEycWGtnx4zHFiEShbmsfMq15Vll6/CQdmn\nEekdj94afLVdXlekGxefa7/2hoiE7sh9ZlyMGxDP4vBBoYJheMUxcZ7I1OOm\n5u4LD7tyH9Cu8veMOHcN7XdJZSBWwwktm+/22itg0auK0tkSUN6pF8gTV488\n+9TXP2KVkJQKVJdaev3leHvJFzRinqrFHaN44A1krQEOkKTmmxDh3vlc2PaY\nDaay0+YBaPPTVoeCFfLpvh3H94KqKEZVYRoItiUhjRyMEz8JCepkGrVWWerO\noGeKMzRQQoCACTuw9JgeDeQsNqA4nt679Yt4mLzSAzEQSWRaG/rBhbw+tDmT\nTdF6\r\n=nj/i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.dbc449b09.0","@material/base":"8.0.0-canary.dbc449b09.0","@material/shape":"8.0.0-canary.dbc449b09.0","@material/theme":"8.0.0-canary.dbc449b09.0","@material/animation":"8.0.0-canary.dbc449b09.0","@material/elevation":"8.0.0-canary.dbc449b09.0","@material/feature-targeting":"8.0.0-canary.dbc449b09.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.dbc449b09.0_1603908818270_0.020291898630919736","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/menu-surface","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.4794b25da.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"072a39a8c52e5f68eb72733009aa7df2404a21d5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.4794b25da.0.tgz","fileCount":40,"integrity":"sha512-Ki6t93ANtulC8NbdqVNSemhOVLJzN9u7gQdlXjUUzBJW+oWT0VpixXLQMMJ6ElvN5RQ7RMx1A/l5+VLfJR9eBA==","signatures":[{"sig":"MEYCIQDKUzpSJaflaDm+rkzcA+c/bZ8y9xlKC4HFSXn2XyQtNAIhAL0esX7dX80wN+gQhsMRM13+/0RKlzOLPxXYXykr1cQa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbuECRA9TVsSAnZWagAAoa8P/iqmU7/RfC2WgTA+7lbn\nyIe0yAStkEPIVXc+bNpSf6tV52BfF8i9nxDjaErhRitSY3q5P6W+TGIQJKkp\nCtY6aBgkuKi1JgGOajQAwF4qeRxz8Md+PVr02W9jUvY/GfdKWhmw+KSPZb0v\n5sjw1FflgMJ0RX2XJakHJEw0mG9ibuM6w8LID6JC7lD+jL9DkwCr/nnanawK\nm7Rwdt2ZZEiQE8HcvmNKdMLVqRNBbI5cbrhS6MgmE0ecmhCq1zA8nx5ZWoIV\nPv+HZZzOKBYiJxz+vY2CMLwXa7SgZzduaab4s2km/L9C9bwHmCQI2VGQnjB5\n9I2uZWHyZaSqVB3u+GIwdX+WP7wgQAD2ec9psxalXGRTi5XqPgV1EH+IbKQx\nQo19N4ZgLXWgVYBhq0kWsrkUWGmtoOhfL48NiPzSPbAdmcOXoUll3qVXkg00\nyoiAHHzMwRVkqNixOE6a4gVHPaK491W5h4rV+FkuGTZF2MX+NC1U6qRcbHdE\niXm++zw0CbxDV4JvIxSyOXHHhZg6yZJkkc4XXUhOUbg+xsQQchRKvjNp1zeA\nDjlCjI4XneF1pH7wzoKIxztPB9lG7yY7m7bZt9+e68iI3y0o5W8ssdIOh1ZO\nnZ7kDk4uhpCxf15utRoAJTfUWjZ9pOhgMMVTSB50QqGpes9tpWb0YebQZezh\n6EeM\r\n=c7qu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4794b25da.0","@material/base":"8.0.0-canary.4794b25da.0","@material/shape":"8.0.0-canary.4794b25da.0","@material/theme":"8.0.0-canary.4794b25da.0","@material/animation":"8.0.0-canary.4794b25da.0","@material/elevation":"8.0.0-canary.4794b25da.0","@material/feature-targeting":"8.0.0-canary.4794b25da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.4794b25da.0_1603910532374_0.587775777556492","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/menu-surface","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.c61db90a5.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"1fa11f8f83eea9be1c60bc460297eb01ac19b9b5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.c61db90a5.0.tgz","fileCount":40,"integrity":"sha512-QbLIf3LrFjkUV8yZGEuVpQc9BjvtgJTP9g3b+O3yQTi/VN5B6BtcMfH7FXCxqcrY+wN0G18bl9a5ujuYGZvVFw==","signatures":[{"sig":"MEUCIQDNpMlL3rBvFcSKAIiXDg4elScLCoXEd1Kzmt4lDleHBgIgfvyU4VGj3TAcYx3LnCnErMr10K72Q/x5JgxxGJXXSJ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmb/mCRA9TVsSAnZWagAAN+QQAJqFDmB2G5Codxz3gdGz\nMST/+ueTAFS8k+L2Kj6kTiwY7sdDk1a1CbOwHD5ETpXOkHIzuEdntk09FqAi\nY3OdBIWoSJH9lBiGBGQtp34G5pqukee9xvO0zRP1Qhm9Drr1mPep39Lf/aWV\nDVoSDrPD8Mg5grPj0ggwvEGd8nanoF/Nfe7aMtiSTubKbB4hGqvoS3b+6WRB\nZjT8V7oXvfN9m4qE/5JMf0ou8Rdo4dP5Er2keNV/zyMQqoY8i8xuepsrzPg6\nXiy+gJsldP6swpq81+gt3GTw/OaX49UXYA3Ja2SnoNr02U2DPVtEHkd05/6V\nuOMOk4J0J18amBu2U+mesKOmQcLMgpktTpBoeouI4JmTXLxVQTomZ2325GLR\neFfSmH4LlXT7x8vAtp8t4F4D7wMRoncbuE9LHbo8vh5VBRDQG/dDtETVt+2n\nMGitV9iE90HG+WWqakkGJmIuK6Yu6aXgMw//+e2zw+Vwn7GF1DM5THcPz4QE\nG4RnhLPgMNKAQcqGJ613ELtc2xoW0mF4ThpuVB65zR4AM7k2BZY8BvYEI4p4\n63GE6QY7AV4RICJdSLtjR2znFlYNh4ORsjNvBdwFoZDCMmQzl5K70rITkb9W\nOt8HGwrBx1o0adg+S0HKrwp1oeaLXUW5cUvrEkFb56VLP3rQA/k4g9IVnPop\nilMx\r\n=uVSA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c61db90a5.0","@material/base":"8.0.0-canary.c61db90a5.0","@material/shape":"8.0.0-canary.c61db90a5.0","@material/theme":"8.0.0-canary.c61db90a5.0","@material/animation":"8.0.0-canary.c61db90a5.0","@material/elevation":"8.0.0-canary.c61db90a5.0","@material/feature-targeting":"8.0.0-canary.c61db90a5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.c61db90a5.0_1603911654033_0.8833424832297629","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/menu-surface","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.6d9648ab2.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"66ecb9c186448ecac71f1ab503d9b5c0f9986478","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.6d9648ab2.0.tgz","fileCount":40,"integrity":"sha512-2j3iFG0xcDiNEmoSRJpr7RlPDYm9nXW0oyqbjsq7V1BpxRGia99w91xZwoL3lr9GQjxbh6VAjKLfQdrQfwPonQ==","signatures":[{"sig":"MEQCIBRmbbWz9F5LZ7jFqNu25G+Zv75B7NzOiWRZzrrZ7iEiAiAhzNqWZ4Cb42m1EZWiJvkW7vHt7WCM5iPcr8quPBPmeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmyccCRA9TVsSAnZWagAAnMAQAJwLCY5+TeTNi5wE3Os5\nWrHEL+Qd7ktL9CSKcIJCMulp+zMxTNF97+shzegSP2TiLHMbO8k8T0OiI/iW\nYy48Hf9mOqUvGbNvxHvJ/ocI/n3krzWWdd81CSFxPTcZpxrWEndJWKmHFsR7\n4XcnWKv0dWpJVm4oKvpqKrzh1Z2+mBvDfRCa/svQU3P35QmvezhrpgbOG//v\nate0402OtOl52CI5hy2mfl+0eKzEAtkv2RluvMXR3ClR35wfuB1ARS8t//4w\nsAMYvljjulznQOls5l5nZJ0Qh3ibToePLFBL+NIibTdxJJsTtm/3aJ5U9VCA\nlvaK94RNgYkiwZXGc7tfQ9DKIx6MJFecymBhU0ZUZ3sUw4X1Ur5SsGsIC0hN\nP1Qy3Gp9nrcrwOrtxNYKKR2gf/LBNy3Gr/XL+/GEMPtlvJsp14U445UcF/+/\n3zRh8j/h6Jo1QzIxWEQviyO4rvVLmABKElghTKw8QuyscJMj0bOAHLHAR4Cf\nJm4ElfAxk0LFrp1NaDSCNc7asRrRoX8OyaHrtr5XX8HiVbsZuY8rHhRgOl5k\nkLRieGnfJAVI/o9woOu/EIcBLM8VpT95FTeju96UH41Xw9/JGQtzMIVKerG5\ncRQuUuwwXa/12w/rWlHQYJckGBKOeCgKb/2dTnwaAk45VPs0t7FoRdk+HMif\nW3g3\r\n=yBlM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.6d9648ab2.0","@material/base":"8.0.0-canary.6d9648ab2.0","@material/shape":"8.0.0-canary.6d9648ab2.0","@material/theme":"8.0.0-canary.6d9648ab2.0","@material/animation":"8.0.0-canary.6d9648ab2.0","@material/elevation":"8.0.0-canary.6d9648ab2.0","@material/feature-targeting":"8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.6d9648ab2.0_1604003612439_0.8397886695844459","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/menu-surface","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.5511c5254.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"c5527368f573025fd2f521080758019146d3314a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.5511c5254.0.tgz","fileCount":40,"integrity":"sha512-pIY+3uBJBugrtUqvVPZEzjXICug+1VITFfoiUVPie0ruPzf0PuMk8+6C+bjWwDUYfUox+sa4g5Ng06bbauyrmg==","signatures":[{"sig":"MEUCIQDaAfUzTgBwogOLX1f8gtHoS++8WIvDMkWVXFc/SLbO7wIgZIYD+SQUNBjobzkbxXtXP+GqY9Ri6xE0TsLbJIlEvL4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":341008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFTlCRA9TVsSAnZWagAABxwP/R5Y9K9I/tD1/2LuoJGy\nRwrYTe+Jd1MzV8XfQix5McXBqsOiCepu++BpUHRtCOWKVFJgQvZOeS9MMano\nOvQOV6zJIi06bOFGp8oFaNxB2z+aw7ULNfZpdjEXf01XT7v9kvQgerTZGp7M\nEUjFC6gGk7cB+0W+rBiT2dW3qLs1IOK1h28n3WBIrGDiMJV+ASO56YgRMo0f\ns1hzEb3WYYUA7GT1mz++iyXcoFY+2wtEXBcuV/shI2YHg24dJoWIRco/wC62\ngAwnkI8TDVWuTUtVOASLL9UpnZFxo5FAiVVQMIa/1Fh9uNDSNU9mg5ZvPPi2\nHdnac6+GjzgTQNVA0thZdKB+zN+4ng2A93Mr2Wg21/Suki/d+1YlgUYsF8hp\nIT4mjo7MRFbJGQjkVG9CxWpPgLDeUthVyGnPg/m1/CywBtq92a8PqqIuvk3M\nnOJ5EeBENJjMRlBM1MKE4ex5S7A5q/N8ZmUo1IFuv8IgvYYJGhCHK+soQcH2\n9dWtpHLRZw/jkqaHCB4cgchimLG7qG73Af3Ktfwv4/SBCNk8bKEu+XvMY4Jj\nKF0PNbfKAR1Pxj6+9CMPRYQ9cfXitA55J7iiaNpHXYLRvGf2mwvH06o1PaFG\nmjpjPgP0fnXTQMX60/MHJ+cy+XSU9a2WlChECs2mAy/8CKy/VoGYNUyZ4Y76\nGnRq\r\n=DZVc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5511c5254.0","@material/base":"8.0.0-canary.5511c5254.0","@material/shape":"8.0.0-canary.5511c5254.0","@material/theme":"8.0.0-canary.5511c5254.0","@material/animation":"8.0.0-canary.5511c5254.0","@material/elevation":"8.0.0-canary.5511c5254.0","@material/feature-targeting":"8.0.0-canary.5511c5254.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.5511c5254.0_1604080868519_0.4439326826734502","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/menu-surface","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0-canary.bd6e302a4.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"22f2ea7b2c24ba1c95347fa19396c376aa2b3c2f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0-canary.bd6e302a4.0.tgz","fileCount":40,"integrity":"sha512-s7YzIZaIF/3Uo8SB2bhdwU5HBsW7tqFZIplorpnyJqfAkabQxM1/kp5/WPGwZlZM1SuaaS0xomdLFjPUqKHPtA==","signatures":[{"sig":"MEUCIQCNrbqo5N7WohWUH4X0tN0H3cswD67VcE880ZL4e7yX9gIgSD+VzWRRz251tmsxTj+rwei1Csc0ffRv2qAEROZJ2Os=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":341283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDxrCRA9TVsSAnZWagAAc2sQAJa5MnECduTGjp/+zL6y\nKrMRwveTmGl96N//6RqST6kS2X+2ZRCM6kb+tFSZ0l2WC1Eh42DzgJwp4me/\nCRVuHdSOVNQId1oBdU1Mg9f9zsmWYQJl/Sww5lwnGbw4Xnxqj0bvMVVXpUp2\n8gUrQdZZFqAm7zTFYTof0UyfIe7sFpYBaRpKV1D/C5/+YUsG2mm3j+na+PXm\nI/JbH/R9HXDoUFZxHlydVvxOXl8qEAAdtytFdyAIbmU+Gq3JrYFIhDTVw7X7\nwIjSMfyI79XYn+PcSGC+7sXzyGXey55vKELawIRgRBHlw1cRcZwPdj2g5zve\n9n5sMIDFYsPiWhr6BATHZF3Jl8CpcXIlABs5wZhb3LOyc/40NzrwgDwkte43\nUzuBgon1qJIkhJZ+qUdHEXlETFknlMX/LuoT1EqolTEv/NjRKcSiXCIDVQkp\nV4UU7cla5Y+XFZKv/aX6ZRj0jo5/b5QJj4vFPGPrcSfqn608P94xv+BzsPSe\njveKjfCJ3Sutur+SywFrjhtiPzfrrTyzpa9NxzU+ntaUg4FkbZ4915B8qF65\nOPkRMvRffrQefNiOcOnpG4Ld1NjodwRncDNJYVsXQL8fS2YgrfmtlcfIqK6D\nnQQs0MOtj1MULT0vdjhUvN3trbONwdIuFZBMGsPwa++/FJVzOuaQMr1+MEhq\nXPDA\r\n=7ipt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.bd6e302a4.0","@material/base":"8.0.0-canary.bd6e302a4.0","@material/shape":"8.0.0-canary.bd6e302a4.0","@material/theme":"8.0.0-canary.bd6e302a4.0","@material/animation":"8.0.0-canary.bd6e302a4.0","@material/elevation":"8.0.0-canary.bd6e302a4.0","@material/feature-targeting":"8.0.0-canary.bd6e302a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0-canary.bd6e302a4.0_1604336747232_0.9048465160706667","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/menu-surface","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.d6b5cd418.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"84acf8d7ce3852344fc5066be892bef4107aba5d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.d6b5cd418.0.tgz","fileCount":40,"integrity":"sha512-6DscH1f8k9ePwYX/AhqPox1S3/bCpTQxhE344SdDPcPWgRc+K1Hh+jdaMfc46KC6Oia1+HRPvzuzMcy/xpXJ/A==","signatures":[{"sig":"MEYCIQDhV1JSCuoZrS8qI39/nh5oh6HLpjY8kQS3thF+McIBzQIhAKMn4kupjjgP7e3+VqCVHh2e+EORu1tLoT/Fgmnm6HbO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":341283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI9/CRA9TVsSAnZWagAAFDYQAJujd+eNx9UDmoXaCCt0\nbMkCwNJZuYW06Nryp6LuEuqdysd0h+MyCzEg9jQ4ecqajlHS65Hj9q2hBhBJ\nM88JyrxUTV6MtM0HNY8Qxad/brI3JYx6Ye+o3czpW1C74X3f4Q24YdFSpZay\nhnDE1RseOWpnoR7do4/RReVQLQialc99VjhbXrqQr47HLjD9dF+q3+4Pu4Ko\nU/e69yFkiOBM+xlnJxS16Kt3npQurxM2OR3SmtZHHhssfXm9OWg39m5A3QUB\n8sfvXaiGBxKzXx1Iwy6HWgeqtmx9jEOD4o418QlDmMlNyp5SvVWA/30V/V52\no/X0Fq6+Xx16ofMLTCzxqPdGCWpuvwnsxbtXbYtUNtSc479Yq12tn/jlFXR4\noZq20TfTFjAhoruQKD3fsUi15XlZuaI85Tz/dJBl0X3dmrUccJE3cTnRWjF+\nfZorq+j/HF9qihV5Fwx+0me5z9448e4NbahI16796snF0ZXnTqPH1fc0cKYf\nIRN00qcKqLb2BVvdV8PUEKYAgBNf/8ls4clcfSe0xk+QAkIurPzb8iwTVisn\nDPpF8zD3iD+tRqd4BlDaW+SkNmt1YIT9E5Eslw8KJcGT699M7bmwQEIdDGWV\neVH+XId+OS3gmni4R2FKz7rwOfDyfb+K+Fx0/mtC6NbMc9Lkled5E7vSGbwz\nq/Zl\r\n=E691\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.d6b5cd418.0","@material/base":"9.0.0-canary.d6b5cd418.0","@material/shape":"9.0.0-canary.d6b5cd418.0","@material/theme":"9.0.0-canary.d6b5cd418.0","@material/animation":"9.0.0-canary.d6b5cd418.0","@material/elevation":"9.0.0-canary.d6b5cd418.0","@material/feature-targeting":"9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.d6b5cd418.0_1604358015502_0.5562813568548628","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/menu-surface","version":"8.0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@8.0.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"1e3cb6aa3091468b8ff7acdc1e8353db7bb32618","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-8.0.0.tgz","fileCount":39,"integrity":"sha512-oQxLi80GrNRQ8jHMi5qXw9S9eRB62Y6xWV8yfG8k4buTTg61iFx9GEUDDene2RslH9eyggVBKJ2K0ibdPp+ZpQ==","signatures":[{"sig":"MEYCIQCRvLPtcIMSh45FoHFlEPYQHGgI5EVYZmXKVxdZdIN31gIhAMIb2dKFfRGvJ2VeSVHsDP+KomfskMmZFLnkyvJIpb3Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI+UCRA9TVsSAnZWagAAkCkP/2YtyzCzaZUAXuX3Cuz8\nBEbmNKZ2bw/XIW8ztNCGrD9lSoMSFjZm3tVAR+bzcU1rvvRpEg/Sn6QGUCda\nQ17hHFIHcbltTMmb+PizdYs1uHzxpmPir8n1JfWMCLfqZEIERkdcXEwGDeYi\nXDBGteH9E9vzQUPNCenIXQ6apMprkHcPFpu5aLp170G2jwPTepk8/L8GCWdo\n6SLMjIdQZQO5vzFHPcpkK5Rs3T6lPODGnNw6WoxuRYDpgM1fjr00xCL7BteH\nB0YOxKCVLUrKCQeuj2nwCCXaOppQ2yFC8HmBV6EhQAGzp6aRTTgU1dcK22HX\nGkFc69TySrIQmaMI9UZRvGvK2op3xr7Bq7QZQuu+XgWJRg3ec2QNvyEx4AYi\nFXLZUPkeht4LiFg0e5fS4E5P1uKW0mmC+/ZHdoEqLHgHZsVxp3S6n5jIkli3\nIRAzBFTCkRx/VvFl6xh/dvbWz5dupNq5H3jN9XQ2Y+dBqEJmA6Dj81zXxN0y\nqZiSMECYAfkP86oc0SnjarO4A1aDQ3Z0lwjxMPM102A5bA9MUnkGmqZFuf+q\n22xFhJh2mBQqxX+34cpOpOv7fZZTA9fGLQh9bMnzugERkHAYCgpyiF2r5zcY\nQDOHTA3s69LYheZRPp4SH60ZmPpC9k4Q9gi0rC4PX2KGpkDF44jaMhntrn2L\nmGDb\r\n=3jmn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"^8.0.0","@material/base":"^8.0.0","@material/shape":"^8.0.0","@material/theme":"^8.0.0","@material/animation":"^8.0.0","@material/elevation":"^8.0.0","@material/feature-targeting":"^8.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_8.0.0_1604358036116_0.6281618755113487","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/menu-surface","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.fdf9a2634.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"3c5f16b7d80bb8eb660af0725de48cca726ef8c6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.fdf9a2634.0.tgz","fileCount":40,"integrity":"sha512-54UngvP31Cq4eMBj2l3P4WbsEgGGWU3X0KDDjkY5tCj4sPkjEeby0gJQpOcxt2bqZ7BZOo7NgTq2E7Wu2T72Hw==","signatures":[{"sig":"MEUCIG+QFK8xlqx3uLAEZXJ3OtKeG7ursz2FuCU93OUkWYXNAiEA3PmZXCsrR9DTzXIzGXxibz8VEd6nAG2PeMWfaeVgYHc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeYvCRA9TVsSAnZWagAArHMP/2CrYUg7FYla7g3SkDFh\nqyd4JWQUUH3O5Rf4edNCapACb+L/Hs1Tvg6YR44xkluO77oxwsHsGxfYu9Ib\n0MdkEK+5KAvzcWuYLomxc8oqFUM/NRp4og7eT6YUH6ZMZtVaH6n+7IdutVMs\nWJ8jcChLHq/1+bkFXzQmA7hjEQJcwdrvypsUIkXCswA1psTe4KTN1YLSceVY\n1u3tpiZgSk9fzYEDPBbyHn69sG0AwWLdR69O/UcRcSW117WaKHvDFhTuA8ld\nEoZ8yf4ZZ0ilEM939Ftr8RTr3z50w++0BRFJVzr06+TZBk6xGN3V0Hw72t+d\n//EGrHuOfZ+kFgRhYnrZpKNrPuQg58Mxc3a1/sGgxfgKamYsC1ASHlUNul+x\nH2iVM+gWHG+9QXE4q16coY0ZOaUemZdU9/jxKkPTaqqCb78fuRClN5fJi/b4\nec/UzJ6SpL1x7hgK3dECGulwFtxJn9r2IDM8ks9YJ6m/MegvrLIqxv70+/AF\nIFq0PRCykGBGJdD+c4BBO6veAXtIndNMdUOVQbPretR3jCR77kSeWzS7C/p8\nyDCmsZTu+mNtcpwsgND8UeadCQzzO2gqUUVD56HO4kCn1Xc/+OVJs9jjQ/8w\nKn5o7HJS2O15LeesTa3CCmkEcHlpa3ziRuFZhPRVif0OryWw9sGLgsPY6tvU\nTlc8\r\n=2Mkb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.fdf9a2634.0","@material/base":"9.0.0-canary.fdf9a2634.0","@material/shape":"9.0.0-canary.fdf9a2634.0","@material/theme":"9.0.0-canary.fdf9a2634.0","@material/animation":"9.0.0-canary.fdf9a2634.0","@material/elevation":"9.0.0-canary.fdf9a2634.0","@material/feature-targeting":"9.0.0-canary.fdf9a2634.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.fdf9a2634.0_1604445743374_0.5792919036780615","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/menu-surface","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.4a86f30a0.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"cee0547731fc2185f5f58a37c68448f4d160e607","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.4a86f30a0.0.tgz","fileCount":40,"integrity":"sha512-EjNfBcMxGYwfrAtW/TgBZt22Qh+jAINu1ZJoHvcU23WQKwnd20Iw2TJn3JfxLp5jPIDJdNaQeBE8Y2VqcyaGkQ==","signatures":[{"sig":"MEYCIQCuZuxesJTSbP3bNpErLghjimCrLwE4tt+p1TK4TytbKAIhAMg3Uh3Jlc/LFdSxr/L+0M5GBHv2GS5n4cU2ec43b06g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoefBCRA9TVsSAnZWagAAtsUQAJ7ZfeVTtkoFNERZoaoe\nmXVxYAbugkJE+1e7dxyiEMWUFE6mzgRUm2AkqzhxNAE9jIny0BT/wUXc/ig8\nufv28QHRgfB1mepKdC8kxq2o+zX6nVaP0jYAGJ7lZkax9903EGRNv455uBa2\n9xAjk8l6DQKzhG+46v0VarEGzsIVEv9PO25pAyzZ4RzW175O6jPzNxNOF2Wa\nFQt7dGIYwakW/37gxXUSZgQblpvqNlwNP3r5KmwR6Id/BwvJjlLTaYX//877\nUg1uHwJvzwxH+Cr85VRzOdRLb/Df1SXfcW2fh7tyXGlRTuui2oU8FaOoxM6t\noo/DKkAAOMmiPV8+dYb1sgdNAMMhSVJ1AWjBixkoVOlIHRYJEJoFtT70GmKF\n3DbCrtk0GDvP90XZjZ1H0TtRf6Xgt9JGWGDvUDUQTk4JTaGh8odhlAIDzS8G\nzPHtGyj5D8osi73tuW5O12tc3pXnX3yLtupO9FHp8TWBVs1Da0HEplA9mPrS\na/xSQkCxr/nSrLtinCrRJoBUaYeKR0XJi/nItWFmnmA6ejqIuiV5ZB11iBo7\nCEzUtl89umwM960TNWIM2Jjb+180RQdAbMLbD/uQUDRqPClxL3XDv6i+amQg\n2qfSpcGtXXKe+62/30LJWe76ehLxzSnUVUr9mLg6oQ8zK5Yfab41cgdwMhWy\np7Nx\r\n=VD+6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.4a86f30a0.0","@material/base":"9.0.0-canary.4a86f30a0.0","@material/shape":"9.0.0-canary.4a86f30a0.0","@material/theme":"9.0.0-canary.4a86f30a0.0","@material/animation":"9.0.0-canary.4a86f30a0.0","@material/elevation":"9.0.0-canary.4a86f30a0.0","@material/feature-targeting":"9.0.0-canary.4a86f30a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.4a86f30a0.0_1604446145321_0.3313198904787322","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/menu-surface","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.fc8b045f1.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"14ed2a4b191065b77c22fea76f7f254698d4b58c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.fc8b045f1.0.tgz","fileCount":40,"integrity":"sha512-w8YfZpq6tFWo4CIvmaWDHt7ud+D1jdAJjnsu8KqdarkSNtKbrmc+M2nlezKkCv9cJOZ1U/iNKIbaXBaO48dsKw==","signatures":[{"sig":"MEQCIHYji1XGJzKsPulrdA5AnDSI7X1QMaGnkYKMV8FqDKmLAiBfqBTEYGH2aQQxoUNclImdAxzeuH09Su/iC07L8lgFsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoenYCRA9TVsSAnZWagAADi4P/2Hcd2meFZlM4CavOeid\nEJSjlpeRjtrGgUlbv7/5IyawLUzNob3PzDCSISUTV40iTtpXzRybD0u4O/+r\nSgi0W1ZJOad1WxbQa5ZH3962H57BfviNTwrO1x43l5XOcARshKzkgY835A3j\ng4nJW/llwfInQ5syFrTVEy0PqoFWlSJeQrh2WjtpRhyGYobSaVlOgOiYJfu3\nMA4RC8TxXL3TeWmjSVDmrJV0FOXWQXyrSVbMK7My6gnlFc9dA4fsVKESObhj\nRGPAiioOnO6s0b6Ky/YUZ4zl/44sVzJ88NEK6VX7I97CnmGaW6A0tQjoYysS\nieDxnCh+F/X3AWD89L+N9p46JGAdSMeW6D842BZyaKKTe1VbziKwUapHf2N3\nbigP7Z6iYOIO5bLVfNEPXK7+1Q4yyf8V4TVCu8rEj2xCKwK7LPgZ38so9vS7\nF4a4zaGtaMxdUCDUYPciivNkykEUBjkFeX6D2vXbk0oWWNiCQii2bxkaM77X\nJIy4tZf9O06H7NPpeR3LXL8OCQVvYkwrwmJaUZrkpNT72V1RjZGCkqIFsIcB\nc4V9xEuBoQs+dNtsRRCy2jAFsgmc/EBwdtJiVBnyZdIKn04W7/EDJNjam8wU\n4NtZpIYGLkkXvwIstnhAB37qHIcyxg7I5yu0pcgvG6E8iHIdEp4T8eOCr1G6\nFbVw\r\n=7oDH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.fc8b045f1.0","@material/base":"9.0.0-canary.fc8b045f1.0","@material/shape":"9.0.0-canary.fc8b045f1.0","@material/theme":"9.0.0-canary.fc8b045f1.0","@material/animation":"9.0.0-canary.fc8b045f1.0","@material/elevation":"9.0.0-canary.fc8b045f1.0","@material/feature-targeting":"9.0.0-canary.fc8b045f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.fc8b045f1.0_1604446680091_0.7655483672762762","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/menu-surface","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.a0b2db26b.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"496224d54e4f9ff2f803ed52f108ea26dfc5a330","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.a0b2db26b.0.tgz","fileCount":40,"integrity":"sha512-tXCRQtizvW+KItCQropaneW/iHOb30jk+1020p6Zjuc3TstQtEporMHJhSQ34Eps1evRFxetU+f0o5OGmiF7Hg==","signatures":[{"sig":"MEYCIQC6qnIz3qubeLWY+RuIj6Zv33N4Ujijp18qXEkX4z8kUgIhAKsjPyDxtVRCwEoCQb2rENIx408VKVEAgCZ7Skfu+8CK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofFrCRA9TVsSAnZWagAA4soP/0cWPY/C3bB+tC2S8WzU\nYT2DLh3KgctdgPl7q9lWEYQF4aF/lFempsAJcRSrYNChg5JdsxnHUrreGzO0\nn8Jp9QIkigYojSbWmL3xPqqZaKoe3Kd75Icbm96Tu7Qi4dlpSWjtoQ5aaH9F\nuyPw53C30NTBpjwFSCQO87qsZkZLi/7B0B6PcWr0MZdhZ30HoistxY40Uitd\nl3aR7W3AbyPvobCppv9aVZGyeg/9UWUtYtN3fy61ZXAgrlEZDiwDSDKz5tOG\na9w1Fw4hu6InOgi655K0Eg7W1m8KwqoEYUGCaL4LxsaC6m+6vgmNGay8/ELd\nIw3+Jsm4WM1gr0E9Ne1XIY58okQbhN3KFwQI40Ogvi6PthQAOxvY5RiVU4Pl\navDZm7Kdn5EQFrarxBE2ZJrLhbsfobAm4l4FD9K2cmBHlJPufay8DgJHGHfT\n7Qx4Kd37r/FvgvNcVwJEmwutJdUbn8E47VHGduhhNjto3ANhcE21uDuBIwnn\nQgzFtzXEoszbuGClDQsXz142FJwfp80w35uV1bmtqUNIp8lHJlm4Pw2Ixjm2\nT4oFx2+/6zm2uObmK/05xNvTvEQM9C9YcvXcdS9Mz0tTeYm3jsQW0JBIItGr\ndw/+nJxmLM+O++5LYhvGPiTEagJV5qIuEJKA3fjeUmlvhk2+yElNcIbHuRQk\nRz8J\r\n=iSUI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.a0b2db26b.0","@material/base":"9.0.0-canary.a0b2db26b.0","@material/shape":"9.0.0-canary.a0b2db26b.0","@material/theme":"9.0.0-canary.a0b2db26b.0","@material/animation":"9.0.0-canary.a0b2db26b.0","@material/elevation":"9.0.0-canary.a0b2db26b.0","@material/feature-targeting":"9.0.0-canary.a0b2db26b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.a0b2db26b.0_1604448618618_0.48499257583067945","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/menu-surface","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.419e03572.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"2672b0b4dba379dd3ce4be275d9ba282c77b7782","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.419e03572.0.tgz","fileCount":40,"integrity":"sha512-2E1AGrYIjRxme2nfawsk5jrAgYgStz1yUCeS/8/FN4vkanyum2VfI2CsYubEP8hgfxbGipnP6RsOMQQglF2U9g==","signatures":[{"sig":"MEQCIEK4K5gyh+/jdVhCDkNuiSOqteDqqdEmU+/j5f3mwCKQAiAFIAV3U98Lt35vV09OFiGexEY7KhfF5+NZcf/V/eyLiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogUDCRA9TVsSAnZWagAAuiwP/R0/++l7feBL6ptidoe7\n4mLlAmB4ZAnGiNuA+ENygWBAEdMMy3m/ho94a+bt0KDYww45iEYskPBLxE6W\np/6TOFDyVFQq7IoRS/R59+eWxLqo/Qn6Gr1LCsrmTZaLDtKlBmIKZbd5RgQf\nwBV/acNpvY7kF536LpCMYwobbbpFxM5Y1c/WwjGvkbzSoSm0OUmtks8/8Fjc\nIzTeotsZW30DFzy6LnQM5x7NxXM8IsHnZ9CqdcSUtwGXjEHyF6+T0HCJGSlP\nBi3bfh4pLjqox0It7uib1Jxgs/nQtycci9bg2aAGJAuoVqo5QgPAnzGfo6kF\nBB/bDr22Wh8pbkfY2cjqdW+kGiqwsPISBtpTStICkkWmfIfjAMYmUAq9cTcF\nRrzd2csqtg9PNj/JUKj0bNDIBkwM6N7clT9KH8bZyMaCUdAc4STr6DPqAbix\nche9s9/vtdt4b+fnJbk/IldqI11QTckCtoHGL1MkWtQzwRqiOiOC/bxciruT\nrB5PS80GLjAk95RfrqGaoEJ9MnkMEtiFeQIFCazmurD3NZG029VkOqB0xbwM\nQY9GciSaQCfpbjy3Ym7ltfQHjJfhDqWIoxaHXu46pTe5Re90z5JsaFgaRS5K\nKUM8q514cEJDZolynXlBE3If37TFUQopv7G71puCrhu/ZGKrSKSZZBA4TUNZ\nCwVT\r\n=iKOr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.419e03572.0","@material/base":"9.0.0-canary.419e03572.0","@material/shape":"9.0.0-canary.419e03572.0","@material/theme":"9.0.0-canary.419e03572.0","@material/animation":"9.0.0-canary.419e03572.0","@material/elevation":"9.0.0-canary.419e03572.0","@material/feature-targeting":"9.0.0-canary.419e03572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.419e03572.0_1604453634740_0.9151776583558353","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/menu-surface","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.a432ad542.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"71893b5aab9157974f6b89977900f08de4bdbc1c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.a432ad542.0.tgz","fileCount":40,"integrity":"sha512-oB9ldPWBNMbccf2UOpyZ1EG/xwkGNxEfCf8etgMfjXzcMq7D/WeKkKM3eUglC1DTCBMALVV2OPvps/JP6D6pxg==","signatures":[{"sig":"MEUCIAN1O4nNRGnUoWexSy2luWDdV3D0q9XJJr56AF/ZGiAVAiEA/e3DhScpqAsutvQxeJDP0tDswyW2i4AilUiYzgPkL3Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKsDCRA9TVsSAnZWagAAwaUP/3GKx/CHbWEfvhqIHMhu\n2U1SwUWlCCELK2qrjyB9ibPHGHNgX9ebZ3v65geOLuZYMcJQTBeZBafj7WdL\nuzVZTZDFCA6EC5XcfSMGnWl/LBCLLXUy6K1rOvn0E6nc0SukGI8M8jqg/cOk\nu5LmcyEJD413egd2/hluYGZRWbyTqSRwokpi8SsgpFADpB0TI/IrxpBt6YKs\nVwOm23m683gpDIg8Lxz0ATCan2sCW2+oZHCFICfQ/9ESO9qdTB4hGYGFEYVd\nQf4rr5KzC0/EhLfr7xryu4ejIf6IGIBpwC+V8wRVFD0D3UPdIJR+JjGkMjqf\n29UbkgUxdovIl58Rca2iciV3qezTIg2bA8ttDDcXLEoFp7kyPjDrk1WFkYm1\nmdM94iTn7s7VEhJ45JOxPCguZC80/U5KC1y42W3dEdaNPUPzGC2m3/FGkEpt\nBIBgMVIQ2m//GZt9LNRm8M2SNkc8/CLKe9QOz8SmxjbgGpDtqWN1+GBgLHe0\n/IvzsHABYoiDTMWy0NfVn06J4Hq0FzmDwEjYKSvTgRkYz2HLkwp4vvT5y4Zp\nf33kgQt5fbrDx7sWEk3AtBvzKMS1saGw1hJ6yHWS4y5bUChkDy7odWtelmte\ndsj7+Nzfp9443Wc6ljzEz7/DigYebXfsIS9zPpEf1x6X7ef8j5/StLkGuqmI\niRar\r\n=01bO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.a432ad542.0","@material/base":"9.0.0-canary.a432ad542.0","@material/shape":"9.0.0-canary.a432ad542.0","@material/theme":"9.0.0-canary.a432ad542.0","@material/animation":"9.0.0-canary.a432ad542.0","@material/elevation":"9.0.0-canary.a432ad542.0","@material/feature-targeting":"9.0.0-canary.a432ad542.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.a432ad542.0_1604627202501_0.12002970472962393","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/menu-surface","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.e2e8aef1e.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"ddef3bdec13178e4a24350a8b3567f10e717f743","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":40,"integrity":"sha512-wVCT6h8grJWa+NIloxhAOWtQMZu7JQGgDiU/0d7lU3SjZvpL6JHN9l3IvELmVTFixQdr6kA/sV542wmcVpYbRg==","signatures":[{"sig":"MEUCIQDYm1v6tCbM/jNf4pV8a/VZWN0Y8ITv0u+mMpUVZW7ZEQIgfbEYgp64/55/FfrnvtQc0HVqAkkP0ZPsy6mKpBacHUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK+RCRA9TVsSAnZWagAApcsQAIQobCRWUl6i9cc1X5hK\nniCPzxt/XsCcCmBWySXqzJxSGUYmIawwrdavXvKPLKr32IG3lCaRa+lfMMyC\n+nBbZK8hueUetgPuwh9m1XPMyYHccxFW1rYkoVBiNoa0Ol23w4lO9yNwDcBq\nmQzGVm4XJlKZGtCCqWRjG246LXMCkoXLuq6WUYYw0WMC2Z4Dov3otxOIDu3T\nE2tKKexvhIDGT/EEhgGwbqO5ejXE5nWEGaxPoCedKWIfSAPLIexe7VARIHX9\nE4XqByd297H5fi1CR2c7iq2DnzmTiIZH/hnvO3z9FNCIePEcWcv0qfpMHtLI\nzo4imDOlvhIxU8EA8mGjZFtubPkOk6y9tc/6OBIP8oCKv4n2R1EXlw6zs6eI\n6Za3v9i4kUMDGh9J9/jBHleMWYno1zMNmrJ+zDvXLAbdnZjHFTkWPgtOGc6x\n1gH0V4DhZ+j2wi7bx6J9LP2R6hOuGKxS9yJLuTvaJu/54wVJ3tEd3X+MAVBx\nNDkY4DTYhJBo6nrbWZ6JKwS2Xj7NnW0BbgtVbkC/shv979PDGxT9jBwMfbp2\nzt99uGK7RkX/XAjqlQ8Chqffu09bLMrtVKPvRy9CjFWf2PoGdKj0/3pRwVmQ\nVxGXLFTPpp/2K9FmTqqfMkZCt4EY7O1vhtxoYvF4uwPlsjn6LHszvLroHrKM\n+vtX\r\n=mUX9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.e2e8aef1e.0","@material/base":"9.0.0-canary.e2e8aef1e.0","@material/shape":"9.0.0-canary.e2e8aef1e.0","@material/theme":"9.0.0-canary.e2e8aef1e.0","@material/animation":"9.0.0-canary.e2e8aef1e.0","@material/elevation":"9.0.0-canary.e2e8aef1e.0","@material/feature-targeting":"9.0.0-canary.e2e8aef1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.e2e8aef1e.0_1604628368996_0.0726827686273912","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/menu-surface","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.ec6b68b34.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"6bf1e1580790b2e96d617bea98d9075891ab3b57","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.ec6b68b34.0.tgz","fileCount":40,"integrity":"sha512-rrfF5BEuZgJnGzs3s9iVVIdg5HzhAM9uunO9wi4eDNHGbltli6BvM66Ds3ZzDKaxV98l42f0n/OF6hbi0L9SoA==","signatures":[{"sig":"MEUCIBcDWQRqUH5vp2HmzOSNebrHVQWxLZ/9e8qShJruWB3nAiEA+sBgAzWi5fWGckNaNpFsHDL3nvyXVPnymJbfTNBYJIs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZyZCRA9TVsSAnZWagAAA0cP/jwojroeHTtiUNrMdvRL\n4/TfgbXhWSVRQC2IksqvMemvP+Z7ii+lEvHG7+ltK9CqG2BAftQXfhZgDiFc\n3gumeJ4yrgCdAljfK+/kKh+B0/kAgE5BbmEoPtxSwhn8l3fJGHl6vhyUJkfC\nHpvVnAvG0AkjZYqZgB5hvEzyAjIPKc1IEkXIB2jDDMEVp3UhihakZKI7N6MI\nnuDb/l/r5kA47cI5RK59VTIZVJ9eQbyDxSAZC/2c4JRX6qGlAUGIMBAFp8MP\nTH1tmhpO1y87D9gm9nXG8unULzFNrpkRF+Yf9HWfuh45iVdWW5aoCgWWmiYQ\naiNBbkNu2o7FPW+hBOQCYiXI6QOt3VI+4nUedZcEetAQIkqtZ4TwisxdMztV\nD2E+BoQwXokACjrozFz4IHnRHn8K/5dYJ9JprA/eFIuewBdUpR4Jd7ny942i\nyXy+MfgI7zHhTp19At4xoEwZDtJJ9drnwKZ8F4JnR3Ac6sogYOk7AlBqr32j\nYSMMD68zz+4Fbf6UU42tJYjyXH3xTVWQiDLQgkuS19OVwIuuGhKLfWPwzny6\nyL23FVYoQIuIrmVk1tY0/JMYr+zLaeqIdGdPIkPiLDg1o0k5BoiQWia+grX6\nPcf/ygXR57Ir33O0OFnM+4YUm6iKKl8wZN2HOcqF4vV9P2uGJAAgwZJbjBsG\n9NpO\r\n=TXQQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.ec6b68b34.0","@material/base":"9.0.0-canary.ec6b68b34.0","@material/shape":"9.0.0-canary.ec6b68b34.0","@material/theme":"9.0.0-canary.ec6b68b34.0","@material/animation":"9.0.0-canary.ec6b68b34.0","@material/elevation":"9.0.0-canary.ec6b68b34.0","@material/feature-targeting":"9.0.0-canary.ec6b68b34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.ec6b68b34.0_1604689049053_0.8716894382648004","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/menu-surface","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.b39094d14.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"b680072624d7cc0f6ad4ae6dda49aca2ef192c13","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.b39094d14.0.tgz","fileCount":40,"integrity":"sha512-hxDRi18N8+WEnkG6ZuaMUdKyYNJsg8ZWcDxCtED5pBQyQ47/rEuXOJ2vvb4JR7D1l5Bq7zrnW9jy3a2UjvqNRw==","signatures":[{"sig":"MEUCIQD9gSstamO5HURN+rUkZXCyjcz6Q2ZkxNy7qt7SEQH2lgIgP6RC3RshJ/iWS68ZB5JjKvtb1hWq6hJOyvu6Ekp/ODc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpb1ICRA9TVsSAnZWagAAruQQAJ8y2zFotywmUJmDCZtl\nVAD+ruLp8YT+44Y2C4n+WUr9RuKWU/zTiA1CCrEgb3v9RjCKGiZtaa0IwR1o\nGQGBLnW5Py+fQiZQAtc5Ou+JsqUyyGK4L7DOilq6xyGkwHeybZmtecexLLFo\nckImw+Q2FR+/OgK+I/ieJoJ54u6rTz5hl2YHY0RZt1wqTrhy3eneZE04j3CR\n2Xy3DTMxJRdE9mWfS1SJqzVzyVAMA/Z07Tvxr5CntmR1b0B/8peCJGpqF+rp\nxGyqN4getGPQpKch11qplL3kq36UnxoOLULdOmItlT+6v9qkEUkG4c1B5VrK\n+Xd0ieugTwgX9pWvGdW37r7BCKMFchcer24Z4UpenhOjObT9JQt1m/Y8qCFW\nhfCjGST3Y6W29OsqFPYyqMelWYJ6jlj6qYETTP+N6DQLOvbIRLSCQbBLDy86\n6daVpZMOvM4j1qTWRDxofWpo5OIOhP/92UdO7k7mAN90Zd5jGUgrzshJh1Fs\najHJQZLI4YeoCCXYyFOhNI6L19FTEyeTz4IC184IZxwgi3WEaU/fh5IWglAc\ngMxW2ZRQIMzOonv7VJNkXwVnEprhKuDBObUF3z59ilIA71s3cHMMborJCTSu\nKpVdq9Hw16PDAfH34eiQKyB/7xu2PSYrZVbO9wMhKEYNLZlVIcwiLiIg531Q\nlLYy\r\n=Bdf4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.b39094d14.0","@material/base":"9.0.0-canary.b39094d14.0","@material/shape":"9.0.0-canary.b39094d14.0","@material/theme":"9.0.0-canary.b39094d14.0","@material/animation":"9.0.0-canary.b39094d14.0","@material/elevation":"9.0.0-canary.b39094d14.0","@material/feature-targeting":"9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.b39094d14.0_1604697416319_0.9240025812393047","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/menu-surface","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.8648b8258.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"112c364990a7f11312f751ff06dffe694a852ced","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.8648b8258.0.tgz","fileCount":40,"integrity":"sha512-jLrcVhnSjKY9vZXQK5r9P58HalNvdA06TN5uU2e82xYIdJw/nUqQ1iSBeq9rtCea3HYz3/5aV/BamEA9ie57wQ==","signatures":[{"sig":"MEUCIDod3R4KmPC/xQfrvyh6k80+LMx6YlYlJRr2mHVZ6EklAiEA2wZxPEvWxT4gKzSOz8Uce4mnn8enVJTJwVLvY0xcbco=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRJQCRA9TVsSAnZWagAAXnYP/RL+2QqOm7rsSOfgslh5\njoaYxQ5g8Ew3uXOz75qsE1KYoFBAbVROeB2kEEHp+aFTa0juhQ1gwKrdxXJw\nK7T0cUBPXUrlxhqiwFRX46Inp2zKRbpKsUa1vvbp1yHe7YCqAHAIClPgwcvj\nP7WE3Yom3AtWr3P5CX6Cqwc0o5y6wQCAXiSGtVoSlO7nvdl5JPsm9iuAi6EZ\nBFKqnidaCyB0mV7Ko/QQ8z8HVzwkg21C9IV5YODjzfP403edWNHIzvmjgRGz\ngNaTs+FlSg5Iw9YmItnrBQqC1clCcLX0g38nWVfUgAHO2ifWnXGuQT0DRJ/L\nS5kRvdw9J+H/SPdaykcS4R1A3VwA1y8+Y+n3W/hsYoAg2LAYpsATgzJAjEuQ\nZouRNmcCzLARNZvi9pkIVgf+ml+j+yzKTM4uqKMHBL/c88BVM8vGyb87jeef\nAmlSQezAaX8sCdy94fxh2XtHAhGw2LUbAWvTBRQ69yJow9v2bAVvMh56VUYY\nAjpQUEYGJThFd3K0myzWjkPLOv1RVI2+gkYGLPoesu3dpn5RdO+u4XhGxGQb\nsbK9laURJKJJ3H+zY2iIm5TDtrQCVO7ocAzcvDejVRm2jPgeMcqX0nVzcBOF\nMB9W0ttJRh5Non8BzVRJ9H98rur3cAqccsFQhPqanE0WEy5wg8BlZ2z9NYZD\nAv+E\r\n=ujv7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.8648b8258.0","@material/base":"9.0.0-canary.8648b8258.0","@material/shape":"9.0.0-canary.8648b8258.0","@material/theme":"9.0.0-canary.8648b8258.0","@material/animation":"9.0.0-canary.8648b8258.0","@material/elevation":"9.0.0-canary.8648b8258.0","@material/feature-targeting":"9.0.0-canary.8648b8258.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.8648b8258.0_1605177936060_0.6029849938577128","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/menu-surface","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.240c5f74f.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"38e4c17dbf95074236dbf315690460bb1ef9bd7d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.240c5f74f.0.tgz","fileCount":40,"integrity":"sha512-GY9T7YlV4nu8amGEc+4ftOQhN7EVy1A8d2T8WoDM7gkfBdArq7DBmgOK1En0ZARh7/yGJclkBlQVWSaAUZpMUQ==","signatures":[{"sig":"MEUCIQDvyyQ7/AX9QWlIdxsYr0RiD4Zw0LqTQg21ZlwAowjZYAIgKUdUfSkv+3NCwJg3GCwtMrYWBM5F1aLafWIOxDi/Wp4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZldCRA9TVsSAnZWagAAikoQAIdLqfe23nQGO/WsX7YW\nuBL82s5tl9jPBPiG5nGx/NkHJkfHtb6Ij5QrC1p6FhZ4MIl6I/sWlwsxSOZU\nZED02zlHU6qgIAL/UcJtdz4uG65cSMoAkT4vBLm/or+XUSR2luqOEq6i3hIU\nrkgyhRhd7gTWj/eKTqdAba98dtTeMNprKv4t/WtDNk4F668cz7uyv0GUNAA3\n2n22aWUlp0dswwr64HbkUHE8CU6IVntdU69zZT1nKclR1En9u1KvZfsEqM9t\nt232MLvmxcdcjjYPI58WKzcWuFBqbsJ7TZTT3gimun9zF29CqxJxlZyrkYkB\nine3C40NvkfZXgaxB21Sz71pvrsZemBaab6E9D0Jdl7IlIOHQ6ecNFLkakjV\nTJlF3hPhO2XrDLrdRwNa7oCrkgVvsVLMIytUinz2oB3ozy9S+Uh/da4CIVfS\nw3aAo+2F3Hw3W17NOwu8jdjUvTnXFzpU4oINz6hMElTRTjdq5Gvq6xppumwy\nyuIgOj8MD77bXn4PhPcxO7wVJNI51higqigEh6wj+d64zzujEhz4qi+ePkqA\nfUB+NZEmGUYgZPCu9utek+Fwq1jN2FJqYw9wWK4YTEIclERYh//1HyAHIe2o\nxQ/W+57fhS5EW85z60oGfpzo4HIrA50VaBOiYXuTLdSxfyrAvY0U2RwZuPNP\n/qpK\r\n=j8+B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.240c5f74f.0","@material/base":"9.0.0-canary.240c5f74f.0","@material/shape":"9.0.0-canary.240c5f74f.0","@material/theme":"9.0.0-canary.240c5f74f.0","@material/animation":"9.0.0-canary.240c5f74f.0","@material/elevation":"9.0.0-canary.240c5f74f.0","@material/feature-targeting":"9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.240c5f74f.0_1605212508660_0.6807515800276343","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/menu-surface","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.6cf6ba4f4.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"00e730cea025bf487e39ea52aaf334f75d0c24bf","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":40,"integrity":"sha512-kFBmv0ULBBXunD5ZU9HqXFSY4Hgx4kj6bc9YVqOWP5Qxrdg7pWOFOI2A7uPqrlkCd8EEKWwNh1U07S9II4hdlw==","signatures":[{"sig":"MEYCIQClhdYUI2NcGSOFzLbO6YcI4mKOP73k00Pr3/ovQ/Dr3AIhAN2vC6bW8Sz8zNJMrTQBVNF0N6LRJZzYzWBOCFy/IBy4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfssoHCRA9TVsSAnZWagAAxOEP/jTjfmQHM97kGfhBOfbL\nksVW2xwpu/KgVRMx67oU8lx//3bWKBizf2uGnN+u6BrAiXr0LHvhZ6dOClvV\nU3UA1aTrIoNknO+ddLMKtged1i+U5b+xNDecmnVcmxv5HsaOxLtI16eRlDu/\n92qQCtxqokH7VpuxIOzOKHIidsUGPfxE3gmjgphALi8L+SjFAXzJUgRem4ns\n+gWtvYX6TfY/XgEaYICrNq3S8azVPdacBsbKOVHW0WADujmAxA3/0YFn3IPc\nRD6dDXtk5zJLj/neTldJZ4dCxKMaVNO3+Q173BfL5T/IUE2nuLUfDcRilrSP\ninJnws1W3RrsDM43ewthdln9mqdFugBkcVgvwfZHHTiMuhcpOOJIEinMdlkp\nOdlgSg7jRpf+J3xzmQ5b72masqWCIN2MzCoVP90WRRjRaiyekCQCuj3l82iL\newfJ4YraIsphi46jDUL+Wu9R5EMYwzapJRHPO+RFPC6Y7VDbHxU3t4ag6sGV\nTly3EUpRK74c4O3CMBQSjK2mW23LuLvT3gPowJrurW3fxdP1i+3BQ9yIPmtn\n3x+kcQHiFjsmJfsamd2cCONtYM2ZKcnMOn4GiH9sOAa6TBVyDBGfhhcBeEGO\n4IIsaUqoeiLPjwCO/X+Xb2rFPD3t230j+MHWMQJTzTzZOjkrOCMs/kjsLaf2\n6Pxy\r\n=s4NB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.6cf6ba4f4.0","@material/base":"9.0.0-canary.6cf6ba4f4.0","@material/shape":"9.0.0-canary.6cf6ba4f4.0","@material/theme":"9.0.0-canary.6cf6ba4f4.0","@material/animation":"9.0.0-canary.6cf6ba4f4.0","@material/elevation":"9.0.0-canary.6cf6ba4f4.0","@material/feature-targeting":"9.0.0-canary.6cf6ba4f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.6cf6ba4f4.0_1605552646844_0.44590880727662285","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/menu-surface","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.07f3e01b7.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"b512590ad21039cfd5e1d4ff3df84b09034eb1f0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.07f3e01b7.0.tgz","fileCount":40,"integrity":"sha512-vJI/vLFmY7IMhO0Bs8sTo4pBA1893RjMEimFGvVldSOIr4QlzgU5QwofsK+ALJa9QBj9+DjT3LfkN8tuz64M/g==","signatures":[{"sig":"MEQCIGwlv2fY9Lc4Qi3mdEa1UQa6TYMOXTH3y0ZJ3UP1VXnYAiB6QCoVMuwuHO6pSdDJs5NUl2MLvU810RlLmp5Xk7apZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvM9CRA9TVsSAnZWagAATZ4P/AkIF8jW/e7epwrf3TFi\nZ+unFw10ycHf3khEg7Fr3ZbmxtluCu1eqQrJ5EOJ9dZ52v1KwYzTyavsohAp\nVH4Bv96kIVhfrxpGd5Teqr9sKGD5aKMxQ5B4HsLKr1kI66voCCVQo62Jz20T\nXvy5iCxxo5VR9Dn2lswbwD6fMagf9kogJ1EP7d0S/9YH24LrrwjIHO3DsLGm\nqcLrbDgWHPxUgUE4D9LsYB0dV1Pz1y1wrdJ+ztOtb1OlNyXabXw0Yl8gHllN\nK8apGI7Z9EHIyOaDRcELolLBWysbYROF0qHVfsUk8IYXSSWgnXrM23FYno+k\ntRhNN5X7Y/L7w7y71uc5EfK9nzFzRQSZbx3C0uXMx2VPWTTCCFFGgnTR5Mse\nGso2KE+9kKQPZjet5+W8vcNKRkPOhEp0NUcpCRuwRSVsxdjYTV2+bzxVdkJU\ng1tPU4vtMCFxRj8ZebpTE/IK3++XEApC4bcDVvTHshoGHWNVJtRcO/WCrcXY\n9LMI8eoS/VeEOnnBdtv+GPDtuErNGjiTbT7svAAf7NtQXmDab3Tz/4CTWhnB\nfJafK9Hbquop97hMSXXrq4JmnGZAcvrEEXXzxElqjI4UNot/mUVZvGG1wzBy\nLtHODEHOdSXaGEEmYnxV9N52pAJm1ZPr+acPxZ1ZxMaR46+xOVTbkVF0hlyI\nJVVz\r\n=zx6o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.07f3e01b7.0","@material/base":"9.0.0-canary.07f3e01b7.0","@material/shape":"9.0.0-canary.07f3e01b7.0","@material/theme":"9.0.0-canary.07f3e01b7.0","@material/animation":"9.0.0-canary.07f3e01b7.0","@material/elevation":"9.0.0-canary.07f3e01b7.0","@material/feature-targeting":"9.0.0-canary.07f3e01b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.07f3e01b7.0_1605563196744_0.48837300256497307","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/menu-surface","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.23491cf85.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"d709cce34e08335e2774f6c8d95a6c4fd08296f9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.23491cf85.0.tgz","fileCount":40,"integrity":"sha512-BI8V8czAKuBhDX263TpUBlDrcFQbE5/6oiU26blFep2faVY1vvH70ru/oTt7lD08mnRXUbEjDMQStO0Qay1XMg==","signatures":[{"sig":"MEUCIQDQt/bsQ051PanvE2EqYLDyL1htFYlvzw11q724cGoHlgIgYdNDFsuMEpy+CybT8TYLNZW4UgsLyYqwLkUeTwu0L9E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxa9CRA9TVsSAnZWagAAn2sQAILq0bHQOggVoimGCWNb\nuQvAwr7xKX21CfrgFQ0SZ/R/zCFkdTn3zHx2Ynkxxrew03jy2WOZWqCr7qGN\nyjxqwDemuUx2SEI3NFLYRUsx84pT6t2KRtYmNs8bOFlf100TSse1xOwf/dS1\nhhvYvFy8iIs6g+AOTp3+RVIj8vq0t8vdbYgzbfCp50cNrQwSE9tv2vzLAqIv\nd3i8Tft3owwVP369wjebUCGwF6SndasFOzJaSThsiykWINjB5U3gmq0oVcfa\nwQazSrbs/kNkHUfHmCZMHTd9N03+bTkBwMXOHFCL9o8NEQ6BPRfXTwmEgzcA\nfw6fJZtqDBdANHAOR9XSmLkogVCmpdsEZ5l0z+57sw/wdXF4uW3WkvCJBFRo\nvdPpGNjHthN/P07wjgu4WkQY/0Ys/tsP1Dt6PllJ8a0iDDrYeo0BRu9bOjlT\nJAIzVQ5lQzpBhIcHmzbJrkQEOf370SKmbpujfBUfZKMf+XQnwOeA4E7wHHZY\nPDbZT2fEBc/vVgyfXXn7Ly8UVq6n59kBQoiezMQz7muQX/JBUSPT60nlgcx/\nXSI+6sdXObHK1jCLw8G+AW+90Qj10tAHYqyKrsatJMCDS19YDriTdCVdTxQl\nlcs76HZXbwBGXM4Y1Cg6xF7hxBvzKbBwi4DLrcxnlsrR9fBf8DSJ/mZ+cbbF\nKWWO\r\n=2yYu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.23491cf85.0","@material/base":"9.0.0-canary.23491cf85.0","@material/shape":"9.0.0-canary.23491cf85.0","@material/theme":"9.0.0-canary.23491cf85.0","@material/animation":"9.0.0-canary.23491cf85.0","@material/elevation":"9.0.0-canary.23491cf85.0","@material/feature-targeting":"9.0.0-canary.23491cf85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.23491cf85.0_1605572285481_0.8131370072402597","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/menu-surface","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.b659d4fc3.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"ef629c66738b8e5d3d9853720e6a5c194289675d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.b659d4fc3.0.tgz","fileCount":40,"integrity":"sha512-NCZfeZy4LYKy/WexFCcZQ0dLThEflgzCbt3m/M8S0LFW7RZ9Hsv9HmObZGVo8YxR24rOXKFK4h/lPl6juVK7Ew==","signatures":[{"sig":"MEQCIBpOBxZlvGRQ4s8W0f6FTeWYVpnpaRK/oC4W9eCRhKx4AiAFcZptScyeS8fC0WOchjtOZJ8nfNo9k+47MRXp91rhCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxiTCRA9TVsSAnZWagAAe0sP/je5m97isIunRH8ujW8Z\n/sbchct+JgGrQziulo1u4I9AAqShDQBw1BwVJn9Psu7EzR2RJ2Jsp3P8YJ3q\nUkfJMKlLYCmcaRHxfLFwt8hRJ71ApZOF/laB0gJEXhXIRDtwQAFS/nmrRgPl\nRrbiLJI9w2zV9zRKR9cK9BLfAyi4nRqgzKSq8onwTxZLao4tcDMqTMq0Poyn\nRnj/EYkbEXMzdIMb0g/dOESfEozBLjDpiBCsRcxbqwXQhQmUVJ3Ko+HupuWq\n6raJXm3FLFptIJjvbOJWrLY8wnXhhg9jfcdjxyrBA6SET0m6Bd3yJqaBWvJu\ngURbsE7AbV3qCzKKfVBQgZWteGR2HdIhNbYDNibECH8s8OrQfr6NFbFN86Hl\nIE4eQw60A+feIUAlvbnKAlqAhc8pqhdf4PPOsplHnh43LMxEaekJrf8tI+71\nUm2qP9DzzoFy6WaPcQjBW0eFgIgUeuBub8OocZqEuacBlAlZNm74eJLQefSn\n0IXDvSoLX6+miSYVDJFQ/mhg+0ecRH666Gzbo7aqQyNaKlKW2XxtpObNUSoV\nbJEZsXhJAHI27yaqdblhdJon9PpkuWgiNpotQaov1H5e4C6dq/UponClJHOR\nwGBZZu5AlsBxPdjKZaDwRwuA31TdjTOk+Wl8dw5br7peJWrZgd9lH2NIOgBa\nquSj\r\n=e6J6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.b659d4fc3.0","@material/base":"9.0.0-canary.b659d4fc3.0","@material/shape":"9.0.0-canary.b659d4fc3.0","@material/theme":"9.0.0-canary.b659d4fc3.0","@material/animation":"9.0.0-canary.b659d4fc3.0","@material/elevation":"9.0.0-canary.b659d4fc3.0","@material/feature-targeting":"9.0.0-canary.b659d4fc3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.b659d4fc3.0_1605572755279_0.19684375181303682","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/menu-surface","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.d8a3aed67.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"022bc82d7dbc5043714366b1b0eac8876f52bc50","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.d8a3aed67.0.tgz","fileCount":40,"integrity":"sha512-U3Dnyaks63NKmPN7Z8jLkv84WvH1ymD+SDTjI4X1/r9enDq1jsalzNDAospCy8Ypeg+/vW+p2c5015cj6zhJCw==","signatures":[{"sig":"MEQCIG+jIdS7BUYciTKyBY71+5Bs6/xhqgcJVx1PL3T8LUJcAiAzD+qzICzznoL8QNU8N5YopyMumrDFggV1jxH/URybFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+v4CRA9TVsSAnZWagAA6JUP/RF8Zpsinu7YiGocoEEq\nWde2n8KgNca248nWnIs+8pSIwtfu/z2kFmRshxGclcXd2gaxs4Pa3nrxtr7l\nEUWo13a6FL1C7MQEPxAWw207GAdsC4kH/9zqt0uTv0jUwzC0ydbxY4ZdGe0j\nsfWO6ruKWh0SEKtkp+b0BdWYGglRG0Udsvg7mE2xRh6cgv+r6BM3KdjXrd6f\npzktZ6S5IlY9Kd8OdefYn6vYK0wxBtet/bVOedX3fMbDF2WRd84V5gkZjCqn\nzNlQeMMjeFP5pXyr48zEs/d3Vu81GGJptpWazU292Ihamp9ljUSqxwqnFMLQ\n8uLW1drWplQnsIrb0QFvQksJ2mS4+z19g7d5cQ07voxdGMkinhWeMpVGSFgH\nhh5IllcSQKNgOCeHCKFCvkszg0vmnUfuwhwtYIwGIJdWiYkKYXSoHbet3WSH\nPuewrd7lGsJM1LnyMKD9LqnEAwLl0O8SuJlpzuZqD4UjUXpHc3JbbPcHMmwW\nm91VJKEMwGhkuP1Jd8V4LTpyV/ylznWrXK4hHMZoIBBX/kfEJ2mM88NdGziZ\nSz/caXwrY1zDamcSlNNlNA7KYHtZYTQu0AeU5Y6QwbD6bJ0IJW8bz+0uVl0Y\nGojN3uQptbxRthOyxkOTQnWPGGi7KUtN/Z0jfqSA59tEmFEXfoYnlDPCCTTR\n2C3V\r\n=7S8A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.d8a3aed67.0","@material/base":"9.0.0-canary.d8a3aed67.0","@material/shape":"9.0.0-canary.d8a3aed67.0","@material/theme":"9.0.0-canary.d8a3aed67.0","@material/animation":"9.0.0-canary.d8a3aed67.0","@material/elevation":"9.0.0-canary.d8a3aed67.0","@material/feature-targeting":"9.0.0-canary.d8a3aed67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.d8a3aed67.0_1605626872440_0.8865335318241185","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/menu-surface","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.482ff9091.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"42da99a4d16e9048a7f1649375a3837930a1684c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.482ff9091.0.tgz","fileCount":40,"integrity":"sha512-g1W+4NTUzyHZGGh/iJzDi56rnknMG2eqt5N51IEku+4VwJhM6wSxtAasbvYSwVn5SqULCq9dU2X72BdbTbcTIw==","signatures":[{"sig":"MEYCIQDjRzWd2C8oQI9h7AlGdY8eGd/Vm0MXpVRWqnSLipgxRQIhAKZRGB5wy/YCPtfqmX7i4/Lglx7Gw4doaY+cZTd368rN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA9hCRA9TVsSAnZWagAAANgP/1qrCYb8R04eA4jso9Lk\nYKwXYgEnelaDxUc0kg8TJ0uNgx9ZPteH+OTEfMVL3aa8dAs4mhtvkWim/vWj\nco68mPqsQ4yIcB4P+IjypXxELcf7+ENE2d3PFj/y9CJS4YIwPw4os1evK4Ox\nF8fd56ENbqqSbTQ32KIeJM9kzcgln4Gi/heZT8vpKEYQVkEizL1jcuiH+kmN\nf/8JnqFBAQ7ejcxjcoCmjbf8DiaBvOlpux0eEy6hoZxzYiASWltMDiTtS3mQ\n6zlcE8gmA7BvHUI1Qr4CPF9lwmt+IniHlYZeKf9HgfmzR2ppAg1LzVCiTHK5\nXgVzYwfK+5CDfb+HgLnKWr7Vx+Vli0t8fCjPA6LcMI9zJsOwveyann4PWS7N\n7sC5asX2GtaWIWPzAMiuJ6quufxuKxGkgasVOhaVBbk0oggMV82pzCnPWDJ/\njv3cJdR8EmJeYsUxYYC1U5SdTeFtDo1TgTSUkFnUc6kXvvIBJL+S1Hxd4iys\n0miodnrSK00CqxIbAaORU0RJg9RlGsa5IwxswhIi2N8+b2JkzyyzJp0yMlei\ni01XISZITS0ix94QMVdGmXG733A7sZ0MzsRL+vcTG8/oSK+TQNAatI/AjuTa\nvCX+4+ersRDf1PHXnSi/pKMHaptuj/PVXcOngsEZNi/BxXyODTVoTgXOo7s+\nTj2X\r\n=oHvC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.482ff9091.0","@material/base":"9.0.0-canary.482ff9091.0","@material/shape":"9.0.0-canary.482ff9091.0","@material/theme":"9.0.0-canary.482ff9091.0","@material/animation":"9.0.0-canary.482ff9091.0","@material/elevation":"9.0.0-canary.482ff9091.0","@material/feature-targeting":"9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.482ff9091.0_1605635937077_0.9846684288175804","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/menu-surface","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.99cfb6bd5.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"c74fa7136f0c68696ba3b6da17c0b2266a879176","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":40,"integrity":"sha512-5IrDLKyBVLjZzYPKu8XR9nyj3NYNrWQdUnMRpJWEIjXW0qY6DBC7hBKhkDIIJ5E/AANiNIba+1VXf5tsFVX/jg==","signatures":[{"sig":"MEUCIAp6FwySQqdXWBbK8BxD6+ZTkqdn7oZ3Nlc1/l0Xna1pAiEA89RCjsSWlSmr/irrHWYuM4cF9xM4mNJZTI+MzvHz4Ak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWukCRA9TVsSAnZWagAAykEQAJMWQi3mtLhGlq5+VrwI\nVvuZgWIdl/39KYg1P5MnaOj98HEY1WmXKEn9a4vveHUAj278f7C+noJ9Qdgs\n2kvEUc2hmE9YtwKC73wm9Uj94maUBfPJ0ot9FOl4DfZ0Tn77XrRW7Q6HCUiv\njd8GblX+zaGi1SB1RhyNrZtUImYDvcxx9h8j7HUa71UPBhqGPkY3NSqB9ox1\nS2M5F3R1YU2TtBWvIP0k60Ew2QBXtLlJdawH77UkpJhhhMwT4wCP6/4buYZW\nRBzWgRZyAGwsYJU5KhMbTtBD1cUtOW+KifTpLwxnZTC4yKGuYFwOLD78TSn5\nPevVgUJdh9qO9jZHTasKXF3E20KhW6cX1/WWajQ9Gsq6zcVo3WKoK5D5o1jj\niUF4Ku6liCZRGgi6Y7LQnr96HumbrT4ONdVtZcO2MwjRb5Wdj35baIY+ToNx\nOx+AFcASTr1cxiSM09bjXLm1WjiKKhQNHitPlz7sajK0q403YpebHQC1AwbF\n+AjB2yi9qWFOQCwr2Uszu3OLKex7+PbPg69W/BHEXelDx7DMozlo4Xe+TuCy\nb57xzRZ/vAoSsVrKDQnGLox399L5byfVTErupr8fJ/dVf451zcywcomNKqLs\nDczGfnYLLfNFeAHWleMR5jfAixN35ftdnHHsKBPGOr7kMfitu4mgZZJJ9W7V\nwluo\r\n=MDAM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.99cfb6bd5.0","@material/base":"9.0.0-canary.99cfb6bd5.0","@material/shape":"9.0.0-canary.99cfb6bd5.0","@material/theme":"9.0.0-canary.99cfb6bd5.0","@material/animation":"9.0.0-canary.99cfb6bd5.0","@material/elevation":"9.0.0-canary.99cfb6bd5.0","@material/feature-targeting":"9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.99cfb6bd5.0_1605725092101_0.6319674551768519","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/menu-surface","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.b98d15d90.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"f8f0f3935e3408d5b5c08c36110d5be055033746","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.b98d15d90.0.tgz","fileCount":40,"integrity":"sha512-Wn3twDmgx+t8dOnTM5ktuB3r1zqaIXDkK6OZbu97cNlCKN55sgGGlu+UQXQZ/S32H+D0TZEQIo3+PpQPJOuxag==","signatures":[{"sig":"MEQCICwXOVyEhrTsD3Ug7tDqYL9r9TAiO31vpODmxifR4UxRAiB87C9JLUqYODqTDfkmd211xmThQttLHGlYSRCmbvwI+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaG9CRA9TVsSAnZWagAAZicP/jCITg5EOMl2GjmQ0NTR\n1IVvijGno081iD3lxQUeupylnXALNCvr+XNY3OoOKEp/4pfiqAexcnV3IKWu\nf26UL2YFoc/kIeEBA1jwPONLsArhqfqcL7G6hzEMcYEZMyiLMo3nhHWlv+hl\n6XeIE8hM+SShMYOVnBhLXxdAX3ntdBG0jLxKn7mvyzTdKA5D74UXBj6MPXDo\nrwbDWqkdt1JgKNaTXXPK+PgqcGJgRMDvk6wjMClq3Bey1zsz2+MUy33Gq5Sg\nLx69nFX+gZ1kiGTGHpHE93JRSh36JHrDjw/o53oyh4wIYKtRiOBFDTYJ97ZM\nL84hiMhYnck54bFdTfS8JixhPVQSBRbOGKDQnaeNfO8GJnxZVYFY/3s6A8CE\nafIWEo49+B39tlJNbGIfCOsmWV/6morJNq/fbdr5xZBu7qx/wQul5akFY7gn\nlgzaksE5d4R8tOW2itP3JK/QD2l+A411AqWgbvB52HLPDVJreRZ1psg8ORP4\na35Z7KFUKyXhNwAheBcKjaUpYteTT8ZG87QKu27AvsycQ3D7gJCfX1Fj0g1z\nPbWAmRrBN2Ao1gqZKS3To11cNLspqdQxYekvMmVfThrInbqqqF53rog2ccQ1\nG6Q1uTQRJOyXFE2un22WAhvz9qx1OmkaRT+iB+DN1l1ab2oZJ13cu9QISvm5\neWdp\r\n=3tB0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.b98d15d90.0","@material/base":"9.0.0-canary.b98d15d90.0","@material/shape":"9.0.0-canary.b98d15d90.0","@material/theme":"9.0.0-canary.b98d15d90.0","@material/animation":"9.0.0-canary.b98d15d90.0","@material/elevation":"9.0.0-canary.b98d15d90.0","@material/feature-targeting":"9.0.0-canary.b98d15d90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.b98d15d90.0_1605738941023_0.9274283187888108","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/menu-surface","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.30c11bfc2.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"59b146f07e57b4f7e2920b070a85be9ad6c619f5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.30c11bfc2.0.tgz","fileCount":40,"integrity":"sha512-ClB+hVN942kcCJfl5C9LNVtPLjK1Qbmb8Y+uBT/n4qe1g8azvsD+CAPyW1p7Reg10Zad1w5lVmKsKwyjRIskFQ==","signatures":[{"sig":"MEQCIBFXgWGwIuoxgotO0F2OHvbtn0VMvXzvGBU4p9G9SQKuAiBB5EYdTmjr8ZM/VsWXUH2mHBbsR9rmN/3XUtcAsLh9BQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcnfCRA9TVsSAnZWagAAB6EQAIt0yWO+9+k8t69xjTME\nJkRylglZvfJbcJIN+dQlw42GVf/+UbwXrPybdmULdAUG6Pz8FZgSv8PK1rJL\nLSYxyZLIWsHI/zoISl6FDFl/6t0xzo4jHdDXu9IS+b7JdkVaHcZSrAfKNPj/\njq8UAwD6XhULZgHoKc2n2/6/cIRYnuRVTlZg6WOExTEBsuHac07WsulmPL/i\nNSsl86xv+LdqOgIPT24X6YSfqTvVJOo9A1qr2WGUss9qYaqCeHos+A4qZh7l\nqZ1ivlgBE0vdmMnbNBIEtMIJi9SLzareUY0ibMc647nNbDV6D5Bp4AO2p8im\ndVc7t2Ni0jXGNBZyJXTGFJ0HpPdzl4h9Z1bBQxVp2CCE2fd2CcGWo2hDTnpT\n0LXjVl6Lp43clMbmtLdMF1g+wbDnT7ZEmBtLTTObGatb9H+pFYRQ+3eZESQ6\nsBlIL88RZUxRZK06HVuq8QEWrJH3SRtFOA0SMfDdzgJRLmfPwUr5AhnT/YzO\nyaxEwp+5Er9Csqpmu1FUVfJ3uNV26b2H6hBvtAexsDHAYdyBng+gptwamzRW\nx1+YjAe/VE/99lmi6OFxqbKp6FFMZkWCNG/Ma39d7iN6Hlcplza+srDWyOxr\nXPzocacOIMIrLntictTwhQxKefbWZpAKRGZcictu6lccMdtOm3vxrn2KDYPc\nqD1g\r\n=U82p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.30c11bfc2.0","@material/base":"9.0.0-canary.30c11bfc2.0","@material/shape":"9.0.0-canary.30c11bfc2.0","@material/theme":"9.0.0-canary.30c11bfc2.0","@material/animation":"9.0.0-canary.30c11bfc2.0","@material/elevation":"9.0.0-canary.30c11bfc2.0","@material/feature-targeting":"9.0.0-canary.30c11bfc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.30c11bfc2.0_1605749215408_0.8324018138655183","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/menu-surface","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.1b731d51b.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"6753a380e73ecc917f8e0875f70a6d2187b49248","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.1b731d51b.0.tgz","fileCount":40,"integrity":"sha512-ARHy5hzU7qQc3YYM2nSB8SKMtYAsiUs5NNTc2PBx4wQWYC1uNbuOQ1t5T7P+8pnwqObGs2JUUiNoIjijkkNE1g==","signatures":[{"sig":"MEYCIQCPLlXdvljG6VADDyq0dcqDuDhYf2js/H9tkEYpzXQ/pwIhALTXuU8Wpjf3T81SitjmAif+i0n8q83pVlvMQxP/pxca","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr8XCRA9TVsSAnZWagAA0NYP/RzWq+gL5rPEVFymO5sj\nHmk3iDurb/q7N0l4vwWOUkE0YewXaeBv98xQh3TdXalOf7c5GP9ZgUTe3zIu\nOFHmHjiNTncnWHyREnbl2u/uZoO4U261RYimcX6u/oOnww4Y2QdW/fejyeH4\nbWNOxLm0cRp5umzAi8xlA0lA0VXxj5K4ZE0pDOUWsVWXu/Jj/CgfE+uyFOVj\n9KJVQ8NWB6PvCgGlNpqkTFJi0W2pQCAQsehGeWnxtVKBDp2mzHrZa/zWoClO\n8LZnVxAkrgpm+y44cU7ZdMO7GKN0LKsaSwl9H0j0b2wPKhUCvKYuWwlN8rC1\nTo6OnI6xkjqZKztHgvUVoA9CykM4QHfSPpy/lAHzkJLYMWM5/YSbmubYAexm\njtjQhG5lKCQp0i1m+keZkVJnAtvIHYmJHQtJn+fV+4/ksRY0aMNH2h2ECVmJ\nviI8B+OzqGX34pwdP75UfYTWPMl2wqqbImlZF5pDypMZiZrNoranoVRl/wGH\nKZsCfND0NdORLU8FGoCfJUSo4MhJUXdw2+P35PAhT/cXfiRCDkveEWiWaAcH\nYcjENgD8Zai+B0LZ8adlLCFaiN9IznXFot0E+qAhgSHuk1VJIrj1SRAu++/z\nvVQylGruTHxg3DLxqP7X3cX/sMelu8DP6HogWiSxfnJ/8j2dZMcHQdW9bLW7\nflLI\r\n=5jaW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.1b731d51b.0","@material/base":"9.0.0-canary.1b731d51b.0","@material/shape":"9.0.0-canary.1b731d51b.0","@material/theme":"9.0.0-canary.1b731d51b.0","@material/animation":"9.0.0-canary.1b731d51b.0","@material/elevation":"9.0.0-canary.1b731d51b.0","@material/feature-targeting":"9.0.0-canary.1b731d51b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.1b731d51b.0_1605811990626_0.16287116905848675","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/menu-surface","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.4ae94ff78.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"5e3749f3b9a1f0e2728b1c5bb0023464132cd232","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.4ae94ff78.0.tgz","fileCount":40,"integrity":"sha512-ie2fByV8RrsAG7o2w61NKVq/nJnqWF95HJ8S+zYcu7Ysy5Izy2opJONDPvO4c+OnB0H8H9Ajfu0DLQHXe05s0Q==","signatures":[{"sig":"MEUCIB7AxmBSEVLLXL5sx+PtK/LwEmwHV/p9bs24Col+9X9SAiEAmPp3SVwyM7Fx5AR9FDX7f6/0XU/P/DQWyfmFQ74PQN8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr/QCRA9TVsSAnZWagAAalEQAKLYw1lw3Z4Z4xhaumQV\nl8KUo1nU3QHZRnbbV1eM2ILCVOxDpIh0+5HpGeJvxcRjQq/yMnBcDer8TnoW\nWDWTSF9YEgTrSRf4BYB/5IhLHGVGAMgqq/MECxMgDcvnIFwvrSsIhmLaOAIc\nDpufrXcp1jBGqMCWeS7tVqtHrlj1C9GOrupOjRVsi2uZRMNF0oSqsv02CiFR\nopMn3RFRTqB7C4El5UrGSjiZdEAvGFHFwlRZk/I3iPHOHQ7krLyRQIcRFYDa\non+egD+X5cMaznfvRbycZ8hYFsNm66xa7kwkwWTvOqRNgN7ehUUptB1cmos7\n6dPJwMvBD1YbqFqwgJonO+OqTSSMSTouYgqzSticsD/eQ/cQ1/COwphHbXCb\nCbb3kqjSKkJ7NRzWyhwU20yIuwb39UodtReSQnZM98wkwveWIhuRsR+9XeGG\n034XmKr5PoQ+Z5t96kLtQlH+jmyK0ar3jpINtSEl71fqq2X54o4L+kwz4BXs\nk71wIHmCh7VAi/SSZLFwBZ4dgTNm30Zo5Bf7XbB0ZSE9v8ScPDmEAXiVDtf4\nE2hLb5fvekwAXvZm7ZO1ZTpE8yQdk3VSG3cguiAmaaO/8Ux3Xq2zE3RNt32A\naCZuQEl0ck9w6667gQeW+Rk9VNFDNkR2ECmOEe8/7jZtQiuVanrvXxj3WQ3U\neqKa\r\n=2SUM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.4ae94ff78.0","@material/base":"9.0.0-canary.4ae94ff78.0","@material/shape":"9.0.0-canary.4ae94ff78.0","@material/theme":"9.0.0-canary.4ae94ff78.0","@material/animation":"9.0.0-canary.4ae94ff78.0","@material/elevation":"9.0.0-canary.4ae94ff78.0","@material/feature-targeting":"9.0.0-canary.4ae94ff78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.4ae94ff78.0_1605812175535_0.5037409439417309","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/menu-surface","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.7ad038e1d.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"1dd1b71823cacd4d5f319367d7b9a71820389124","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.7ad038e1d.0.tgz","fileCount":40,"integrity":"sha512-j4AQlFFmUD2Z6R/r15hbprO9HK0KHn18zJXim3NhD3AQ9Df2v/JAdbnGtQ7ZcxYyXLBe2girjvBWHHyyzfc2iw==","signatures":[{"sig":"MEQCIGy2R7FcVvfj7b6LbViFchQEHF81QMz7FCIBWweKPcO8AiA7bXTWkeS9vP/u832Ui3M34BZUTXFRTOryIoTy2PsvVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsU5CRA9TVsSAnZWagAASgoP/A5d5Z86PDZYIzY0Azfc\nZt2KJpzy1n6pJfzG733peymMOOjU5/JuKLR5ptjtNloxb1SEa5A3w5VjwDFS\nsXJMjlE602tjXpUJGzwY9wyizRgd2wRxH9yJ9toL/fd0WxXmq8fYExcixILC\npY61a3yxKYKrdMbHb9xYbD6pJQGHWXIhGpUWO5vD9rMCKmy3xES60nWXXs/I\nQy0U2e1te+4+bkihWlKAyTfgHF95aFEpTLu90P4rmoHCgiwUjS3zxbszxJ3B\nnak1SFsoPFI/C5roEumgEbRInAW5pE7sKHtb5uhX4ezPdAdIGEqWO5sbITW8\n9rRv7lbRv4jEfNtIW5WVbBaWdt7hRnJNZjvayBGmcVeS2m19/qe4skuM+DSE\n6Xe8yPXYf7u9V9+pvMmoCjwZVCtZYam9bc0yQMMaiHDiR+8zIxawmJjwZ80j\n3VoVt0wLth7h89+LFo+6R1EHmJhZEGp2V7RylmsjPODstQcGu1undL2rmz5Y\ngQIYqKMcSbjwqcYBZ0Afj6zVw/iMlQP2uOW+OfQHAi3gHzTtAZd0ral0mv5h\n4BdAZoAJxAUIJT/l/l6sBgpYi+4F0vrm2Q9RKw9xqoWYK6o4pWBC86dug4lK\nmWlZqOSl7PJ5l6Eha2WwzaL8y8J6s5pl81yIZXNxSs9XE91DquxnhB88obZw\nqEMn\r\n=r7eL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.7ad038e1d.0","@material/base":"9.0.0-canary.7ad038e1d.0","@material/shape":"9.0.0-canary.7ad038e1d.0","@material/theme":"9.0.0-canary.7ad038e1d.0","@material/animation":"9.0.0-canary.7ad038e1d.0","@material/elevation":"9.0.0-canary.7ad038e1d.0","@material/feature-targeting":"9.0.0-canary.7ad038e1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.7ad038e1d.0_1605813561057_0.7396119056824382","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/menu-surface","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.a41527604.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"2b872e0235f273c151800a94a67d248535851cb7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.a41527604.0.tgz","fileCount":40,"integrity":"sha512-WuCnaicUNPVHHd6F6d3W+22rrJiA684fgfof3N8jlKoxi5C7xzKRq3JZFyCGqLd1MpIf0ZjZFGWeAYWFBiL3kg==","signatures":[{"sig":"MEQCIGrZt1ygN42yg6iH2tCl6LJxTHyqcjBMVPwhLm/fwmoLAiAV/MSM4WalNeq10akmM8ILlKruvqnIAv2Kv0GaksMWOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts8GCRA9TVsSAnZWagAAB+QP/0s/Cv7iy0QawdJUsVK1\n8DRVPFDelJDusgqaJLYLhXP1mLXbdKwpj7DYBSHbEY0WhRd1I52FX48DGKYD\nC+aWKlEusSOOI72uMx8e3ZJiJs9/sR15BbHdXO6LWvCvbXyIzc7ovKXG30Jx\nwddNf+jZE9KSFevi+IVLZbdQFduFAIkHWb7iSSJWwxVZ1xmc9FVy/ImvoK/b\np5utV/Gx/qLAbnCkdDXUGKSrIQm8vuIa/SWCmHJJ4Y58kzTIqV2H8M6mvr0o\nYjlDTK0IZ3fywAcPR/PHJU7F5Ws01vlegkIKqCMiNfs/zvnE0ndCEMglqNrd\nN0o77n/E21mfEIPUihjrMGhbsiVzFybWddgdrbLQzsJDB7Pyp4RrJExMGVW7\ntcMJaYC7eAK9P3t7sj+kk2sWDdYAD2/1AyV7NPRnW41nF80UnpgZonPUWet7\nvbEsuL+5IDVw2HSCcRl8KX/vpXyt42i95FxUFmkAFbVw1oQc142ceBRkrZJ+\ntIi/Q4fWq4mrx46+6O4tZKeLUBOVDlA5BBq5BiTgZkDE1RV7P6XoJkP0sZxc\nJoxknb4K/tcpUWn1ZW8eAbneY0lnkdww7l/1STWKOrjEY9IUVRsy2gDOv7Zt\nLlSFZw5reeu2p6kcEf7WF5H5MWxORrphNOszQoUP9s/hAHI7LHfOuVI5fahS\n/4wJ\r\n=pbQt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.a41527604.0","@material/base":"9.0.0-canary.a41527604.0","@material/shape":"9.0.0-canary.a41527604.0","@material/theme":"9.0.0-canary.a41527604.0","@material/animation":"9.0.0-canary.a41527604.0","@material/elevation":"9.0.0-canary.a41527604.0","@material/feature-targeting":"9.0.0-canary.a41527604.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.a41527604.0_1605816070308_0.4606323383924358","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/menu-surface","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.7b0e2b377.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"ea5f593639ba302e62308bba66dbc5d89fa604d8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.7b0e2b377.0.tgz","fileCount":40,"integrity":"sha512-rP0md40cesr9JiWcHSzv5XYnBH3cJ7QPMG1MPVNdwSHJf/wcChR8V8XQV41tUiEdkw01mdEAr0zqEyKIzKiSjg==","signatures":[{"sig":"MEQCID40dbOAZFmgyvQHwi8yyLO4Qs7VFwiQal8pK9Nwo7RKAiARPYo5/IaWxXP+TPm+vU+hecVJwdgnn885LbW8iTrm9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuEmtCRA9TVsSAnZWagAAf8YP/0IkvWj9EYKACEJ4YQ/w\npLv2Oz2yGr3laV6H6MJnJhsnP3DrMnjJJZTb2vF7RskqNIu3fhJdwv5ITJZd\nPtvfAWwW9SeX4CzeKG7U9QnaNRbvI5ghhs5qNDIhDCPgWWvMKh7+LZpoHqH1\nk3LWlG1Q3piohV5lvQJpWysedOwgGygClicMKXThT6vVsOPGq9IZVxQEIF9t\naJqK2Y5gTTj5CU8R/5w6SAMpN3QlFmTss5rLOLrrP5AEZMi86NuX0pEfoPUl\nW0+aBiyOVnsI0fLlyO0wsiUlYaChq/ne47quPwrkfxIGxHflYhebN91hSYZ5\nBKTCMI4w2k4/KbYwD425LBWI9TxxcLj30/JWnG3EsHzH1fTZu0Msyp/h5vya\nx90d/Ox3mlSFmVqWXsEggBIXVdqd5y7KeASPDv/9b85VILR9IUqAAJ/Hra0X\nEBkN4MS6jDAgigUMC0+OtHnNVRvlMvfmfA43yV8bn6APoVRniyYQg2pwbAPS\npoJPDFHTsudjMjSX6x1/mbNRZy3TdmcdsPgZmFfLjfBPW9yk7L5TvIhR+owB\nAHqwyaXIZF3LxmJZe8ah7xkyc6pI+wPL426oALBVqD01NpHh33wpS7HYLUQD\nlWpQjwtZAGA/UIzgQcc2jfeDabPhEyFhNXNf4Joie98mfLFPoTCMkOKveUBy\nLX22\r\n=2Up8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.7b0e2b377.0","@material/base":"9.0.0-canary.7b0e2b377.0","@material/shape":"9.0.0-canary.7b0e2b377.0","@material/theme":"9.0.0-canary.7b0e2b377.0","@material/animation":"9.0.0-canary.7b0e2b377.0","@material/elevation":"9.0.0-canary.7b0e2b377.0","@material/feature-targeting":"9.0.0-canary.7b0e2b377.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.7b0e2b377.0_1605913004712_0.2957400106934247","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/menu-surface","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.c927a5d05.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"6aacc7e5bcdf2aae8f70b10314cb49344c0f0c1a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.c927a5d05.0.tgz","fileCount":40,"integrity":"sha512-D5H+NGYGSqntZ5Qbbrw0lCfjrStYl8o49gNFFiVc8yoXNs7lg4hGEkcHsD0PjZlp/HOG2Wf7wICDdRBprKXqHQ==","signatures":[{"sig":"MEQCICAmkXxt21VxMy/MPIBLHbLHnv5bPhVt+ddq6Xb5FebwAiBrkM1j+FRakePE/S9n5g2YYYglTZELnjFG+VKXzlhS4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBILCRA9TVsSAnZWagAAXGMQAJfnfAcPfYUeK2KDLzQq\n2LLHElHI0+ThXUvowqIamqtXU/NmRKlcUJdKM9a2UOzwxD4O5KcDh+eCna1d\nPkKdbbB9BRUyOzTciqigvA+9ictxBqX4x16bQUa7TmYuswL9nke+FSgmqho0\nUFgDQdJp7w+aB+RvLHvzDva9qnahc6W/PIWB1++XQmLdDr5YHXtW+grJAiZB\nyrcx8c2Vhyux2HfIuVxZRAsBSvpKJHOZ0otlSuB/SWAH7N9uTasgxsN+/kBR\nCR3cuELelgGjGKA3VtVa09Nzy/zveqMB9MPqLsP3xErMDfzRgOGCq8Wv1Ko/\n9FdXx/eYPu2yY8vkWuNwA3c6WBn9g6HgmhEXWp9QjB2pDyP4LkdA34eYQNse\nsyijbAd19bhJQlpKxl4dXlELyknx0Fkg3dfdI/hOcz9LA1emXdhQ6OTelyVZ\nh562Jg47eDugBoDeL7R4Xfupfe2PzsiHhocsVEJUoEyRzphePGD9yaUWRzEu\nQoSpIwFEgPdRxI2faCUqQ0vJQxd7NdteSP6+Mrdueuw4INuSSE4ckMcYXxyZ\nBpGx5O9HW8uDlMAh/NAs+s5TLkBStC/mQU/mGJLq9uOUia8B8+RPHPriti8f\nvqMhvYIzhkrAuYUPvGNfDuZDoQNrbC5exEbNiV9+MEjr8XofOGw/89mykDN4\nJ0Mq\r\n=CFs5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.c927a5d05.0","@material/base":"9.0.0-canary.c927a5d05.0","@material/shape":"9.0.0-canary.c927a5d05.0","@material/theme":"9.0.0-canary.c927a5d05.0","@material/animation":"9.0.0-canary.c927a5d05.0","@material/elevation":"9.0.0-canary.c927a5d05.0","@material/feature-targeting":"9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.c927a5d05.0_1606160906989_0.1065117788895098","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/menu-surface","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.b349b5185.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"c1b128aae90adbeec6575c0fe350eea9a0579bc1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.b349b5185.0.tgz","fileCount":40,"integrity":"sha512-IqgS8miLUmjUyZTBCm/QyqiFbyXunk/8tZgDapNp6/W05KTyZFddZWsyvh9lM9Qg9JRh9S9PMkYQHvHN14tH8w==","signatures":[{"sig":"MEUCIQCURQ+ZLDNQyupWap46f4jmLcZ31qBTxN03QCQ2DPDeuQIgJcKs2+wjASquv3TnF7q7UMZeHE3Ww8VAgNZ24mtEVGg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT5hCRA9TVsSAnZWagAAPc8P/Av5Yu0T6CJkgRzOZlNA\nPNXcljjfHZ7JpD6c57qwUX0QpV/68RyzdW8+3HSTzC2uLBX6P7xazaWZznjb\n3umll8AYHJzB8Mw783ATkR/s8s7nuPIw9iofkWbV3iD6mMiWtQx3wZyQAcKr\n40bkcm+BSetBwFKYyg88kL8dFmAy7rkVdA7Se1gindVMoWNblwyDIeeC5drS\nOZToamdaGDztx3H4HbS9BOuk5+aJdJ7Ca+4wzz98AoAlqXCmRXc9yEuw5aoo\nZJvmBX83F3a3mOOnveStaUpNEvFfVMEgqaeTNmqBqpZPSUAzVz4WAl32h2Bv\nPq4MUdhUuSdWSkTzYvXH+ZBG8jteHt+xJ99m7QLoKFubrLsxT9BsJ7JxxGlV\nCiRTu2Us6c9ToPZQjGVEaB8QpvF4LdQjQPZANpfHiromycZzirnSwDr6gQg7\n+HHrs5XuQDJxLk38XoggrFhjBXkMmF9h4ebVYPyY1KfTDxLWLD9En6CIZ3W3\n9ILvm6gFtVwnPWvjcULZFFokn3ILHZzMdMI1VqKPwO8++xHhvPW6GQhbIMCc\nqoXWc87L/szlulYeiSOkyBWk9aY4zbsfMh8KHMZSgkMH/sdkltu9g4ShR2JD\nu0YdoTe9tUpB/DQ+ISs/+YBg9O0DI3BE3YuMAUd/o1DYPlyboBdbgFCAB7Bx\ngWpB\r\n=RXK/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.b349b5185.0","@material/base":"9.0.0-canary.b349b5185.0","@material/shape":"9.0.0-canary.b349b5185.0","@material/theme":"9.0.0-canary.b349b5185.0","@material/animation":"9.0.0-canary.b349b5185.0","@material/elevation":"9.0.0-canary.b349b5185.0","@material/feature-targeting":"9.0.0-canary.b349b5185.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.b349b5185.0_1606237792730_0.8837042489778468","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/menu-surface","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.9083b7d61.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"b5c170fdb39eb433df9a2a665af407c76224fdad","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.9083b7d61.0.tgz","fileCount":40,"integrity":"sha512-044F9lfFsqqGJwC9tIypUAJ0ZKJwOy1Yy/wJQ8hK42yuEN9+9jj+0nJDlldJWGRaKauJ+/WwDC4XNpRBgegu9g==","signatures":[{"sig":"MEYCIQDAThVwbn00fqr9OnPpHfCDzTKGxd8OzvjgnSdxG4QpIwIhAKYEOMZ/Jsu5kfHN2RdS4LWOX9LWno3YSLMUY7gcRVIj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXgLCRA9TVsSAnZWagAAkMAP/R3DiAO9LNSVtKFnsdXk\nQBUWSbD7n/tZXOGa0gHJRb001C9y4s+UDplPLu5+eC1DgXcCRlLW9KOe9rpR\nbqDuzhjLpH0iJar+NXFVraowkwLMfUtMzrCdV+tt6sCmNefelOqWS18bTQtk\n553YgjNuRLZuTaejNEUKdtXbqE0hId8hTpB+/allQKBZDdGWH85201OZDraC\n47ZjN9rXEzTNA2UJ9saQWKDQpDI/E0DMoz9QOfXmztCr/cdTXsKobGMMfdMR\n+sXQsZIOpPG9FrJvyES4nTD39Gzi2ZtWE5WOutEwobP5eLL+w4aPOqNKnRtv\nmGpP/WUzGXl1ZRDVIkolJnlAnN6E7eYKH73rwjcr5gArxOYAqsksxD7hCFIS\nsKh7VltBiophhZI73dJ1eWBxkeqU5BJGL+hsQAy2q6ezx1M5lHqsrmRNeBD/\nHYQewCspriiKe2cnxPMq6ytlJNC4NwlYTTIyb36eJfraylEkkfO8KAyahQMC\nJaMiB1d9TdtrKMcJT9K2QxdZWSLWrI0k+ekPOUZMcqwSE5UaMcOLtlEK1MlW\nKK7zbuqxcCJyC7+6AFInJZnzJhLBKALNLLwCzKJO8TgngTrM7nUCHHWP8DDF\nqWWzo2UApn79bRVJELF74dgkr34EjqPKaCbEXaoH9XzIkWpbnZxdYLDPIg9P\ntYIa\r\n=VXnn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.9083b7d61.0","@material/base":"9.0.0-canary.9083b7d61.0","@material/shape":"9.0.0-canary.9083b7d61.0","@material/theme":"9.0.0-canary.9083b7d61.0","@material/animation":"9.0.0-canary.9083b7d61.0","@material/elevation":"9.0.0-canary.9083b7d61.0","@material/feature-targeting":"9.0.0-canary.9083b7d61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.9083b7d61.0_1606252555375_0.029266724339407135","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/menu-surface","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.eff7b46ac.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"f390efd4bb188825f144c5b9be687129d45b69cc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.eff7b46ac.0.tgz","fileCount":40,"integrity":"sha512-ZOuQhHD0NUXgARitnAFZmV7p+0BVWJYQTMrordha+RoMMqeUJ1lu+FNOuD16y2yFObQVzedwARpqGMMXeO6suw==","signatures":[{"sig":"MEUCIEQsbtTKYRb/dBAUDx69mEuoS8qnINrUrNvCMSV4rfcdAiEApX5KCDUynkBgS8aaYzP9UqvGKkL1HEzn/11FatMctTI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZfwCRA9TVsSAnZWagAABsQP/RC6JelT1/uLjTUIDoXM\nO1HZqAgwo6YQos9DmQaoJ6xvcWfKJsdN/tzHl2ZqgmxroPiRbjN8v1hxV2TN\ny4W1d3Njsh+KUpaOeRZsZqkBxcfTaXcO6h/H61QOiD/290ZvY2AfiWwO45Kr\nO7bqHKMAUes4XKjQMTZ6YS9RrXYEcN0G8GFQGOb67gL7sLx4mGZnZBTRAb/+\nj4CYR3vO02GDTUdxSpj+FBTKErI+/YfEImcIEpX/n7bHWp5iP3Mr+KMDE0yV\nl8pvdK3u4wjeAttMrvTpos8bVUpD1W5hxzy2s9cEAZMdIzbrwOE3zK1WBrsv\nf2YGFSjjj0ijG8ri4f3aOvxKRfMfHx6UgVKF9RIaGU1f6koSppayfBd1QNwd\nrsN5idCa8cb8J0Vkk/78thBduM4WIyiO5x0ORRjoI6e3bo53/hTY3gi2uW6j\nBv2WM2CHdGFomvfowNaR5Hy2cXgfd9lBzrdecVX6tJgEmgds9SmujGyzvLgd\n4hZaVYG+/oUEVpCv3Yu/k0UvWsVCkk5wWLWiUIWM2HUhM21Te4KrN+VHYIDV\nVestmeQApKbO0eeEWiEwLb17WfvVU9IV51iJFdKQOFKfo2kxIy4/ZDcf/zgH\nLTfmCSHWmEoX6dz+dcCRsQPCTLsmREdNwuew1WCdwyVGbfk6Ss5CGJ/Tzjw3\n9fL7\r\n=5vb3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.eff7b46ac.0","@material/base":"9.0.0-canary.eff7b46ac.0","@material/shape":"9.0.0-canary.eff7b46ac.0","@material/theme":"9.0.0-canary.eff7b46ac.0","@material/animation":"9.0.0-canary.eff7b46ac.0","@material/elevation":"9.0.0-canary.eff7b46ac.0","@material/feature-targeting":"9.0.0-canary.eff7b46ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.eff7b46ac.0_1606260719601_0.6933167360875723","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/menu-surface","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.ae27b44b0.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"4f2beb8235dd5644b0bea3425af6348181ecf5fb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.ae27b44b0.0.tgz","fileCount":40,"integrity":"sha512-Qn6qkcuNC4G7P2akN9XwY2cV8wcQYjUpa4v0ck7ZaCTuMtpGGMqdr6RJhDqouCCXz1Wmwb+24akZUV2BZpApeg==","signatures":[{"sig":"MEQCIDUpRzvZ1t74de2m0jbn/0xyMNWhTHaQeSE2SLe9OGS6AiBNLoif91Vj2rRw4U72qhRMM6wzowPxCDkojSHppMATfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnmuCRA9TVsSAnZWagAANnAQAKTKagpU1cou3cJ6k8Z5\nFeXmi5SDgr5Gwkg9yP3A8MPsuWisAdo4h6GpwSaTp8c8DKTC4dVvOvyrZgeT\nV+XNHmqtYnO7B7y1qTcu5XEV9muDFUH40e+zP+vgSe2BvwL0AKDN8+w35WhE\nOpMG2+S8SWPreq86O5DRgfNN0WspzpOPKdh3yZy3xZjnYq9lO1TBsyGryiD4\nYZIljSAx1BoQhSoHBgUgvobFMcjchRduUMbs9IdTzf0uarrUkWvP1Am8DMbl\noYXUBnrf8Diu7+JpDBC9Y1kMegCBm/S5v/4oxtk7jWmsbC0oftdFbevLfBqL\nM5BLLxp321CCDuK0GQJmlx12dF/20ur0GFYqHHfBL3fwBMpeomOtq+fKe8L6\nCCSGgx4ULAzY0JmwPE0dSTIBEKjV/drAEHw6e1rCvo9uGTgnjSxDNd6ayU2D\nCN/rvvsnwLaNm2vdzh9PD3sebqrBK61TwiF/YEra90ryw1GstzdGvNK8HDDn\nYAF59BewzZuQpA0OUMVjriLyYpKy4OctIa/gjrGsWFGrwptgD+E+i8NfRs0b\nMa8IYPrHWjj5PjChyWdV/D57DTbqIDcarSIhqpjgP5O+Gf6AcEkk90EabVhh\nNUvx+M+sFyGj9sfUH1VAfuT3dxf/7ZmCK/SlRmD4aJBsjKP27dsPj8PmCvR4\n5olt\r\n=mD8g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.ae27b44b0.0","@material/base":"9.0.0-canary.ae27b44b0.0","@material/shape":"9.0.0-canary.ae27b44b0.0","@material/theme":"9.0.0-canary.ae27b44b0.0","@material/animation":"9.0.0-canary.ae27b44b0.0","@material/elevation":"9.0.0-canary.ae27b44b0.0","@material/feature-targeting":"9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.ae27b44b0.0_1606318510081_0.3315331150790968","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/menu-surface","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.2fbba2554.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"8e6a2a9f0846792afadce98218537c643080c754","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.2fbba2554.0.tgz","fileCount":40,"integrity":"sha512-I8LGn7fYb6tj5S1li++o3YGGSVmAjL3WEiaKAq9n7ZbQn21G0ZDL7qfN6S8HK33TK1Ir0Mz0hi2BmixUiE6IwQ==","signatures":[{"sig":"MEUCIEmXfHMskAYo/1OIjWBRl5JceY9gtd9X/nZG7z31OSdKAiEAtFEf3UXjQFrW6coXo+HyMhFh1VxLbxNITSCLGVxTryg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS64CRA9TVsSAnZWagAAxs0P/2s+P6jDuh0SZ0Xupe38\naS+x6M5T8S6dpkqZULLmL8QybjLeWceGH65/50Sihbo1xdybNwPWNytwHYUb\nxAzjd0qE7Iv7KZajzuHDQRroFK5Ot3oH3uyKp1gwIsaC6SP4Ba+CPXiE8zB1\nswgwvIXQu4MMqByNa0bWN0lc+3N4TVp2vpyNrXhIfHau8NWKaCMK/McotVMg\n6K7989DvoNTDMzhT4iTRa+5Yh6oS/crKe/sbRyvvFtBQuWKGpYEg2bbsJWe5\nYSAb/PxLLjVh+CMGGUMbVBl331q/uaTywfrwcpOyFYY7gDdca8/vlQhWqdkU\niv2Ba+GztTa4nUQRZLKJPi6zJ4V9YzEJMl5fGPcWEm/hgvCV0IxXil0wnGrW\n7Zv30JcbCdJ4Dh8K8gb6WhP54okraQW4vb3JPf8AAyu5gT/M3Xc3jRDKSj+U\n/HKABkj6Pyfud+fN8DAsJ8BkvYhVoqhkORjA49V0mcwpXjzeBlrxSgFjzbVb\ne3ZcGzd6J0BlnsfjgXvm6YfACs/qecb+g2MO+vyuernPIFpsVhhqU/j4NnhX\nf1hZqQA5zGV8IN3Q0PcC2XlCBhUf7JiLEfC4KHhuSaOPCwuGk+SkmkBc4xAK\nkKjmiKQNdYeQ5HaEGkif/s66tBCXZQMo4fxhL2RpF32+XJTvBBhd3SQFJ26r\nKsnf\r\n=e1oO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.2fbba2554.0","@material/base":"9.0.0-canary.2fbba2554.0","@material/shape":"9.0.0-canary.2fbba2554.0","@material/theme":"9.0.0-canary.2fbba2554.0","@material/animation":"9.0.0-canary.2fbba2554.0","@material/elevation":"9.0.0-canary.2fbba2554.0","@material/feature-targeting":"9.0.0-canary.2fbba2554.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.2fbba2554.0_1606758071683_0.9424651054855635","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/menu-surface","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.6d8574fe1.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"8cd120b7ecf927a446d8b3ab0f59e3b8839710bb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.6d8574fe1.0.tgz","fileCount":40,"integrity":"sha512-kVQ5bl3NN1EJLDacnorJe9NHTAaVDoTFWfIvcn/VLV8kSr3n/yjNBxwTlpO8zN00Agoyg99dVtoX/wl2Izl69w==","signatures":[{"sig":"MEQCIDc+GjESaMEgRfg9h3kxWWU1WGeMOWeNI5p0iGyEON+ZAiBtrjQT6H5JUXXtfV33wf5DxkoxpCX8ym+DZNX1/KWjNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTFKCRA9TVsSAnZWagAAQgYQAIGUdYz+1HCP49eKSrp8\nrURVKqNXLZAcyM1eNhuGNfA/Vr+zmK43116dgv+0PyDIqmwn1ypYR0Kb003J\nsnZLCAaYQi17A3C58Gvh/vxU2OBoVkCHDRqI2demrFjwN0L+uIMnjXgssvSN\nQ0vUPkxpjjaT8myf0noLB6EWry17Jzrg+d/FdpWpLuIHKjpdNnkZyrTDikqr\npAZoSKJMy4ecUQ/5RDBYv2OvMaqP/5xOo3Xet7Uso1wjx52uFh3y0Va1yP4H\nYPgq6MjRWn5wObqIuhVdi3CZJngkf/r4/DReNtSJ8SSi90RIXtuBEOJniHWs\nCVxHeia5rH8CGYXJel063wWIwH+zztYwmyNf8Ptwz2HnpVUlLOYmi0kxYqJs\n1sVLTpP96Tufbku9fkOTPFgCdwupcBnZgbqMX307Q9wAcq0p0MAIYGefZo19\nuYlbfr/IElJoqAOg3AuPDSbFB5HijuNBzQCHWHaAJ4rcMv/a9O2vrIhUbBys\n+uJ3G5yHGgAWQKfbo65RgVZuqJiyBk7Un8hHDyqwTPCYKLBTiYjr/F5fElsa\nADZ9D7DeGnE4ERe1opDJrpvIks1upNxKxY4imWdjufpFvOVO056DYHJBbRb6\nAgf6D5YxdhXYRM+TUGwilLF2G2L/m99ZgZXrLvNZXd526NBOEBsjdM8lMByh\nXt/R\r\n=E2rx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.6d8574fe1.0","@material/base":"9.0.0-canary.6d8574fe1.0","@material/shape":"9.0.0-canary.6d8574fe1.0","@material/theme":"9.0.0-canary.6d8574fe1.0","@material/animation":"9.0.0-canary.6d8574fe1.0","@material/elevation":"9.0.0-canary.6d8574fe1.0","@material/feature-targeting":"9.0.0-canary.6d8574fe1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.6d8574fe1.0_1606758729862_0.9955768069197506","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/menu-surface","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.fd22355f7.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"d8c70d24aac2f238726278e7cc9fff45447c1aee","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.fd22355f7.0.tgz","fileCount":40,"integrity":"sha512-je51nUbBxxmCE3FAwVYzIN+7l7fqK8G+pAUV8ILKDigir3uvDROG7eoWzbC4CmYwiTIwNxi4wDgZiPhAlPDZdQ==","signatures":[{"sig":"MEQCIDa8pC9bXGjFlScepd+m0ErjkH0fFFQcoriLTJa/B4z8AiAyAIlmK3pFEhpnalES7eKZhi6lr5pgufC33ZfdwdX0cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXmLCRA9TVsSAnZWagAACW0QAIYxbQJqKh08FdlHprxC\nRRT07p/mVfLEmUEIJxlAzRpUZlkVzZeA+kywWad2Gf/CQLASB0Vs7YdfsZiZ\neYg1y9Ui8DOGZ8Axrsj6EDo2M7dlmMiWHBT+PUNyagNFR7AhS04oRnmv78zh\n/HOp4uAqcD6E+pEqcda+9bvWOdG2xGtHh+8Qsvy1qdonS6kZK186Ivh+iu3+\nv9lJ19HYIMa7fexNRJ6sykumn0HKBtVY8bJLbeF+OWDbJ8McG2r0qGa8B8mt\nRPsqcBscnBOTNj8vklr5HbDzdl8ytoI+tx+HUqlD50AnKQcfS9XGBudObPNv\nb7h7I3mpvFnY/ktoE1jmYtZIMYIlRVAXQj92rgNw6py2zbis7HBt6BK05OzJ\n80k/xXtThCWW3UzsCNxoUlsTq+50uaMXo57E86uHGDWRt3QFMYhmoUq9NWfJ\n83VYabG8LisTmoEifEulTVQHN67e+J0DxNToKuSDyeDkqvor8QDfsWV7KSGi\n3s7aoASfgpPjrqiQtfK4yBQ97UOxPOBa66ngucuF8TYbkvFJTEMQhhumbiDu\nLHIw1Y3TXGj5dsYmLpxjPcLxghRRPRXxT7y2+nHzTkqnOi6xCQYKgony3635\nhAyJhVBNg/HHcAbVDOQeUY06anhHIeOL8Atmp4ofhZ8z+iJfak7v1lRVXJi9\nRUE5\r\n=XkPZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.fd22355f7.0","@material/base":"9.0.0-canary.fd22355f7.0","@material/shape":"9.0.0-canary.fd22355f7.0","@material/theme":"9.0.0-canary.fd22355f7.0","@material/animation":"9.0.0-canary.fd22355f7.0","@material/elevation":"9.0.0-canary.fd22355f7.0","@material/feature-targeting":"9.0.0-canary.fd22355f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.fd22355f7.0_1606777226762_0.8554124638653757","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/menu-surface","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.c4ab98722.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"9edffadeba4ace389f947979a5f8de75401c77a0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.c4ab98722.0.tgz","fileCount":40,"integrity":"sha512-4DmWVg2A0sdl6ke7my48hIjowP4n98w4kctorf3REck79qTm2jKGG37m/u4jvBN+pJnmatNlLkCOKuNZn5y9GA==","signatures":[{"sig":"MEUCIQCyAiNciUZkb1aLChgzmm7twDjrdXbp8tXn1wQ2ItOJqgIgZhDApWscV1et5+gLGjvymSP4YkEgNhs5RN5r4O8Y/9Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxuaFCRA9TVsSAnZWagAAoaUP/3s1Ulqj6yu5BBc2F/4o\nR8knRrCoUw+tPAd2cSVoJ4DxrcN2wMQaJz9cAWEo/owG0/qc5eys645rIuMj\ndM8/fGXWvdpaUeMTHSIB2nupL/uq+9N/lAG0bPL/tnh2VjcB7XdCAcrhKzC2\n5/xASeoqO01wY2ExBl2Ut8fL0tD6luW7ROxiDcD7t0EO+G4QHy8097aOBIco\n9DgVUw+vHKZJuEvIsUkwklDAnpupY/rEq0Edgs45tFswlQaJQ+4qCtJuVk5f\nkOtc80rtCPKvDURq8Rj3vjq0QGaxRELfktoU1uOAajszWVpCQuEa7oK0p5cU\niytNaoxLh+hlUZn1QhJChK5JOV6RYCJSx4BBVj0sgoVYW+9zRBs8GuUIVzdy\neVoYsjpKcklZRn3ElAFXRqJUBVUZbL8jJU8C2Jmf7Kzr+eAkk2XpzbTsQ9DL\nlF+t9F2mbdIYz4xJ1xwxo9Vd4qvlQcHufobghcv+f9JmRIixHd64xHkk+7/v\nqH0u1X/JHr6g3AhKKslqhvj538s+/+AFoJ/azBFcUYyvgSgkxph3kwGKXqWO\nIz9ohF9IeMHzNooBGKOQbaq3RKFCgQzmfuBC8GKBoVepAvQIeJaCWIifTt2K\nbb+AMrK7yQyKaessJ5kNW94/P4ZGnQBcOdmjmJGUG0RYsdyUV+WEvTIrA72u\nAAj/\r\n=1+/f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.c4ab98722.0","@material/base":"9.0.0-canary.c4ab98722.0","@material/shape":"9.0.0-canary.c4ab98722.0","@material/theme":"9.0.0-canary.c4ab98722.0","@material/animation":"9.0.0-canary.c4ab98722.0","@material/elevation":"9.0.0-canary.c4ab98722.0","@material/feature-targeting":"9.0.0-canary.c4ab98722.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.c4ab98722.0_1606870660751_0.4214784297689904","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/menu-surface","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.977585650.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"6188e016cf010eaa6e20709f3512e68c766ce7e5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.977585650.0.tgz","fileCount":40,"integrity":"sha512-9Kit6InRFh7Pp/Q22/t81IVM/GhE6vT479OronOS9QCL94Wet+IVZY1zgby19EIDvRZP67LI7RY48bUhcevtYA==","signatures":[{"sig":"MEUCIQDSdE9lTsVKWr5bqyJqk5DEg4WYnqrVXZF6nJNJoHnlOQIgTppp1SjAd1MqW7tYIc1tVwnALOSttHPLdWN71s+adcI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6gDCRA9TVsSAnZWagAAH5MP/2pD79iJTTwGWmGY/Ftp\nlhJQKR/M2E8oCR+YmzvOtHrXQdAaJSyHf8yGoL7sm7Aqy7++gVpSIxrHKCL5\ni4iUKyjWWzmzwyu5uflGA8gdG83VEUSjzV+p7qV//sPnu7mCWCbO3Dthtf9K\n/tF2qTCKvyz3PNx0pRTDPfj/oJX6JxAtGc53xNSbWippevyRfYPtwItzOhME\nFgrmXl50fc1mcGSJ/V6Ss0awzOSenQTIsKDEfMCA79BrLrsoRrf+Rp7ykhAj\nyy59JV/KBfO/ireOrnOsM75z9jtSevji9WrnI90ZbJb4K8u+K1PKH/LwYJLo\nMHTUdUIzOh0Cdc27p/rZBgCvAAGA0UYMBs/XOOOEetoVrn0myQLp0UzAHrWF\nssyqGYpo9fmZFJXhnNovAwD2pQwhXY8gWo5lwx3tRIL/SrgiNfG6Bdg5yPdV\n/cwSf5s3d//w6wCRHVYatl4D0FaCu4dFRStox20z4mraYRnug3Uoj5ht1Hs7\nkRdPM8VnO782vErtFIpr320o/YoXa65y35TiSNzz5lTpOKELNGumUDDVpwQO\nrsMhBhGcKIf9j0HEmmQ7brjPFMY5BZtn6TVQSIN9vkAz3UffB82TWBRTEdL+\njwvVVNoOD7UlCU0C3FQyVWF0/hzdTRtLK2C+fqPwQf2ETV8NXhkCBx4tzWff\nPo6n\r\n=DT1P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.977585650.0","@material/base":"9.0.0-canary.977585650.0","@material/shape":"9.0.0-canary.977585650.0","@material/theme":"9.0.0-canary.977585650.0","@material/animation":"9.0.0-canary.977585650.0","@material/elevation":"9.0.0-canary.977585650.0","@material/feature-targeting":"9.0.0-canary.977585650.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.977585650.0_1606920194721_0.03543266873350115","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/menu-surface","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.c7edfc7b6.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"380d6f7de29839fa9a5d26b9d0fd65137d53bcdb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":40,"integrity":"sha512-oA9bXtYqCVi4msXpzdQoQCyOcKGBVstIMNnONLngc/n1A2c0pq56oXSBHkCudoEyAksonhnL7zoXzxmqoFtdqw==","signatures":[{"sig":"MEQCIHpVItnuK/hsneGIEPLP/8NwrspnLcR2amLRNbdHXzPfAiAWstIOiYY3dARvhvwjDDCZx4LgRemw3dhkAd0Fl8D8Nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6mxCRA9TVsSAnZWagAAkVcP/jzUMv1HwCc071Yc985j\na48pPDubw/M8sg08MyR7iWolyVBHkj/Swn3KqNmTN6XbspsQzgwhrKSnTAql\nByOiH7ANIqBdNuN2uuhKAk8665997s291cqYz8cWINTNTbS9YQjVSAS1d2qH\n0aC29L1zeJ/ks42RbPu685VfobmzEDweQeS/HUQmLBG2kReYvlBBEZXyv39B\nLJJB+Lg/rB33o10PcTcT+LwkeggkYbJQRvK+n0FORAanj8vZS9TvU/1bErF2\nRAzedMI6Arr9nX6BLexqAuvn0av2AJY5IA7vwmWvRrWVu6VFc5rJ3HSdfn3S\nFeE4RDkasDlUzpLnIWWoOMQjXF4ND+7IziSklYSNaEHYXC3jv+4Pt9vdKuIL\n3GuO58nEkDEwxnyDGgQlV+2YUx4WFomOVJzU9gHuPYO4DhTG3vakZtQ0Dt/n\nvcEXthGAUuNKPTLDFMP8XXihldG7RiPXTfhwtDNptq9odfXF7x8XMZscWMhF\nqe21wzR26oTx4kEJ0KgLnK2dOzCbnSGTBDQTcZscHFyMPzRrPNnHVLl4HEMY\nlSnw1NbkpfRRbVds4Qn+18nYBHYiskzeRtkabk/7KnLbXH6oXUtn+P8whcVp\ntbVcH9Y+y5AZ3eJspxTI9tEjVmrGcSabYVtgRcF8PYdhP9ofGB1ZQgFaYqbE\n5wO5\r\n=gqsH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.c7edfc7b6.0","@material/base":"9.0.0-canary.c7edfc7b6.0","@material/shape":"9.0.0-canary.c7edfc7b6.0","@material/theme":"9.0.0-canary.c7edfc7b6.0","@material/animation":"9.0.0-canary.c7edfc7b6.0","@material/elevation":"9.0.0-canary.c7edfc7b6.0","@material/feature-targeting":"9.0.0-canary.c7edfc7b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.c7edfc7b6.0_1606920625360_0.3304378917868114","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/menu-surface","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.4f3347306.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"f75f4469f86679978003f43743be585221c73508","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.4f3347306.0.tgz","fileCount":40,"integrity":"sha512-0DdJf9XjjaJxMUOMyN0MSjoByTe6SnzBvqEEFqy+94CV5Qeq8B8UwqEWCZUIfLFpwo3RAlnkN2Z9bkFHtaPkdg==","signatures":[{"sig":"MEUCIHO6GGs8csrLC3E25Q2GfE29DS5AatgLn2N3aquGjvjBAiEAoNfFJeHnF3V1htqNdWwrOdOLLbhHeAv3OttELQL83aE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx63nCRA9TVsSAnZWagAACK8P/2JCmzFHYpp63bI0gtcO\nits/jxrxQ3kY8lca8raW4GivQLfa/p7lINAeKOj3gGjZ7WbPWB9o/XmCVeBh\nMJ31rEpQUFdOldZ61O0A2HYVdAwNzFmbI02KyJ7WeaUIHhdXzp+T713NGobC\nw9ydqQaXLBLv7vPOJPDJqiLMyCLLlyOyebdBrktL6p6sI0h6M2KNIu+icwFG\ng1orG5E+3P6NZoQE+ma2XaGFs54yWeE9QVxEKXT7zV3m4H5GCHool3my4zkH\n5WQavduvHX5qV3jtP1ojcb9eTPOqio0Zxyi8Rrb9XLIL3JJC+S7q6Kbjpx7/\n/DdKbwshTWfPx9dGLaCwOmdIfsmpQie3qb8S61ZlBim03Z+EBsCBf7W/xJPL\nQ1QeMpH4DAOegP1/+yy0WIMmRWOP+N9XmAL7C0+SjiWluVj+y+NkBbbU7DLN\na3vBU1cWvhZl9jr5aqIKJtzq2lh/JaohUI6TRarHJEW56tojIXEgXvj0ZfBv\ngR1WtHm6zlbBHE3Z03XFVMBZiedetFYDo99gV+K9keRwqw6GOEflihKKmc+w\n5V6jVxOxtsL5xsA1TSIomnR52814+EIM1ANvQk/313qxFOALdbfLGU7PzCh8\nkaCCM5oEaBDi6IAYFCI02uvlkeEdx2K3XHSLCHMJQPrJQJN6kpad5h4uGP3s\nvZOo\r\n=9+F/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.4f3347306.0","@material/base":"9.0.0-canary.4f3347306.0","@material/shape":"9.0.0-canary.4f3347306.0","@material/theme":"9.0.0-canary.4f3347306.0","@material/animation":"9.0.0-canary.4f3347306.0","@material/elevation":"9.0.0-canary.4f3347306.0","@material/feature-targeting":"9.0.0-canary.4f3347306.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.4f3347306.0_1606921703353_0.9663952717409487","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/menu-surface","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.37fbae10d.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"2c20499000e3da18d6aa976db9d7c1d428c0e6ca","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.37fbae10d.0.tgz","fileCount":40,"integrity":"sha512-wcrMe4num+ir13BLsJuIMJtq/Y1xiJZ3yRfrfYwABvefyo+EXqbmJ60r+6biCTQAvgmiSuIyAl+LhruKrNofKA==","signatures":[{"sig":"MEYCIQDlvGTxDSqKn18l35bjj4N8WFkzVrfjL+V5lSczkoLaxQIhAPSUWCT/yrKsQS7ulugo0frr2EEH+r+rFbOq6TJAW/j/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9oxCRA9TVsSAnZWagAATFIP/iQEQk+fsQ64bjYtCDoe\nGHx7kemd6DO0BZd8C76+KT+Hgqd+wKF9j8fctmE4HuMAF/bMAFkZe2DxM/IY\nghA6YEMXfjUVKKr30b822OGTUPWoOWhX5N0YJek/ncon7jDnuytckwGqmdA+\n4+LwEdWY/mri1E0PMY9e013dG+dBze1XFecXIzln6Q4Gu7tg6QjQ50l+BIpK\nERdSbXZQJDNLZVD8za1D3uc6IFydV5dzykorO94sPRZF3CCfCUh2Hr7YmVd9\ntmhEOrMPkveahmy5lwwkyNOP9bfu71Zm//gdw+TpQQj0Pu/se8QnAh6JQCK9\nsgUyBw8CXXxh45JfXVsdo0FqQeuowDzGpT1ZWb9gyr8V5d51K0oRCy2MIBTM\nT+JRTKpEeTQLwt2frmgwitEP/p5YWrdUXBHFTuaSQAea9Abtj4pSKzPFsqIX\nhAqFVvx4ZSIgsHMF1KyiGtZR7Ux2AcT/lEvs/Jzxs33WSRoDw/I6hp/v4kj8\nLz6m55YKt8WgYXqE0BcrMWztQtGEF2if2MLaSDWl6MciK3xb+0jbZJeqyZmW\nOjstUHS4dataerv+wG+A/9a/LDpXHXCVWjMx1UIrJ/7woL/J/hwjrFTiZ+zk\nP5jcK5ZWGnzGf8sd/IF3+ScSDTO5fkCdCqctB7uiVwDXfnrtdj75Ot9w7qV7\nQgpG\r\n=AQjs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.37fbae10d.0","@material/base":"9.0.0-canary.37fbae10d.0","@material/shape":"9.0.0-canary.37fbae10d.0","@material/theme":"9.0.0-canary.37fbae10d.0","@material/animation":"9.0.0-canary.37fbae10d.0","@material/elevation":"9.0.0-canary.37fbae10d.0","@material/feature-targeting":"9.0.0-canary.37fbae10d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.37fbae10d.0_1606933041253_0.10250966918714344","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/menu-surface","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.11da3c0db.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"2a2be5976e60ab23d2725ae0265ff83b63549b8b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.11da3c0db.0.tgz","fileCount":40,"integrity":"sha512-XLJs2NoJtlVi8fULj2EvApcs+84CD5g4KhaUQcAO4wq6VFFV7Pd4cPcl3fEcNMboilYitUpyUhPgU3oEtlNbUQ==","signatures":[{"sig":"MEYCIQCyd4AHeVMWizrSjJ2EcKCK//VLNeHr53t+/WKv1MGhSAIhALCTGpk+dqfuJTNI/ZwnVKcE82azJ9Ld2ZMpzED4ieBW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/e2CRA9TVsSAnZWagAAJq0P/AxLcgXScaYCsRR8qkRt\nCmYjSL50nu4Grc3/pDskeWMVmus+7PiYGl9Ul+bgFGfL8hrU5vMh+3RN80hv\ndHl5W01GS7t6twsfgZaFHRyQYuWVkqtsNQ7Qj7BtXwmxxvNoj42BFaZuMkak\n1jAkUkPTylZ+BrKcKx6BY/kqBFKWvIUTuzIVtO0qJmQVEthA9rjsephfj6Ls\nykm2hIBYXvsnJtsAGOc8R8KP+aNK3SLJ3r6fSqwUTP/j1fdZ84jIOnR9QJTJ\n2q0jF+TIDltSlRqOhYfHwQOsyG0p2DBP61OtZ0OBzAGJw/9Huwc8CN0feuNu\n4ySbDq3Sl68QC3u6H2Z6eJe8lmZiE+tNRc8a2lshEvjY9zkqV4BgOH0P/gxk\nKltdzhf5AuXz1k7eOG6vWJ5q9WkVfOcnkhXRUDi/bMGpicp6nQQzhFizjqzt\nVxjU2h0CrxGIQ6MWJfLYQZKP6xJJUfOcU0NGbO3Gzspf4iMN40I0n8X1Mt8J\nVzJGlVwyGndCUGhyQnX5w6V2QPkG6N1dum0fxgjCdiWimJV0f6w4j2BUSUGV\nACjNA7xW2Rp75JEAsiQ2N+nLyDibxtGjB0ihs3CrnKsfD6L9LKNlNBouwZkF\n7Qs25CcyYF+JrLA2P4eWD9Q7MtCmBTRGISniOUpGNLqOmK16SWD1l6rDXwcI\nwsVQ\r\n=MEnc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.11da3c0db.0","@material/base":"9.0.0-canary.11da3c0db.0","@material/shape":"9.0.0-canary.11da3c0db.0","@material/theme":"9.0.0-canary.11da3c0db.0","@material/animation":"9.0.0-canary.11da3c0db.0","@material/elevation":"9.0.0-canary.11da3c0db.0","@material/feature-targeting":"9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.11da3c0db.0_1606940598253_0.6826856978768923","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/menu-surface","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.489d4c219.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"2ca934a8c1ac7c0b8feb36c75b03d8b001c30327","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.489d4c219.0.tgz","fileCount":40,"integrity":"sha512-ZzzOjmzwket8rUEOhEMV5/yuccLM67OlMyxWuMNUiE6Dnfl8g2uKqsLa1YyF/mEEzVV4pIPeCx4SLuG5KOOm3g==","signatures":[{"sig":"MEUCIQCLWZlBCoNdTW4agoJmxSJwk3h0s+CQLm/97W8FK3/+wwIgTKXDGkyoxGBnj9VHP4wrae8oXkZHvWirZoDCPFOmAXk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQSbCRA9TVsSAnZWagAAgL4P/3AlSDkYJFF0G8eFAJeY\n+wKzCUW2Stp3LXZENW3aiyYvqBa/DGrRUi7yPN2D/3jnK35SOruxoVY6RBg6\nxKe1rLQtk7GJrP6GaiHRh36hqbvveR1hE/TVZxF5TQNiwwFY8qx7EGpa3DJl\n23xcaAxVUGp0tDwpoWPjhXvmicyKoGswFb4L1lO6RVr7X1DX4ffYUND3b4WI\nSC6N7k+EDQDrB73wSbOTwjZLgywnbIUQwCBJriTTkcfy/uDlcepULvZn5nxS\nDZAstrL798JEgItVlVAwSC9jIVJb3cJi7qPxApzkGCCTvHVM2IJMsYyn/oAs\nriHGTqwOcZMwmvHGcnLxjEpjQsQ9LZ3Y/pO1kM8O/EswV1ciJ7N0vt7z4gA/\nVM/MbCqCuaHxPt8wyHmKxIfxfw4vKZ4goCr8vqE6p8c3ZhLiIZNqHBC/7Vf0\nriZXI10VjVKSipAYNpy/hkiVoj4ZBSLIVVhVRERPsdZjAWfx4XcYKjBmWxH2\nLxU61yyi2wWC8P9ZbFMMcUfZKlLsllsixb5hTeBIWo1Un6nJWHtXXFcg3jSx\nWhHniEcmUDpwtylFPhhf9gixL5QIFcu/6dZwPO9vHKWMFXMa4s7C/VD8A89V\nXWpAtwksoDyYS8t++R/oe+vw9hU2mkdT2TrIwf4TpJQ+c9oUTrs6UycjjZy/\nsKva\r\n=MPWp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.489d4c219.0","@material/base":"9.0.0-canary.489d4c219.0","@material/shape":"9.0.0-canary.489d4c219.0","@material/theme":"9.0.0-canary.489d4c219.0","@material/animation":"9.0.0-canary.489d4c219.0","@material/elevation":"9.0.0-canary.489d4c219.0","@material/feature-targeting":"9.0.0-canary.489d4c219.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.489d4c219.0_1607009434706_0.5820388074585596","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/menu-surface","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.6557a69d9.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"8bf91474c6e8c6af28abbc6f7871871684e70a53","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.6557a69d9.0.tgz","fileCount":40,"integrity":"sha512-y4AQjRJ5h5tQ/jWRgB8H/UZjlFRGiaZMUUDaaau1Zi8HlOWza0tximIwymxMZcrbl0ov9Ai8iPGsDTF2feVmBg==","signatures":[{"sig":"MEUCIQCeXoN0GzT5TLhhfC0BhTqPZ46pyTHc0Aet11nsbPbGFQIgE8+/m8ponY0eEbi6b5fk0cnkCAikAbukIbt3HnPx62M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQdcCRA9TVsSAnZWagAAr5EP/1EEgwZyboquxm9xCnQ/\ntnZmFrNCmsY3sd7VfvfbatyeJjjxEyiiWpUBESyW9hIiei3U1YoWFmDcAcD0\njy6c4Wy24cuSlgzYoUjHBd6sbsHSWqGtbntXbghtJBicZRP1opCQiEAT0xB3\n5qOXtvD7goW3UJivFoy742T1ahCm7VQyYAdayVx5kCEuvX5SQWMB8MA/V2nI\nTwjgeyEDcPJuty3Y3HfbpdzCXypT/VUEnVHA0yhMzCzf5BvhbNeZBMN/mpeY\nxT1orzD6Nel52DC+IO4QtD1bSJ0ZsXXkT5FjGllvNvPLWNydwIU5SFvlQ+SM\netAoclhO8fuDvrMhcG67mPMnZ310+cKlvszLvh6hMiww162L4W6rZVebE2A6\ngZEwK3Mj+lVZsSNgpqlh6CCcjq44PhH4qcAiJXQKFMoyBCEqhYtcjue8uwbE\n/YJLsPOUfj5/rWkVwWQr7qen+0aDARchnqZxNACO8gxdGVpwpHNBLz3geHOy\nG/2Ykmm5ubDSAA3iPgSYFmJ1X79DvYUsjxdJp4900+jKOewHNke8dfVeCXih\naSL6aBAl7/E3RKMt1yFc9jQ/so907q7vo2QnnvFwbU2jGHXp/CQKhi6ykics\nEDBO+97HmkttVHxo+Qr5Ord0seSd3XELUhtmq5E6CHVJkkfAvC9ntOkEKXZ7\nwDJq\r\n=LkyF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.6557a69d9.0","@material/base":"9.0.0-canary.6557a69d9.0","@material/shape":"9.0.0-canary.6557a69d9.0","@material/theme":"9.0.0-canary.6557a69d9.0","@material/animation":"9.0.0-canary.6557a69d9.0","@material/elevation":"9.0.0-canary.6557a69d9.0","@material/feature-targeting":"9.0.0-canary.6557a69d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.6557a69d9.0_1607010140026_0.5478576194276907","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/menu-surface","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.4ea1b7c69.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"bede46477338d8b31714d3a13f3b56306965c928","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":40,"integrity":"sha512-5SRFuiALhXHW6RxdWNsMvXeGM1D8X0L7a42u8uYQsRhIPZshQFCnZhK9cnf+ALC8xWjWhDAVEmegrvvInBIpzA==","signatures":[{"sig":"MEUCIEIXi56UC3EBFto4zCVq7ppOVjmng66juLyOLfNGhZUxAiEAvaTWaz8vl23uhsH44MQuzjpeRi0qhHhyYfsMWyZdtY4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQtfCRA9TVsSAnZWagAAe24P/iHvAjTazTT3NPjeo3Vr\n8t1PLHkJ212FzLDEQ0plBPeHpN93WGJ7rgr7XnJK3MJDKOLH9fWHigSLyv/k\njuPWKRhMe7gBRUerosu6uopMeBvvUrJ9i81PJahrwteoazgpB0kY8RJKXfmX\nxtzrP/dr4Dvs2NWyJfs4KdSl4VTfdfNs7OwSlK9J3E3ubsVpi3XVapxjdfWh\n45WaW3lFx2ZgIEzdLlJOc7CcA4X4znqQkfWunJfzo7imzPFswN9BgLopiZcy\nu5AT5kkfYvvkbD743gvI0/V461q83rM9lizcYzBaAX9sTJrcw+5UtxpnIMPu\noxFKkGivK6mfrSY3kqWG2/5351foWhjxD1OTOtsR53Hp5vxe+2zrzMI/KvAe\nhriuLpJMIqkjaeiQ6Unms30gj7udfY18bnWLbSwo2dgj79C2f6JNrO6lFjJR\nPuyEk6lOeura68D/VQuZxTILpttgj/2VAijTGX5VbkAHxYabL++ZBKfjBi9l\nL6p8TxauGxUBbosj4OUisREKe8p4sh6N3BpNoCZEU0zT3lzqAAEeBaEfyU83\npfPv3r6p5byw7Uuav8KH01z1MdvDmB3LBeHUCE8K6HKPjfcc/Gxc+4xTjOfJ\nFQd4KDpOTR2lqD8lAIGApTCMowmzOByHwFZOmCCaNVaaTmT9i7oLs6YCLTv4\nliAY\r\n=hoF5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.4ea1b7c69.0","@material/base":"9.0.0-canary.4ea1b7c69.0","@material/shape":"9.0.0-canary.4ea1b7c69.0","@material/theme":"9.0.0-canary.4ea1b7c69.0","@material/animation":"9.0.0-canary.4ea1b7c69.0","@material/elevation":"9.0.0-canary.4ea1b7c69.0","@material/feature-targeting":"9.0.0-canary.4ea1b7c69.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.4ea1b7c69.0_1607011166737_0.8314459748845047","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/menu-surface","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.eaeb78ce3.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"737b060868da181dcca08000369d93a646a513f0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":40,"integrity":"sha512-Bem6OR53jnX90OYGOQeU6JrdQZf6BWUqua2VQ8tAhp73TVPf4b0UFtF1dtl7qqID6vk+2FcpFPvWHfqWyuwyaA==","signatures":[{"sig":"MEUCIF6LeXWmtHZvgCVLKcZ7L4Fdj1eTcBEfGt/W9abP3EzhAiEAxON6rojb4DyfIQwGCOcFDch8hUMLmJFyy63EySCpnJ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRn3CRA9TVsSAnZWagAAKMoP/jdlr2q6UP3SvbX8I2xg\nBg+Fde+2bS+MgeAcugomhhSpcyK4ySeHjuIUqVNxeq+Wk3FAwQKz1v5hCtJJ\nLBxxq25DjnzQky4uh7CxQK1jCdktDIOa1wOrX6kBY0OkeLF88MdN/8+5Q/uN\nL1ssEdBuXrl/4kYWp3mxisd8juTgeIMe96I9RkSVluNVFyCeDMnyYwPsK4G3\n00WVGNaOpe4HKxCLZVh3MtxK/DngQ8l/MBb/bssA/LyzfLyppCYqptKPS3x8\n0uUwUe1yng3OsvpO/sxhGMN6/DIIdu+qzDbrW+p6pGiasxABniG/k+8Bfkkd\noqmlRE7/oD0yDkM5GKikEWN8gEj3InqnScIlmLAIimRoJWTEy9nVRct0ek2R\n4psO/MhAuwNX8KXK38bRpxAEQ6i1E9Cn3uyhtHFPzGGLwqrMlhTJRmyRD2Aq\nBxUA9dpN400jU1G1yXWCdp1/XoEWfPaJFMvxngJhZR5+vHzqDZh1YV8tSH6q\n+KNeo5wmMqpQN2yrgfo/GU7XIqnn3+C5CDMlbiylYFZ5+3Uqz4yVy2DQ2Pab\nFuqrrVDf3BSN9Oq22wTqXlg55/yl/YdDoJYL1oUdaZDw1Q92iAddFvhVlbiB\n6wkf2drw8x50heKXNxjTdrNBX9rUDGEBtY86z+l1k0/OEbk4G1RskYyT4MZ4\nSuor\r\n=jK9B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.eaeb78ce3.0","@material/base":"9.0.0-canary.eaeb78ce3.0","@material/shape":"9.0.0-canary.eaeb78ce3.0","@material/theme":"9.0.0-canary.eaeb78ce3.0","@material/animation":"9.0.0-canary.eaeb78ce3.0","@material/elevation":"9.0.0-canary.eaeb78ce3.0","@material/feature-targeting":"9.0.0-canary.eaeb78ce3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.eaeb78ce3.0_1607014902965_0.7964795344862152","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/menu-surface","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.1c156d69d.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"6200a17a4895d99f604f96d87b65243ae3b98d5e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.1c156d69d.0.tgz","fileCount":40,"integrity":"sha512-/ePz8oZm+XLsGypnXJ1ATK4Vtei4KgHh9MFJHhOvmAbd6gPX6I8LnWlUA3cQ2/AX0bDeLNM7mXUkJ1d2flHdNQ==","signatures":[{"sig":"MEUCIEdMNZ2H4h5WSOOdlMwQb0T/Z/zdP2H4d+i+tIpoE0lLAiEA3tCRCcEALWxa6Ri8tc7V2sv+/rnohFb4Wp8VdTw+/U0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU6OCRA9TVsSAnZWagAAXfIP/jvpJ3YwxxQQIkQ4O8P/\nfK8EA0kry0Aeh+FgPBMTeeoa6Bx0M4N8f8lKlmrINvbUQJKlhjRrCNANpBTf\n4Elyr3bXQXTXx33hwolsLuU+EpIaA7apdCC5fsZ0tScaoKsmfdtz6sLKJ+Sw\nNMv89obmb3DhV9dM7KIX+dWitnPPyJ6bk20zbUolhfGYH2C/t6CySmSHP949\nZPJAAMLqmr5aQhaWNtrP801LvFGEGFcl/dbtb/Fokhazsz0kojtKHD0d0th5\nknDyFvk2hCfISAI3UAgsgSHIvP1nPCYuWJqBt8oHNCKfV/ZUBfybv2WHqJyc\n6TsDVC8NkvxhYphYf8hVG38d5DVB5abhbhEBSZYbWPlasn5sz6JPcY4AECS6\nuoI6auIPm3AnPS0Hy6/kTRkg431MZ+cXSICqGtRZ8KU2Cbhn3igFUsOKghzH\nRZLj7ZDBorNBZjCh1j7rWZHULDlEZW2zBN96U9EiezyvShp9I9SKJV3t5tJz\njprFY2+gsFjXJoHoZ4fK7cuxt2+tZFVChwDNUO5z971qDgU1JGFhYggI43Kr\n8D4LBiw27HRfaM9ftsEK6druHNVfOAI94I0Wr9vA0epXl6Osz+IF346Hivgs\nAq0WIBOS5bmRJ71NOnm/ioFM6QfWw3G3b11tw1XgDWAoLsdRLm4pi/IPcujn\nLUVG\r\n=6sKB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.1c156d69d.0","@material/base":"9.0.0-canary.1c156d69d.0","@material/shape":"9.0.0-canary.1c156d69d.0","@material/theme":"9.0.0-canary.1c156d69d.0","@material/animation":"9.0.0-canary.1c156d69d.0","@material/elevation":"9.0.0-canary.1c156d69d.0","@material/feature-targeting":"9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.1c156d69d.0_1607028366277_0.29931532153681295","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/menu-surface","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.832668d33.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"bba77b89af2f4ad96b0c7fe176efc87dd008676e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.832668d33.0.tgz","fileCount":40,"integrity":"sha512-x7VpPv0Xi3a4OjnSmo6C+W4/CjhEgjXrUjASOY4uoPFwT6c8/gou/JBM1/K5xdDQVfyaru+gDBWeFYJoNorNZA==","signatures":[{"sig":"MEQCIGlbgo2qJbfkJnROommLmdGN0jUqGvyScLkOo4SUUGa/AiAFQgfv65fmUXy+czGUcAUd7Oyi1GRyq+8WpHOfYRdCZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynq4CRA9TVsSAnZWagAAiZQP/0JBJ/6cq2+Fu0Ym6fFV\njwc+uoO7gtz1ACUU1strJxQq4EvJ9UM3a2I+40LdK7fsEJscrHUR44FUhE/f\n75nymXg4ubmL7WzT0SG7Cw/d/PkVmX4vVtImttMUKzv1eO/MyMLPM4t87OTd\nYvEpOScLS50a3UkHxtV6klbqrXoDUAGHsup+NQ7nvGoYpeQvpbPJWP1uH270\niTibqsMIS3SpE/paA80ZoWNTWVnPGjyfZaG3NIzRvaFO1upg43YHkJyWXK9h\ntSwJSYv+Nz41HzyEQ9G7VUmtIPUU/W16T5QC6dCsFS0BdI+Z/kXnmGlqCjxl\neC17386YW5rnxlAunbtPf7VNDaiG6/mFgrEFfD3EqRwS9hBxyCq+Hc9xydRZ\na0XGEu/MxLvffa70ccKt5d5AH1vl3g98XM8/LN5KybUFC2GzslP7+7PQIyPA\nK/+Rv2UAcIHXeeNYSR7sWSDu7jw7u2ATQBeKTYAU/LMpj4fZu3ssNu6lep1z\nwTLlB4IosiVn3C8+P6KAyUVjAhB2ph97jlfzJ30JPJ+uCrbMijTTttApSv3h\nwnOke8JOlDyQPTcePDnc8MPj2d+jjzyd7S/FjSh+ELwaVfZ/CXTXbpQy35aj\nyu3273LZ7P0LaVz7k/oCe1GojmPU+wKM9ZzIkoWBvnKKGHoj87qBMkfl8sdJ\n2AB+\r\n=0Bpk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.832668d33.0","@material/base":"9.0.0-canary.832668d33.0","@material/shape":"9.0.0-canary.832668d33.0","@material/theme":"9.0.0-canary.832668d33.0","@material/animation":"9.0.0-canary.832668d33.0","@material/elevation":"9.0.0-canary.832668d33.0","@material/feature-targeting":"9.0.0-canary.832668d33.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.832668d33.0_1607105207511_0.6032411889784588","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/menu-surface","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.4321323e4.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"e23d9800e1546d3adc99f86d0359185bb0cf0d16","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.4321323e4.0.tgz","fileCount":40,"integrity":"sha512-9BaQeE7c4A0eIVkZrmOd9ixDbBk+4A1Qd1zBh73HFuK9aMleiDEpXGZ7kxHGGXfyDv0OifxhyClbOaukAa4uGQ==","signatures":[{"sig":"MEUCIDjJKLcGUYQQ5ESeZGwkp8iQH4/sGmLNCCPt7G0mZK4uAiEA3glnBtJlD80IcPjqhf/U6A5DPPMl3JCYIxvNW5Fh0TM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhIrCRA9TVsSAnZWagAAW6EP/2SljALYqtrY7FU+TMlZ\njvlDJNdWLiDfOm5uKyFZRzNgQwpZdHFpuRRZu5DQeAmR8L5kN4bkYcWK0iUY\nVpm5YCgyMFeGxmrkRwRKZhxAKFw+UAwy2mn67tBgwgM2+/SYfoEYfYWMZ2y2\nUUgbCZG3RCBrommGhMeho7T0mAHqyERhx9uLbW2XGw1zO7+49+KXPbeRq0nm\n5Qvm3CT4HUtuYjcxyreF6cu2gXfs84qTnWmp5yw5WYUVk2Dqh6YxCNxguQzv\nmMmxodfUeKJnbTXhuOB2+nITf9zne++0HC+L97gZXckvoPqKS6l40n7OwtEm\nkZbg4I01Zl98bZnW5O+T6snbpJrZTHg3opu/M2sKK15Zs1LDTLF9FQui0Xoe\n6e1VtS2mxjrT7ZC53XnjaEOdko3j86wz88fLPRlWHtqY6GioFGbWjdSjKmoS\n09SYa4/e8+mntnV4Du6XILOZmIaae65duhgTClzvYIAoHxTrX+S/eVP2TUcl\npr1HL2rYWX95f2+nk3rO3d8sJN80IXoV/s5u18BJ2zSuqB9hCOo/sssfCZ4P\n/nLPhJi8Udp5baaqBFLT61RRnsIbDVHqU03uj4c553yO79hJAGeogsZQXiqV\nHfNdSiqHSw4taRIfsIUgs4MqfGFDQsQpod1cSdSH7bclGCbMcLljt27RvP7/\nCgWO\r\n=uRsd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.4321323e4.0","@material/base":"9.0.0-canary.4321323e4.0","@material/shape":"9.0.0-canary.4321323e4.0","@material/theme":"9.0.0-canary.4321323e4.0","@material/animation":"9.0.0-canary.4321323e4.0","@material/elevation":"9.0.0-canary.4321323e4.0","@material/feature-targeting":"9.0.0-canary.4321323e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.4321323e4.0_1607340587169_0.38460187737964535","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/menu-surface","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.2d5f32d41.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"705bd856b1888f284933614846141cd80dd088d1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.2d5f32d41.0.tgz","fileCount":40,"integrity":"sha512-9bdjdFEYFrZsZl1Y/vhVtf7cF7ljGF570eVnvyHyBLt6ODZEioU+oeAdT59S0DvtcaP4nj86XA0eSLXn0OF/4g==","signatures":[{"sig":"MEQCIF1N4uljAcC4LB/1FLBTr7IQucb99b+DEpXQgv55uoIGAiBd6lLSMbRXrDlZI1tpTxv+IGscqI0m9z2J2mKog9tc2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzltmCRA9TVsSAnZWagAA8zoP/RtCyNqdVpUfUxtPrQQH\neyxVB18uAwCsSh2LdPVNOREUtQHPl2FLx25HsAIkYhLsbXzWNsqu+4QGVgLK\n2URhCOjY7DTG9ijyiYVn1Rm2ZkQvA3eZXNFO80/GjI4w2LzEOWkTsOchTfyG\nYq+iavnNSPM3THRmM061HUN2nZ/ZeTHwCCl+DkN8MhANiVpO73nhYZCQZ3Hk\nVjcCSRoXz3Ln57mDlDyVoY/uc/ktFtxkldSoq1FVfKvD/mT5YS+OUZr40Wp0\n/aTiC5mMMe7+xz/wZVdO5CEfo9aQea1RHKkIbKQ8xamHDoOgFeYwnyyu70p3\nWw4PMkKZpCR3Aq6rf9GSJdaE8SlLfuP8AQlzu1bm/SU7KJIvh8vQK4Up/Hb8\nffk9x5qAMtww2fK9krPwVwPqtEsJhfZWgVB6v9CMPTm8hzPklhn1MO1GSLYU\nzjJaqRxuxjv5pk6GT8sJzCClOHFzVowkgAJ8I+Mv2H/oteeERrhZhJ74Pd79\ndgUYO5ofOPCt3KOOF08kOitBtWnE9n0EKE2tXf0lVRJHjINsR3eY/hWS2nS7\nlpO6ebxAAcAMvkxYpUyPvuxsi6QUp8ZOgDADKsEh2JKwFBa62QJEr5PXrF18\nGpUn3vSAbQ1v+5H8ajrxL42dkHefIWq0HodaM9TayNRJMWd5jHkzXX84cuNJ\nS+U8\r\n=rqUR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.2d5f32d41.0","@material/base":"9.0.0-canary.2d5f32d41.0","@material/shape":"9.0.0-canary.2d5f32d41.0","@material/theme":"9.0.0-canary.2d5f32d41.0","@material/animation":"9.0.0-canary.2d5f32d41.0","@material/elevation":"9.0.0-canary.2d5f32d41.0","@material/feature-targeting":"9.0.0-canary.2d5f32d41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.2d5f32d41.0_1607359334201_0.6938597152625423","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/menu-surface","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.8239afc64.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"6a3add646fbeb0efb2f41a1391fcc164032b4e06","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.8239afc64.0.tgz","fileCount":40,"integrity":"sha512-YTAzVws4tAKqpizNnDj02QCmhTQ13Q9rXx4f66Kk6A5gBieXE+QKZK90xXb8qJgJg+vKOEYx87a6nX4QkwBZsg==","signatures":[{"sig":"MEYCIQCZzgG1ZHwTR+sRq/Jp0Ra29f9iEck8Xlw8aE1ccB7umAIhAM75SnBrJ6ok+CpIhNKdwBDHGWZzIW8+hbzXR4kuRc5n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzod9CRA9TVsSAnZWagAAWmoP/08CtBchFozztWW/YM3b\njpND0JQJinrJnKBuRQtTeTQ54P8ugMFSeIdWJXqIsLBEZmgcAG2NUhxA0wN1\n/FNfHVFbnqo/t945SqcYuCVx/wFroixpRRipODJ2eyAneaKOfDtzjtmVDJ5H\niTgDmH36XhUe6ZnkSz6HpvUgzHt1JkJn3CZ4GMZgDScKf7ux2ZmOnwHOLbQz\nFn8L78N72hHfprlBLhnm7AjH4z8M11dz75qK4P5vK70bBirPodCLxVbyHOxq\nM9LdFj9c/thDdvydLlzTr6UW6rB4TAPexwnYyIHz48yxxZwE13gYljb4452j\nxGN1DFhpOiqmx44+IzJl7snG1cfAuQAUBZS7n0dH4PxIDQLbdam2NuSeKKXC\n+6V3UNHMATUFNH6hYEC7KOGi5L4qagzrU+QoEjbf9QGgOtfz2s2Ij58KsR7R\nwSncB3Xx1H4qdUuq+C6QcNCP1qYmM3JMkZ7axdlRuacnBsdLl3+4CwT0tk94\nkh1F+DLcugU2bIvFY3fo0pisNB6uN5YdagGRjaedwbYiRjOjhWi4ZJudup9v\n6BH5jQF4ol69sEKdTEq7y0S8LS8Uw/yi4ep3JuykQ90qiRuyGbHTb6P36dCm\nSiqg7WSTyZ/eq2vQO+wzZkWLRdFe8PckGOMI/FHZp7ng1Jk52rkP+QXGfU9O\n+DQC\r\n=BY6u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.8239afc64.0","@material/base":"9.0.0-canary.8239afc64.0","@material/shape":"9.0.0-canary.8239afc64.0","@material/theme":"9.0.0-canary.8239afc64.0","@material/animation":"9.0.0-canary.8239afc64.0","@material/elevation":"9.0.0-canary.8239afc64.0","@material/feature-targeting":"9.0.0-canary.8239afc64.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.8239afc64.0_1607370620450_0.8968331128405518","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/menu-surface","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.6871336f1.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"4b892d8ad13c63e9238f4c23cff47b4f5a73a8c2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.6871336f1.0.tgz","fileCount":40,"integrity":"sha512-JxphrhNzHriDIyjAOLUWIjWRunm+0/Ly/wDwaRal3L/nH89sChfZG6lAFjImc8Nt9PdJuyS7k2BHsX2/lliTlw==","signatures":[{"sig":"MEYCIQDa78bzfwmupc0RfDrjesOowHvYRB261wbhqrhoFPGSngIhANswKWoS+lI6Dw+qX+G6HXyHpkb0ZVmpakLBT19mLmH6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6OPCRA9TVsSAnZWagAA+xIQAJVKdorY0SWOrZAbVxVB\nGGw4v1DirjACc3jrQymmaw3TT0XmzXeyu3JStxni2+aF7tj75erP8HdNB+pQ\nEHIPdnDhJ+p423DlJv/uV7LgS2q0Jif7gp9xJxEEwrXOoXi3m4vyisJu69Iy\nwkLavF/7+lXelz/29D7d2rhbD6uvl+wwltj/x1kSYHjsYlkxEQNzDR6duKcS\nmpN1EO7N2eBaM+6GPeNXRd0m3IH+TcA5eg9rul+ho9J31CMPH/Io/gWLvZsu\nkWKayh9kHofjj1KZ6PbcLc95iu/jYZ3BLtldLbrcrtywIGrq2vrULea/HwqN\n9Da3Z8+Kb3qaB9SbgOv4bqe0pnCPM0dom3yyMVZOSeaskMRSB+Y8651h3UMS\nAEffULrIxrEvJBRVPlfe2WHTGi/oui7oLmhJ0Nq6NiEF49bIs6xxdovU3T1q\nvltaM+wkJiKz5eWFUxCVIVCPbrJvphtrIT1VodbLxpb73NgWlIIyvXR1S1YP\nUwyYSItGIJK1/N/qQuPD6Rkd5dAXiCby7/zU99F4iYTicwGew5e4cWWRIRmv\n14BCky7NvtTOmz1x1Ytauoeo4HOyQhn3xzFF3JfihMVdmcePcCiG04F28e34\n3HKU9dVbFZmCy3fZYmTLAhFTvcAMRHq4r0Apr8gwnn0aTowlEXRyoGeJsXwq\nH2s9\r\n=Pdro\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.6871336f1.0","@material/base":"9.0.0-canary.6871336f1.0","@material/shape":"9.0.0-canary.6871336f1.0","@material/theme":"9.0.0-canary.6871336f1.0","@material/animation":"9.0.0-canary.6871336f1.0","@material/elevation":"9.0.0-canary.6871336f1.0","@material/feature-targeting":"9.0.0-canary.6871336f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.6871336f1.0_1607443343418_0.9708418904625336","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/menu-surface","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.9f718da94.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"c5426c8bae78899310754905b58f546592b3edee","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.9f718da94.0.tgz","fileCount":40,"integrity":"sha512-bgptACX3cb4QcSjdzyxg6/BWsnZM9f64nnk60h6uWWPragiQMA8JNpGtHTVUe9AeFeckESSCPmrYhdJnPzr6jQ==","signatures":[{"sig":"MEYCIQCS/Sjb4ESo62Zfk8KiklKk3RH3YOIu2Sv2AbVZEIoqVQIhAIngG9Lyw1qJKYkrlCI35KGBckzq/l4LeR16NEP9zHVr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6ZRCRA9TVsSAnZWagAA4j0P/3Z1r0EcwmnJr8olE8/d\n6/RWi669kDipSIogq7GsjZ5cvJ9OPSX6EINgCC4S+685Qh+mU0J9nb5bu0YP\nPHKzbO5nCMHEJWZS8kgWVIbIxRi6uL2v/H0/F5/5lpAYJyc2ISVuE3QCVmOV\nwRX5yDmkCZSM9/KtVytbXubzLYgUGQcDgNcSc/d2sOubHsXSX0Q2L0xIJ/4T\nRS7iyjC3Jt7KO4NOCqu0vCkncGzlx3ct3enqQ/aXWsAS4qQ43c3Ku3sLGCWN\n87KmvZICm6XLYCZxVoNBMHGpSBQN+EOw+TBpXAg9+dUi1PQH+/l6ycA4/TFF\nJ0CP5h38ZamyaUn8KAqjHr9z1IUYTSE7NRGvpRjaXuC1G/ySXBjljsIWv8ve\nINaxSi2v6LffEezfAmqzOu12DTp5yZB5WzD6d/D1xrLpaoV7wAPOqwSXUFnj\nLH4Mpi59pzzC8ytLsgeGpIBOX1slobwIncM5/4yiH0cQfLfFVbES2pt2my3V\n3yoWw3GFBNmOcZ61oeEuwZfEhN+8JdnlKuo8lpwLqk9pMuBuFzvMaL7muRnO\nF0AOl6Y+y2frpiv0tLaNmwqI8s7Ig3QhDBgZZbMhC50rGq0TN7OvvJgY2Cye\nnS79tOJj6QSKa9tc2jXVMIW1SNv2FuwBwRJuYMMRom0bekqpHs82DR3AmyYC\nB/oF\r\n=Ma35\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.9f718da94.0","@material/base":"9.0.0-canary.9f718da94.0","@material/shape":"9.0.0-canary.9f718da94.0","@material/theme":"9.0.0-canary.9f718da94.0","@material/animation":"9.0.0-canary.9f718da94.0","@material/elevation":"9.0.0-canary.9f718da94.0","@material/feature-targeting":"9.0.0-canary.9f718da94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.9f718da94.0_1607444049155_0.5871333933121163","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/menu-surface","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.1fccb1418.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"96deeaabe492d73f676d4564a9a60b79020ae083","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.1fccb1418.0.tgz","fileCount":40,"integrity":"sha512-os48j37GIW5IDfuyc1sqAQQ1ZHoA4HUEvmC8jXoWtWXXXtxakrFbeU+ETujaL74DPxgL2zDTIZdK1lasAdMD6A==","signatures":[{"sig":"MEYCIQC9hnMw3CKJn7YLoapZE6QhE1F46sue6aAGlJCXt6pRIQIhALOUDd9aWS1GAAISokFKLOxyqtYg+ok1o0IKQ9LSL5lx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6nVCRA9TVsSAnZWagAAi2YP/0tWr298hiXKEpK1XHEx\ny02EQ0fFmEIQtoJGO1DPIUh4sAe3ox86h93PbR3DhkKhku90jvWRc6N/jeUB\nAK2D8rX4v+9Fx3D080+79lIubZ3gEJPiwEcYBj7+JoJxO2aAdiD4XNGpxmM5\n4IvnIv86itzeCgeI6mLfsheFMWU9Bn5PjwXq2Bj05JiEaU9M5I0/hHWa0A4V\nFdHyJzn8LHSnKgbwbGwwVTYTbiRqq1ryHkOI86OjRZNXD7wuMBvl1rVz7th/\n/q2+RIxP41GYgC6Got/uCuyTPbND/5zzs6pUc1+JZDqLVNFYHpoOoHNSZicj\nY9J1zptmuXDNL+/FFbSXZNbqnXtrUXtOR1DmK7uPWfkl8WHRf+w016s96sUv\n/ueOI9Eoba1A5UKMYZniqyfE+WbudmQywWj7PLtAWQbCzTh+odHzOsw0wGP/\nfPJyv9gUW6UASolbAyhOQSs1GEdGIRu7QyHfGusBw4BvPrq301Xm4AC1N7fj\nD3dSvSC3rjaFyJXrbqP8maX2VG8G6Y+wllbCwFOf2fX7pb6qLAHuFXXS34NO\nxk1lGp/HQk/lwhxsT/xcS/EVJmpNUTmYnbvGp9Ec/JAYqbjugQX6Oi3ciy1M\nPFNKxYCXqB1Lkb0TC5IPwt9gsxELyHV0x6YwnMLYObzFv8yS0bhI2fa4sblU\njUwT\r\n=UgIv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.1fccb1418.0","@material/base":"9.0.0-canary.1fccb1418.0","@material/shape":"9.0.0-canary.1fccb1418.0","@material/theme":"9.0.0-canary.1fccb1418.0","@material/animation":"9.0.0-canary.1fccb1418.0","@material/elevation":"9.0.0-canary.1fccb1418.0","@material/feature-targeting":"9.0.0-canary.1fccb1418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.1fccb1418.0_1607444948572_0.09169411690655549","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/menu-surface","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.afb68894e.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"39af25248420ed97da7b9e867a000d6e714254d9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.afb68894e.0.tgz","fileCount":40,"integrity":"sha512-EC7iuoCtiPEfrTPNxJjFh3yXDlrQ89FsasyqZkms6rNs5j9Zdra3LTajXG0tlzR4UiNAj0d358Bd3M8cby8NFw==","signatures":[{"sig":"MEUCIQD1fRNya5igGfiZjBywLFSRdrze7SWC3auGNHOsruJAWQIgVrguYH/xVR0lY6/2Fn5aneZCU7lxXQ5C2zTWqrIxo0s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6rGCRA9TVsSAnZWagAAx+8P/RcwxL14bowXTn7eRhkJ\nk4HZl561nL54jF728bmS6mHCKkWw0EKeUKjXm3G7eH48TaEzluSK+JFTPsYd\naA1zIpI3zh5lJYAYPIydQMHOYTPRclPlabghV0tQR6JQLNm1ZSPXMVvgIJ/e\n00K5j3AupF2i+idn1941zu0meOPqG9eD3iC7mD7w4FpFkLmqqem3IVwGW+0N\nQ7KjiJJdnbKP+FvpD/GPPWe5Z1K7oYciCgy7XQ632Y3ZRew554SJGcbJC5qJ\n/b8ymJ0nZqgR1AxQTAUuZnmVSRK9AWdmWKDIk/tCTdSDHITdoyTGoqq8cqM5\nSwbrzbM8nlvE+I8PxFq5ajSxn3hvAjtWW7zcfGnzPXxylvm2nPdQLwPmH00j\n9JLLCsy00teu1lm+53nreKSowA04P+5FfQ3wCrwjWeESOrDVYSYU/hUjuJbs\nxI7sYl/fn2PFPSWSA10h4LH0QnATNHbkIXCW2FEyv6W0t2a+vhVNS/RNPKfU\nughixyQELCJJy7Le8gBBKL2OSswbzjsJhHb8DTtdm5J8SuiJlDfUERwPVaLG\nSFAMvQFsFh0T7+D4ig3NebpmsdzYIH1+ydh2wEbX7VghldNONSnXPIxzqIUH\nQoVqb8CKhAaBrhWjFI3mkhvJbxcHR7UiIHfccVnW8nlN3KSisNH534JgpUEx\nceIM\r\n=ZYUB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.afb68894e.0","@material/base":"9.0.0-canary.afb68894e.0","@material/shape":"9.0.0-canary.afb68894e.0","@material/theme":"9.0.0-canary.afb68894e.0","@material/animation":"9.0.0-canary.afb68894e.0","@material/elevation":"9.0.0-canary.afb68894e.0","@material/feature-targeting":"9.0.0-canary.afb68894e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.afb68894e.0_1607445190148_0.5968928522728343","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/menu-surface","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.fd88d40c2.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"b12344fb9f914f67e746a16bc9cbf5a464e85214","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.fd88d40c2.0.tgz","fileCount":40,"integrity":"sha512-vCjN60boobloVANXEAaIJuOQZp8ax0OTutos9xuijjbtcTscrMt1V4ASSNmPKXgYvmRKw9mxZRl8wB6Wv068vQ==","signatures":[{"sig":"MEUCIEM6/3ALkM43+gIKz3kb71Wq6DZWc5LlShuuWssPLc51AiEAyuAkNE1PC41lQf3F3jp/Kz1oVxwcm5dcB3ua9SvKe5A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz637CRA9TVsSAnZWagAAerkQAIvi698IYgHT345ICNFg\nh1T/gYbANJhUSWuymYYMRrbaq2ytiNvvy9HA7B5MMS+t7gQ79dpOjEbJt1vR\nzo9gBk1ItvCpk2JOgJ8QzyKp958OUvB3ATpSb2gXttySt4mKl5LBrvp0Ay+O\ntOTDCNAW316QRmj5xm9xwwsFDC1XgQKkUrSPnzb5D9+b0r5Shyl2kyWuGYGz\n3UgmFAATXhsbngNvULXxaNYROh9umgoUSswmPfpREPoQFgkmygmvnzDLBix7\ncQqY7hmxzAJh1WUwmSKDaxga+GC20TE4YV8Rwawa/ZshvxFJVDaG1ku+DNOR\n2CnXwgyq2WU9dTC92tjLRvTLUwpa2chbcc5fEj8nvZOePZhyrItf+Fyuz+SP\n4vZyD1bnMGOPsII0qLBx3z5/MjJlbkaVIP5FYFxZRsHvODnu1KDgxgEguiGM\nAGrwxpd3lQtsQSy0/ygQR2FdjTIZDm8uaR0bxMJgJEfwM+n/H+7e3oZlm9xT\nMVrY+35/HFRCF+HJLyhyr1WSdD/U1KeXSs8YZXWklgvYjCQXsJypNhsG/7gz\njgp6WSbYQS/NPWobbzp1va+v33GD5H7LZM8aFzUrdMzrydVmR29ni/WqKl6B\n0nZ5HyRVGn70JSBdGudB3psPCtyShfGNiX3auI/KBkxQTns/ZP2CpJK9wS6M\n6/ng\r\n=VxNg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.fd88d40c2.0","@material/base":"9.0.0-canary.fd88d40c2.0","@material/shape":"9.0.0-canary.fd88d40c2.0","@material/theme":"9.0.0-canary.fd88d40c2.0","@material/animation":"9.0.0-canary.fd88d40c2.0","@material/elevation":"9.0.0-canary.fd88d40c2.0","@material/feature-targeting":"9.0.0-canary.fd88d40c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.fd88d40c2.0_1607446010686_0.6649306677975599","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/menu-surface","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.ba9e3109c.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"823471c93cdab4168aa597a7f3957abfd965d876","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.ba9e3109c.0.tgz","fileCount":40,"integrity":"sha512-Aj7QUPRQUkuizqdRtCImtZtZY38hFLS6lM+wMoYu0cxhcDrlNBIEQH52Sxpc6pfgK39mHkxaiOEWBIF4rgT+Bg==","signatures":[{"sig":"MEQCIAY36+2xHZtaGpWRFwohggc/2gAFIyvDy34mmcPFF7/kAiBtUo3DKwi2NBJCaMz67s864TwiQDfuis7XphgoeXOp+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz86mCRA9TVsSAnZWagAAm8kP/RYUPS6UpaCJhXuW47DN\nHo4QikioBcnyXOfqm5Vo5kOkgabvwKsaBs2wq4pCUkY+8U+8niXoBNa/Bii8\nJPnhkuSC6031mP1SM1oNYkpYmu5cuugtln1LUhBGH5ysV8xHqPimKUqyb31z\ncmN3VtumDyvmLMinaecZ2SuZq/kPR6YaIP5dkROLG4QtVBX9uIbF5BonT2/t\n9srqa/NDa0WXCcW8De2LY+5mGMFw9y1RejwUe8R3uQde9n+uzdLYE0Xwmeeh\nT2E/dCtW1vGvNEg0DwtBXDEM1H3ulXXkQ2TE+RjFke9hZSMYX2uj76HHo/1Y\nrhyus/NP87qO66j1vqZFiHdUt9BLgh3hrttaUhz33E2bsCEGC5CJt71ltAiI\nh+pAhDwlMZgiFD/6y7VKnVBxv1S/il9ZLzBvkDm+1WbwP4w3iHEjJPhU97kp\nxsQAutcJYmq1+RXGGE4yLxfrOnQt48dBzM4Dq3NhuWsUG08bhf+ONUt8JyAe\niT/TRHSfSD0lXpVfPbULC1tqgJXeTaUT/CWarlDEp7wnKuk3CiwUhEpekWXq\n5t7iVrYPoZd8i7eNteQrXqyoubp4Qt4R3jAu2dxAxsRcJpuUnLQX0vIKUxgK\nX0VA+db+Outs1mdSu4i51utik+bbQy05JvPj/TyjwR3M+ch6KPjv4ihVgcIa\nY/ec\r\n=QvOy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.ba9e3109c.0","@material/base":"9.0.0-canary.ba9e3109c.0","@material/shape":"9.0.0-canary.ba9e3109c.0","@material/theme":"9.0.0-canary.ba9e3109c.0","@material/animation":"9.0.0-canary.ba9e3109c.0","@material/elevation":"9.0.0-canary.ba9e3109c.0","@material/feature-targeting":"9.0.0-canary.ba9e3109c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.ba9e3109c.0_1607454373658_0.8615388381206694","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/menu-surface","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.1085c3b2d.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"0d35063b49e6789968ee3d8d74c64134c2319368","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.1085c3b2d.0.tgz","fileCount":40,"integrity":"sha512-8fOhdp/6dDhrYNSeHJNUIll3UtPvq3Rw8xVjNDcU8UdCjAlMHKr6X4VmO3v5+cD9mkyBctUoGjRRsvUUdozUwQ==","signatures":[{"sig":"MEYCIQCFc5ju2zbBWbga1qsUXCGuq/o99sDIYm34e+y8JYZwGwIhAIS0YrroIpMIK5OJoEycBb1JpF0dbHuO3JMx+PagBPVU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SF8CRA9TVsSAnZWagAAnksP/0bXOMdkoQeDDGUpv3lP\nOZL2w1FVC167skVz7AYOuDx4x32a6O926x+su93Wuc43hsUIwaJw4pJHLnZi\nZpeGgyNjsHduBZ4J1dcCXWTHm/j9kU+kaHI2JgLEOfpRx8LkYXehqDUpu2Ec\nCxt1EbsTXv2I+q5S9MBoxd8bDCahkVUp/wnocMxi8+vBMRbL9E3Xkicfw8iS\nb6PRec9YIghZC1tFlNchYdqw+aRhXRuhTMFyvQN7xEB4I0LhAEWbmRqD5tEx\nPUzQ6ARSePIDqlyDPJXfLsP4dSKGmreyqBmYllVBCnjDJIpKAT7B68ZUNiJG\nIE4xGi2ienMEipV2Vo6WED+XOKsg/fvB0PTB+pkb1zKL8iCqIQSlDceTIpoJ\nHz8wVEZsYFjiDfXvWAH6msM1dldwM6NYFmSZFv5ycu5amxXRPCenLPKbufYd\nNDaoeREfSvOjtEbFEASm+kCi/XmrO1y4tM8/2FPpBPjc+VjSEdearwvK7KNJ\n8+JcO1FSNQECL2+rjDrXo7DR+eQM/NDg2eSuq0gjtZ75NBoWHJxJA28mDexw\ntnxMnKA4z1AezuBNLb8ELhznThbTZ4ZQ+JBN1/M2OipdgdeY5of7gGSC8Mkg\nZSb5X6n3t3Yb3cg2ue0IgPXhXmXTVhKo5UDJ92ytbI278geawVtf25FNcoS4\nb2jL\r\n=32B6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.1085c3b2d.0","@material/base":"9.0.0-canary.1085c3b2d.0","@material/shape":"9.0.0-canary.1085c3b2d.0","@material/theme":"9.0.0-canary.1085c3b2d.0","@material/animation":"9.0.0-canary.1085c3b2d.0","@material/elevation":"9.0.0-canary.1085c3b2d.0","@material/feature-targeting":"9.0.0-canary.1085c3b2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.1085c3b2d.0_1607541116264_0.5476906880144747","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/menu-surface","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.c5dda809d.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"a00b120714e206b883c416023b43770cf36eeec5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.c5dda809d.0.tgz","fileCount":40,"integrity":"sha512-eqj3VcawC9lZbhEOFmlfvlGxt2WYjP+DSoxq/8YFCjPRX+6O7KDLwH0mBvvj4WScNpk+sMeoK/RYE40OjeNHPw==","signatures":[{"sig":"MEQCIC+m8CrJ8f3Tc+zOmTh8csV4y8T36NMBhgdNj0aKJUC+AiBrluhs2Kda/Vfh9meumjgG/dWyvLM5Kg47BfBiASmDVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TinCRA9TVsSAnZWagAAvT8P/2CbEBhL216EMN+bxOGD\nN9KZP2HxPPrLRfGXFSTQvrLzahFM3ybHyZ/Isqz3NX/AIeQkh7GtQXI/JjuO\nTLhhkd2ADkS7l+AXFXVcsqtSzJFTIq9nafk9zn2KQ1D2BQk80mpCpjWBxHMI\np/saaI7Bd+XVpAQKHZfUUj0dTwVePwYBzILoeZ1dmWVD7XCv608kts0ymmsf\n62JsIoivJQRfq+FImWoIElwJtxfQhlbiWfBd6p/8Cq2boRfkb9cKVpfNTlEh\nnbt1eQ5XEm+eiCxROK4jyHgt+UtHbxaunEyYm5yALqMQtVszVNH0/kPJGQ/E\nUyQ7tPckzxtnA4Lwb3SW3vd7P0hNzTusGsiQi41CvQOzDU9SGj0y0N8YvK5q\n8kKjc+wPQU3wlxa1IWrPpB9t/+Ry/byB4fsNg0yKfuWAJnUVwr5mAfzrRvZg\nLTLeHmGd+0hda5HPUX6Ru3eDXEIQB2Pn75gRA4QJw1zzWFR3jW7+fkOypoZJ\nK0OxRMHn8QohuLIEffZWaUMuRWxVDZIDr5nIPktI8Wd6H7NF1kVMev2k82se\nL+yoORInmDrArKkPcXLXSfrxdLAB9bNODimgCsaawwmXYHiDdPpW2oVQ2gjA\noijZQJvsaSWaA3aMocgmnu/IyFW7rPiwDTom2lVLAjEQVxrE5IuGWU7d2hWJ\nKEVw\r\n=vshj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.c5dda809d.0","@material/base":"9.0.0-canary.c5dda809d.0","@material/shape":"9.0.0-canary.c5dda809d.0","@material/theme":"9.0.0-canary.c5dda809d.0","@material/animation":"9.0.0-canary.c5dda809d.0","@material/elevation":"9.0.0-canary.c5dda809d.0","@material/feature-targeting":"9.0.0-canary.c5dda809d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.c5dda809d.0_1607547046528_0.6624692291401086","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/menu-surface","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.f5f1bd86a.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"aaae4cc5f268bc75d15b7cd8b8c168a73ea518cd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":40,"integrity":"sha512-q6KVZp2LQ98qXOlFkEjGALiTJ1yIoAoNIKjyvOS0y9fZXaSWNLHCwWAIs0h/VYsimsAdQM2vMcf5HWmQbp8bkg==","signatures":[{"sig":"MEQCIEopgKklbdaC96+MRekrOBMOfuE1HRWZK382gXEtLZwWAiA7UvSVq7vT2JbVz8davzuVn+zzp9M3mLLenZwLu0d8aQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TytCRA9TVsSAnZWagAA2h8P/3KhhwoOkYJazfRd5Nw0\nIKmiOtFhmFLEYx6mbj6P7kiFd5XfOZRU0JhLi2i8VKBWxkT+TkH810zelE8a\nih38Mi2rMKkp7y4iwiJzhN7TYCmB4aE+WkQY8agHBWbveDVoLL/SYBkw9Vlx\nseGTGJzaDPlyDZRFwn65m5adXWz96wH/GVibbjlly/PW3aRtd5zzFH2lcVLV\nq6FtxWJ3f5LDOw7jEL6MuHNbcD/rJ2D/7JOZ/J7AcbVEw/vrdYoxIXQJtYGq\n9ZssgglcNsQQYjLe0P/WuvrS4+8JEHk6pziTlT3iNMa4sOQ9PfJ6GYF4rFUJ\nBt/MTaouyZr9NjI/CcCGwvoCronRjAs/8Z9KC3bMsvLgFVQgKWGNgTfdzZTn\nTh9lrVMTN3h4eDbp8RxG7kDpbvNPaHvSGPSDm5CI4bXqgMqizP64U73LB6Ep\nv/0KkawOp1kHl3F6Yl0O1wyNoRCVFsJXkebYCK85zHIBZ2krQX/L8mrxSt9m\noPptaqjflRvuyq/UreC6LEWfRjZN7rrkiWuECY8qcxOaABJF0qoIA0WzJjud\neSI0eWKZND63zmREmiUGNKouIqsYd1jq5fJ/eswbIvjPCiLI6RqE6lVvxejX\nBchiHt0Y/gLV3cBc+yfkzrppu4VPokpC2K6FKObKs7mmuvsHnza/qiJ9e9Di\nCGAx\r\n=7iLE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.f5f1bd86a.0","@material/base":"9.0.0-canary.f5f1bd86a.0","@material/shape":"9.0.0-canary.f5f1bd86a.0","@material/theme":"9.0.0-canary.f5f1bd86a.0","@material/animation":"9.0.0-canary.f5f1bd86a.0","@material/elevation":"9.0.0-canary.f5f1bd86a.0","@material/feature-targeting":"9.0.0-canary.f5f1bd86a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.f5f1bd86a.0_1607548077447_0.16792063758684495","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/menu-surface","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.00f38200f.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"fe00faaa4aafbf90f59e3342d90766bcff93f135","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.00f38200f.0.tgz","fileCount":40,"integrity":"sha512-9ynsCQSlBzOaYu42TJsH+zKsOBGV7sGgR8eW05jaOU7WTfDVhQ5ZEku83MUz9TZu35lfNzDCoEX1y/LnI/EAmw==","signatures":[{"sig":"MEYCIQDcp70xjBgMeuVQX+dzEMmFsx/mNm90v4/+DFwC75m8QgIhAI5xUcYCc2j+Os5CCx+ysOx90VBr4rWz30DnFBmrpr/A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05RyCRA9TVsSAnZWagAAapgP/04J+23tTkeJsLEH5bAh\n7NGfbUXrgOwUvg55Nuse9C4WUrivT6b9FbBkWw4MAxOmYcQel/S8QgQHQVGl\ni5jNLy/rwmz3xqXjACOL6e2KAIMvfAL3chVxWUnSWe+hlendfzN7+A1lJkz9\n967YcekdXOjyV6zGUKwB8yiKNW0GBRA/sTAuoL+yVTkwGSAQSVdU1nEB4sXQ\n+I+8tfsbZRjZ1Z/6XohK0PCpBgOBDWpSW2qpk70Svsz1oOmzozcbz6xrv3Mh\nJdG0V0J0xQJYW6wDbSMBlKNK+EuN4lhLYAmhHg2n00ljbR5nAXsAvFgoEZcm\nP/A2nM0f0HMsl8Lx0sYrg5yBqY/cXl4z54HdPtnO0oEWEqp+Bl2XYGL1GS8w\nqiXZI2ZcHmxS+wYIm3KE0O22QGJW8J9DOBGy0YPj493HSxNUCOrpXX1tfNRd\nFq3yB+iGHn31F/NQvPdZax1H/Pf6vk2A21cvwma7w1nLbgF+JysW06At0Uba\ngPpMGJdcn+txh2g2UWJO2pkDVQU1J0DGQofx0UPs//G1xtJDi8ePht0Z1yNp\n2GNmYM0fNd8Fh9A+W8WzqzMnd5nIeKLypTqexBRaTqpFo6Yfgodz/qcvlVBt\n9lHieoEfRhyHDQB5HkOLrPMp0kHKt9muxScomzAt+bbhxkRYk7274BtWXz8E\nYQ9q\r\n=Qe/1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.00f38200f.0","@material/base":"9.0.0-canary.00f38200f.0","@material/shape":"9.0.0-canary.00f38200f.0","@material/theme":"9.0.0-canary.00f38200f.0","@material/animation":"9.0.0-canary.00f38200f.0","@material/elevation":"9.0.0-canary.00f38200f.0","@material/feature-targeting":"9.0.0-canary.00f38200f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.00f38200f.0_1607701617733_0.38025381514253676","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/menu-surface","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.ac41a5729.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"c4c56ad69a57c01157bcd56d0139479588fa684a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.ac41a5729.0.tgz","fileCount":40,"integrity":"sha512-ER+AxsMtMrtvbx8vyfzZDwvxb+6KMkg+U4urXmc+bg55pGuFrQi0YagRkNEpdxL1sdTw73Eo3HaLomQM0PvdWw==","signatures":[{"sig":"MEUCIQCENWZcJkoH1J6cz1y7LIZRXVb9tKBkD21fSWHdbwnTkQIgeAuVK75OjBlWgspf0rSjEVfZYq+BtDY+VeFOnHrP7ao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf055jCRA9TVsSAnZWagAAR60P/3tLu/4xJMlpMBnjqXhs\n9xGFlX7epwbk7chvhJdzMLM88cCMVWJ1cy3qeuUydTo2OSmK7O0Thbbzh26j\naHkgAH1G6gvJ3YIOXcSZxutna8GDvQ+VlWggbuEZNm9Heg73D1wWScMkPU4d\no0F5yjuJTalealPdOqOP6XDIWYxDurTp9qEj1oXmuo6rJS6ezyWpp5d+Sg13\nUasS2PKwcPkVqD+11Hig2rvcfQz7BLWz46PejT5Pz4d02WVsK3Xqs3f4stuJ\nmepWwMxDoR2QPlWGwd2ncW94fIT/M6ua99kQnQwCHZMZuMtBPqTBnqKZeFpf\nwFO1V+FTfgbTKOgBedvJJNyVgjL92v9bhLtMHBqrie5XYu83s22Zh1lefoSo\nhhPHiR+Rc+HnvIvoQcEYHhEUrZeU8eRoOkgrOTmyUptnVamWs31WAeJmRt66\nCvMn4TsLY6I/bRN0UobeZm6/6shGiw+B9qsFchhs4IfnQqrEzrXSlfH43FjU\nyvFPADS42kkNw/33yJavlkPqWSmje0dgQTkqZE98Mf8LrZ/TpA4svKzImYyH\nFUj7sUWtneFWea0C43aqFft+tC/8oJ1cexsdwaQPPjvUzV1g9E9KaLLl/deZ\ntaL+yw0yMi2T1xGnzligi5BnBbxM7W6C6vLkAbNxloC44KDXOFbVj/5PwZGm\nyvFQ\r\n=oKbk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.ac41a5729.0","@material/base":"9.0.0-canary.ac41a5729.0","@material/shape":"9.0.0-canary.ac41a5729.0","@material/theme":"9.0.0-canary.ac41a5729.0","@material/animation":"9.0.0-canary.ac41a5729.0","@material/elevation":"9.0.0-canary.ac41a5729.0","@material/feature-targeting":"9.0.0-canary.ac41a5729.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.ac41a5729.0_1607704162995_0.43817500145166455","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/menu-surface","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.7fe0e4f05.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"8891cb7cce9bd7cc35d7dffe5c33a0f759eb504c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":40,"integrity":"sha512-kHP/mSp14j5Yr9w0hQKQK5n4H8pOqaQ+z5btqmI7rGOaWBYLWJavGDzSJoXE2uedp3wvTv06H+3S7rGYB0xKsg==","signatures":[{"sig":"MEUCIQC+welj+wLAFTpACsBLK7dHX4+iXuwQbOwD7AVisEmY/QIgF8tRMZsbuWJGyyXaffBdGwzSv/pRFCOfe5xiv/tt010=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06cTCRA9TVsSAnZWagAAowEQAKAND5EcP7OdBNwo9Dwy\nk8vA4iPu6/Carx2U2hYMIlYGKITva8Txcq73uxDHtSVfnafWSQfN6mxPLRrF\ntUUqfE8fGC8B93zyrmFNQ/l6DbHOV7Ofz1e6EYct3+Xig2YAa6GgA+ylC2iH\nVJxVh6AuiCS/DE79wnskhAPIydhMdHVNo9RHTLIfRAl5r+wb2zhEvOOnIyU4\n4mZwQRXspfgakQXhONh52SefQWx/iMUIHTZ7r8qTyDEcYQIH3pp45pEtHEJj\nI+INK+FeYsORbnp6gropUiDbw9IBFUw8TZno2if1JwlTyqgSErMKLe3Uf1OY\nrtjTXRfpAK29BYrTsxQXJ0mn6QXRqABHm/oS54NPI+J4KDr8U+mvzdFYi+2C\n0oWfa8AwI4lNL/MbJq2TVVXWx3duQ18J3IMlh207FJObJhGCNZiVBPYxFyRR\ne9C7LnAgktHyyV00K5JyMe5tWzr7QSe9oPAsC8WY2RRXBG1JucOGI5mmhcwm\nSpARjQO2yh0LbOdhuMX6Yrwnu+LihBGaGhFxXL4AuVY4jCOASsCQsgRmfd9D\n4Gw+W+mHdj9HGkPsDj++IP/zwNq7Mc37OqAlGjew4ustKu+GZD2/yEi6WfuC\nUA1JqqGkDkXL+6lFYZegEfoM/yjeEkaPMB5sF5lRfcdNK/EeZKWOmCA+iA+F\nIOXD\r\n=iKn1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.7fe0e4f05.0","@material/base":"9.0.0-canary.7fe0e4f05.0","@material/shape":"9.0.0-canary.7fe0e4f05.0","@material/theme":"9.0.0-canary.7fe0e4f05.0","@material/animation":"9.0.0-canary.7fe0e4f05.0","@material/elevation":"9.0.0-canary.7fe0e4f05.0","@material/feature-targeting":"9.0.0-canary.7fe0e4f05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.7fe0e4f05.0_1607706387493_0.912125757500327","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/menu-surface","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.9244508bd.0","maintainers":[{"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":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"b1431596611195b7049fc9bfb15b2b8e9f7f2690","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.9244508bd.0.tgz","fileCount":40,"integrity":"sha512-6MQanDQyk82vsmMSXPvOWou5JrMOpV1ZTa0qdaetdO0kDEd09OfZ2agC8jt+U3hLFfgOmjFKicdOmsMjcSmCyg==","signatures":[{"sig":"MEUCIBzdacCSbUbYoCMGRtF8jMLyGPPxb0cNBiYi/irky8gFAiEAvKJrcZDARxa9rNap/CtYBrmJwBXdC3KX4pYpyULjIVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08OgCRA9TVsSAnZWagAA9TgP/AnGcvD6RQ4f7933wygf\nHaFch/AeVOFmh8GGJ0nqOocpXvSYfHvA6WPA8kJywm6T8kKXWVCkl59WstEF\nNwkIxDK89UyVMz9BlxFbZlz3gSvJyVXLuJgc3nqLCC5CYHhk8QyUJ2TtAxIV\n6jk+Z6J1UghpMwqMEVhY5NGCMH72hfvLmKLChI0dHQnpuiDI1HSJAhiso7VQ\n11UcMJ0/9ij4Aj35yFVjbCNEVvBoyk5abb5YEVH5fbnHc3XVYPUw9pmbpD8/\nLGvGh4SpO6dYptZkCFwpkzpqjoyCv7rIFylWA7QmlzzErUwdW+zZJQ4XfCiy\nFoGkrb3pexxzRUmaVWFaKP8GJi3iFXKyReQEbMkWDs0Y7twkXQN0ak5GlngZ\nAOh+1KuasGg+6PRzJyDQI1Xm4h8jsislgyCX5ywZUJJrtRAniteXCfSTo2Xh\nHiTe6c9Hfi8FoI8MGT3n+aoDOsgnHb83zu2OmUek4f7sh6oNO/9VjGRx2eHn\nGVUSpE7QUKneCO3nscoMsxb62YX4T3Et35Bk98sne+VzKxohqJI2qQBgTuzx\ngaPVFuZEYngvMlZOTirpNS/vnGGc+bFY4A1VDYmGk04RJW6dw7MMh9XGWRgw\ngIWjKz2V50x+APA//kn5VU3O1CaPEBVtmgmBABQqEc27jm7tDEbGpbrP3SaF\ne6ri\r\n=O2NN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.9244508bd.0","@material/base":"9.0.0-canary.9244508bd.0","@material/shape":"9.0.0-canary.9244508bd.0","@material/theme":"9.0.0-canary.9244508bd.0","@material/animation":"9.0.0-canary.9244508bd.0","@material/elevation":"9.0.0-canary.9244508bd.0","@material/feature-targeting":"9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.9244508bd.0_1607713695925_0.6112232905888664","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/menu-surface","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.384a8eeb1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53221ff6eeeb63228a53bb5daad5bbca2abad026","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.384a8eeb1.0.tgz","fileCount":40,"integrity":"sha512-eQhWH2w/J9h/q3o/AsSzRDg3D1sNatiqjARhPM14h6ftEomO6QGLuTW66k4H7kcoRG1g3p+0ILiEftif3LY/Yg==","signatures":[{"sig":"MEYCIQCd60+qn4CsUCu20YmJRev73bNcFWBDsHV6tNZ9QCleBwIhALjTFAfajSjSoScoZinkpkQcSY9vIPJYItK4wLEl5PI3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j2vCRA9TVsSAnZWagAAqXMP/jXMYs/TMITLkihoe5DS\n2hm9AqcZ/b6FN+17L4fc0Cs8qypponfpo7hVxkHxZudvJ4mW9xW2TdrJaOdf\nIXPxz2epiuPjizpVDEEhwtepxXd71j665uq9i6IrmJghGzmWStU8hMq3oycP\n0TdIEnuzvmwt4JV8tFgJvR9CV8Nddz+NEYa8NKaQ2sePik5NeUYZ3NW14BDQ\nDh+zoDW5/xSP1ntI7xfDFjwlTdTalH/b9MIP7lnYAaNtAcTStL3ErDY+n0FT\nx00T+0o6FUsjOMqSoiEY+0hS5HCFHi9OLWrhdWot6ALoYyWCGtoMZj4FmS3c\nbw/RTRUraH68TRoMaAH3mWTLw4edfq9N3rQ5OGghdo9S1wWpNedQCa9hkD8m\nL98bF8RP/W+JCuGZ4WAkjRAJ9+DQqbL7M96i6BdL/m63fSpdIV4XS6YrcMJ5\n1o5YlyRAw5+07wqs/vlEM1nJ7WEZSu+mE+9lNuIylB8EnmSpOZarHrVH6+TK\nJXmITpz6OD5Ucw+0SeDGKDhJANWrsRbXvpJmL/Pa0VVuF6xhAY92QIq5G+KM\ncce+im5Wo1JEYKq5J4Ge2Lo/XTKr3NYoKQlWP8oCv237UCHo+Az5o6qqE/Ld\nYkZqscGnnU3fhVX3ucNf7hKW4bhj4lqhenlu89VqND/a1C2drsQySLpibwxU\nNcJE\r\n=gbkL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.384a8eeb1.0","@material/base":"9.0.0-canary.384a8eeb1.0","@material/shape":"9.0.0-canary.384a8eeb1.0","@material/theme":"9.0.0-canary.384a8eeb1.0","@material/animation":"9.0.0-canary.384a8eeb1.0","@material/elevation":"9.0.0-canary.384a8eeb1.0","@material/feature-targeting":"9.0.0-canary.384a8eeb1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.384a8eeb1.0_1608138158731_0.7928337349834449","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/menu-surface","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.eabf9d5c2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c468ab57e52fe7788bb2fe829d3ef1c7c27e2c6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":40,"integrity":"sha512-31pVr16nIotQlNQvbC9FFgleWK0EUg7zR9mjzJ8a15Gf8TUO2ENYRbTBtnB0d9uFz3tmoRKE3i6u5PjqvAHLuQ==","signatures":[{"sig":"MEUCIHZJCbLqpp+dJsK3Gtfz6VxWlA2KXEWKKYAUzmAoYNenAiEAuucc61EZGivsUpnzPG0z2GYGe62jiU6WLMAayvOxQBw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lHRCRA9TVsSAnZWagAA184P/i+3AEvyoUck5KoaXIhg\ndTn1ifZili2BGdTs3Vb56qlDJ7xnK2BfhyJdXlevUqDomwaqO4QBKyoPpm/F\nAyKTAxR4Nn2l1vrq7pCbUaJAmdqxOrFatII8qduYWUnqcf2VFFAKE1aWSuGi\njfsE2LWbdVV6nqQqiJONzpShZ3uT9frM7qoX5aQ7ADAFsnHG1C3WAox42yT7\nEfQ0f6ItJgZsysVl+Zd9CiMiA7MOHrBH1a4nAHJ8+7siapxwSEowY1zC1EkB\nEqeoS7mqls1uxrZAj5YD0ik6xOAAEUfw3VTuRMWFmFV2j6fYw0sUQEKArLLn\nXd4sTxXOfeJdgJHrdGrEQpYrU9E5ap2kTGn8ObhzmQsDzJtl542U4Fp07R0V\nfZ3rWZZ3qyiw0Ig2qM+Gsg+TYisNlxqCI320OmVtldC+S4jvff6FTCYCuQ2H\nxGt+/NHqf2NrFBRM7XBo7NkYkvnoNpTKRblJd4uDHui/m+kLEzf3yHmFUtd2\nGYxKUVgeupbHw7j3Cs9s76Rld0rqAZI6Sz2X4ycQfdWcnHMJjqRIxdwcxMlN\npBZd84hoa+LQE/oLDDhYhzMd6v60mm8SHuGTeqCs9Wl7owZQYw+eb6pJjwD6\nLXjKNJRa7wet9W3z+eFguxQ/P2OY6LspGVI/Ixm8kOZMTFMpKfz3aiFgJqmD\n2F+P\r\n=mlSI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.eabf9d5c2.0","@material/base":"9.0.0-canary.eabf9d5c2.0","@material/shape":"9.0.0-canary.eabf9d5c2.0","@material/theme":"9.0.0-canary.eabf9d5c2.0","@material/animation":"9.0.0-canary.eabf9d5c2.0","@material/elevation":"9.0.0-canary.eabf9d5c2.0","@material/feature-targeting":"9.0.0-canary.eabf9d5c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.eabf9d5c2.0_1608143313315_0.589136388013241","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/menu-surface","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.30fdfd06e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5554e69d5b15e94f662a96ad030de6280afbfccf","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.30fdfd06e.0.tgz","fileCount":40,"integrity":"sha512-6BqQZXC4DnXdERM0oCf/kxp2le2YM5DVWl7zZD8n4KnPLuYKzl1CZXmakT8GqCizaXHTrtMoZoysIhUCQRpeHw==","signatures":[{"sig":"MEUCIQDKmQ8Wnt6sWvunHuOJJyiFi6dSIzPRzXFF4oI8mKEx4gIgZuWpFD4bqdAKOeSVffiFSfs8KzsWnEkgoyAVq9VSvrU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lshCRA9TVsSAnZWagAAnFoQAJ0jneQHWdyNhim6E+yU\nXx+JpgEOY2Gw9ErU5P96isQBqNiB8q8FUaWEQUuRaRtxCEmWVx0PQs8w4PH5\nccOioypXl87qj6Gvy4hlB8o4KGJ4Smk/0P4zinxRhLjvraOF3/LviLNUG2CK\nnpn7eh4XY9zkUeXot2CgjYwy+F995eZY16nWvVSkl/1DKvvt6guFzMB/62HN\nM0wYBna57nVrfIMqv6F8ooN1hdS3y8wx2TyV8V3cOz0O4pn+s4JoURaUdc7g\npgtNKDSClOEvE0vtkwP3XFV5nJ4NAdlDEcQddd8+JQHEp6avFGmBdxHRk3qU\nDOBTX+HiVIdBn0baOCeCtPyK7m6ut0wCH0N6Bx1SxkDZ8xCV72kcC7efk7/I\nvsYMXsGp6mwMbGi2Ct990yojXZ7KU1MuIW4SycM/Md/K98Aj9VboIxhU1uhq\nTvADfxez30wlGDmYk18zDX2haHIDjAgEWtJqwFG1ooF1hOtJTs7Ba+sIB/Rr\nVw7SrHpis6yFHJECqT3gkGYzlA9Red6rb0pofdqp2UIneNvBq2OUzbOsRxkR\nzgHhk/WN4gZmniHCbvU9q59Wbv7+HnURUPDNX86JZWWJ7HenKrBsFcAO5RZi\na9uWs+b+TphHDEuK1hWz5/jyM7MoTgYzJ9Cei7ARGWZqDddHZXY5Ll8Y4T1r\n/kZ+\r\n=xlmP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.30fdfd06e.0","@material/base":"9.0.0-canary.30fdfd06e.0","@material/shape":"9.0.0-canary.30fdfd06e.0","@material/theme":"9.0.0-canary.30fdfd06e.0","@material/animation":"9.0.0-canary.30fdfd06e.0","@material/elevation":"9.0.0-canary.30fdfd06e.0","@material/feature-targeting":"9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.30fdfd06e.0_1608145697306_0.28113743124033475","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/menu-surface","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.9590a8f90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3edb538df39f4a746b7bb7d65c67db64f403f598","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.9590a8f90.0.tgz","fileCount":40,"integrity":"sha512-P3luVr0CJTjpYWV1bg26algNra3Pki1o3pVZ2F+yE/cs75y8XPqdTfE+rRHtrXgc9lIpkfLuJIgwJX/3qYm0UA==","signatures":[{"sig":"MEYCIQDtXXVS7nbpfmPX+F9jfHmMUUw9eyS/W9BYahjrCpsxhAIhAJoqNsVx/j/pM24OS1jy3+g9vqWEZ6nvNo37lHGI+D2v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4jAfCRA9TVsSAnZWagAATG8P/iySzYbA6nsOw4vB/5LL\nqZItl6Df1D9gt84+lzISzgQfb2NiU/HwdJbOK3FYpj7/qOcATr5xkULOLWOC\n3fz/onVqMq1vvTCNKnXAAYOHehY8RWTeEfZiGaNma5lyhUot7hVWs2iZ2FR0\nNYK48eY/Hlxz9o4g3nUV165J8eydw49rMbatASDnuf1zTR7bardJ3qnP28Tm\n3hLPAISE6gmpih+NUJWbrDqCrTH10ksy5JR0EbjcLztlIcaZmtnqXT5Jn76m\nqtXp1TStLMD9WND7RXdVSFQdT5pIiJ6PPqrLFnX5Btn7yRRn2IiHRjL5ohFi\n+J4GBLVL50ZxhOJPwfQEMicTffK+nUR5cp+koVv0oyEhgf3sNsT5r0qBpR9i\ngerDdE4BdW6lpzrHa7AcDPyxnKXFqZIJQYzJWZVI4MGbEO4MGPv7EGixv1sF\nlYiRj33JwF+QpAVnoLffibDLTXuL4W+E4v3/dxOsJuUl4KVHJz6nZEwssqPO\nNjyxGkl3AsaByyTF3AweirLMJyFFneKe3b3/NVJJRt5gMzrCwlTFtW05W8Ox\n5BITvLX7GBj3gKgI63oPJhVTQWCosuLbgepgo3aSscpYfE1hx+ng3TiKyw1O\nIEVMTJwh7FF+jdJ9ZNYmmO7mIS4L7GJ6c+zFUyzHbVMOYHB4ObqFsla+WxcH\nHNS3\r\n=4IR0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.9590a8f90.0","@material/base":"9.0.0-canary.9590a8f90.0","@material/shape":"9.0.0-canary.9590a8f90.0","@material/theme":"9.0.0-canary.9590a8f90.0","@material/animation":"9.0.0-canary.9590a8f90.0","@material/elevation":"9.0.0-canary.9590a8f90.0","@material/feature-targeting":"9.0.0-canary.9590a8f90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.9590a8f90.0_1608658975330_0.8901286203746099","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/menu-surface","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.f89d8b8f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df742684b440e96d89e7f72a90910ebc074f2cfd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":40,"integrity":"sha512-XlpGZoF7FkyQ++uT2/2qkHxH0a6/x01eGdxo3t9SIzrm8QP3+gx3LjAi1Fc22vTIiUwyEnpM/QyAmKy3ci0W2Q==","signatures":[{"sig":"MEYCIQDpP3eJtBrnTPL0DQX+hsY+DbQFRKNCYohke6chJCoJOAIhAII0BHjTL8YWxQlUhIP32JzApVPvbMYKhjig8CAEICUH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nvRCRA9TVsSAnZWagAAJhIP/3xxociKyzP6SG80g2wm\nQKC0VsKecigbvqeD8+Wj1gGfrttsZiieI5abvQrjt1RBGC3Pbf0TEmGF1GiM\n9/pchh3eR5SfcfnA8+stk89inVoXsJZb1PuGlLaATSIgqS8hBVxyPB4r5YvE\nYATDKAMaQhdKXgVEmhI101N61VMN6g8aXkR9tZMcdZ1XIciTqvwcMoWYU1TK\nxXwt3WwYC74aYwjCIC5Lt7FaywLCC9qLGiw4BYVNQNVtj0mTUrT5vx05nqoU\nlFW744AXNgKnFFw9Oh87peJb6odT2bQ7VW8QauGhkVPCbsp3bx5TiiwfhpMC\n6yUcDytJBrs4IJBIwKSpKpQlksq8chUbziw/gdg+Opmkb/eHzp6nyPmTDJN8\nNhR5Pih+GvO6rQc5Zd24Cff7TmhvBMNSOCn4Fc8nLrbpIkB9mT198kJl3Dbn\ndgpklSz8ZJv7SMBQbuKgfHddKnZBXaXqbWouCp6BgCM6p+2RugpNlwFl+qfM\nXE/cBcNQAuGXInr+1HQIubuKTca/yGBKquc150KsLIB1islkEWK6DR7aX9Z3\nZxLW2hx9BJQpAlSzz0XEImJxrbssuZG8+09Ac+zAn4uJmsXDO0tRjvkwTb7b\nue0nP9ErVR/kZ2urb6WsEuIU11fWsAIkREvO8PV+jbHukNWmmTAgDg5A2J1G\nVec8\r\n=MAHG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.f89d8b8f2.0","@material/base":"9.0.0-canary.f89d8b8f2.0","@material/shape":"9.0.0-canary.f89d8b8f2.0","@material/theme":"9.0.0-canary.f89d8b8f2.0","@material/animation":"9.0.0-canary.f89d8b8f2.0","@material/elevation":"9.0.0-canary.f89d8b8f2.0","@material/feature-targeting":"9.0.0-canary.f89d8b8f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.f89d8b8f2.0_1608678352924_0.3310467948475","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/menu-surface","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.fb194dd35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2236640a4730996aeafa238c7458bc74f7de10c6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.fb194dd35.0.tgz","fileCount":40,"integrity":"sha512-3KXMwvduT+2R496lOoOl9esazeWmYSw0hNovWuYIJHq0smfxXhWXHaKVkn7aQg2zfPwWp5jT6p7kvFlH+UMKWg==","signatures":[{"sig":"MEUCIAwcxEp5Tz7GzWLetQc7QhLFrEWoJ3zjeJIltMEiqqk7AiEAqtcmBAaiGHzMId6hyDEChkRqYJOCfchqjjURL5LhRnM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kQeCRA9TVsSAnZWagAApKYP/jq3ki5dzBmpf8ahOuv2\nzECwQ5HD27kObAxvjLuh+cRnAF1tz8kmd2tTkE/yWig+DMI9NSrqmNZChzzO\nMfUeeot35lywQ12ZT/sKeAlU69ejooPm1aY7octn9x7mJwRNr/ho0T06rsLu\nC8OK353W6jpOqhK2N7OhzX5bvNSGbS15V/M/1BGJ1yy8QoW5zBYrWC+rMl01\nOfPJgzc+aFZrBd+du/zShs6iqfEsA8G/vlNpRDOuZCyWyd+LTziqw5dstzCG\n6/AAOgF7jURrm2snrMaKh15kILtgSwynMZ5uU2Xl3Djl1nPKO0twJB8FH5F+\ni2HJpOksaESeIXw77b8jJuUsWgTJ1/9KJZzOifbyGOOwzg1yWvIDDGA2fN7H\nvElEJOEhDH09h3obFQgHbOFZLzucNUpQDXHmk8CFDnUJCiwl8+fM2t87FIsO\nC9FR1CJUCVyX0uqcBUghcranrr17GiC5x9skRk/8fI8KLhNQ3LWgcOKgN5It\n2O27zc3jKXYptOpy9k7f/EpM8zjQxjUTWe5FwExWBGgkErkm8LR36auewTD8\nOKg5THFlRm7JVWl66IUSFitQeMLXbNAXPD4cfqgScy8F3fjL1ZnTqTAePgM5\nQgc/0tVvR//fy5leW+10QlH2LcEy0L/5MSLkd1ijOfw0uV2Zp5RN0mpqEc7c\nqbJB\r\n=GBOp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.fb194dd35.0","@material/base":"9.0.0-canary.fb194dd35.0","@material/shape":"9.0.0-canary.fb194dd35.0","@material/theme":"9.0.0-canary.fb194dd35.0","@material/animation":"9.0.0-canary.fb194dd35.0","@material/elevation":"9.0.0-canary.fb194dd35.0","@material/feature-targeting":"9.0.0-canary.fb194dd35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.fb194dd35.0_1609188381965_0.0992604749443764","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/menu-surface","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.64f36e287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31a6c91007d916deb60f138064944f349cc53dfd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.64f36e287.0.tgz","fileCount":40,"integrity":"sha512-Dbt0Dt95k9sSb3TP4IGDRNX3ABIRYg9IowgzBz/FLeKBrkUOyJsXCcTCaw9yDOTy8AgEAHmSwGXBhcTycJbtNw==","signatures":[{"sig":"MEYCIQDmPbWrSyUV5yVunpAHReDEQK2/MtvqYfvmk4tNj/3qzQIhAKUkWw3rT31+YSgyb8HsO5/me8ccplsGQpPTDJ3XNHGZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kl9CRA9TVsSAnZWagAAx58P/ioMghbRONQeEb9VcJ8W\nBPFvpFL8v8Nxf/Ft61dWZ1tfRwWKkOpB8hIfjW2ppWtSNsrJUXJGYlf2O3Yz\ntmFmp0EHEpyWTtQxfCm5F6W6f8Wmq8eiPxy6JZyBOgGUTs5NQIz88m/P6qOe\nOMad9N+pEN4RKHiizVfohQG+HnkctkrW0DSE1RTf/U4gijUQ0A9BYvz0/faH\n1D+LuA0iRL9mHypkZvGj40iIThNNWdD6ttMZqeYPfmjKdrkfUcL1u3lww4rQ\n4fP/6DYjuFYML660/c+aihLt2UiyzMgdaIKgpzJ3YkwaWpSjlyaiVcA+aT7t\nk0nQS5RF7sruzr8R/sU1IbMIAPu47FpUy+F4qePGvSZX59YL8StvzuMC/YW+\nK5Fp/bzknsM3og5ycyVz+k5prclZxp6al3kL9jWc9o6DOJm3ZrErrAadEtN8\n8YzgNeJmkqJTKs44EMY0Aruc6aGWpl4rSOYZTwdyK06xgZ4H1qknuhCNIy7L\nFxeFje+nHnRxJUvrTKzw7/qZsIYSFm9ZIcd3wibSrfeClFwimY1vGsBsbOQZ\nAdHyekt0yV4z8tPxf9fwjHLtGbC8DTH+zqFm/ZZ+6/7JxhYd5TUWUuY3xSeK\n9+FGQdvAMElKVDA0CmM0cr0ChR6TU+mo/rs/s6TnfuX+YD/u3dv/Oqt4Cfm9\nvh4Q\r\n=amdG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.64f36e287.0","@material/base":"9.0.0-canary.64f36e287.0","@material/shape":"9.0.0-canary.64f36e287.0","@material/theme":"9.0.0-canary.64f36e287.0","@material/animation":"9.0.0-canary.64f36e287.0","@material/elevation":"9.0.0-canary.64f36e287.0","@material/feature-targeting":"9.0.0-canary.64f36e287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.64f36e287.0_1609189757137_0.2545114214266653","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/menu-surface","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0-canary.b7bbe7022.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9afc9fbb9c9d7a741225fc630d51ff69727ebecf","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0-canary.b7bbe7022.0.tgz","fileCount":40,"integrity":"sha512-UgpjeeQMH+RrRPr4iH/VoYilGXzMjyJXSGI36gJvIFZEAFWORIQiFzltGHgVrgAmc3FBtZHJat1/7kyUq27dEw==","signatures":[{"sig":"MEQCIENZJr7yUYYWF+ByTjRHqpFxZAhGKDO6rwO3T8SIUn38AiBphPxzoh2qMkIDUf2YX+R10xoj3IebTkAyD0wKAh3nZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63oNCRA9TVsSAnZWagAAfEcP/2+rkvTBfdBPOyx2RDVP\nNSZ7PwxBWJr3wEUal2Il62AQJCKnm20rVMPlaNf+Y80ZhhlXNE3vlsZMYRg3\n8s78OLXCoPHuAKr+Jwnlw056nXLHL/jyONLB/OVWnv1x6UTGce5yPc1C9/Yd\nAsfNxug+bzKnVCkpknnCX82iG1C1aYjYGAcv9izoVKbs/BkfG42GDkCYIo1p\nyEJBt7QF3UlE4kNbAef6q5PBWEhnmHjJXCgd7+2jOo/+96YFdIJQbAJPkG+1\n+PpRanwNUiHTaM9WagUpWFrQNTVI9Rc5I9Q2C2J+tY9cpF8TDdXRgG0yLF0P\nStXe41BD6/jqaYLTDei2fThbNUvB9R8ws7c3xrewT4Hd3JdCm9d7LPB7fy8B\n/3DL2wdFN4G9ZAYvQd3uVcE+rcSmhvb8FoDt1mSZQXef/GS5s+l61vCGGqvL\nIOObP6ZOFz2jkcAZikcmqGEhdd6woEKfIK5GNUhvpUBC/1Zxnc9joYoSnOn8\nYlMq9Lo5rbkKfhfA+EkyZ2QasqHYo0vV8B6cZ3JApiAQ8acR66/amijj0cBg\nbQfFqTilw5aGE4hhWcG0dbYQyOiLKKTY47J6zMH2OxU7M6Ponvzvs5zsmd69\nwI9OuVT9t1aBy4RH4hgAGPg0/OusbgMRZVAijTq9Ehr+LhvCWyzq70npwBKG\n1E+t\r\n=l3Q7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.b7bbe7022.0","@material/base":"9.0.0-canary.b7bbe7022.0","@material/shape":"9.0.0-canary.b7bbe7022.0","@material/theme":"9.0.0-canary.b7bbe7022.0","@material/animation":"9.0.0-canary.b7bbe7022.0","@material/elevation":"9.0.0-canary.b7bbe7022.0","@material/feature-targeting":"9.0.0-canary.b7bbe7022.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0-canary.b7bbe7022.0_1609267725038_0.09433429177032959","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/menu-surface","version":"9.0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@9.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff50c973d6a6cddba556da7c440f04c0fe33ac4c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-9.0.0.tgz","fileCount":39,"integrity":"sha512-6IX4s109tkykdmpQiSerxDd4H7KWVNuiccfxEn7xj/zGZPJ+2PhyXkXnJZzf30irMzi+W79vb6azelBZVmFYvw==","signatures":[{"sig":"MEYCIQClJZlkkDWL7O5R/rZLLSO2wTbS0palvzl/fzVpBQf38QIhAM5EOrrI8m6sWMlitl0Tn6gPJqHZNaOImU7gpmACXMgn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64exCRA9TVsSAnZWagAAKJ8P/jhUWlyhwF8+hVqfBAk7\ngLBQSKn76fM4O+TGRzKTBvoIFQ7OZrZ8oUWytPmqMoBkJl5UyNb3NzottSeV\nB1Ny8wCS+H7+OI/l9ARn94UdG7h8uaSjZL9JBDPjvDMqmLJx8iPeak0f3Aiv\nVXOAs4JBh91m3okjJ3ng38D5BNDbw3XXovZz8Ul0GsK8xC8I9LoIo0biV/Nc\nLMJWjypSsoDv9/V1QoVa0fIFWwyJIZPZwIne/Pww8hhG0Jqg1bN2FfZNxeQi\nMqOjkrX0mfriWiZU0PqF7h9y8tECECA6hbwGyO1olx4NZZFoeuvWAn8xv25F\n8IeRfDAEKAKanOkzW4KTW7eccjfIxSwakC/DrBFQdKHKdxAfy1v/Zt42kj+h\nvyRwwd1WCg3qKV1JbJw+RiVvoPn2CnYUUoLpiP1mQZggOUNJooQ0u9TXZHiD\nSM+w7hKOSPSmPB0dvb+VDcJV4wVifPRynvFqk89iaKwvQT2XfUqxPt5lW09V\nlZwa+MJCI1C3oVeNZpSvjr+0tK2pZNsRIiuMvJE33kzozRzDPEiauoEs8wTJ\nzaMoo5gG/nINJZN8uNINeZblzecIFsF/5x5tuW5OrwTijNS3rtNtw6uTH7V6\nqNxWoviyO2p6TapkJceFDGz5RThJjPpx6sQiEh8lVuAlbt0RAhC9Qq0zCST0\nXAl5\r\n=Ajzy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^9.0.0","@material/base":"^9.0.0","@material/shape":"^9.0.0","@material/theme":"^9.0.0","@material/animation":"^9.0.0","@material/elevation":"^9.0.0","@material/feature-targeting":"^9.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_9.0.0_1609271216505_0.6755909127818778","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/menu-surface","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.776c18681.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"725970b973d9675f9a99f9eb36b7234972972530","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.776c18681.0.tgz","fileCount":40,"integrity":"sha512-F4z85QaDZ7l1r8U9WhmsJYnE+7bmKDGxwtxgWTf9bPgmPJH1uZcKn8do7wRlKB56qi2zX2SZByfF1DlpAmeatQ==","signatures":[{"sig":"MEUCIQDoOEX8DG38gDE9auRglzIYTSGyG3MjKxQ6AqvRcsyoAQIgHw6ZbA/3piXInYUEcuV6fgQ/xSuUpb5Er17McFcL32w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68yXCRA9TVsSAnZWagAASBQP/3F+vpAPGDtuYVSHARYH\n2KQAK+xmzaTJTaFgBaP917SHnJUfPm17SCDToVHg1EZaxNOCOVRI5pJvcNbq\nzeeH8fSYEZU5wcy2cmg2q58lwYtK1//z3V1SUjb1VMA2JfQFKtisby3NHDf7\nh9iUhUrp6oI4h8TgLxobZsGVXck3sFvBw7nXg/BgXFkWHX8Mzc1iO83jYMgG\nAbh4uAePQqnViIOdnZikna2lNkZmZbO+qiNJ0BI7f92WHFCt9yxwsfK5D4rf\n129pGWlBfxV7yK4FU59lSyZE36MLaAXgZupjyYrMmpLeSEI6TxzWPYlYwVI/\nTs2N2XEUBaWIep9Okd4xQJRRaGkZdd84e1d0M4yXNkOt8OFOBteKmRuEvo/R\nFLs58m3cJ40uzDGPdaSSJjFDXyGEaVbpiEwbiqd6EPwbN2Y7aPXJR8e/9b3P\nXiwowyS+Wyb7A5keDOwpH/6VozwW3ngnHxJRKaeczKg2cBVjd3og2y48AewV\nWv4MvifXpQcvnyaY5TbKCghnxNIE7Xeqv59iTse8R5ek8ZQ7o6x6YoMyWgNp\nlOfWV79IKKL0IP46IaifqSmlxE5UWPluURlBOdTm5hroK2T4nwOt7C4/F/Hp\nA5ECcWh/vHVcBoQ50S56xMApt/9XQ0E5uXOi7/5CEtjuCrcG3XlN+Xem9exd\nKW46\r\n=rwKU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.776c18681.0","@material/base":"10.0.0-canary.776c18681.0","@material/shape":"10.0.0-canary.776c18681.0","@material/theme":"10.0.0-canary.776c18681.0","@material/animation":"10.0.0-canary.776c18681.0","@material/elevation":"10.0.0-canary.776c18681.0","@material/feature-targeting":"10.0.0-canary.776c18681.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.776c18681.0_1609288855250_0.46421630813934134","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/menu-surface","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.671d72d95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a32de888c4965ee2b9d052a35bcabc8618c632f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.671d72d95.0.tgz","fileCount":40,"integrity":"sha512-FYzjCB+6XEGLXQWrJJz7EkhXWkmyIMbGdMUVDIHDV6pIgamQu2N2BcCXHYmReCFCUjRxGBm8IDcOfN//bdIm0A==","signatures":[{"sig":"MEUCIQDbSG/PCa3RMOWrs4oduBU+wafhpHvji3I+lrOWQhAcwwIgfC920aU8Hm5xPbVWG0U1vZMHA41gPmoKsGBHcyGFFcI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N89CRA9TVsSAnZWagAAbDcP/RdaPx0C9keagQKhtj3O\nzqHEtNAqI+a3t9ezh16qhReAs4tMGjFzg1mQLZyJ0rsvlXDQ7CZLqcHi32uj\ng/wTquQrvQs29JDopX6O/I1v1+ZjM3JYN3TyZVYDzAcqrecw2WDbRbXZ53rA\n3LmExQHNxaUnpdZzQGxsUypsVvJa0LqijSV3btOkJM4TyGrguwMATHv5NRw1\nusXQvoSNJDI2+QFLiUVgLHn4JNi4QMyM0ChYDcVr/ZSdeEo1vWeQtca6flKa\nf5hWyKu3rxZZ89boYQJTpB0ngWP3wUkN+V7RrneGQyraBhXVLaNQcxAlIpuh\nNiApiT3dyR03Jrrfnlk27ck5iWV2l6QOdKcTdA72EdVFmQLOfK9wat1ZjTV3\ngYTvaWqrS5vF+FubeOcA+3pVaw7CBQ885yYxc5u9prfAdIwTbTJT0ioNcU8l\naLFuyGQ3EGFgT7fkETrGihj/V6YBZrzfKh2JCf07pOma33UAx3Ug3EdezOuz\nEjBkdH8GE9fbNgDjNHYcX52QwPmKwIox9gtLWfnw9nhby3l0x/GdNu6mv2XY\nAOKMkNRzY5o5a4hpyjPrWd4W4wegZ3m1fNLY//h3JOD8pgZEOcO46bdVnhbW\ndVM+uGMxMppmKmT+sg6xDifnGlxxrXiC4uSVTtlRuuFlUG51QYqPCYiyzE9F\nT3BP\r\n=Zc85\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.671d72d95.0","@material/base":"10.0.0-canary.671d72d95.0","@material/shape":"10.0.0-canary.671d72d95.0","@material/theme":"10.0.0-canary.671d72d95.0","@material/animation":"10.0.0-canary.671d72d95.0","@material/elevation":"10.0.0-canary.671d72d95.0","@material/feature-targeting":"10.0.0-canary.671d72d95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.671d72d95.0_1609359165391_0.5883848137238148","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/menu-surface","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.b4f5a1c9e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"554bd9bda51978e0aef6678ce6bdc544f749e776","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":40,"integrity":"sha512-zCIXK7FVwEA7UCz7W34MTXDcInEhVtMcOfnzW5ZFKw+0zq9JAESPiqNTezg7KrWZllt82uMObN9HkY1bbOof/w==","signatures":[{"sig":"MEUCIQC/H/uEvxUkp+i+i7UOP3fAhPiXXOvIzsHLWTb84pS0ZQIgRSDyEhoGVFKskza+/PtbjDOaBZJUH26wr1XpaiNjN7k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PVhCRA9TVsSAnZWagAAURYP/0tAvl4NK1BKI7bhxgsH\nomJkhB3tVdh3KEJ6aaqvrZZF8cFvf4Lv4pgqRUuM7CQfy+tP0YDr4Rjyx9rB\n40s+Y4DpbYySNKGFbyc+1/VtUjci7wSxL6KcqWRVubyaort1uB9upvwAjUPb\nHXOxdFzU4W2L9cLJObzlqN9Df/1ewFvz9cjybcTx/hlsSkm4rShrs8Wzkitp\nT6920516PIvr5/eMdz2izIPbTvi8+aWfxZSHiADI2+6iqw0aaoRelRGAnwGP\nuwif5flNbRssdMiPf+DTHscHN1kLBn5KKj2RG7aDYlF1zsFx8fQX6qfO2CmB\nFnK1zXK9xTuOPFPR3VfsVnWyhRkIgEBi1OK0iMU3XftYXu4o38QrtpqvT2ho\nSzlOpix2m92DgfvnGBPfAJL3jOj6+eU8d2qFLQCuLhv4JWpLXjq93CrTPAKk\nuvmee8vJbfp1doWQnyt9HVSplRTo5M6EHhfSq7ShdpvLknvtw8mZhmluZevn\n2XEq6k4HcBZvXpUzo5WjpxpHo1UW5478Aq8gBf9e1YUV1sarTmZXLVntWAwC\n7tIkf5XOexlzb8uULUgYgklrhJNQ3X18p64npaQU1y75ELJR6eyMuBv2iXOP\nXKIv732B9Od2/m0k5Y+0jt9d8T0oeG89llMeK86pPqcR6B4k8/QsIqYl2xql\nAFfO\r\n=ND2V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b4f5a1c9e.0","@material/base":"10.0.0-canary.b4f5a1c9e.0","@material/shape":"10.0.0-canary.b4f5a1c9e.0","@material/theme":"10.0.0-canary.b4f5a1c9e.0","@material/animation":"10.0.0-canary.b4f5a1c9e.0","@material/elevation":"10.0.0-canary.b4f5a1c9e.0","@material/feature-targeting":"10.0.0-canary.b4f5a1c9e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.b4f5a1c9e.0_1609364832874_0.8268552697812954","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/menu-surface","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.a94bd8deb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6290d6d0b47e4b3b7609d863d416980f995351d1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.a94bd8deb.0.tgz","fileCount":40,"integrity":"sha512-EUY4mPSe7paXNwtkrwBazCS45P7czXwpc8A68ph37UI29OZtZWm4q/pXIFIoY0YR4fj1G3XdptuAmhxnANzYpA==","signatures":[{"sig":"MEUCIQCGcLunPw0krsJGKrmWqA2JICrnm6neF8Q5ph/Gaj8LlAIgJsPwg2Zp/snpwG/No2NVXWuzKwmd0gYmrzDNWdAwnQs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PmPCRA9TVsSAnZWagAA4FwP/iIkTB8gWvBr3JXYYN+s\nGxduDuDfk4eQSj0Oy8phwS9KS26VbBOwnZ/Lyow7ftf3HJ5cYrBIbgWDaD1B\ntIg+u8/vAAcPpye6ixLPw5kwChKTFx1pY6R8+Mql+OqSvdCXv8T+o0VFWd56\njIaCH60JxSp3f4Eu1WskCKpn8sgWNj6KPdIcj3P9Is2ilPhvOpDNe4usfR0e\nNVSViTl+x/ZEkPt8IOU+ADMtX5ZMsA/n70c1A2rrbjD1ue44jJ3S0TLKI4d7\ntzs8FU+NgVcCbw0FhNWHVIk1CEUCUYXG7R4km//dNxhzzcTxrpf6qHcBDHZB\nzMPKfr2agS2CyKD7nH9JBwIQIfXvXxnoet8/lMQDopUZeiMJl/NaeTbEMAYF\n7322SCqNGSPNWeQ49xl3kyjwRC8sZSJCcchO/PUK0DeAwZjZuQdjX3iSkFde\n9fLU1g2UqSVMitG2L+9E9mjv2UM7Ihyv0sUUlr08AXKzGXiDCpmjlsZUKQPp\n/5WSjfY0C5ChNJyoc3Ym21jVCPxUyO9ph8QX2ZmiwnLNuqA5o1VHpsadZP4F\n0KqKXf74ylIbHWonI9/OLS3JAT/lOm2yMqph4y23zaoknOATRvJB2yT63PtN\nZMUP3Ncen3w42ClETIZ52VYGw4Ra5V9Il/EeJm0sp0uA3q8WJjSbiROt/dQ5\ni3J+\r\n=fjSx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.a94bd8deb.0","@material/base":"10.0.0-canary.a94bd8deb.0","@material/shape":"10.0.0-canary.a94bd8deb.0","@material/theme":"10.0.0-canary.a94bd8deb.0","@material/animation":"10.0.0-canary.a94bd8deb.0","@material/elevation":"10.0.0-canary.a94bd8deb.0","@material/feature-targeting":"10.0.0-canary.a94bd8deb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.a94bd8deb.0_1609365902569_0.519365709732158","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/menu-surface","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.5d128511b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac7d72dbf2bbe4d94fd03ce5056118ba742a43cc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.5d128511b.0.tgz","fileCount":40,"integrity":"sha512-ziIsfnm121MSPXOoWrD+oPNnYIbIgUVyRwsTjZLZaIkb517L1Q/3nYeVNwi6AzHf1vAjoiSkzuzQ13KxjGvUsQ==","signatures":[{"sig":"MEUCIE+eHYSo+Tirdj6hGKaNussLKw2sDM9Ve5UipWfBlLzAAiEAgxNgRIAuXirnVb8clyELX7H+XfBogHHZyN3MjzCUmTI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PrTCRA9TVsSAnZWagAAuL4P/158RzR2wC7NwArY+9fV\n5YGGlLdQ/X38v66pJ0/QZ4nCFU8NIIAPTKQetzw7QqwgHg8AZ+9PC9z2fc6W\nfeEVkf59DHxHPyG4o3QJFLSGwNZJ5riDWfG/JEYC7/ExbUSgk7/RSI7uZ+4V\ndVZUQPooliOIhHqoP0pIPWLSpbzwLu8pettMgjB0BgyjGndQRwoiarw0+q2X\nsVWEDnMSz5KBnmtyrgtx0yjxrIqdeiEGJrgOFcf9XxruLt8GblALSwj1ljbV\nvXm1NsRR9kovQdDmmu0ZWB4tD+T72Vl6ztThXNXvRInZaLqwcco3BnisO8p+\n19PHv9jOONMR5ZN5Nd2GLeP1Hpmky3fwgjWdDSGmGobk8+WOUlHpMfXMt65U\nH5/S5tF1BaM8seFeP5n8g35uOaB6GOQmo+YkLgfGJWbPRCLcfx4arnzXU8fT\nwSszjQr9SiqO+g1d3wNv6KASNMBeNFqMcUt2Yjlip3M3D1ckeHT6UtvNa4qE\nA9fCk5YCrgqwcJp5zOxzDcgxiMclA3DRFxrQpZQXEYPDTBgk12bJoYqlOMVf\nrpiVb6JUWm3gsg3cLVVIE70v7oyhXD3Y5bmGlLwrkpnHnPwbrOoIdPq6HInS\neqGc7K5xN/VIiOwrIUKELqoXGxSgdNIJ/1T2TMzVv9QWyuuQiQdAvLsE5zl/\nWRJm\r\n=IYJq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.5d128511b.0","@material/base":"10.0.0-canary.5d128511b.0","@material/shape":"10.0.0-canary.5d128511b.0","@material/theme":"10.0.0-canary.5d128511b.0","@material/animation":"10.0.0-canary.5d128511b.0","@material/elevation":"10.0.0-canary.5d128511b.0","@material/feature-targeting":"10.0.0-canary.5d128511b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.5d128511b.0_1609366227083_0.49650499196283326","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/menu-surface","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.365c69360.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5d1e469e534895571589d396a7c6b5b280e35a1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.365c69360.0.tgz","fileCount":40,"integrity":"sha512-K0Y8RRDKeT09UoqBJvw0mca2yQb5WY4Q5G1GE0RGgbeyym2vSnBEvUeL+MJWUdtamRFt6UHYgn0cb0ilhOEyog==","signatures":[{"sig":"MEUCIQDrG3wqTqLtDCmhMWcs5bAFFXY3/YUr12HgVU0ahBBtwwIgG6d7tQd/ukPiRxnBtDYCnUEdP4MbrbwU4ddWbZwk6Vs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KaQCRA9TVsSAnZWagAA1IIP/iYd4QPMtQAbIgVdBO5Y\nNAKi0Vhq0Ip7o9DZiSFWZoqY2Y45cBQRbU9grqpWDl+26QbzGuKUGDctIdFV\n9sNWYaiaVzs6yQUqATwZrH/r5sIMqHV9ZDC3rBd6VgJeW1bMiVRZNAbkWp83\nev1CQfl55M0wOmw5bUZO9g30zXL90CrVE+RgLKtycvkFKePOxRBImzbcaoL7\nsfYOPInXVosFojM5TqIEy0gmhJyo3BK59JS4Uzhm3i4Gfd4CXOtOv7b2qW/j\njkDRfsrOO396uBm4FU+UtC9kk6f+8hddRNIyh/jC5rNOaaM/h0triNP0Hy7c\nb+fq5+Olyq30rGMFqypO+zgZFPEmxdoPNEz8bO19hqGK26TSON0N2vn7T0n+\nbPzg7AoGKEOLdC9m4w6udYIh8hmimdp83RnYSAcoqJWJQ+WtQLZRiaturJTd\no3i6IKitBooMDScP+tX3h5rV3E8X7lH8oK6ZbAYw47Gui+Aa0x5aMFL64K7m\nvK1F2Pnt3EX2iB9DMi0tpszJSOqE0sr4rMVBIF638+2pSD4spsVfQCOKowP+\nLKzIfbbELM+yWxH/43FVIrkbQOPX4a3rO1aCkqXb5+T+4YttfgXnEHLyambp\nstog5WHFOuL3eIxeOn217vcpqk5AuX/AG6sjpZbdQLcBIv86SAJ53ukztcjX\nPLqV\r\n=85OG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.365c69360.0","@material/base":"10.0.0-canary.365c69360.0","@material/shape":"10.0.0-canary.365c69360.0","@material/theme":"10.0.0-canary.365c69360.0","@material/animation":"10.0.0-canary.365c69360.0","@material/elevation":"10.0.0-canary.365c69360.0","@material/feature-targeting":"10.0.0-canary.365c69360.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.365c69360.0_1609868944275_0.8274855966311614","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/menu-surface","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.700a8261a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adfad37b0fcc94bbbcbd992dede53a1403cc858d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.700a8261a.0.tgz","fileCount":40,"integrity":"sha512-2ZB3Wjw5PWr1o0DRZ0A8dLxI2Pmh9ypwdCrwHUmEfc5aggNuaXF94+UKwLMhQ3stBLyyQE0GWLhrORipv7JrVQ==","signatures":[{"sig":"MEUCIF2xdvwuiEj4fH/i3DP/lOme2LJszwIBr1iOmxvfjS3oAiEA5Ot7YWnnmaJthhpU/sR9nYL5WvnLY/2C87Gz3hEOO7E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NOoCRA9TVsSAnZWagAAelEP/RYv3ebcjkBaiZOzoyBh\nL/U2hSSkeSVc8qmaI7MAgxwZbI2Jv47KxWRl7kSzcLtySFTxXud9V5ZzC/um\nT1Sngm1MBLTgU0DdHvZ/EMoG7hJh5ZRPSfrNeq8xXIdx49cEn7qIWV11r00a\ngB2F/RaW2kHWFBb3FYtC79gwG0AOi+kRS8i5xPeCuz0tZMDW+ylazaVtUu1k\n1CG8Ky+4tco11qOyLcOGUrWgI1chtO0pdVRI04fXGJVrX6LDjWm7KEnalp7z\nymSibfF7BehROnnosRj2NAkI5UYq4IkYNFHnrdznRCDwYFJ52NFBG8nBmPLz\nuVlwC5+prCHReC3z+q0PWAjOdVKfsZA++clVaVBP+fgZO8y5MndWLYDmJ7v2\nITKGO139h9acjn4AnKa2V+KoY6AY6Ge/TlUNA53ynCEFu10Jd+KT4bRSKllP\nRxksR40KzGTyTA+ZBKTxUyxJTwfYP3UxhxHtUja1l+hAvdD72LxVgjW+aY+f\nDkv126aQAe35M4gmuEbr7b4AgSpHaX1NOQGo4Vde8i/l3U0kewJUpfAhYyoC\nDp6JNlF0G5T3o88LwC0NvJOVsC5sVXSYpoD48M6tuxOmNofrxNljQGKzIMvG\nOkQIQIq95z0D96mvqMh/Ar7WmMZNvam5Xmf03ICBzD6APpOG7w9oldZpwFhm\nCoLp\r\n=WkOj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.700a8261a.0","@material/base":"10.0.0-canary.700a8261a.0","@material/shape":"10.0.0-canary.700a8261a.0","@material/theme":"10.0.0-canary.700a8261a.0","@material/animation":"10.0.0-canary.700a8261a.0","@material/elevation":"10.0.0-canary.700a8261a.0","@material/feature-targeting":"10.0.0-canary.700a8261a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.700a8261a.0_1609880488474_0.6403287116389924","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/menu-surface","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.766981c15.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6e1cc8b261c5336b4eb7c0e6e4116c971addf13","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.766981c15.0.tgz","fileCount":40,"integrity":"sha512-B8QY33VEcWu187+k7uxWqi6InIE5VL9LREq+CamxEx6pAXRjAgUDck2AlG0cauNj7h2RETHE8Prmclkksq1L1g==","signatures":[{"sig":"MEYCIQCt+pKCXUWckjc3VP+lQtQI0DBExCqYkhUkN1ZA7WugGQIhAN0UKktVib8qJ8GqAgs1WIYsZzVB3MpyTI99UtndlGzA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OsBCRA9TVsSAnZWagAA/FEP/iBkZYYLslV7n1kG7zxt\nyhNfEF9BtZJ1HuXIcRwnNXqmgcJpv+DJNok1S0hOmYfjYOF8IC8CSFNW7kR6\nMQ6XFzgq542XWmZEpI4VgOUXD406+rbz78osrLcdcPUGmHQIRgU4hpntkZf+\nrkgrUrEzejrF5V111SXtBVSNZywxgvo+wBlNU8zouA/TSpiBYWHZc6nwY5/H\nzQJ/gXWCZk5Pj8rtwlFxLq3+uciJRKuzdZlT3rTFoDKHoRYwrRMStz7PSlJu\nl9D7Sb7Rn7zz0fbzenniKrdACq1A8EnmOOgR0LV4zu2AMMhJWZ8wIbNSZIO2\nMQAJbRLeM54AddIgJEG1rvhYZtWaZRlybMEVbvjrURvNolekKTEctv8d60i6\nWgyJi0HYYiUNWuS8s8HdVc7i5WZFxaDynfr2mL1GUImx+RP6ylbiJcXJR34r\nWhKdV+pLH0rZ4T+kz+9wtKx04znDYjo0A6YKz26xZKfyxFQ72fTrAad2CVKw\n6EBH7Bw6jurCewddk+gOcsHCtDJIffZKHjQTH76c0KtsaJjKcxw+fYRMpZHk\nOI9mMLJmIx6v7UFQlGt4d/GMwlDGKAD7N4wBLA5mrULxctCbUyQ0CxpvGKUb\n483R2NfslzRtgmjl56bYucArg3pW09bMSzJzAegCXNyx3xYtKX0cauwTxJQr\n+DFo\r\n=YRxH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.766981c15.0","@material/base":"10.0.0-canary.766981c15.0","@material/shape":"10.0.0-canary.766981c15.0","@material/theme":"10.0.0-canary.766981c15.0","@material/animation":"10.0.0-canary.766981c15.0","@material/elevation":"10.0.0-canary.766981c15.0","@material/feature-targeting":"10.0.0-canary.766981c15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.766981c15.0_1609886465533_0.5149514351006572","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/menu-surface","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.b28c576d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01feb22657bb493344ed200767794a5510b08b0e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.b28c576d9.0.tgz","fileCount":40,"integrity":"sha512-sm4/ei4sffLRALlsTOa1cNw4YGivQuHUDH4zSjuXktRqDPdroe4SA1L6zunbZGvyYU16aH2LLzEPoM4ap3EzVQ==","signatures":[{"sig":"MEUCIQDjh6MNqAILzDBtxge6aWUC59y1wa9U4L4diADGdQIG/gIgKJzw0qRr6weOdrBGnSmHdDg17AWk4yN6wEkD+Jonlyw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9O1GCRA9TVsSAnZWagAA21IP/0q/FogQIK/EN16uHWQ+\n0B2mlb8AaqwocNxaxEgz+cL9yt3g7WeUGN5cec4cJvN3LMTSKY2v0c2sVewF\nnGQN+MB/pMqEaBALgK19Al02mnhGV37cKzwluOABdEDC5eSJ308YQmIkkguE\nyECH+pCmMfCKYh2w/seCKqzv8kX9jBP2YtJwdRHDqhXF4MOKBtHVtxg/sbkD\ni0l4rwLJBvqxl6mbjvKqVWDyLJx0pGSit7YceH+oEbCBR18nOH0HCw8Bn86D\n8coCgSeTaTVFrSWJN7gPazl0GuD1kOjnInpZhaVD+uEdemehww9Ujwkmrega\nHdFHVO9TckisnDcPA7K1LNyl6MBSqSlHrCO/Q7rcGpNeA2vCdu3g4s+z4hPZ\nMeGEG/HfDwIoryWn1HRx6uM5nOQkqDRgKlhz55B+VsEGRhIZAqBpd695Jqw9\nRwVcsIDcK4mnJ/orD2YcMzSeL0ExzMyAgW6WKS8isnP/IGwHytRt0xaoKNye\nmFlCNs/JDgq+qhk2K31gwAF4Dzh1dNLp8rzR1mw28+u2XoZmAMQIYt5w0Jiz\nMubrb5HfWc0EC/LC/cnXaFW3TpKiI0jrjFmWVMltreCpas9zBAbfzISL89B6\nyR4ztkJ1D09DN0WaQcaVZN7/9Dl1OSNFibNhQM6+dpNh4j/DCGuIyeTq8u8m\nQFS+\r\n=cbF6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b28c576d9.0","@material/base":"10.0.0-canary.b28c576d9.0","@material/shape":"10.0.0-canary.b28c576d9.0","@material/theme":"10.0.0-canary.b28c576d9.0","@material/animation":"10.0.0-canary.b28c576d9.0","@material/elevation":"10.0.0-canary.b28c576d9.0","@material/feature-targeting":"10.0.0-canary.b28c576d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.b28c576d9.0_1609887046295_0.7804302006052617","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/menu-surface","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.968735356.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"961103a1b0ee8c0c8eeb084c94ec2b98c2aba93b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.968735356.0.tgz","fileCount":40,"integrity":"sha512-B+i1pPJEWkcxU4sRnm+4QhbWQL1d0wG7MP9vAb4vxKuu6K0Ry+ZveZbx7j9580ziUL8F2UpRW5CbiNZHhfJQEQ==","signatures":[{"sig":"MEUCIQDI6woyKK0jFoyrlyrbaCSHygQrp1ZXBi7v+dvE4K0WPgIgTZBSLZnNNL+20tRB8R9vxq0I0fAL55fm9M9v15at2x4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dyXCRA9TVsSAnZWagAAAnEP/jYzX9crGl2qmseZXShe\nM0GkX09Fia2zSBQJxipHshLB3cl9HKeiiKdtq57mCoT/j3ctKh6FK74wWaFi\n9jVhOUvM8cZ3ygfqFj2cwpipKksKocdXmka+uh408WqntXMiMB1iYem2CjPz\nSpemBDiNW9RiWh2kRE8lNu+9sc5cNLLRTuAfEAhZ3AMe3HZHsU8SeFLwD/sI\njnPMMJxxH7IU4txPQ3zhgCtwk0zgJRSIpHmZhHEn9/bHdQcyUciiWQAdgHe+\nxUkqGbCYC3ZSYs8DKMKMafgo7CuV3JbR6k+zazwzjIRtXeKJIu+3rA+bnP/0\nDKzVnGjF4i1028d+Bjofcrd1hT5yYwAJIO4xSXjgAMJdsY60H5uSZoX14sPE\n8aT7w6ijJAG2L/JMb88Mh9/DeJNQH++ZFopofiq4sfrW3G5aOdxuUAutqGg2\nuk1riFCE8Z6pj2oXAAAYeIt67ICv1K4ktcUmsDzm/J4G4lTKAEVdgc32rIX6\nw48yCBfuTkqsU7OPXueP78xiRrNNfk7fI2NIQ2xYKVVJ+loBQW0rPJlEdK82\nTj1T1ggMmLgx10cedPTPTh86aEkIcS6/ORICzUeTR3mqWoclW5Zl/vCw6Pey\nmucFM7V9y4IX8l7/2CZx2R5Gpy83/9ZyP04b+BVUkLWX0p0iuu2Dyp7CmmjY\nA6JP\r\n=BrCW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.968735356.0","@material/base":"10.0.0-canary.968735356.0","@material/shape":"10.0.0-canary.968735356.0","@material/theme":"10.0.0-canary.968735356.0","@material/animation":"10.0.0-canary.968735356.0","@material/elevation":"10.0.0-canary.968735356.0","@material/feature-targeting":"10.0.0-canary.968735356.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.968735356.0_1609948311247_0.19264208878576627","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/menu-surface","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.c5e18b020.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b74c53f3592935872a5559ed83a4436e8d43e995","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.c5e18b020.0.tgz","fileCount":40,"integrity":"sha512-oU53zNiR5Hkv0XXj5arEwhxIy/Na6Ybgb/Pn8Or4Ay1u8YcsLXEYwMC2AwMM5n4iEXYlCAiDqtPpSaTg+CIuBg==","signatures":[{"sig":"MEQCIDE2iLThij2cvVIxtJVAPk2enyF9lBn7+EZ83VkoRpYIAiA3W2VMpQC0MzLIMQhiP3/vzKvlvX9xkSGPCq/hAId0vg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hNECRA9TVsSAnZWagAAaEEQAJtVCWO+EJNi1PVMFB8I\nyibXFGcBtqWxvbX2QqoWw+gN0CQUWM/0xIik6COZiG+FZf0EPx7DUbi7GC1m\nmWW+V/tcXi+/u71sTFEBsPK6nihxnMDAZsD4BJnYT7Y6VpncRsWDY7xf8PLj\nQmlDn84AcKPI8ez7zvbWiLmuUuzPHQZYTiFVcaFgpVKrd8X4XWXmainfaWKK\nRlXIleQuUucilQjV4BGuGm/G1MfE5vNAOiFCXC9eNLf8ZqRDgrlA7ACMPusZ\nTtyWdW/xLKvF+BHLGjo/q3b4X4rJzRng6C7wA3TFuczqRFbqOMg5paWipwZT\na93PiOjFaK88pZxp18uwGHEL1ckUZ/XJf9Jg858udgF3FRSM2AYYSK/pcwln\nLnbiCZM9aID5al1hYV2tMHCbNzPswxobQ5OsP0yTGihC0V/EmbHqG4CsfsbL\nrrMBvntpKY96WH2TAGMDFGDuLx9NqmOx0EYLUWrN5PHL2u29ljMudU9jjxgn\nQNFaK6qIbnNrwcK5i0qTLw5BoZ+yord66ITfyWCTTO8Idok6s3IsgFisJUAv\nqY6dNglCn0V2ISVFMTZa+PzQXrvKF4sHlIt/uZ+FZD/Ct7VICfZP0PONZdDe\nny6Xx3SlZshDhwtSd6zZjGzu3vpT0//nrE2DbYNVMGfPipxlnON/53+V2PZ6\nCLbT\r\n=tzSs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.c5e18b020.0","@material/base":"10.0.0-canary.c5e18b020.0","@material/shape":"10.0.0-canary.c5e18b020.0","@material/theme":"10.0.0-canary.c5e18b020.0","@material/animation":"10.0.0-canary.c5e18b020.0","@material/elevation":"10.0.0-canary.c5e18b020.0","@material/feature-targeting":"10.0.0-canary.c5e18b020.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.c5e18b020.0_1609962307992_0.9439531066083202","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/menu-surface","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.bcff8a66a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b91224f91495270dea9719577cc089538e9bd0a0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.bcff8a66a.0.tgz","fileCount":40,"integrity":"sha512-lNiFkTPn4VW4xd6tWiEtl66nnGT7YcHCSudulaCYWSNXG4oyfIHs2OLW7o095h3DCrTGxcJvUlf3etp8UF5WJw==","signatures":[{"sig":"MEQCIAmPJexnU6PFJgQfUC/3QH+Pb303ZmVIF6tdq/LhNtEYAiBCtlYlNzODquFrAojUck9qy7IMXhRu3YYYS/wNajXsjQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9h0kCRA9TVsSAnZWagAAK28P/11mhbkMuXAKU2+BFXU4\n/0Q164QQAm1tdUlrCz4pDZeofUk0yCsY7g3XE3OZ3Y/3Fl2M1x2Fteejlkid\nerGD6m3e/ExjYJvXub7XcWHa/2NuwdJLA3/I7ie/0UiRBLMoPh0zFmAG2T07\n6/Z2DTgiuF8kqGNCPoNHIdt6qpZONtmsnozMHehIjeAzcVTOfkrUymg7nxqm\nnmpF9kNnEm8K4kdu4O+UvyPQkm/YrUpfnDZAG3WkC2Hr1OddyUfsA/3AmXWy\n3puuiAO1lsM2gS8FeuZJdor6VhHI6cQC5Bi7jQeeTVLkkwc66QnAKjA8w5LU\nrdKbUsNfNJ5a2dZ/M0MkGIsBL3+F7f1x5cyzj8Hr/loxEeHCOg/Tb0UcqsYP\nmyyUAgXp3VFwGIG3/r06tWgn2atlH5PdkAqvMjHSNccHJkx0UrpHShNLDCzI\nz+qhQQ4WXDFpT24y2F2aYN7d3bUcQNFjvgsDo9RNALVO7zHo/Cv7b34Nt7MP\nxq7Sij4F3efUXibilyGpvKkdgJ4k80B3ImQVVoSGr9/UNtOrHgxYkg1xVYzJ\n6XvrCOa1IHxBYJTESHaAb9SBZWvqTD0PG8naz5kMl+pC6dKHTjno0sPCD3NS\ntsWhsW9xLe+JCyW1hxP2I/+dRA0o1ydw3ENP0UPzqedKmXqWFWYXVFSPScNN\nmF/q\r\n=hY4I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.bcff8a66a.0","@material/base":"10.0.0-canary.bcff8a66a.0","@material/shape":"10.0.0-canary.bcff8a66a.0","@material/theme":"10.0.0-canary.bcff8a66a.0","@material/animation":"10.0.0-canary.bcff8a66a.0","@material/elevation":"10.0.0-canary.bcff8a66a.0","@material/feature-targeting":"10.0.0-canary.bcff8a66a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.bcff8a66a.0_1609964835656_0.5797279445145729","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/menu-surface","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.79328c9ff.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aeb52b1d91779cd05bb307dabd960beda6bab9d6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.79328c9ff.0.tgz","fileCount":40,"integrity":"sha512-4nVYxuAY5bONIUmyiJ6MlDfh7xQNSmkTC6zHdyWHrU/MozXNzNR7KLEJg6KX6uYn0vrZbT6iRPzS3t7Y1Ntw6Q==","signatures":[{"sig":"MEUCICgX1tmG9u1IQvmcE75+7ckZNZVy4ITMMv1x+fK8j7F+AiEAgYlHG36JTIQR8kJLrPWaBcRWwh7vWH6PNGzSqF+iYPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nNUCRA9TVsSAnZWagAAF/EP/1GlwEDsSclbmHUcWafc\nOLblpYqCRTo22/7BVOCn7DDrVv+kRVw943WCGJ/LZFTRp6G2DDmnFwMNTXMy\noQeRziazNFQ+URTOhaPbX6AZ7+XPq/WkzP9WLNGlVxy2GKTgdyHDN47Rh5Yc\nPsp1T7nCMFUM0exk3N3jhuwDCWBT3BRIeh3IROJLfYC9mXNugYzb3o5+JugN\n/lTMXkAOSycQEgHIGLZ9Y+mzjSCazvhL0gNF8HIaNe/goXzy44RZ8bKro3Q3\nHI8UV+OTg91BhgSlSOWw09SrHrOivwXfzWI8JcSSGXj4oYuo/5RvONKYzBN2\nXE/QA+roXj+IVH1iTfcOhh8O0D0ZXO6ohCG7gGY3Bot12TNKV+EQlz2CbykA\n10UngwZC+2NEuF2c+p1unM+Tu+tIkhxpBkjS+whRo8iUvZpNE47ekK7GetiL\nJeBE7Di+vtC1vQaB66rmdu89T2FADB5pPkD7UM+aBRDpWVpgA05e0Wcvb0IL\nJFTsbOon7XLaKGDOqUw32Lsje1VciIXkuAgM7qOXe7bkliOB4188r7s817zE\ny+/3fQeuAC5gHTebHbnWWzAvyjGKhL6+hMZwFOWnAvhaepyaJs5PY40iN7fR\neeFxJS0UMFXOdfz1R1QK5zMhai1rXUnYHel92Wq8m75JyTCzEEG0EnI8NAlA\n60nt\r\n=lbNy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.79328c9ff.0","@material/base":"10.0.0-canary.79328c9ff.0","@material/shape":"10.0.0-canary.79328c9ff.0","@material/theme":"10.0.0-canary.79328c9ff.0","@material/animation":"10.0.0-canary.79328c9ff.0","@material/elevation":"10.0.0-canary.79328c9ff.0","@material/feature-targeting":"10.0.0-canary.79328c9ff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.79328c9ff.0_1609986900259_0.2505025432984722","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/menu-surface","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.121e1f303.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db189c2cf083b96df1f0c7a28d04212a57d148ee","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.121e1f303.0.tgz","fileCount":40,"integrity":"sha512-Lli+xOd0aLvyhJEzgUkLa58XVgxeBoPE4AO3JHa+4SrABlxO0oVevcTm9Kle/v0ZC5eUTkETvIIIYEJoTcwsjw==","signatures":[{"sig":"MEUCIDnOsggbRVb5BmQ6LZ7EMckuDeeInyLkIGbjuecsqjC+AiEA7p2T5gmyFiSMJ4kMTRoDsZXmVNliVIZkqFx2MxnqBro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95dHCRA9TVsSAnZWagAAUDAP+wVUA+Cod2fs2N9n5ZI5\ng46zC4GKzDC1BUuWRIUsyZ5NY1OKB0Lfmj6+6s5IaGANLVadNgjzVEh4AMMP\n7qZd8UbyoAtGkYwp43Ud7Vp9hl1C9Ln+KxnmKQq+rwnMUAiFsJ5m/Uol9LXf\nzw9gaYhcPZfiHD3i+KdbR4fdNOJTx37AQ2zmgEpxQZayfNHMatyiLqAHc14R\nYTe0SFq/VTialO1HZciSFJbGp8S+0IDPzBmvPZKhZhCxhvHm9iSE3tIIOl6B\nb58CUNSerwHCIv20vIYStgUc9IhuFld9Fy5XeAplXPwtSpcYBSwKRaQ1wPFL\n3Yw/s2aARGL9XSmvkTSv7IOVBzsYd22u01NlOk61CqRZ4m+xlBtmMkwyvhDi\nk6Rj/GupFwDH3ZgVHMKaWztiKObWW/Z/5+YrtS9mresstE6baIdfszBw3AN6\nlN7K7xzIHrKo5EXvL1LsE8cBK4rJ53qVQjunMpgYnFzF0IoztUK55eP1c9ka\nG4h2w5Am7seV6T23KPWTJUmS722RVTtHitDu2qj73MFKr01/t1mg22tZaxgz\n7DQP1WWmY1Mugtv53h8MMib9gpEU99z9KRKuJU4TgNTNfNttvMqnpLgkof3D\n1lCEIbwDPCjIN9EL4bw82+VaMtlnoMoN/8AyK6mCT5wF7Q2u4cUCTL+NK2cM\nX5rU\r\n=SVEa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.121e1f303.0","@material/base":"10.0.0-canary.121e1f303.0","@material/shape":"10.0.0-canary.121e1f303.0","@material/theme":"10.0.0-canary.121e1f303.0","@material/animation":"10.0.0-canary.121e1f303.0","@material/elevation":"10.0.0-canary.121e1f303.0","@material/feature-targeting":"10.0.0-canary.121e1f303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.121e1f303.0_1610061639086_0.6743857345671174","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/menu-surface","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.abdd10065.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6162f9d03dbb173ff814761a705fc517bb799f38","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.abdd10065.0.tgz","fileCount":40,"integrity":"sha512-l7CyQ5Ba6PjZl5AyeTXR60rU43CvGDEP0HKmJ+nw/ZQQ3kffdDoCWtDVOmdqjQykNSwe7fSV5JSeIktYSZ6CmQ==","signatures":[{"sig":"MEUCIA3TFFuv4/f1IDz5L4QeMRvpB3R861C59kNh+5wpfc6pAiEAwoBXhCZyWwtrDvh3VP2pfPVYtZcDhyjDP1ksbF6L9YY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+JvVCRA9TVsSAnZWagAABEkP/jz0orxrpNCbcaaublEy\ntaCKHFBvEQ36C2TIHS5upF5ON8TdwQV8w9yxM++dzgUA8bZsMRbg+0ohXR38\n09XIAfZM5MBzinO3rlbhwOLs4Rfm7uROpIsKEPabVhbVcT7VioySX41Z7oW1\nqOmJq8e+uv11VK4x6keYoA2/JwVPkHp/W9SBpkd8aUFyOfrOELK0sw+A2xlg\nAAvwd72AwSCT19z1ScKFdiDYZCiPxd98aRkN7zZbQ77O9jIXGgxp/yzIMcfs\nw0KwoE0KtBgmZ+dRLQJyTxhJK0YCxZxY/KNCMTOU6DlqZ1pWJLQQIowE0ryd\nA4TME2s3R93W9krk2n5Bg6vwjxN+5PSts8CuiO8fl51fBd2B8AWyHO1mgElD\nuF62Qdj0UmWCgJpyFvtoOjFY+Fi87fRqIWa9PW7Itu1Vy0qX9G1FaWwnvaxd\nubT1dOes6Wd1NQbxAvLoShuSUNLkgd9akyHEecolflBvL6oMVKRjEUpUY2wU\nlOWV/D5bR3K5c42H07fcXMg63b1PGtEx2iyPu5ys/Z0h8rVIuMpm1A93Ycqm\n9ke0cgFPQaWIVe0TEhWethPo4qtOCQD/FuDLU7gUuDDkiecApkw+s9pUK4eZ\nzGnCth97Eh8BnWDe1as0hFAPN8o7+4u98l6LktaIbLOivuWiqmn19StAm2cA\nerJf\r\n=BZqo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.abdd10065.0","@material/base":"10.0.0-canary.abdd10065.0","@material/shape":"10.0.0-canary.abdd10065.0","@material/theme":"10.0.0-canary.abdd10065.0","@material/animation":"10.0.0-canary.abdd10065.0","@material/elevation":"10.0.0-canary.abdd10065.0","@material/feature-targeting":"10.0.0-canary.abdd10065.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.abdd10065.0_1610128340875_0.17088511373968074","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/menu-surface","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.089de519c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3db8cc64dadbcb333550c7ef7562c8c0f4bd60f9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.089de519c.0.tgz","fileCount":40,"integrity":"sha512-2otz2dk1QLz+HuaUvhW++NtsQiupceE8ZrT8vVFiKERCTh3hGvAk7A+WyahatCDRLMwSJ621+u/0qD+dVZv8wA==","signatures":[{"sig":"MEQCIH/gDGryVztxCzkKZiXpztt4KinRU/g8sOC9aJ+Z2TWeAiBj8IGFKHvaVqeT16Xh1AHZgu97oEXN9/+mOpE8HTBYvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+NrjCRA9TVsSAnZWagAAGkUQAI8i2150YBt6293/zSoN\nBZTZ39+JyoOpBC48h+PwKu7+R0McQatRsu1Um0uw1wT1Ar43002e886QFy3T\nDfODywFOcqaUvy137H4jJCSIBRzLQ/c2o3s/R+wL8CYRVDASQ7Zgvz+GdDGf\nS3n05lo4G06go03p0UZ4F3VVplvtr+wsNTMpmJoYNsklOpJAX91neT17si3q\nXT8m7fHDEwEnbh/AMBWsYEGE29H4g4gxsaz4Lu0tIEhm/+vKko0lX8p1VUPz\n97Hy3wswEWcyGYHnm6FrwfMeii2MX8eponBP1lzp7mqTSRbdrLvaKgaTMjHZ\nehE9wIL9HP08DGX9saPAFHIb7QGfIOKFfQCbGwRXGl88hmvDiMUdBwHVudVP\ng86zOABk6OFwNT9l983Dfwhp6xy5iTWVM9Z+45YvHV0ny/36T/qDBk4bjwRd\nOKsRyNE9DWX/asWagiJzWbUi6OCeuUvLdBSqdLdhW1vCFeN6QdSJKgXg+Gt3\nE8WjkrKZb9stI7R3eutAdT/s0QcAx+EOJ80Eu32Dk+fplR0Tyhw+nmfIEAIq\nhU7kdHCtJ6lBmxDCwJRn4t0fc55OuKyzE5Xi19HvxTunyPy3FTvJkD1NrbNC\n2+ZEmXVa6HSqlEsEuX/apEGBdD2ASJ8h93I4h4ZsjF3u0/RFJ+zOFAYY6pWz\n2lAY\r\n=yR3u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.089de519c.0","@material/base":"10.0.0-canary.089de519c.0","@material/shape":"10.0.0-canary.089de519c.0","@material/theme":"10.0.0-canary.089de519c.0","@material/animation":"10.0.0-canary.089de519c.0","@material/elevation":"10.0.0-canary.089de519c.0","@material/feature-targeting":"10.0.0-canary.089de519c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.089de519c.0_1610144483267_0.6850652460355504","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/menu-surface","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.163119837.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6868fd7b70334cb0dc904b35662e9cf30f5941c0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.163119837.0.tgz","fileCount":40,"integrity":"sha512-XJsPQcOEZ2nZyyFWocx6qe4COhkeRsxBFULJhXsmt/Eadril41oPTJJG3DLo7t2gk4Z+UTzPMOQi6P7H7WjxWg==","signatures":[{"sig":"MEUCIEv7TNF4YZkWoSk8vC323+O4+hAITKcs+01aoaVsncMIAiEAxkuDeDL6bpSodjahpFv6TZrMBg4h8jL9c9aPUIjP9Xg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O7CCRA9TVsSAnZWagAAqWkP/R9DDwDETdE3uOoo2CNx\n4c9/dXXFQPIXlLhA0Nxt28lGkLldqqcbkH0HyCv7pbVZFgcnoGkiAGqLf+FJ\n/bqrrh1WlnI+DQ1jBZUIGfEajo3c2teZIgz2RWSSn6F2dXAh96V8kiKCACJS\nSNNJeHFYeMug1XmPAVthCgqDa4CV39h5BiQyaa4gKMTrIS+0NDaBfXEe0wO0\nEg3DRNyRY+c+qHJp6VEl25gXV5efv5VKk2Dlx2cTg6wgU6kWkNdnQcXlJuzm\ndiQqZAHt0WYjRjo85p5a/5TvuKp179/thH7bNon9Y+YkH4CjWTiAIQdyGFkQ\nT49HacnTDlrj0e6dWUqDWTX8M++AL5Ed0frU3osIYlxnNV4g5kdVcorVu/iS\n6Y/1iEQMlADfQ1MA+JjnPOa7yJBHArcfdz7xy5eeAU5rLchEqE4Igns4irM2\nxbe1L5KUKuAtgP4+HUMdUVbgprKeKvJ5dQlS4Inp12Z/TH66am9sKJ7tNCqh\nVR240CcqL9EgV5oGqiV6x+LN7EGu4ZBcPcCYzMLrDh3F0jGNMwyTQ0IIEdYj\nIuenFaokD3ksOQxwkinVD1RzcdrGdLVSKVSZh4EPYn/Foz1l5lgBCt2iCS+K\nsHbCRZnYDWKHqzSlJLsx8Fwc/r9T9SQ1tuH++X1+M6CeQU+vwQqOS4UUhswF\n4QfO\r\n=KGma\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.163119837.0","@material/base":"10.0.0-canary.163119837.0","@material/shape":"10.0.0-canary.163119837.0","@material/theme":"10.0.0-canary.163119837.0","@material/animation":"10.0.0-canary.163119837.0","@material/elevation":"10.0.0-canary.163119837.0","@material/feature-targeting":"10.0.0-canary.163119837.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.163119837.0_1610149570379_0.12242694817504352","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/menu-surface","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.b8a1a58e4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e5cb315fc38665af70f36aac3a85f01f063d38a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":40,"integrity":"sha512-3QSBACc3LDMyQl67f7li/16pkDO5ck9v8TO32ordL2gi+Ee+23mcYIMlaLp1FRnAAOp1i4WuOMZGgfsU1TXaMw==","signatures":[{"sig":"MEUCIQCMH+6A5ofmIkqE9rURjEINdWSj+iTxy9923zv093ORvAIgaljp0tiGDp+zM6sTqTiGgzJy7Qc7iFCVjHEr5d79/r8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/HvJCRA9TVsSAnZWagAA21QP/2JgdCmKS/IWG/NXv/U0\nWrsj2AOtkKiyR8U6Q1cw7Z9wv2ikces1O7+N2wqmQTyiEWEfgqh18VOB4dK5\neJDRJxeeGW9BF/VuFdK70kLANy7G6cL1pLm0j8I9Mtldc7h37gmzjOXRnq1h\nzCQykgL0BKv1Hi5rgx4sJoImPNak41cfibHtcGYZZtpKeuWSCW/WQYSCbT//\n7uScLg2sAEX3Wgb4+q7+tTGL3GwjMRQhrQzlgqCSuEEKaWGo0i4055MUnI/W\nqxJmmPl5Gli2KUXKd1jX3CLehRK0n9oAcDEGjvm4xSy+R0XHnB+uweI21NZu\ne8EEzES0TQ/laBCazIxUVHuBl6Bd1OxLwtRvOikdlgbX4ZFz7JHgYTyIJ5py\nyX91zO1QDonAd9Dju8cKLXQ9HdA6q8XcR2IdhXNBgCchFVIditPZCezjxMx7\nplrET/A/IBAhHI6TInLABGRRk3j5nvokqdv6kjTizNsWXPl0p0d5ipNR5f3j\nOLyAG/qfWQ1M5yyBovhfIgUK/ES8uLmzBAZeC2tWew4k6zow3LtmeuKPBNWb\nfQcLyXNRmLlax2ZBbADq+4VERXLD5WnPeEz/x8RNIg18HYwpgIkk+DRNdZy5\nTvxbk1fly+X05JhP5nYGypi46peY9EVacBSYhOlqGmArGg3MurU/lT+8RMAp\nw3t5\r\n=2c8C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b8a1a58e4.0","@material/base":"10.0.0-canary.b8a1a58e4.0","@material/shape":"10.0.0-canary.b8a1a58e4.0","@material/theme":"10.0.0-canary.b8a1a58e4.0","@material/animation":"10.0.0-canary.b8a1a58e4.0","@material/elevation":"10.0.0-canary.b8a1a58e4.0","@material/feature-targeting":"10.0.0-canary.b8a1a58e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.b8a1a58e4.0_1610382280616_0.11506424017201988","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/menu-surface","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.7584267ff.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f763ebfa1883428e21b80169c573989946b71168","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.7584267ff.0.tgz","fileCount":40,"integrity":"sha512-ezJxtq8oxDvq5ugJpNZ4IQVsJ3ALWUVVdxPvCwFJfQV2PX+egVusP19xzcia6OiJCtQ87vzW4brQMjaJtBKtRg==","signatures":[{"sig":"MEUCIQDHPTGXQXrZ0I+UKsecddICYS/E/neaIlMZXOi2trzo/AIgCM6E6xRPHu6I8Lgb0DEGrqmGhm/5gnI/Kx1oL1GBkjQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/PenCRA9TVsSAnZWagAAqR0P/ivMXlZ8jlhLmn6iDD/B\nbsPEpX7j49QxblWgbx8TUAgY/f5ej/57uWmQBoI1C1O17oLuqKz/Xw3hkiDu\nLIeoNyaHaJ6cBf2GnSkDFwuOX8F21lzCQ1FbyzWkhx7pQvTV9AQ8+4GTSClY\nlupeweeGVFo240hd3U4um1KTltnXhIvjHEtUcFGrWoIfEsbjsbjyePMTdYOA\nP3yj38FpmbpAJBc64zE02YtaPOXZ7LOiup/BB2BbWdzgJdrOGwplRKK49llB\nv862GbWTwVULEagIjAaT5GperLWKLvUTdDSauaj/uFuzDpHIAndIMSpIib4g\nWQx3eEFFDZzWZ6MwNTQKDWR4FIYhBiCKjH90X74Qde1m5H/oblefC3v8Yz4b\nVWIq700z9jYs1aV57s015mND4Y0sVxZ12R9058+QRm+ZP5FC+txGrRhKxmFX\nBTijA2Pn5ofnUR3TJ0kIV3f5IcqKXabxxReIMHs12L1AnR8BUAuqywkZccqk\nIOQPE+YuNct7Ijapulrx/5YAbm1w/fyULsW4ciwSqEl1VEakyHVrRAngw9PY\nwlB+Ar11VqqyLiV7bd98CaZH6uzN/X4Rj9PJINJGgc5LNsTHex696C6Nw6X/\namEXhDGbBEA0r4uycvcyhCNWMZCikfSLHPO1YKJ1+D9FJCJq4+hBIASPx44k\ny8If\r\n=ttZm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.7584267ff.0","@material/base":"10.0.0-canary.7584267ff.0","@material/shape":"10.0.0-canary.7584267ff.0","@material/theme":"10.0.0-canary.7584267ff.0","@material/animation":"10.0.0-canary.7584267ff.0","@material/elevation":"10.0.0-canary.7584267ff.0","@material/feature-targeting":"10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.7584267ff.0_1610413991204_0.6979125582616881","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/menu-surface","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.251ac04c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49557898aae535a064bb83e696aa3bb1f4740dc9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.251ac04c0.0.tgz","fileCount":40,"integrity":"sha512-kZe1z/XK2ZqUsae/3A8yNQQ/+vVawJbj5F9j0pkLQzN5QCI5NZt5kMcT0M/EWvJrD/cGY86BzjyyqGVNhk5zCQ==","signatures":[{"sig":"MEYCIQClvIANGf0UQ7WjyuPNBPLfm0QX4D474DMYuO4H8YcXEQIhAPNMi3Wgw536e9H4hxPcsAs0kWwtflTpbxkVWdkfe9bQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f7dCRA9TVsSAnZWagAADqMP/1DCSuIG31gjCOrbLS4z\n9HZdsJE/EG2FXlLrsOS8RvYh7XOsUzZBROFtpo9t4QdAe1aBmTve9qxZQMqz\n4X/oUCHWCFIR3PgFWv7duNIG7xsN5hPi054mHENDp/Eh9khlaM6/H+nuHrM7\n9sLG/CvSK3DIjjpygwstoN45ydC5VpP4ph8SIkzudvfiV88Kw8oCI5eaSCll\n6Z3qfELBOoqkocJ1VaxkTfPwDSjUnxs7iPdbUT04JOueamHnw/6+zoAEiYDy\ntIHlCk3EZY2TQa4hUE88oqKkWpsNsQJBnR/u3PjAdOw5Bzg5j09xhlpmIuJ3\n7Uk932MFrNuJH40ul3laublYB6UudOH2cKveCvOzLPL84T7u1KAbrZ03ZENO\nito99RZaMqlYeqscVzxK+yxzbtezMt6cWEDnkx2slTy5lvara66r12eO+IgG\naUidVsOd5QvjV118jZ6OM55ZKcXfpqdM/HeK4fqemSJ+xsnc0FDnuQ47jlSW\nrmEwzywiww0r3AdDRm22zxN9VjR+zGglvbugLnu1olH3SjokMAunqMWEFUMO\nFEqcYN+SkSsMWtwo5mKlAHKm0G5XkkRhaim89bZCCW041xOcmpIpPBtqep0t\nrzR2h1bgzO8vDvPhjm/4ObPNpcBkTy4xF1vLKu6/IxOAG4ltkn6kAka5MSaa\nf271\r\n=xBdD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/menus.png\" width=\"178\" alt=\"Menus screenshot\">\n  </a>\n</div>-->\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.251ac04c0.0","@material/base":"10.0.0-canary.251ac04c0.0","@material/shape":"10.0.0-canary.251ac04c0.0","@material/theme":"10.0.0-canary.251ac04c0.0","@material/animation":"10.0.0-canary.251ac04c0.0","@material/elevation":"10.0.0-canary.251ac04c0.0","@material/feature-targeting":"10.0.0-canary.251ac04c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.251ac04c0.0_1610481372929_0.5914617023742861","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/menu-surface","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.772cc1068.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0f1e9ab29dc1dd24160428e85b7467888c86eb2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.772cc1068.0.tgz","fileCount":40,"integrity":"sha512-hf+Rnv45w4IcpU3Oo9P40Xrl/XFTip5v/jX3KK0lMUv0aAqFP1gDdNNacX8r5Gzrd9ZQQgeEDXpDs92nMl11JQ==","signatures":[{"sig":"MEYCIQDXXSXIVfgnbLvnLjaf2j1r80kLtAZbgbeYbE/cFM/7MQIhAN+2taRAsGpZZJ2smg3ZeZUfcCJUK6PwAuRAMQfDZHCB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4taCRA9TVsSAnZWagAAjPgP/3IZ7RxyBRb99yp+sEEY\n+4DzOul3KX+trV65N6dkKf2shdHBzUfIofMRffGKk7YaC9hwaWWdZiWw1XZC\nOHr9zheDX0vcqtjvPCXvoDZW78MlcH/UMk5UPYchG/Nl5i3dsj44vKFjFBna\nemI6iwWhELxUh2hKDZpSJfgr8kPk8yjh4WdA9aqpdqDHgPngmInY4B9yc5vW\n6OHpAVNznCtDz3RQMj47yIgUwtI/h6B+F48OCt8xG9Z9iPGWDWHKHdoaln4C\ns3PkpXTqIHGhdRpYQMIZMHnDM8oFBLcIGR6HldvEINSeBILhQTHeOrO2EWuZ\naQXx3GTVTw6DIuTeSHd22H99ZUMmXv7z9+DuZdxCnIFSWdgFCtVbXHLAii9z\nkKBycHcBkpIY0AbYHCIgvtBNZSPxHBlszBxug6YVa5Pwwu76WfV0zBvyIf1N\nPuOG0+CeEOS1r41NzGDtIl+aQIVM4Sv3VgIEO5qCe2mokKOFuriTIu72vRJy\nR1bDyd/3K2aZ5FhN1rnXOuUlqM4j8bM+RtQ+rvJySeOujtOwci5WYgg2+Wrp\n7BlZpN9kGPNEJ7CnoCWissrqxyHWPVjQTQV2gP7teI6VwEA6EsQFl4gMeKV6\nMecdesOO9QtWpUYPEWt+QWsJAQ1g85qHVsbc9RPsmYRvJOf0jeWbxszMQhhF\nsWxU\r\n=Fl0D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.772cc1068.0","@material/base":"10.0.0-canary.772cc1068.0","@material/shape":"10.0.0-canary.772cc1068.0","@material/theme":"10.0.0-canary.772cc1068.0","@material/animation":"10.0.0-canary.772cc1068.0","@material/elevation":"10.0.0-canary.772cc1068.0","@material/feature-targeting":"10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.772cc1068.0_1610582873972_0.456434465274264","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/menu-surface","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.fe13dd130.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"449e5fa7b3dc37e8af97b1fc71bcc826386c1dc7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.fe13dd130.0.tgz","fileCount":40,"integrity":"sha512-jg1cAueAGz8T1z889/oUyHk344iiXo52qnsU+V6q85XJEQp7oARsFA1a9E4TnZCLnz/vNGnXgNie2XHo2QwXvg==","signatures":[{"sig":"MEYCIQCHYBoWl9JY9sqmXi0VlipY+ZxORbmBNJ/QhFbI44cGEQIhAKYYmraXkI5L2b4sEoJq5zyhB60qYcuQMbQpsL6xZ84a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5ooCRA9TVsSAnZWagAAyoMP/AoAG8gA/wR95JTNxP4V\nVzEFqa0tL+RKW9wWZaJ+LzeIwbbYOAiEWE3Cd6hIAegvar0Gbt55roghJJ7i\n59C6P/BAwQItRuUh14Jv+okBwCUOo0uKDX/oEsZ5lcoKXDhBsqcrUb9mqnsR\nVRJumMykGrfJKYLIgT34dyoAZl155IrUiFkgfzNwL+y/gekruuwbscRqlmMg\nOZVswu3MhIjm0+FKCGIlLOTmgnOr1Hu4H1i/s1KhC/m7F7nU8vzPhyjyoUJT\nQLYAcHYfBKGTwqfFcEsNOw4c43TLizPyEUA3n6wVtNVGTj/VaKOEe0mYvMbE\nrK0v2hzLaf7vnC8I++n9T2l5UeLtAT1aPexsGRuSSKk/zinZga9CNkigXjSt\nG/HzGAKSukZPIX4ktmh/z01GrXDCosZCCjxeBvJ40xjiF8o95WxlLfsmgS7t\nHwJ0mb7ThHu3lsRVo4ovJRD/1CxiGxkyXopALnswvv+b2ChZxGqAnOYHQMLb\nrS7Gg2Lbu3dpGzSWEuIh6BT4uZiWc1v+l3WrM22MGr7yjDnY3OhKjo9eK/8H\nfl5yXmbmJiqKTCyH55MPqxr1kYEAYELaVu6tNzCcnHcA4cCKpMDffGrgXxR7\nNyV9l7uMkx3KBnzUfzzTHVsgUI1MimvMj04npiwjh4ocFA2SzJBdFtvQjh3P\nOEN7\r\n=ZY/b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.fe13dd130.0","@material/base":"10.0.0-canary.fe13dd130.0","@material/shape":"10.0.0-canary.fe13dd130.0","@material/theme":"10.0.0-canary.fe13dd130.0","@material/animation":"10.0.0-canary.fe13dd130.0","@material/elevation":"10.0.0-canary.fe13dd130.0","@material/feature-targeting":"10.0.0-canary.fe13dd130.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.fe13dd130.0_1610586664157_0.12077422229547796","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/menu-surface","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.c7c5da28f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b319923dd06b6358bb980dc33690daff9295364","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.c7c5da28f.0.tgz","fileCount":40,"integrity":"sha512-Ys76fNAqAJUpzhRi/HGKEuCc6u5o43ZGUzv34DhFNylUQ7Y2+cGNJ4ciM0E2LM4W8vAwhg6bwsAyaFKjcEAaiw==","signatures":[{"sig":"MEQCIB/bZmOqt2k/+BwWutshldT6KMpZZ2XX2evAPd0jWlpAAiAElksUJUnxUQngGrBLMH6FUKLfzA5XtH0b/U9cn0zIxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5/ACRA9TVsSAnZWagAAt2cP/2MS1jBu8Lgp65q6M/8+\nL4s0DVQrQg8F4NneEYCJ45o9uqMST1Y3HWqAizCCHZyKtqIW9jKMcVjSW6EQ\nLM0WEolYW/qISjUXP/QpcPplc2I4OXzUcixkX5yoymoyH17XcGmFy2eLQmh9\nUAPUdO8NjPrDrCcSU6CCX0KzILDusNfA5aEWRuDBULbSfSb88mN5dgdOOnzy\nCEHkTf61AB6aIyLfLj1sIzcI8H+9bMyyZZYDhDwxb2ZA2/j5GneJpUNhgPwz\nNjWar5RjJiEV5PL+nctI+2ywBJ3SzarZqMr+/ANHBG1cn1Ao5mZAQtjdT+wK\nJ9rBYOi2lD5x4PYnPcNiW21CzhpcsYv6j8uNDT75augRf94EJQU7DngKU+Gj\n2lUAatGi7K4yjRaG+xYzsFL9sWqj1hGSRKD6U6nPLvpGqvq1ByDWLtpnlyoO\nkWaDsN4LFVpWYHBykWnlHobAQT3s1R1NtPsq7k14wlpPg4yjODk2yOiMOneg\nTWXp4KW4CoSDq0OYX3ya0gziznL+AHFD19ca+tjsy1jM0Zy2St0EwDUJNIxB\nhOing/KsfqkosvcR54wQeS4VTQHcLo4e4PgY3mkUXglkHM9ASQlwyMbFaG0N\n93Jcz2sWs33dPQpI9MUFPh3hRjHAnI0+M0lKgHVfX2USJlx3OuS/oFQi1afW\nFj09\r\n=drdt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.c7c5da28f.0","@material/base":"10.0.0-canary.c7c5da28f.0","@material/shape":"10.0.0-canary.c7c5da28f.0","@material/theme":"10.0.0-canary.c7c5da28f.0","@material/animation":"10.0.0-canary.c7c5da28f.0","@material/elevation":"10.0.0-canary.c7c5da28f.0","@material/feature-targeting":"10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.c7c5da28f.0_1610588095924_0.1233213471509027","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/menu-surface","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.b2faa116a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"424dfa05d263e041090da6baf0243b7c31479ebe","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.b2faa116a.0.tgz","fileCount":40,"integrity":"sha512-jCrOWca8915yKlZ5m0p/Hh3UJMjJsu4GJm16HABfzzAltwoo0mEtrRyxl8g62q0bpUSdxGJLjsnboopkUOC4iA==","signatures":[{"sig":"MEQCIGqBsE7lj2TqXrUs1wcktG0Ll/QPY86PBpupUiwGnsgnAiALy7GMyt8g1/ks0oeaXFDvbL7Xds+Wcxn9lMDELESxzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzKiCRA9TVsSAnZWagAAvhwP/jSIyixn5j3RYAoWdDQp\nl/hu8mBRnYbNC4hE3YmMPUu7JT2PhwT7W2WO5aZICB63C/VwJS38AfhzbU0n\nGW/bfX007nAk73tjOEehRaCKwFqZ1AzepC1S3Cm64zC6yquHGtPGkRqa9+Fp\nWcIuejIaRvg4Bj5ZtdiSGQwd6i9MrmfWbVmvXaSSPmcQnYQ2gEDlm+5nw4Yi\nBA8KM1MFMb2Hjw2tDoMyY8FKm29ySTy8HKFMOcNy4jqr1A+fsgE8HCH6GVln\nEPOp0u1NElG9KXlizIRm3VGi71fs8qduf3zIxLHQC7gfdJW/KwGw+y+Yr8GE\nP6FmXHuyPxJwiQ3gYq4IAbQCBOvrBMnjShafQFGNej4aRWc8OGI3bCYPd973\nRULQbAynsrzea+Uxw53MD9K5NrMqleGuy+XIN9amlmsmGW9LqDNCNoVrqckw\n5LjieEQwYZj8YETxFjoS8JVstRRdoeg0xL4dPiS5BfOxGXhzcNOmE4K0CXPU\n4WlzRk1nFg1NdAT/sNC/iQMB9AHbIxMXxzuXaxY5baUzdUFm4yKxS2rPhTx6\nACamyXD07nRYvJY4+TJ/m7YD7aKoA/qk6eSOa1oCeqREVHEVEbYLYF5NKKf5\nU1Qz2DjjPnJ/cRflhpj5/VasxvQYdD6xkit1sn+8+98YgQm6me5ZLONJVb/l\n3wbT\r\n=HbOn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b2faa116a.0","@material/base":"10.0.0-canary.b2faa116a.0","@material/shape":"10.0.0-canary.b2faa116a.0","@material/theme":"10.0.0-canary.b2faa116a.0","@material/animation":"10.0.0-canary.b2faa116a.0","@material/elevation":"10.0.0-canary.b2faa116a.0","@material/feature-targeting":"10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.b2faa116a.0_1611084449865_0.030596065580673626","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/menu-surface","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.0c95c9f7b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b2521dc9ad4734554612d1a5f613c3485320e05","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":40,"integrity":"sha512-00MgCHZ2ph80kxRPBjWWz7Vv7BbnqFZZ/JrkUbYF3fd+pZcgokM7OAJyhZ2CYoQSelBd9zmFnk/DHGmG/Qatyw==","signatures":[{"sig":"MEUCIQCFliPUhz147XEre8ckTnRXunjOj9+S1yiCzYbyXKqzPQIgQpUpGmdsBnfRZd3KSFK3Ew6RRhoVcGjVtbprxoNhkG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2M2CRA9TVsSAnZWagAAfcUP/2KHosSr3B2UISSSJBKh\nBJPZDwsoN9AyMOei5PbxkuEpyTN+Y5dLLWSQriKNXwnTVFPle+7Qjh7yvrGB\npW/gQwsQq2MsyQDoYrb3CQXMQiMU7Mje2PpZI+qUrsFho3mkxeUGeXXyP6vw\n4yV5RJprwhIM7y2UB+3qLf+7BT8KL3fmXTaszaIXe3wq62txmA9nrxOESsAs\nOeemMgBDRQpSGy08tB1tpG5RuAo8+4hDYBSudq7FsAauAoP0qErOUpFOB8Ep\nmxA3WpHkMSgam7lD8vswjQCpNiVKjBxw5+k2CBgwq+Q6DFcI+mRf64UbhgI3\nfc9jrXWXX/WS/vT3N4HiAO/Exr12nNPjPOk9m21zOGliNM0eSoBa+XVx7XLW\ndHL+Hlmkv5hEaGjTUxs+K1D5TZj/mNQGBs7/y2WP0Pjv1b2uqTfD0lP/uf6K\nlzaIFUEr7ti7ao8h6Jw6sxviAIrRxWQBUad+sxrscRQ3iwrmwCFhqOfkMunP\nbu+WHJdhEZrAFNAvMj0B56rMfaNhhfkl+tv6qJOC+byJcmjxi9jhknlehz7r\nopxFX0GXH3LS+RQXVGnL/Bynwxvig7L+6QuSTLD3/qVo6NWNQWo43sba15XD\nyfaRGorI8H5xRuSdZGcUD7qxC0Vt9kpBGLQmEHQ7ibAmpZgVufWiPSX6hh+w\nO54O\r\n=Bkbu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.0c95c9f7b.0","@material/base":"10.0.0-canary.0c95c9f7b.0","@material/shape":"10.0.0-canary.0c95c9f7b.0","@material/theme":"10.0.0-canary.0c95c9f7b.0","@material/animation":"10.0.0-canary.0c95c9f7b.0","@material/elevation":"10.0.0-canary.0c95c9f7b.0","@material/feature-targeting":"10.0.0-canary.0c95c9f7b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.0c95c9f7b.0_1611096886477_0.9082849946584297","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/menu-surface","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.5268222c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1460e9026e575c357a28310850dd49dfc0d1de80","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.5268222c4.0.tgz","fileCount":40,"integrity":"sha512-UcNMMlKTs52Q4DjSpA1gMLPQP2larE1AyHFAt2t/dRjogP1NZvuxCexr8rdGWIAlx1M408b0ZGwORsbEzriwqA==","signatures":[{"sig":"MEUCIQCACoeECGsYA84lJuda01u9r9Rcd2sCIJ7w0Dq/X/80JwIgQZ4il5cbGf6KluHQe91g/jsNdwhMGj8Crk8QcQLF8TQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIJ1CRA9TVsSAnZWagAAX0QP/3Iq0pbzXsDutnmGPhjX\nDnKjRLOn9FsnWHQFWQElkpCv9eAIYKXUJw1pt0A1/m/5BiEgsirCj+dJteGX\n9Y1X2ScYBQnqNNmHnTCGh0TSPbcd2+idxCCdfXiOoIN+0BTm5dbF/b2rn0Mw\nMBMIVIf9wPFQWf6e3vH0gIQdV1zs8gqUQqBMphSckiHhbaFNzbO92M5VP81Z\nZ/v/tYQDOichV7cAEvpAi3gQYZq0wynM2uxa02UQzkJoSbyYVfOeH6F2ijT/\nDvbbHWT+WXpbX9TMPqEL62wuO3c2a/Hw0cbwr97YEAvhON56rU7KJo+xUIfO\n+Oo0lF4DysafedLuPA/7SYsvWjYXUCSyPNzCAUIgye3KjYgFiA5A4X0Qz562\nr67UFNr7w/zV1vUopgGvql6R9sXvCbDa7j53Pzkf2JRG9cX0mHB8a3R/qd5r\nhzBauH9SwSY8axT+7tIc4UH/VCr/cQtQ42c5TdtoZ8mghKbhA1qI9sZqK2VQ\nE9f6HY1wanWsx2ywzevbR7Hk1jbA+i2SN+FqQabSrYRQxLQHS3nREK392c10\ndyMYqm8qHmP0ttRI4m0pTr5pc32x/IXG1834lcPftI6n2XrJ81E8g4rMS+4g\nxzxffR06wu72Pfu+RUeCdx4qzzATD6whKmBk45K31h76swgzwohXaRBQiFCl\nw2GH\r\n=4JuO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.5268222c4.0","@material/base":"10.0.0-canary.5268222c4.0","@material/shape":"10.0.0-canary.5268222c4.0","@material/theme":"10.0.0-canary.5268222c4.0","@material/animation":"10.0.0-canary.5268222c4.0","@material/elevation":"10.0.0-canary.5268222c4.0","@material/feature-targeting":"10.0.0-canary.5268222c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.5268222c4.0_1611170421038_0.683923754017111","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/menu-surface","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.2ed2d829b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ffa25d40a9b36a0bbf3c2263ac57782a7e289bf","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.2ed2d829b.0.tgz","fileCount":40,"integrity":"sha512-YO7JPeoBN5ypKdcmsXofZaUCo5YVHynbaruruVDddI1Fodvy1kPjXb3gZj7DkthloU4TVOWnLohS+LpE6TFvlA==","signatures":[{"sig":"MEQCIEU/rdJamjf/VxnPs3VyeFYoHkiRSGJi+Fq1dY+bhwlCAiBgMsiunDr8xzjy7xePYWTbuF5qz3T6vhHcHTwU2B2eGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":340393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLgKCRA9TVsSAnZWagAA+K4P+wWhI7vgi+4NjYyt4kCO\nY4nxxdu4+sKvmagv5vInEfEkTvcbKml9IKi9HFXwTDSeRg+BSNkX+UDZNzkk\n1G19ttJkHPY0xPKfQj142Khi7U5mUpZBkbtmbkr+/vAiOjElxnrxJTuQqqLw\nPzXk7AwBjhx/hrtk36DL6ZUuFyZyA0umgZebelI8kHxnZsdZ90unFWEvpvyn\nQm05Z/9nq/gdk88hB9wlq/Zyik1C0erqa21n24ppkNPV2o6jAtd7/pWH8upi\nXYZCUbOlNljeKkeoB+bdeDgaMQb7/U63u/79TC1zM1+JdvHRgdkJrosOFUEX\nL8Tj2IIWs6ELg3ZMssbhDaqjjrnngU+vbVsE+CkPeffqZUGSU4wXXh3bCoGJ\nRd7PWocLh4TyfdxseyPPJib+kuGe4UdR5WOQSzrX5xwkrP50A3aMha815mzC\nsFh4DUBsCLks5BdaZbRUS8QBKv3E1fWzMAUFKkjBybSE+2AU+TCkN5ytesba\nrcQQY1KgvXfCulck82pquE3GT9lKrtiWaAIjiaKcOn8YwOl5thsO6Zi9J9Cn\n8xuXprfj1S7oA3IEFliyiNoleXH8U7X3JIyHT/ZVp+m1Av/Zyl3xHd6mfX0j\nD1/w+oqvD5wMu7VzU9sZVvEyBkkxM5YZBMgUlyCox+a7olsbxOgpFQusXT4w\nHrWA\r\n=QJwR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.2ed2d829b.0","@material/base":"10.0.0-canary.2ed2d829b.0","@material/shape":"10.0.0-canary.2ed2d829b.0","@material/theme":"10.0.0-canary.2ed2d829b.0","@material/animation":"10.0.0-canary.2ed2d829b.0","@material/elevation":"10.0.0-canary.2ed2d829b.0","@material/feature-targeting":"10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.2ed2d829b.0_1611184137886_0.6592040539353115","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/menu-surface","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.df00c2b30.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13f95421e8493278ed146dc8777c8842b6c4b87c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.df00c2b30.0.tgz","fileCount":40,"integrity":"sha512-nTowibXEA3n5FysJ4VFbo5uS9njmPV0t9TK+789v2DfgCPTAEaMqPOhvSv+taLQfHsNBryEiBJOQ89BbDoZzcQ==","signatures":[{"sig":"MEUCIQCoLTw/veKWhzxKB781iGFAnuVJL9oPOfjtlJLms0EhFAIgapszT1Tz8gmQt1nY0rbosru/eA3S8yazlAq0kABFQ3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdxNCRA9TVsSAnZWagAAszsP+QA3PjIG7wnmQ0ElzvS1\n5nLaBVP8RK9BJslQAO90fS/j9d93YbPIRKooy2GpyiniPCe2w3VJlf6292u3\nZHqjg1EYgZpP54TfCc2+QnSfSLGNJjte/nFrEGQXhE/kgNiWKJuudGKdSgLI\nr3ZMRKLbfXQREfBGTBEEcBcHNVP6TFaYk9za/tg9YKXqBH7J75zf74zqm0jd\ntxXCW1KhkeW3sDLH4JP/67chpAFthaWUsDICX406r90ES0eoNNX/hfh7Bunb\nUVP5S2XbNUNeZDqFBwhkFIrSvMSvCZEnJxsMHe3VVldyHemA9UDW414gnKkM\nniJgkKj1YX6t+8+4Hi7WLbRvvlkCogkDjQJjF8BPnOvVudA79BckGjbA6p+n\noaFh5PhfEUKb4/kei72zKULk30Xrd2GTezQc8ZDxZ8/Maf1JQBHy/AtTajpY\nQCUYiwiKmBcoTftDaND3Im+/uKJeE55nM+OwJAeM/4JetJAjg3MyMpecxTFM\n96T23vr9ybZViI8BwluLgrH6Sd27JOARgDm4tUP0aYEfmFkSbfeE9kbLNvS1\n9WlUnje69phi7Gd45oCZaRKey8YCMA0Pr5JrBjsn3XLYrMWvDsSETdG52thk\ncVG7KfkdxjUiseL4kdEtXCQfKyMRTCZ3lsS+B+01i277wqO5rObPs00Vr6L8\nmUxR\r\n=ojZv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.df00c2b30.0","@material/base":"10.0.0-canary.df00c2b30.0","@material/shape":"10.0.0-canary.df00c2b30.0","@material/theme":"10.0.0-canary.df00c2b30.0","@material/animation":"10.0.0-canary.df00c2b30.0","@material/elevation":"10.0.0-canary.df00c2b30.0","@material/feature-targeting":"10.0.0-canary.df00c2b30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.df00c2b30.0_1611258956491_0.8003371746979631","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/menu-surface","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.fd61b0476.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f1e5b2c610a823801fbb8ae9dc02ec1ec160c69","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.fd61b0476.0.tgz","fileCount":40,"integrity":"sha512-oOEaDMfn8ESR8i8r4T1C0u4u2EyK9LUIVRYS/LXZRmlX17wAKIvEPaWsCwDQa8Yo7PuSw+zodHZJNNduvwh7Cg==","signatures":[{"sig":"MEYCIQDsyLMQCglw5bLNgNX+IwujHgCMvlstiGxp2+vMMXrATQIhAM8bh7I+qzZLPDMvG8NmuzbG8lvbVp2k3DGoyoLFtf6k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd+5CRA9TVsSAnZWagAAQBUP/j2S/bp2VBPomNOgW7PW\n89CXU6HPN9V2sQ8ndyjwUM16BAz7kgFbdjR1OmC3ysF9YfBnuBv0mD6fklFI\nX/Mm03ccuc3/6QqeX9Zuj9aHvbmOVJ0aXGt5ehea5TWe6D64zVKGBF8/ZC0g\n+vYoXm0tVPuzMAQJWj83XZIsrn69QS3glR2Q2cA6cBiI+HxKsMGmGsPosCK1\nllE4sYNUvJeeV0BqDSGvfLbF2JAfatrE2h+ROxDkdMVW2sgcwZqrNqT7FwMf\nlvxHqFzlnjNye8K9HkD95FDA9BeYBewdpKSxKnrV1S33pvRVhgU0T0s5FKd5\nsYP8hGNHEeVEYLo6gW7wk8r1tPzjQjCBCTPylxumvPlClBmL1QkX5kNWg3y0\nNSf9PB9uII7r5lY8EDKaYQc+R0TH49E3mYdDNcCE9N9gL6RJBhlXQYKVF1UJ\n974HrDIw4aZvQBuuV8kk5QjyzJUUAFcI9e4COPCxCmlNu5YsxOaX5TdL3gHn\nnI7SWQl0kPtgouAKJbnaYmdFlTAem+Enw2hrtcE44aHXXEFDViRKC0Ss9bi4\nUn0JlgwTuoVpnqs4nbgSpUZ+oQMoLHkBkxQKyP4/dDhs3u/J5VBvCYl5G2bO\n6zQPA38hgokwLi+VhhyyruEWODnKv6Gx5D9ngLB2KyH71hpAerkVEjmZI1cq\nEy4D\r\n=wBO+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.fd61b0476.0","@material/base":"10.0.0-canary.fd61b0476.0","@material/shape":"10.0.0-canary.fd61b0476.0","@material/theme":"10.0.0-canary.fd61b0476.0","@material/animation":"10.0.0-canary.fd61b0476.0","@material/elevation":"10.0.0-canary.fd61b0476.0","@material/feature-targeting":"10.0.0-canary.fd61b0476.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.fd61b0476.0_1611259832979_0.451822651882988","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/menu-surface","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.3fb3a0265.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d374722f74f2bf50bbc955c990e326eb181092dd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.3fb3a0265.0.tgz","fileCount":40,"integrity":"sha512-ek2VZ2ek4r3wZm/frue0BWcMuTt1NeDd4Ak0L6dWlBlZBEy+2prvGgrrBbdMIGpHcOHMHy1vX8Gs/ep25qFncA==","signatures":[{"sig":"MEYCIQDsjt6kOK8l/PW2YoJ8dPVuC6vOz6IkAn2Q8jGxtLPv9gIhAJ78eBkueC32/TFD1/1jCxp95HtTo374xY940ymtcDjr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChbcCRA9TVsSAnZWagAANegP/1rnN6o1QtabeNfIHz+R\nJJUP8Gu8M3HoxfXntGuan33X/CrpbPaPj2w9i6MEoO/5mohvECHNThDb7JTm\nvXZbttQ3rkOkhLtiSy79VbfNJecITTJCFErtuYYFF8WPSKWzhBct4eVoR2Qt\nEExBG49HGh9kXetVrGhzohyDHvytYJMzz1CYKUCNRHodvTRGOE9QCpazdibp\nfL0SOqd5R+bd61vo+hpcPWHEaWl6TU09o1+K32iXz9vKlDMY3cQoi54v6aLh\nvAAfj4r7nJ8/Hpj1agkvvuukkd8wlv6JeB/6oPXmjcBe6QN3xC4Q6/yBT2ul\n+Z4Jn/OC2nAGLvRpeXSukto5pS3jCnfVgkKhCZjrReFHGMmNeXD0NHZz70c9\nMb+Lj2SvLcUiLmcxGgPFc5B0MBTZYNnlmHHHoePo58q2+9Z4Jm/7EvhjOyXk\nMJxTGK0+M9hburxIhB5YAHjDtm6sKAwzlxPbg6UG+gzHaLcElcSUmlWA/VTG\n9X5JM0QqEYhj92gV/DFAJXhbP02+sCFLsDmUXH1M02rMbYkRB6TyVKqUH+7f\ncdJPVNsyXs9nz9TSGtuUJ8Cc9gAwNvewP6/A9Wo2z8a6+U74MxWrdvxTXVzw\ndGHurGgwf8tIi+MxtDccHs3iuQu5E/iH+twe9CU3MAc2v0KqkFaYjhbeO8fj\npD5X\r\n=/Mwq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.3fb3a0265.0","@material/base":"10.0.0-canary.3fb3a0265.0","@material/shape":"10.0.0-canary.3fb3a0265.0","@material/theme":"10.0.0-canary.3fb3a0265.0","@material/animation":"10.0.0-canary.3fb3a0265.0","@material/elevation":"10.0.0-canary.3fb3a0265.0","@material/feature-targeting":"10.0.0-canary.3fb3a0265.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.3fb3a0265.0_1611273948475_0.8610922908296386","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/menu-surface","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.07deaec27.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"399170bf8b891e76e0f89bfd86b2ee133865e1ef","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.07deaec27.0.tgz","fileCount":40,"integrity":"sha512-dS0Z08tg7EBdWDIbovYQVtpPeN/HZ4/kzhZm1PWlNw6q56p5Kfn4Mx0oinF9C46AX37D3z51+2+bWzghL8mWJg==","signatures":[{"sig":"MEQCIFkTPC2s2UHqBn+xl+pMBXTxp6ExkXV1qsjJnoeHRYXuAiB+o9Bq9C7knu7TBezNM+l57x1a6yJz8ezUX0xWN6/VSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwPxCRA9TVsSAnZWagAAPJkP/3Rh3dAg0xl8SZS6ABlY\nHel+ZIfDFDitTlNvOzOR8QPdcN2+u7to33Te/hR7yScyZJUuKDpNsErZLoAM\nkyte61p+y0fS514i8BvpuURek2F9rLrLL2VSKFSne25LJYoSi8+o3ax/BEuK\nlgPzML+Cwz5JevJCkwQ+vKASqtdSI9fG1o1sfq1HQVq2RraZQ3Q+H+bLioWL\nm9URtWnP2Byk2QNhZUb61QXEcU/XgLtThFl36pkMqKx3rGYYB18PrAAxK6vq\nyyYH/t9FLLWJgTpwXUIgwu/iL5KlavACFTA0Sx3cJTUqUCN3aU3+sEhRcMVI\n9WlqdxxOLHiDQITAQjrD2I24T+0Bvmr6oxOoso0zRGmuBmSe6XaXsUAjB6u4\nMPZr0HeiS1H90XkkpmFd/sDluslAlmjSm2zWRjuLsoBog9Uh4/jyRlwHP5+E\ng/ET+eql6OlCWriKGMaiWnjMlEOcccSbDgqjTVVrInhfCNpfE4VPUeoX5hFm\nJoLgnR1rLqmEgbrJjotdPimODs2eL8omNDU62CiNR8G6oKFQVyHD0nOuEnzf\n9KMtgmYqub6iWKOOv39K0HED2KAj1772iOJ+GdmJ4i3Kp4EppDmLIWt/9v+X\nYGudC7bPORsRSzjraJOvjwt4CxUtPZLki+w9lOa0rk7Wiawd28pten4UTJba\nul4l\r\n=28f9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.07deaec27.0","@material/base":"10.0.0-canary.07deaec27.0","@material/shape":"10.0.0-canary.07deaec27.0","@material/theme":"10.0.0-canary.07deaec27.0","@material/animation":"10.0.0-canary.07deaec27.0","@material/elevation":"10.0.0-canary.07deaec27.0","@material/feature-targeting":"10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.07deaec27.0_1611334640522_0.22195033083783744","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/menu-surface","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.d2959b16c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ead3e8cee09b39d5136223ab9f1960c56cb9d9e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.d2959b16c.0.tgz","fileCount":40,"integrity":"sha512-FBiVWlN+8PgxGLksTFy+3RdvMXeRCDRioB14G1PpEjgQbBZLbN/QyOp3YiNL3jeSLMhoMn9zXCzAK0wVbcBGoA==","signatures":[{"sig":"MEYCIQDN6YUmE6skF1D2ii4PYhNbbwWXm8SUk9Slo8fDHSNaLQIhALojcyj1ejbXDB0x0GD7TZ2pg9nD8PBpfBIfBL7kull9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx8NCRA9TVsSAnZWagAAcsQP/il3FHWPG4ntVpu35CWU\nk3xXPFuUHrzasjjl46oD8XDr1IpyFt+vk4e40a/97ABkR4TwhJyQ573sxFgI\nFZ3gGbBjX8ttO87omqwg88MnIiB8JOFMl9BX32y6Ih64FSfxSgLbsQWhm49Q\nx6IWENW6SHCIrilCD3dIUL9vU5w0snfPK8vahprwf+acYyDb3t5ERJn8ErwD\nel13nB32/d5qarkGUVGRaVqVeEDymthVB8eUROZKkq43ejbmnJdSwkn0OLW/\nMwlG3CLGmWJCV7riWRUxi9Lgch5EgsQFXGxF0BCmW6bmHNMFQBCMYOBEkr7P\neUmaHVEJk0ymKOJz5Zyu11/Raf9Y54DwUlzEUyWX+rulGPyvVIbww+RuNqtM\nW8isD8LLk6T//Sk94REFQqdFLf7fJj6mbIyDWoD1AjS/E74VmJKNVAKOiJ2y\nrHu++jNVRytaC1h8HPS34yL6EkuM4vOGhRvha17BzdIFm8LKODT6vnPu1Mu9\nCZJ90Ce1kLk7lywW/lbR1eabaP5nCjqm3bJ7FzeM4tE80TmT7Evq/J/3r+vx\nBjW9GysAAbeugD7Dck+uyHI+VgWUgZja8AhFb3fusAAkhfzo01T9Fm+Paes7\ndi2oyO5EMOFbDkzOa6P1BEl9O4Ng+5NntgMyKfPPRdIlDFducJ8PhqFij+NW\n415g\r\n=omoL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.d2959b16c.0","@material/base":"10.0.0-canary.d2959b16c.0","@material/shape":"10.0.0-canary.d2959b16c.0","@material/theme":"10.0.0-canary.d2959b16c.0","@material/animation":"10.0.0-canary.d2959b16c.0","@material/elevation":"10.0.0-canary.d2959b16c.0","@material/feature-targeting":"10.0.0-canary.d2959b16c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.d2959b16c.0_1611341581235_0.5081154093103608","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/menu-surface","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.75f3bfe7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6eb589dd0820a4a52b293b27546e8ddd266f21d5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":40,"integrity":"sha512-aA9i+HdmzODGxjy4d84aU0AxyzV5tex/afpCfViY/E7TebuSmmPidGUItHZ4lP5GKz2N6fy8MASGbXh/Y9/fmw==","signatures":[{"sig":"MEUCIAH7ZEno8HAV7c4gLMjxIwL/g17s3Th2vPWhWaSgPXkEAiEAngnkVA0zXYxCmCR0eHUKRT2hFh3URYOgGz93RY0FB1s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1cqCRA9TVsSAnZWagAA/RYQAKBkakqxZHFFVPy8um9w\nCI1UrDYoKBtxoyTDI5yPnMtC673vQaDZUhJkjuqFUY5SxkfOnImSwQicjcvb\n5mKA/pwe8M6CdPknSHMrovpmlSwYQrtjHSOtNGwcY9NTtYpJK/0Ih+xCaLIg\nvWNLxidEA9KsoTw2bjL8KbwsG7Bro4cFFNqRiU77+QI+L2duONRoM/fXVDPq\nFI+ibZzzYAG4TTF5szKZl5sLkGsgD4qHxBL3v78xsnT02XE+osSlTwTSShvh\noRCpL+MTMvlP2a23tafqdfUOcySKboucyUYM1fQTTJw5SWTIkGFpXJ2F05j3\nBAjCqcQ9eGzvrYm8XPSxov2QxdOi4f6kRwyquzjyYZyOdxAco5kQMOVHRnQU\n1CXl/TboEDfGuXoDEdCcctNOzbgLTFbKSo4vEHuwxE/pEVtEPV+iUjdOV+qW\n52k4xWWzY4Wcl7tRFYFI0cJ+x3yGW83Titz/X7r2Y/POyxB7lkQ2edtiiB+m\nWi8lW5/9YHObVWU7hdha4RODz9Tbfu7jXmS4iWVszqCVHJL3NgCQKH/zKQoO\ngT8/Lh1ah0heRLiwqhvvIOUrGBLM61fk0wEQ641eLozBMUB5aqNde1moR2wE\nvisGodyzwntzyvIoNltX3RzK8AN6aRS9grPW07IpAo1i0lgIOy2h8O6M8sEz\n+xoc\r\n=sXUg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.75f3bfe7c.0","@material/base":"10.0.0-canary.75f3bfe7c.0","@material/shape":"10.0.0-canary.75f3bfe7c.0","@material/theme":"10.0.0-canary.75f3bfe7c.0","@material/animation":"10.0.0-canary.75f3bfe7c.0","@material/elevation":"10.0.0-canary.75f3bfe7c.0","@material/feature-targeting":"10.0.0-canary.75f3bfe7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.75f3bfe7c.0_1611355946195_0.34635132307044936","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/menu-surface","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.b9adb7a0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aaf7d74b2f03f5da58d5910f4c35554d1f40d524","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":41,"integrity":"sha512-lVcj7emDgZvY3kwi/DN/4Ewy11W5BFmDG5sVwc6beCZoSTOfkP/+GvafDsTbeeG19V8dgpzvGuRyy7o2Z6Ivew==","signatures":[{"sig":"MEUCIQDcRTPSJDx64XnKk+O3Tya8nH+im56iAJoQznWqBUT4mgIgCzy/HSglDys45ZaoopbbN6aUZXJ4Pkd7SCFYaCrHsOc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":345212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2GQCRA9TVsSAnZWagAAEqQQAI2J8bHnhckd+R37Obko\njZ4jUXbTEuNLXxY4JsA3LmDnfEmBHAtvkbOJLnrQSV4ecHqwbJ3XmZ2NHN9b\nRhyQot110asjRD/04n0K/VqQUbD9e9zbMUJH57X3lhTPG3ieUNmO4sQFtx2I\nsydQsXNbN/NwL4pru3SrTryv6WjWtgjgZrp/NXz+emFEg0BfqabfTsZd59U8\n+h+8IwNYeGeNKKWYT1T9cS+Zr7l28ELrTXIZbfi+O1uoZXj/ymssCYvKwsiy\nKBU+6uQ4HaxwwwZNZdm4Ce2jSOxapGNukeG0XgxrQPjxQSNnmZXqdYNjEUlP\nOfFEblS3Lg9yse5dS13sKeatAuTMCB3I4iU9fonNvqmPEB2abypVwXiRsVBu\n0NqGWFg86PUvcRixso3UXmGxaPE9nCKOvs3V3MNj4yJyQiQgR8tAwv2S9+S1\n97vHJ66th8DpphC2ZWSwFbfKmicsI5qRqQgx/BKdR7lHd3No/TRiOPdeclRf\ngx3Dky4eKF53oEEM3NQ+PIG/NzN57EAQIufmDumtmRYhX11epYHUcxN47cGC\nCoXE3aPinxzHIV7RDy2QCxm5MBQtGv6m2JHvH6AOpwhy1aqE2TZmeqy+7d4z\nzmvKsXjf4CMbhfGR8Zxi2Bicnd2WSZ21jMI+Y6jL/PJJxsHyKZRK0D00/ng0\n7TCl\r\n=khJa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b9adb7a0f.0","@material/base":"10.0.0-canary.b9adb7a0f.0","@material/shape":"10.0.0-canary.b9adb7a0f.0","@material/theme":"10.0.0-canary.b9adb7a0f.0","@material/animation":"10.0.0-canary.b9adb7a0f.0","@material/elevation":"10.0.0-canary.b9adb7a0f.0","@material/feature-targeting":"10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.b9adb7a0f.0_1611358608339_0.45363961014674214","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/menu-surface","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.d29ec2862.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"149e58b31a360a2a4674ef13309e854582ea1e3c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.d29ec2862.0.tgz","fileCount":38,"integrity":"sha512-EPSVgxrnN098Cb7W2yeOq7UFr+mIu64apivQ89Ngt2NVSuzWcXiWIa6DFGFyn0E8NqaG0Fm+LAG/oH/QEc9crg==","signatures":[{"sig":"MEQCIAMlGLF88+UW2KhD+DzyRhJkFl4MfJP47SfO+I52ag9lAiAnlKfdk3e+VmjKrF/Rwx/G1+XNxYKyS1jcjT4gvzHY8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvDfCRA9TVsSAnZWagAApEMQAJ7w/CsoCp1k2Kj4KvyZ\ne4kpaav4d5zimUtAuR/QZ1hlVNIpRqvIWUi5qWdRZXWDTUQ/V5qYEWf+dS6V\nMTCFyJZ73GHu6ROAUQuaLdwLkOzWyP9F7x+whKuPAHhWBjHrOgZXFKOcasze\ngWFqWKeFsAFt8BGUENgTkkfMNWpXp/tHqAye7W9UeEMFdZfOjbfYs8zhOr0m\nA8qPHQGRMW9Sh/lBqjg+tQRwVV47MxCiTDb8g8OkWdYsnLiBikj81KId1S7D\no2+fozU8Vh2YYqb1lqJku8Wuc/NCg/kd+RF1aBCV2i1sxMd/Duln+EzPs4si\naoSd9BNpi4Ayd4Egbq2wAcfRNm+VEkoI7UaLRtaaMOXrz0hkaTHtweNm8n//\nem2md+KW2rtGb4U7SH+1rRLaF6bUOsTESePAAYQ8AexoDEsKI5MjWkF08Ca0\nMkXtL4QLCE4HqVTbbNv1b907aSx1+tESgk+u7qwA7wANTVwQ57erwioFalrD\nKg8361bdfZDrrTeiN7DnlCg/x32USlT9AOfZWbDiC3awQPnNzHKg9D0dzEKg\n1B836SHepaiVqLpGpp2qX8OwHqFsco0XbU13zWQbgGloVNNwymLQpSGRTxxN\nlafvsnna0P1zUXRvVOnDgy53SBl7uzyftUSZ+0LKhXfBNQWuPHm8UAl2Tltx\n1EXk\r\n=Pj0K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.d29ec2862.0","@material/base":"10.0.0-canary.d29ec2862.0","@material/shape":"10.0.0-canary.d29ec2862.0","@material/theme":"10.0.0-canary.d29ec2862.0","@material/animation":"10.0.0-canary.d29ec2862.0","@material/elevation":"10.0.0-canary.d29ec2862.0","@material/feature-targeting":"10.0.0-canary.d29ec2862.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.d29ec2862.0_1611591903006_0.4301530093542447","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/menu-surface","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.96be07c68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efe65741e96106937f97dde8997ead8c50398208","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.96be07c68.0.tgz","fileCount":38,"integrity":"sha512-VUgwvnD9yPfaOLlY3J1Pk4DxcFp9f9l4GdUgmqRX2l7bSmQGYmk6EfI/VhPq/jFCIiWWy1/+If3sj+JrtmnDsA==","signatures":[{"sig":"MEYCIQDPl1a5pdaaOWd3xLPwqG1KXfJx6Gwe52bqcH3x85ETyAIhAOQrU8FPyAVjbkjdiGUxhpuZs6iygkU2ABBzdRXVkXSx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD14cCRA9TVsSAnZWagAA7j4P/1xvzEw2yAMk4w+zpTUA\nl921Ns9rVIO5mgXoTxzurcGnWdor35YmUXG9YrXoM/r4x4AxqwDufP6et3KH\nLFL1ksuT5sAU++3b3/owlC+I09Sxv9HBAYpPwSQN3HJvqzRDPE30Tvh6IqJk\nqohC8IFsVhtHVknzk6uRB1gJV99Fcz9djI/jAVqsnBrhYB9yOmIEb9UiRVT0\nzmCf7iEoENV7rJXGHWRsKmT2bH2cO8Px88KlKcaXNAxsrZaoiDuzS2REUO/9\nsS6hKXAKwToTeK8idfhniN5Zh/1SJd2ljeAwTRjNWOGTq18I05VmeczSAQQ2\nH9ZlMm5CyahPyCNWUsipTNO6Yv1VV83BtMVxRaeZDSD9wIlZYMA3dBmkkYAd\nrn25OotEf0xSXRyljRkWCOzT4Z5h4hcYRvwP+/omiY+dwk3n3cd55bzFFSHl\nKT2htjAD9oBXaBCZjQbaoWLh+QAU/P0mX/STnyPLd909Js/wDnTXwE1Ia/so\nvk5ILEq5rPPrG3eyyaudw7CiZhdHyzmO8r3/9kB9iy/bWuPo5FtOgNUJEC1R\nHDsIES7AfOMm4gTncSB6Um8adGHI/7lT60B1FyUc8Gnfnli8b7NwkjgVQqF4\nteK75WsuUqvM4q8GL2VhOBxwiLK4OnR+28aiSLHjOf5H7GiGlk6kApC5Mxdz\n1dWj\r\n=tHE6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.96be07c68.0","@material/base":"10.0.0-canary.96be07c68.0","@material/shape":"10.0.0-canary.96be07c68.0","@material/theme":"10.0.0-canary.96be07c68.0","@material/animation":"10.0.0-canary.96be07c68.0","@material/elevation":"10.0.0-canary.96be07c68.0","@material/feature-targeting":"10.0.0-canary.96be07c68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.96be07c68.0_1611619868454_0.19211724136120778","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/menu-surface","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.e383944e9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"354d31e7f02d8ccc4de723cc9c6ec2957db957e4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.e383944e9.0.tgz","fileCount":38,"integrity":"sha512-YAYyrUw5vz7Xl4UN8EJYyRnJoOaetbNcPwvzQ9dH/PZV6PHGl/ufWxkwy7UXvHKpmEqsp7k9Sl1gP1k/kALssA==","signatures":[{"sig":"MEUCICcwHZZceUUuy9tribYqd2vjJ8guggxBOGioPPa2ZUPBAiEAhPjGavcUJ3fQL3olsVVnWdCGXwcFiEPdKV9lfmrh97k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3RSCRA9TVsSAnZWagAAPfsP/1UwJsoh5mjMLN6HXz3o\nzEw7P21mbs4yTpnbt+jM+6R2AEbLNFFwMPkrIB2g3rfFGd3lb5n7vAjwF/7K\n2kAR1FLUejlUMr/iFFZ8hXpFD8DzElP3G6kx9Ods9U76RW0lpIa1bNlwAOU3\nDrhV5ysk1xYTAbpbyiGv7LwVHy0gcYWa8sFTIiJJRrgfPJwSG+vq9hEvnsCa\nm+L1MA8h0PvhJfYTLFCCRSzbqCDOdsIhfaSwPCgibFO8E6ReAxXIazlFVPg5\nyWcyBlKdogAV9L0kTQJU+8ixz1eQp0p7MbRCBPvi2MNAf1bOg7hos1a3cByS\naM4rrLby4Rem3iCDK8wr6sk36/dqFkMboOiPvyWpjyNo3knOFfQLgW9wm9lk\nCHnVhWRH86WwIW7MqEKdb8HFoKkBEIkAi4OmyXCnpSqftnFrZdW3wrqVqHmM\n4UtBsGC5xlJx+CS1TTKRHcv0+qfYTxt/GVRQhMkn0WlW6hnjK6dFIFLg5jNF\nNZeuD2+w6OINwkoxByixKZkUi5nIjIqAZYAkkRi4yytrLY7bd7PiZcm+XJdb\ntnjsJlQd6kOrZQPbzCRdCTcEFqH7ZrM5geGlFvn17Gv4ylwGMz32sf1Po38y\nRHm6PRACdiydTPg3ovIZ5Jn+Cev9UGmhJ91/0hf42aTcWa9V1cC2RG5Vix1y\n7/PV\r\n=UxY0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.e383944e9.0","@material/base":"10.0.0-canary.e383944e9.0","@material/shape":"10.0.0-canary.e383944e9.0","@material/theme":"10.0.0-canary.e383944e9.0","@material/animation":"10.0.0-canary.e383944e9.0","@material/elevation":"10.0.0-canary.e383944e9.0","@material/feature-targeting":"10.0.0-canary.e383944e9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.e383944e9.0_1611625553686_0.6915082388524827","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/menu-surface","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.623af861e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"486719268a123d0e0d945661060e596358265647","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.623af861e.0.tgz","fileCount":38,"integrity":"sha512-9oN5UFPW0htquxrkS0GyDQVWhNCjTkBpEvtzi6L22kdofafB/d8qYT0FxFvfNiLlPN5GGcs/GcuS1enyeoPIWw==","signatures":[{"sig":"MEYCIQCifvCJWKGscloR2azSX30rdjfsf7peOhr+iLQSDYURkAIhAKSlEYQ//lToLSQPYbOfP9+jYhHaGA7++LCgDu0+tfoA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5CCCRA9TVsSAnZWagAASp8P/RDfvHKGOiw4v+AEiudJ\nJ19hxa8dRagr48FLl5efJzySuu0Uxtu8jUL078IxiJZFR3CdMPSB8P26wj7g\n6+XCwWXI7O9SzQfwZcp1+/+VrDL7dPMfY5amiPr4xmsxy/oTzXnCoDX12MDu\nwjfFWDqD+g85xXHUMHdxOVsFF+z+hkGdPkM/kY7gPjbp3FYMkcWQt5oXU9kA\nVFdKH7m7xPpgU6pGYw61gmOB0Ru1T6zMGc4DvV/aymfPh180CHH735QHZ1Zh\npKJSGWs5peQa/IEjLV0bi9b6XeArD4sP1mLoIEP4Apr8Ic7wSlX/dcMgYlA+\n4d2g4GZzEF6FZQDP3wm8FZCGxmm0VPcPVLdfjgmo/f7RRNBCOBJLEG68lP68\n71W4Iyu02gMZbXsaHxIrWPPP897Uhmb8fMFut9qcWOiMLSgnjcwuad/cBsbQ\nMWkJhfs0M4VraBemWdyhabdpvyiXo8hg61ktrTMdgjp0Sm+B0FmI88beKzwu\ngPBANsm0N1WJBqTfTVJHXmnXPNDcv0/SMEEyJSWpOk9bYnZ3U9cC/iSinKqM\nEwSBUcF1WktQs7OeXWtdtdpFX2+KMJWvTYyhvX/tlcIIt4PTGdd38ZjwhXf+\n47NNltVdElMyqG6sn14fr1ex+wUjB0xD7UlyzV4iFoTZ8SRlugbEFoPjtBI/\nbkcC\r\n=9t30\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.623af861e.0","@material/base":"10.0.0-canary.623af861e.0","@material/shape":"10.0.0-canary.623af861e.0","@material/theme":"10.0.0-canary.623af861e.0","@material/animation":"10.0.0-canary.623af861e.0","@material/elevation":"10.0.0-canary.623af861e.0","@material/feature-targeting":"10.0.0-canary.623af861e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.623af861e.0_1611632769696_0.48996773339830724","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/menu-surface","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.6863fd43a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"496229b28e47b57c4307295f7fdb318c2198c5bb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.6863fd43a.0.tgz","fileCount":38,"integrity":"sha512-xIzUGJXNijefIvm3J07OcWCXLyEidObgqKl+JlWPe48r+2RcLLealeAu0ZfvPdIUk1S5VKAh6bYBAfmLIpNc7Q==","signatures":[{"sig":"MEUCIQDpFceT3wQbpdMBHPbh8vaECawtwIMEqzPFiEByQjEUSgIgO1a1o0ot6T+qbyXVATVCDPXsM69E6aHidmiYn2vAI8k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIrbCRA9TVsSAnZWagAAknoP/3RVjj3xqsfRtOW5LIAn\n7q/1cYbb5WtyxtmrzRSYzWQXQzNPZv9dG9W2tPvrcrLAAg7FPnCGisT6mqW6\nOreaJtSMONB4sw6oDyOSt/G0naOoN/hmWqtxBF2hCrGZjrnA5Y1WZPH8cu5f\nDrTIG91nsDZAScm0HJMntGAcbg5YzOyZx2mU0MsyAFqNS9mtmyfEttxuUAzh\nhLK9Ahfwb1o0grg0873ZgBb+kt0xsyrsGgWV35layC7ucLecYm4NX8GODhMQ\nXUl0rPbgMPgZvYG5tovsWBp9/XbqOVkJ5fFm17NjSN4o6A5OtA6ENUhAVw9q\nyVCoZtIwMoQ12cz1BVqtJ5mDOfP1gw7lenv6+EyOtXHZSLn9f8hvPs3ZNXq/\noUpPv76knR6NmKw1HmVLN0g9Nqd7idbmzJzcQBS6mFvsJ8Dlc6ZEE1ICItEf\nNoXKItGD7DdHf/p4+7dRNBkAEJkBfgr3ND0OQ5WA/VeJ/++PKX14tvV1oRZ2\n0OfoZGlnKBfuj8+oeS+faCW39OEKSQt8SMYzb+xEMDP477ioqjMPKtWPG3PB\nJO3CYjocYpLjaoGCY6rIjqhoVB6OOIeSOHnHBaZtMnKjICgLiYvl44ubjH+l\nyDrJR0XHKBZflNxUiT2nNpafAxDjXAcpnguGx3UUpnq63Se7cODZz9NOP8AU\npXOC\r\n=PtoS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.6863fd43a.0","@material/base":"10.0.0-canary.6863fd43a.0","@material/shape":"10.0.0-canary.6863fd43a.0","@material/theme":"10.0.0-canary.6863fd43a.0","@material/animation":"10.0.0-canary.6863fd43a.0","@material/elevation":"10.0.0-canary.6863fd43a.0","@material/feature-targeting":"10.0.0-canary.6863fd43a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.6863fd43a.0_1611696859452_0.49644602713400854","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/menu-surface","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.ea55b87ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ebbaa52c88888c6548f103ebd86ad841fd1748c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.ea55b87ca.0.tgz","fileCount":38,"integrity":"sha512-0ZCZLoUgLpwPSVkMHp9mm5Q1nD74jTU7MEwWtqBwrdKPHpuUAm33D3PhIO+7FyfxudndTs8LAtCwWBj4IYiqOQ==","signatures":[{"sig":"MEQCIEmLGiA/VcAaubHXhFNMoYANje/azy5GgMBxFrpI4Vv7AiBB+oTRnaK4v9jeDNJsi+EvjfHPHOGrSF7suztpaQtimQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKn5CRA9TVsSAnZWagAA2iQP/22eGH9v/0wX3okXkXgy\noMyGqB4yWJ26N/qi24JnjTVdoZrz82sH30LKddS8Jh+aacwNB+D5+OS6MkxL\n8zLmDapxTwvPYfoWCsg/huHNcsxTuifXfgFbNlX5QvN1BJwuiZnMFYE7gAn+\n724phiwShPck2qlnuO6WbD1Fu9a/8pcI7Jnt3LfyU16r2lZbWYXjqHLAiZPs\nOYjzkr0ivU7c4/u8UVgyUSMLcfhW6sj0FZGyraBsCo4bc8K95Iguxf1rSJ5T\nhSkHVQIfit2fWEtvkc1UGWbiQB+5NI9ve5aaFGs9C8pJLJ2Vzb3GMJmKCVEg\nY9eULbyH2cYsIdbZkyaG19LxxyfpkezdqJpF2/BGfIRl6BjlOqyYT2Bq9Btd\nQyGpv4ULxh8gNPXw4e6JW9H7EoCc0EQ2eTkHTQFsGhHlcZJtUWlX9wO7T1b+\n6YkXYsgxNxYxNyo1lAohG/w4W3TR0ZAMsjdniqPVXjMi3fgGTFB2cz6byyQu\nOhFls4EV91QXLcAcjhONVGS7fBT0fwdXdHlOiWB19TkYiVnMw9NP2AXuuKzR\nfadOzWjIK1lDIJbMBaK2+VDUaF3wSxnEjREBJQATKG2sNvTnypvo4s3N8lh5\nN3Uc3JzID1bu7NbT3ZOltTtSEdw/ydAmZ/wzi3XQ7JoKiGy6z4dZ33HgYiZz\nME0g\r\n=bmez\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.ea55b87ca.0","@material/base":"10.0.0-canary.ea55b87ca.0","@material/shape":"10.0.0-canary.ea55b87ca.0","@material/theme":"10.0.0-canary.ea55b87ca.0","@material/animation":"10.0.0-canary.ea55b87ca.0","@material/elevation":"10.0.0-canary.ea55b87ca.0","@material/feature-targeting":"10.0.0-canary.ea55b87ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.ea55b87ca.0_1611704824844_0.14203982074814014","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/menu-surface","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.e902ff05f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d655abfe5e2f3a6211da3c38d562ecbe8bc9f65","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.e902ff05f.0.tgz","fileCount":38,"integrity":"sha512-tUgpoxbwDpKQmEcEwjZaQkKdRwIJ0EmqcVz+CULDalr8yymw7BzyIdf6bXDO5JCyoqkXsba1VJxhcUYK4wkDgA==","signatures":[{"sig":"MEUCIQCtHiVFjvDDXd3kITl2I1nScWVo13iipgnTXJayAib0mAIgNgt4p5uh9o3ksEwubnnY8mxQoZCKkm2IVPUmEWts9CA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK44CRA9TVsSAnZWagAAQaoP/ibxW1Fjni3Up5BnCPFK\nBrywdyx+sTzuLo5FfmoFKUhYqH3t8dk+VtLFUdsejsqUu1YHyNXRFLby4taa\n8JQesqgNwWiXnWOgDCjg11CunAvMSMqKXtI14VhvkoT0HpzZN8Ms2fovFUxg\ne00HAYau9ywzOupC8/L8Tc7LXPa0xnc3tGFSLWyansx8BIEt9sjIrUOc3yMW\ncpQ02NpYOAs3yNdLSv7OxBcOj2vo309xJBlDm4/zPZfxgfaphSLiGaS4jfr0\nm1nol02AyAn08XnNDdyxNfXLkLPm6oRYdDHI2uec/F6yEJpD8ruo+1fLWHj4\n915VQV7ccSEa3JY0G9TmQvSDnkrGQVYhcuzBI1hoINMSkb/AD8CU2cTjFk0N\nkcTo6SXZSaJNNWDGk5+xXAnt2deF6DV2BzVrUUZG5bM+y+ywHifyxn1bb3PT\nZADJ76+XBxgw8Fq5MdvkRMHbTZzR0a1SEuzFhOcJIcKul4yVbkcJ+QE7BQPo\nqtGwE5ZxTShwKPmLRrPh54mrBt5DFZTEkZfjT2gwTMkxGGNV6mKY0G1+worG\nVUMRUdOVE+b1fULnjzMJ2MDzGQ2C9xGx9d+JFlVpuIWc/G9QNONcSU2qBKwL\nwAuk3KXAB0YtuvY5dkQ/r1bpf+tF574e6w9FV8kXQ0Y1elIU/XJopwRm2xXj\ndBjY\r\n=/7YH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.e902ff05f.0","@material/base":"10.0.0-canary.e902ff05f.0","@material/shape":"10.0.0-canary.e902ff05f.0","@material/theme":"10.0.0-canary.e902ff05f.0","@material/animation":"10.0.0-canary.e902ff05f.0","@material/elevation":"10.0.0-canary.e902ff05f.0","@material/feature-targeting":"10.0.0-canary.e902ff05f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.e902ff05f.0_1611705911941_0.785235187601508","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/menu-surface","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.2c9fc538a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e61287a4225aa58dc5ef7c7751a5fcef0a2d7854","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.2c9fc538a.0.tgz","fileCount":38,"integrity":"sha512-hClH0ocsDU/EwnvsBlNHDYfxsq0NfuM360Amjmx4qZzhIeg8b4wItKQPWNj0lwCKNK0BO6LeUVNWS6Av3AxLVg==","signatures":[{"sig":"MEUCIQDXhLXpNP3q7cAuAJ9SkUbgQnJDO5lmwTcjl1AQe8sPuwIgARIAnktF7ukGkTJaX1j8O4LxYtxvNmobKg+cLVIBZVQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELOhCRA9TVsSAnZWagAA7F8P/0bUVdZCv84h7owM1v5a\nRNzzqpxBqN/CHRaBZurZxeFfAP4gUH0U1xlBSCMFqi32UmJeLUwZZ/dVlGQk\nma5hitIs+bgz0tqnkiIVnOYN7VyDjoNJqSPdJEE+39cdS3XcACfNdSsOlXYZ\nvCUxXWnk7ifTieAJ8EGHZyIN/XOguVyr7exml4T0n932ujMpOlUwh8W7QZIW\nXjmEII1ErX73v0/FV3cR7hvLkA21T74K7sgcMpO4WrecxQy4onxgTZiSdvcd\n4srV1chjnFd8o0nJJlWjvETbXWgWaAoh7pOzIEHNfMJEp4OJtAx1PbqyOSqt\nJ/c6b2twiLhwPq3wdImEHjp76m9whVbnPQA0drs8QjSMZC/qsXJzR8zkRToL\nTRdBMc97kStEkeaNFe6b4hXOzRFBcg253hkqxwjPAEKIzAGUHuI+vD/DiOOf\niXS5vX7tDnTGqUWrKdEIJpN3LHLsbhDrK2stwyYzXHhLJns2xVf9jYMQLAQX\nU46+2qs4iw2zguR8pF9GzZQN6oYKyr8R8XfoTrqbHa9tsdj8Gd9h8pj5/Wb1\nqSnMh6VGuLaBsKZID28C7i1wkVawzJ1UKnir7dH7g12JtsAy5SlL4tCo18jc\nA+Zz98rzZhLo+bXxrPKJBCIR8rtJ447MdNEKOfHFHBMMM7bV0zhamwXZFu9K\nITw4\r\n=n+Py\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.2c9fc538a.0","@material/base":"10.0.0-canary.2c9fc538a.0","@material/shape":"10.0.0-canary.2c9fc538a.0","@material/theme":"10.0.0-canary.2c9fc538a.0","@material/animation":"10.0.0-canary.2c9fc538a.0","@material/elevation":"10.0.0-canary.2c9fc538a.0","@material/feature-targeting":"10.0.0-canary.2c9fc538a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.2c9fc538a.0_1611707297015_0.533838638298155","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/menu-surface","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.6bf56aaa4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f15715ae93b1923c48fc2e6e7496b62ed5f0a69","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":38,"integrity":"sha512-2W2kqN5jAoPT6HSGitaxH/VrboiXpiT0684aRLQLbqPYjUB8qd9+o6n4YXHK1tuqgS6tGyqNgVtgmKhlYEdymQ==","signatures":[{"sig":"MEUCIQCCrGquKeY2g5kwBVAAK3SZ2MYUFDL4XFM4MgUGtRVDSgIgfmonJsdQpOjHH07iEYFY80BjnvjKsPtHgX5hmEM+m2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEMAICRA9TVsSAnZWagAAiVsP/2DTLl9tJVZ5fsqtCYur\neWi0NBGhLrVnNtyGYt9hQHsc9HUwpH8Jx8ULgTRahgS5zt6OJehQG5AYXjx5\n2O41kuwgY9wBvx2xExVHm3dO1Rqk5jBwMJcunJXHfoHev6H9ADBZSe19X8xP\neY7XVQbWcG7S+mYiK5r4rsTwhc3IfietOMpKZaD7h1kv17st3S6eFnIZn4ge\nDpD35UYV4B/wZSZEHgRI6SNqD9XJ2tUd8M36fnSSsg0rOIB9ewFl9u5szvoE\ne2eYdtkgAXl2RUn9iqVbaDbWHcqrAWGGyuNlxtTbPL6MEsm6klnjPWBc21HL\nXWX9+tBKsfGXpPhOOdZ0x3iD3KWhIR3eBGUWP87FhOokUBQl7zlsJBnx35DD\nh/1CDoUtVlfWZKPFBiWGEFEctSY809y+bRYij4jJLGbbjfLNq+ERu01jlXaF\nPAG4st5Sx0ThSaq08fEtF/QOLE+nRkUEkKSAOo6SH3uNRDp28Goq07QLL/c1\n2Qhceq3pSARPf29ggXA/AHc1FReT1A37Pq1SSGJvBBO7IfFGHeTazi+YoEN9\nGumK4ozi1QT/6roRyiet/DbqViDlqs8+8UPgm/mJ+3EX5l6senyVCl310kW2\nyN+RvPpP9jKqVwIx3HHYsVvh07cKjrArAUg92z0gsH/LUb5imW93uAB0AtZO\nxICf\r\n=VVwW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.6bf56aaa4.0","@material/base":"10.0.0-canary.6bf56aaa4.0","@material/shape":"10.0.0-canary.6bf56aaa4.0","@material/theme":"10.0.0-canary.6bf56aaa4.0","@material/animation":"10.0.0-canary.6bf56aaa4.0","@material/elevation":"10.0.0-canary.6bf56aaa4.0","@material/feature-targeting":"10.0.0-canary.6bf56aaa4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.6bf56aaa4.0_1611710472291_0.5470929029922547","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/menu-surface","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.994873795.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6856b366137b56ced58a95713dfb17ed1453e7d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.994873795.0.tgz","fileCount":38,"integrity":"sha512-w8xX4v8W4ntLR8vVtLg94ZkmC/am6oA5dBmudTey+49eEMcqnVaVXaHq6mSNpaUeETLlyuywaI1FGQTjyHuPDA==","signatures":[{"sig":"MEUCIGo1upCF2CrQDkwRLz85k/zuxWGIIj9rwFmfHlD92ZvOAiEA7ejeMMB1+KufgRP24h5OBjh7R+8q5E1iRHUGlZQKglA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX4QCRA9TVsSAnZWagAAW8AP/1UYN5yWkk9mCwCvCl8m\nM030syUqlrPr7f+w9imjpYSVgCxghbht0f17VpH+QqveBctULHIHJwk2Q5dw\nceFmulcTzBvQ77ME2AhYjGLLk2hWngY1dlbsWbvnBV1VOWQisbAK87Q6AGDa\nvEKvJJpGM6/hZnD8kSWvVC7dKEJI5eCjAGM8NRgqTre7G5lEVRLW1X4R09Mq\nEakJpx+e9Q44eJ5az13WY/n2MRQMGYsEe6qWqfKFQBFIZPGqL5U4L+tM4QBJ\nE0pVsXaa4M9pvF78QA8C684PWfxVj3+HMEIm9aDMu4zGmzxY4E3HbEJR5woF\n/QeW1Wgtb+YyexToG6Xh5zwVeeRVj++Nz4U1l1ugjaLoK4asywM7Q1A5FEM+\ncFUiVwuAFDC6Ll7p/ufjaDGJSb8nPIpjsLWQquZclxYkhQHbKTcRyo/cNlBp\nSxIjCf/CodL6PSO53E1/T6yYXtECyrYD3eeygyNdQu3fGPC5qSAZpHi9/vKA\nXwXR36Fvdg9KkEB4c7AE4GdH6+fBEx/PjyI7ap5YcxhyeKa1dGmc9bFy0U07\nHlWquTrn0+6aOaH8gDyrs3b3+DoP8q7d52i3RbaSGQbEj2Wjz3df2y4vbdo3\nlHtpOzthJ+bKwfBHlfDjTN/aMQbEmk/1e5rlZL4hSuQ4f6fL6seH6IiNe3TI\nJQhU\r\n=pRdz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.994873795.0","@material/base":"10.0.0-canary.994873795.0","@material/shape":"10.0.0-canary.994873795.0","@material/theme":"10.0.0-canary.994873795.0","@material/animation":"10.0.0-canary.994873795.0","@material/elevation":"10.0.0-canary.994873795.0","@material/feature-targeting":"10.0.0-canary.994873795.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.994873795.0_1611759119617_0.3066399895685332","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/menu-surface","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.96878e1d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e2c0d2707fbfdbdd5c33c4eda1b6f33bb42c70f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.96878e1d0.0.tgz","fileCount":38,"integrity":"sha512-FNJ0EThNP2M++llvZf7jnLF/pIZu6sQBYP5I4rjYdt0Tq0w6bNjSBLRMoH7pINGirBkNz8+3FRU16DpW1Wf9uQ==","signatures":[{"sig":"MEYCIQCBiqVSRVRAhv6ssi4bQhQ8jqvQQXfxz2zwwFytwHaa+AIhAOrcdnKI8iW5W9D8/Ac0ck7R6t8vAw0Rw+ip6qgroNGe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEarqCRA9TVsSAnZWagAA88oP/3ZsTCM3ve2gRdhR0PP4\nnKrRdhOK32QOAKqX1iRZRDbCKnp4an2ToF1JcdSwIJLJ46L6qKEfigj9PSEg\nqwvCLKuJGaedqqVhA3Tlrq2m4eJp3wC6Cf30r7FIR0oVoWp4a9PYOIguZPmN\nqrUnaz5bqYI4vH+TsBip06VYtNGT/yzLdsZVfwCSorCFNTO4+Hc/HAvyfAEX\nlrx+gLF4C5oK9UEnEUJrno/FpwVbe1zNADAkOnE6XotRi+/TbF7LtY08jNJd\nCtIiXyERy3QzfQrbwUKa5dwK8Kh+RSLrXCXhKZZr6CQM/4kZCDNrAJKD52/h\nz4LPcf5hKJ2u/Y3MQH3yaNit0U0rjEru5pHhqvyu6Y7fvWqWyFesCeo/4qfO\nQvzQOAmVkLkLJY/VWQBr4/UjwqFHuLJLuncII1dUO+uMzTEnYbqXdyQX+HB2\nfjZPTknWDkJFL9jsqBB9V+3hvYnMfYAeWblJaGpzjCt5175zy9LoRRd1cyrr\nvyn9H3s7QkrG160dx4Pc42XSvivTqCs4kqZ9191XM8snwUkUbbSDbLwjJaoN\n+iHjUy5gg837e+rfxu0fbeqFPQFMSXMPr3eBBxzqkswnn7++p7EoIJTdF6uw\nidDDoV3nIDA+V3ga3RF6wkYLYbl5VLj6h/gLzRgXvccYPR3fJQa9ViNobLxV\nijiY\r\n=Zk8W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.96878e1d0.0","@material/base":"10.0.0-canary.96878e1d0.0","@material/shape":"10.0.0-canary.96878e1d0.0","@material/theme":"10.0.0-canary.96878e1d0.0","@material/animation":"10.0.0-canary.96878e1d0.0","@material/elevation":"10.0.0-canary.96878e1d0.0","@material/feature-targeting":"10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.96878e1d0.0_1611770601937_0.3189565024887646","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/menu-surface","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.3c117cdcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"652f56bf22fac50840ace2b102ad2be438639ad8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.3c117cdcc.0.tgz","fileCount":38,"integrity":"sha512-JU4j38pOFqsQqn9hDzgpCeip0IA0HAKRW0ElbD3wrNeKbFphMuKfrAIyNYInrlGo9by1HWbAl2/ZXxlxKt4A/g==","signatures":[{"sig":"MEUCIQDp90S51e0ek+k4dHNjehzxdiA2eq7FUBLNtR5DEY/hewIgL2GN1eEN4IgLfotko1ju2JZffzUdMyj/wns79dhXTNc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbH6CRA9TVsSAnZWagAApJcP/1qJC13/6BZVePZlbJ3M\nQbcG7JHuVnl2irnpIs4oAvZsaXK5BolcJLfgfOqMYJYlV0ZlR+v6Rzav3ZUY\n/Jk70n6U+OMYoJBoZ0mak6s+uRO0jSwjPEtqEhdeBrTSw9PBjF+w1zYrJ9cM\nuxfYF1IvTL1Xyc5haJ8OM9lgvHHkZIIPhq7v+sNJzwlHjLnNLwdQX5kI70FP\nsoxsB7j+snONP6Xt34c1PC7G27t58u7e+3LBSVRmrBqp3e1IU+FLzWg6p1UA\nc8XmKL/D/ZZ0648qWYA31oNdhWJiaf7blyn+8Pez0cyI0IRL6lV5wDLJK/av\nAgCQuYhTygaGmrKsplIaXnMBzV9dc4mRyHkABhSh3Sl3rk7HofxgWzCEDriE\nkZNCHoKT5HaxpZq8EWNhNNcnOJ6lL7yGPWWmSSAvdyVMCvX4jUNjLMy3nw8Q\nuQuFkdfAjzdiQOj2bh4egXQZoW6KPskoGm0/aApWH/G+eYV7cH8XKOrClq4V\n3Q47hj6ifW7GwDI3KHqfUnJcJgnrcY7GocusPbuW8TFTeejr/g0Rf8Vn7FOF\nQ5Uuxh2z2GJzWG+wyFP26a1Ju91n1ywKC6DtkJqWcQE2CvMca+XeTVQ4sZ14\nwtLM8xX+x634gMr+tAeKtDc6h5BGRXBnSC2bRe5yXVjjEqmz4iffBdiSjL3L\nv9tD\r\n=B7ye\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.3c117cdcc.0","@material/base":"10.0.0-canary.3c117cdcc.0","@material/shape":"10.0.0-canary.3c117cdcc.0","@material/theme":"10.0.0-canary.3c117cdcc.0","@material/animation":"10.0.0-canary.3c117cdcc.0","@material/elevation":"10.0.0-canary.3c117cdcc.0","@material/feature-targeting":"10.0.0-canary.3c117cdcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.3c117cdcc.0_1611772409662_0.3673919629953364","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/menu-surface","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.b411e7033.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c3c60c94eb6b1bd6669812e8fe683efd165d08c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.b411e7033.0.tgz","fileCount":38,"integrity":"sha512-sJv8/dlO0+lmfyoajXKH0mqMFem/57NpFAb4lkiiOiXitNDEQA9UTDxulMxnDILmmJsnId9Yi1vSNfKnpTDCjQ==","signatures":[{"sig":"MEQCIE6vBid4d4wrKCPl+FLUcAIJxnyexYgC5/6WveVdzlT8AiAmZ+A4BT1n5dcy9TV0CK6TPEkKVcq7p/R24boARPweQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeN4CRA9TVsSAnZWagAAY44P/RsiB7gkwAPYpt3XHKhu\nAnmPEyze4JkwrPW/aqBQvZ5WhEE9PXhQMlR68L3DqmgIjPyhJTqrqvh+3e1q\n9mS0Ja0kWwBgokqWYNlDmbkwOvLHf0BsZrjyAk3So5aGiseSSRo6/KOExIB8\n2HAQv6RJdHKPo1coiqPTuD0wm4QEJgnEEwgp2fQeG0dtpTA2kpU/itWd1PcL\n00QLEfswkxCYMcUXqFvPdxc3qjBaSe83Vo8ovHUoajXglDlLlsHRr1VFP/Rh\nnTvQ8qnxaiGs++Zq05zxKnLl3Nh7Z7CUu/6kYQj4AbnsXvpJ1zWioSUWze8O\nUNWW20KwL3mb/8aWUyBWDWX2b6P4yJpFlOYE08OIlkUrqbbdsRhDF2IpUvmN\n+FraY9R9+D16lcK6ZInCfOJPm+kBMWohiXziD8PzNQanIGsDxBuq/ADxTeEU\nxpL8x9eaVIjrxWfIJkJA8rHszK4mui3rCGtboUKmZiSlfzf9s5wik7224s7Q\nHcpvnmgGiWMpYM7bbN2oei+v7S034TbcaG0bD9XrocCj1NEY8Ys2/5eqI27y\nil95wbSiyr5V5/h3Ro3BTvft88TZwh9gCQrobtxCJxK3nduB9cyDBsdoZRlx\n2ZCG7UDvnTT5vk2DlfMfggWBHzvLXWhh7XCn5oyNZ5dUP7JSkPl5yxcUiQvr\nSR4b\r\n=Xm0Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b411e7033.0","@material/base":"10.0.0-canary.b411e7033.0","@material/shape":"10.0.0-canary.b411e7033.0","@material/theme":"10.0.0-canary.b411e7033.0","@material/animation":"10.0.0-canary.b411e7033.0","@material/elevation":"10.0.0-canary.b411e7033.0","@material/feature-targeting":"10.0.0-canary.b411e7033.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.b411e7033.0_1611785079633_0.30869759503423433","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/menu-surface","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.a9ac16b4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60abc89d8e20d2c31d4126a4634531dedaa96b8e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":38,"integrity":"sha512-Bu9JpI1SBVITUDiCvi6BgHkjdlmqlCj6YRUdg2IdDFKuKomuJ0fX7FrW3WWW/bTq2vr0Oo3SOl/7SpJrlCjxbQ==","signatures":[{"sig":"MEUCIQD7QxyVI8YX5xzJL4nc+YekpAAJ3xiF1xzl+hi76sybYgIgA/HBFO31EVJ8BWOZCehMnV5iMfOdur+DCyUjLEL2ePI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfGFCRA9TVsSAnZWagAAtI8P/ihflNwp9IQzIPXxxeeQ\naaA9T8ixENLd6LuIlAgcTSTUsbyl+/IzadYRC3lkjpRRTkAKpX5W/0xyJ80b\neU4N9b0z74hviOHIkiDmVdA9JhQqFGyubJfmTUiDkljiPP/1YRLeUSY5quRq\nkyl/Ytv+VOvNgNuxV6Tlt+K+cxP44yglMXzVMqOlKjefHbcJR+9t8zIqlabz\n20dSMOf7ei8/mGN3iRKlwsXdhAIw8ToBv83/YsEUYbAHXULcaoOkgtJ5tssT\nho2Uk58+d6TD0QAzNt6qSSqnsEbrJDCrmzBXirlyeoZA9KKpT9Y4C7/zcXot\n01dGRpbVe3kVl3xpH+cosgBuqyiNjd/RfbwhfbJ2g+2Za06/Vljek1DG92HY\npMEFmK8IBasJKfs67SDvN64lFrqVce+L/YNEKJ6YcLLxcGFErbNfBNosLwcl\nQOyK7zFvOs/wHw9jEDfHNQe9SIsmMTtfwsXbo9/SWgOAhlJ+P6t8a8Reg+yU\nSfVQ4wpszBG0b2YR0pUmydUBnblhYo2MtI21RbSHNObV0BUlYqZEYj/RPQNX\nDg2h1TQdCJ7efmE5tNUCxtz44++yyZ/CydNtFIZ/7hnLnF68vj2Xibv1MQ6/\nyq42Z8dQ8a4NogAuQaimZ86KOMNtUUE8dNY92a/C6icOhzKwWVWHVSCV7rB+\nBZtz\r\n=i5xx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.a9ac16b4a.0","@material/base":"10.0.0-canary.a9ac16b4a.0","@material/shape":"10.0.0-canary.a9ac16b4a.0","@material/theme":"10.0.0-canary.a9ac16b4a.0","@material/animation":"10.0.0-canary.a9ac16b4a.0","@material/elevation":"10.0.0-canary.a9ac16b4a.0","@material/feature-targeting":"10.0.0-canary.a9ac16b4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.a9ac16b4a.0_1611788676875_0.8739900554275402","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/menu-surface","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.fec7b42ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62ff967ed787d4cadbc91cf5db2b1b1bbce4793c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.fec7b42ca.0.tgz","fileCount":38,"integrity":"sha512-fvWeov5FtBTXRgLi8t3O+wUaee5ElN5qmuYk7YB2qgIpnuhjhjLiufWB88Q6rAjInUe+heXV1nwBzQqEUmsgYA==","signatures":[{"sig":"MEUCIC9YJDl/oM4v9n648GlfUPAS5HpeGBvAoJhwvIpqtxYAAiEAnLOPYTuSZJac9WIdtHmvhpGZeVtVYERYGUikAdCrVIU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw1fCRA9TVsSAnZWagAAjRoP/0hrRzUxTKFLjI8Vh6yZ\nXN/OewEk7aN3cv6+GxAFoLbE7oYUatrSzneuP25YzyRdz/bvvAatEDArBYdA\n7XfH1urMLG6XBgiIWUiLoedmZskut0ks3zlx3wVwzxj/O/tc94D7wa1/8rVW\ntXYad3ZngeaHL/gvPTTiub6jrtBeP8qudpCZnEccSbbpNePu+32HvhXMU9yF\nNw05Ig9hLhDojb61vyi7+XBLcCrL2J1dT5kL+jkhHX/rb7V75M8GT3ohUEwl\n9RsezS4mgRn2zy0da06lElJbwUMY75LCzyP58r9yuaKsEgqeIfR9Ys6bH0uF\ntabcdjCY4DNNH7sHkD9XyoEicULLTz15MVsdKvUuW5OmCprYsLSMxoqy+I5t\n1DLbSe5mjviCBNmUSAEzC0izzfat6t/3Zxltg1BjZ62AXK3sIFvds1iBrUil\nT2ZEnv/W3/obJkdvSt7rINE3xcPamN40sUCifzL7MiMpO14TIBbAQ5DctcZD\n4WF9w4oSU7LMPvjvRQebzu1TIEovI4rhHuX4sFeFRgU8YXjeqJrvZtZQG+tV\njl7+H+0Flbik9bG847UjUXTZ2TzS8DdDPIA+MxJNEVtmDgbU3Qp3HQUU8/lc\nY2C3MqsscYbmUqUmVSbN78w9q/R9qhykDVGbw6hB36hsiOqNP+nvuguJcZ2V\n5BDq\r\n=0WFU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.fec7b42ca.0","@material/base":"10.0.0-canary.fec7b42ca.0","@material/shape":"10.0.0-canary.fec7b42ca.0","@material/theme":"10.0.0-canary.fec7b42ca.0","@material/animation":"10.0.0-canary.fec7b42ca.0","@material/elevation":"10.0.0-canary.fec7b42ca.0","@material/feature-targeting":"10.0.0-canary.fec7b42ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.fec7b42ca.0_1611861343242_0.2754545779632176","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/menu-surface","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.8e66dbfee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80b8f54b83dda6c47c31129706527ffcf957a4ee","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.8e66dbfee.0.tgz","fileCount":38,"integrity":"sha512-KNO3x2k6oJ3Y3SiEmg1fD0HUG65DVHpo1j7i/aYOA1NDoMUVwPUCoSzcJITZhIXPLYZ30kWt+pHfOngEHrYYWA==","signatures":[{"sig":"MEQCIE2OK60MrlRgfKSGjeuMdCO/LwucpJH2GLGzDzWCkI3lAiB1odGajYxiku09yOQQuPoWQABIv8nE/zANDVvAOZCnGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGIz3CRA9TVsSAnZWagAALnYP/iCARuYsLFNyGCmHAcJC\nEkpZoVQMoxHjP9Hw++Z0CFCHWuM1N1ZqnNhHvQG7mCjozZjiIb2NRPekCyZG\nxHDVc+wUYKUgYJpXQBDh4B1LgU6hENjwEYO4zW28bV0p8FeG2ZPklrGqTW9F\nS4drOesTWPa41o+VKCRzT6vUR2JaNrId+lOvbnkUbFxXamK4o1ZTPe8lLsM9\niPzB8F40kjK5VnVpZskBbAhpfxtalSWSBEZ7gAXom4dGgfdX+5Qdl9LAWjdu\n2SFeSYy+rJlt7BtI1Flau9OrUZCLAqQIa5FLssjzmb3IQAMDSbh3TRO918/1\nP4UJGTwT2DxCFFwDJ1o0JyJBfzIxumHQ0ua0G+0rvIPwORP86TCyRQ7dXHUO\nZUQxlFhHk7Evb1hzQWeMGkr0aTs1eD1WIa8ptgm7VTQQc3+eZtehZbdd/oc/\nQw00MKIF/E955xP2rXbHyl5+Of/cAVWRpN9MnOf0LNjBJ5GCzYH1YIegUFRJ\nbDWhXGGuz3CReUBREcEg3JXnF7NCQ6kjropQ+zlOowKH0O9Op2qWM8+vwmlJ\n+5YZlNLHh+svpklj68DV8QMY62cBu4tmEwNAVK/UMjW6CggnfGLACVMpDMI6\nfBSdPMSBJndNIbyivtzk1sbB2aPLn2sUBiXDmhLGAKVo9tP4o9K/6rqXTRqx\nXgPw\r\n=DSgs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.8e66dbfee.0","@material/base":"10.0.0-canary.8e66dbfee.0","@material/shape":"10.0.0-canary.8e66dbfee.0","@material/theme":"10.0.0-canary.8e66dbfee.0","@material/animation":"10.0.0-canary.8e66dbfee.0","@material/elevation":"10.0.0-canary.8e66dbfee.0","@material/feature-targeting":"10.0.0-canary.8e66dbfee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.8e66dbfee.0_1612221687230_0.9380169204986886","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/menu-surface","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.637d15da6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dde528bdfda6fc80c9c05b8e60e1cc34217ad0a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.637d15da6.0.tgz","fileCount":38,"integrity":"sha512-rVGw3bhPYtaS6BIk4Jm7sXvZe3cBRpkLFahlX2Gj6E2HKaCJx/ROM7yNsbsguJ+4gCEMqflD4PlQZ27xVew7/A==","signatures":[{"sig":"MEUCIFv/GWms0kVMNnin5K8B7zH3OwJiz5egvEpojuYJlGs/AiEAr14G3y/GTlcDKqW99K5BA2EvgFyayDTq/ju0ka3GfOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ7rCRA9TVsSAnZWagAAXvwP/RN0jFyVoVAfsfJLVxtI\nGTIz/SfOc4a/6IOOcMpncYZ9NfjUOmEENYf9LRr+SR8IjbcK3d0ob1ZDECM0\n8H1ogRNiQ6I4Sm8VmnN7L/Lhd8Te9mozhoLqmv6fvB7TDGtfpao6QFVynPe/\ntUveA+8vivu5+LgQMlu39uE9e2SxBx0oXdY3AnwwN2aa1/OvMhzxIEITWmRc\nruiqyz067k2itlO+eFb9iE7+Xp0bvPS55U4sja2dbrGJ5lkhMnCGhHQIhBvF\nu3pDywvaxilzmufxey1CAhf5BvyBeFrOiCQ9q56z0JFsFcJv882yp4XSmgr2\nqrYadTIsjFJ1a9hJJV6hNp5oCy+RblCp5+MlyHMUa7AJrduRA9a8fR0zjZ1F\nSx9h5HctiFZKi3HfZM3PCICgba1g5XmLFBIM2SQ1CHdi+K+VbnHW8mSn+P7u\nQm8G5Jnp8JHTyxg0nuKuBEMPQoBQS51Xc+06oY7Tv/nrtZ81jBCbVC3+sBtU\n2Kfuh8avR8mAgfau2tfSHdgymAEIQpP99WZl1TE7cwVEKpUzEsWPGZv13kme\nOu7LHxGGzb53mXNzldAkzQz3JKWeL9jkUNyIYqbkaGmmHuwIVmyu5vMjtG/z\nQeJPwr2dAjQDNS2ToVFUOUOGVPAdCweVrGa+tEn8ywqkVH8L+W7KwDyE3DZA\nHURG\r\n=zqaz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.637d15da6.0","@material/base":"10.0.0-canary.637d15da6.0","@material/shape":"10.0.0-canary.637d15da6.0","@material/theme":"10.0.0-canary.637d15da6.0","@material/animation":"10.0.0-canary.637d15da6.0","@material/elevation":"10.0.0-canary.637d15da6.0","@material/feature-targeting":"10.0.0-canary.637d15da6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.637d15da6.0_1612291819120_0.5326058609645536","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/menu-surface","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.fb793939e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccb425cf96a8766ebe1eacaa6608cecb84d31313","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.fb793939e.0.tgz","fileCount":38,"integrity":"sha512-YIL3yLT7lSvd/BYfLC8hM57D7LqN35EwcRQUFPkt3vA+RNeO2bYjhzDQWEkIBpCeI40qBe9WP4bxKO5fhIoSlQ==","signatures":[{"sig":"MEQCIFBAWWc7dcHTyu81Tev9IX2uaBZJ0sJDqR6kCaywfH6mAiBgCHkAO4efLlyk+R97bukrGrY3KjsemM9WzaWkhv0RFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGePCCRA9TVsSAnZWagAAgiEP/jNf6u8YB7qtTTHJ8hKf\ngrkDSKzA02lgcQdGU3tfFmGaMLjNKKrfzi5wlPzQc2dqD8QkOX3ofaungZw+\ngX01AQlyIQW8VfN/wBLQH3wupxALkBsXLg62VuMs6YHk8JSTmSLYaNZBbilh\noqfZZfJfC94BS2iQShXUl+X5CoJIY2LHzjdLJN5Llu8G3n4RiCCfPqlMydMm\n5D47VB5PUpBwZLdO0bXH05gnHPoGApAwD6fzdnbBCkoDNG04exdTpFb285EF\nwQ+OUa5bsCw4HRWDStY8M4RgmGEn9sZRF0x4XRhCY5Bq5xy+/UGBmVAGBkk1\nkGfh+VjBwpUBxe3bAZcMgaq3k1dUju334D9m7t/Q5+flOXST3+8jStghwfOW\n5xkxqKioYT4q7we0uOTeuGKFMXw4ISvZDe3CXhF+c9PLEAQ5vUoiHs7XHXr3\nHAdQMy54Cl4hZ3L4wbVglLpHcJ9/yjwn9MNNOvcoap37qgXlK4sMoEMNxEoL\nBySensc/biRaPTYpydv8HNVz16mbZUjGB3TDsE0XNfN5fK42W7wFUKv9khiG\nrcNMQLr6ZLL1gz/KTp4xUVL8hQM5mOQY8EthJohCeYuvnPZHnE+/zcKQutbZ\nDxNfqCDD0RICRzOUMp5vheRXzxQOvQUuohHHPKzqzwtdawRFt+Z0erYG/87/\nngKS\r\n=7ySD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.fb793939e.0","@material/base":"10.0.0-canary.fb793939e.0","@material/shape":"10.0.0-canary.fb793939e.0","@material/theme":"10.0.0-canary.fb793939e.0","@material/animation":"10.0.0-canary.fb793939e.0","@material/elevation":"10.0.0-canary.fb793939e.0","@material/feature-targeting":"10.0.0-canary.fb793939e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.fb793939e.0_1612309442340_0.5139651663001046","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/menu-surface","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.15a4d40dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c1d089762c8c07af8bc1feeec9f11e130f6b2e6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.15a4d40dd.0.tgz","fileCount":38,"integrity":"sha512-pAezyD50G0cxL18M8hxlO2wFIv8ayToAwInJ+FxcHKxbh/ZHTXV8wjyBfqaGtV2v0VQ8JEMvWAE8hNfr5yQlPw==","signatures":[{"sig":"MEUCIQDFfW/O4BJcE+XaFbBHqqbzX+HgwljYXAsK1sYO51RB1AIgBmGu2pkWIKpfhSEUfCIbXaiOUMihnFjCVj5sI9ABLNw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGgguCRA9TVsSAnZWagAAz0MP/A2uCHHl/SLG3pqSsQXb\nbzNTnqonrd4acmP/ech9WdlPlkZAN5KZevEbQ73ojXuIT/W/Sva3EnCu6epJ\n9I9yWOmNo1iYoc3plps9q2+buY/0ekarZm1VAm3ZeQZRQuzkKE2j8SKLx+fz\nOqKpjAORjilvcBOqwm0STggBuJ3ynaobmOwIu40SnwR7hpSZuMo0IygigIHi\nzdbC4zPSo0LfXxbKNbMBMsNuYQ4dgtG2eg67B3tLQk0r+pGiCS84cfek64rk\nIKDzrXvUO9lLc5cWJNhE3GRNw/hwJohVbQTFIVbdswmP6EvjYcMmeNcXqFjR\nF8w8IHmEd2GYhd3Kp4zQS1pSsP6CaPCusr4cgsUnvCSZVj6AGjgplBOLYqHY\nBDLg6TWiq6YvY1JW5qbt6DtFR5TOnfDdoA+IHX7imtyzlAIbOna8rwJKPBvo\n8u1RbMABTlwS9lRdtkaVWWmdtcvkx7HdE/6wG04nfpiwBGNc1c/b+crFXha8\nsyPTPwnBy4rBMXHI8smRT4Wb3c3bFHg0dpoC03zKPykWkNBw6VyeDgT9IYhM\nR43bm23DGGmXBXFxhuJGuQErqI+r8fxccQ28VufHYpbuw2u4+6Is0VLay4Ud\nl+nsf2+SWbrTPO2B8xZ7hb61l3CVRo56Vps4YMMKsQWGTM9D4A7xhK04inRY\nwlFc\r\n=Lysy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.15a4d40dd.0","@material/base":"10.0.0-canary.15a4d40dd.0","@material/shape":"10.0.0-canary.15a4d40dd.0","@material/theme":"10.0.0-canary.15a4d40dd.0","@material/animation":"10.0.0-canary.15a4d40dd.0","@material/elevation":"10.0.0-canary.15a4d40dd.0","@material/feature-targeting":"10.0.0-canary.15a4d40dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.15a4d40dd.0_1612318766332_0.7755825513450039","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/menu-surface","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.7a003acf0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9ca2eec8b7bb83bb554098c7d277df4c02cef92","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.7a003acf0.0.tgz","fileCount":38,"integrity":"sha512-hJPuCHO/Nw6F4BEKWluTtmWFa2LLoOi18Eq9fldfpF8Amn4aua8hVtbQ+yjrtl7t5pxja1wy5IX6INuE3u18iA==","signatures":[{"sig":"MEQCIC7Etvvn3S0cY1qhWYKDMzWTkenbOdmweMu2ANuHbL0HAiA+3EJYJoVWXaa4F21+sKlTQFB4nnyFa06S3hEwhtm27A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG11VCRA9TVsSAnZWagAAjJkQAJ9pdai0HCMm3fZfws+X\nGaRDpwJkiWjWR+Z4KTC/hWyFQ5pLaLu2nINQFuUHga4fl3kQ6AX4xKTvakh4\nj9uUwQ/m4thDQXk45l1WPPvQH5BuJXaYdIKv5Zeppkk9+HIFscATEO3b7VTR\nXYkotF4aWkNZHJEK4/G9RbZ8Zh0C0NafATcRzvfKhSrM1svGXkU/Lm+HYrpb\nGbytgbZdia7G43gRzKJV9AGCJiuKy3m/OdlQiCZSlYBz7+v+wfl0goaNhisv\nSY5l++SG0hzQzf+8lCCr/CD22U41zMyH9hS36GKwRhwWvrMmcnk2UD+59yv+\n46JSYL/tK7hEQ+1hcOTbOw0wSpdTxAqGtpkBr8r2SUGnBZVkxnU3vvKAh9SD\n54eP3cwZPL0X6BqIPfiRVpXNXaV5UwdNGH+plNjRlAL1WjqDYgLqHHLkk22z\nAZG35FB9GsFAS/ZhstMV6dIDounN1ibyN8+foJIIiNpfSkxbkOmGVD9c1qeU\n9rdo9e2sfzjag8z5eZFwRbuLLB+5roKnn10fc8P+uzDRCO8ZZCvXhaumGxEC\nH8z+Bq+p0AD1xAwzjNO7n9RYJWG0tNAfKzkc15YFKn5P0GkAssR6afZxBYzd\n7Lpg6QFtWxckdOtYqJqXJz3wokaigsBcgAzCfcW1fJW9lv+202eIOOkLfajy\nBeZM\r\n=ASKW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.7a003acf0.0","@material/base":"10.0.0-canary.7a003acf0.0","@material/shape":"10.0.0-canary.7a003acf0.0","@material/theme":"10.0.0-canary.7a003acf0.0","@material/animation":"10.0.0-canary.7a003acf0.0","@material/elevation":"10.0.0-canary.7a003acf0.0","@material/feature-targeting":"10.0.0-canary.7a003acf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.7a003acf0.0_1612406101467_0.6371581649995801","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/menu-surface","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.05f249666.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ce149546cfac01d08aeec4a5282a252c2efa241","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.05f249666.0.tgz","fileCount":38,"integrity":"sha512-nw6/ExyS2f+wHxyj3tsshsdyB1hU+K509AGF/d/+vIaSlkJFF2Jjg4BdZst2B+00vSZfgNdJqSLDgONA2SJXLw==","signatures":[{"sig":"MEYCIQDqnKBKyz7QMmP5i+8Ry7zpLJ3Q1aqIMm8ZFxdvHevKnwIhAMKK8xv3G35eW6rrdnQUpBMN8kLcHcIoSPUO2i+FRPkK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDQVCRA9TVsSAnZWagAAt6cP/A7eElZ99ZRnn8RVLeR9\n2/FC8V/6krPrhGNi+9nTjYiK7+r5Rk0E3igBHfLR+T1UqcoEXytJQqcJRtZu\nTv3hRbadw4RGLrx+oIFDfXOuZVxwrFzV2olx37LUBnp6+DGG9Db/jbqW8VGo\nL7UNGwJMD6jGn8hDKDbykIHjCkcXiI50xPcWd1Cqnh7xWU7daDsCjC4NEO/b\nHzn/kdc++FcceNVhJvPsVtvbkpmK7NqnxynYNuYHOBqvS3FhW/8y7nRm1frz\n8MbhsFJvpKkn3l37PM9Pkz7VYhiiqlSb4uGUYR1OycF3+bccurAMteLsOQK4\nrOkJF+YkmHIoFMOvge3mE9HzgzyOZPap1/KFxENTgdAlMIvzqfDKvyHhEIrE\n1O6EKXRWze5OaaTxZAj5rj8EK4Xqeb/SNuKmQjXJaFCQc//B41Npb1y9ZsaA\ndxFbtzHJoA26sg9Z1d57bTr75NWWLEtBZLqSr6lxFVsxBlnJ5xlXTtJ31kJw\nPRjGFcBhha/NUeS5KQ1EXV3cER1uxXcAYg0AXFFKTczArz1aKXVb1vUum5t8\nG2IshQA8KECZ7zki1od4+lwdsrtdy5jV7ZYYTwdiif0x4leoeQWdCVmv9yW2\nPM2EKGlA0FL1JPwKjGW/BkU36X2S7hj+jCxcIqZhBlN5/C8MAhkxXjg+NDrI\nXVVM\r\n=aSMY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.05f249666.0","@material/base":"10.0.0-canary.05f249666.0","@material/shape":"10.0.0-canary.05f249666.0","@material/theme":"10.0.0-canary.05f249666.0","@material/animation":"10.0.0-canary.05f249666.0","@material/elevation":"10.0.0-canary.05f249666.0","@material/feature-targeting":"10.0.0-canary.05f249666.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.05f249666.0_1612461076504_0.4339646417279177","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/menu-surface","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.1a3a39629.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93a570501307b832b889e8e73fb106bda6e1fbb7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.1a3a39629.0.tgz","fileCount":38,"integrity":"sha512-xWQDObA74TZ2l8PDZ3wGxsrgLEm1QMXwbC6cksdcu8TbWlxE+WeUGB8lJsW0UkqabV7MZklmeNshk139edqaNQ==","signatures":[{"sig":"MEUCIQCBOH5vr84EEHCQojNpHcraQZanyVkvbd42UWO5tpvzQQIgHRnATfNuFVs80L2DNNGh9pDHD/JEGPPIMKsiFxnIWCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHECDCRA9TVsSAnZWagAAhTAP+gMTn9cU6qe36G2no5a6\nMnMfkRDIRLW557nkyFAHZOQhNtSnO9kR+aHJCZu/7rzB3JUNw/x3UIfa+v1I\nEAUieVRa8m3N/ibONMVaN1P7OK0BTkytwWfJWwsyQ6lOKg46KQmnmf+jEQdW\nNtaV3LGTF1TEjpdEuRZKdViJG15D4jXUDi3kEn4ZPznE44/yF2bGCFjik4x/\nb7ioQ3BKpoCKtybPCVp+melO4zTuDSSPZx48lzb20xkx8Ol1+TOkepJQL6kH\nnpn1LUP7FkWM4U+Hv5wyU5K2C52WYNo1mK/v8oCocEi+pPo4HaDw2UMRJcqp\n9eg+LxnXza/kZupCp6QzqhdffBHs5eEv8xVweXKSibKJObXWCJoqoX6MrKEe\nJGxtCK1pNS5+CKzqSDDlytnmHIdE79XHN9dDCwd1x7SwGSCN2GzRx/CC3PxV\nJ41GiitwrF6nbvlEgxsD8z5nAcDdYFstCnuR0Yl6olLStqekXr6XnOhUUM0R\nIsXhaqrmb/d/Gaps+VfpBuW6K3E1zuqc663JrMqAG3vj05MDKfpjLg13Ba/4\nVsCRpSQTHpyV8QmSFxWwrCQU1AR1n+UXhRcGoQfMI/TeRgR0kQ1hSULKO3gl\nc9jr5ZAzqPZcJciPOUrbnbC3veTN8wzflK0VyY73RKVzC455ykffmvZrdVuB\nV/nb\r\n=HJqI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.1a3a39629.0","@material/base":"10.0.0-canary.1a3a39629.0","@material/shape":"10.0.0-canary.1a3a39629.0","@material/theme":"10.0.0-canary.1a3a39629.0","@material/animation":"10.0.0-canary.1a3a39629.0","@material/elevation":"10.0.0-canary.1a3a39629.0","@material/feature-targeting":"10.0.0-canary.1a3a39629.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.1a3a39629.0_1612464258772_0.06827497701564988","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/menu-surface","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.8b1cdb1be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d07895f4761efd0ed9e14cb0ad4eae28203f6bf","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":38,"integrity":"sha512-Fyc5fuyFoSmOx5GpqQDG0ZkMCjqc5XMez0Ws1PgLzH4GT389SGqeb4IZi1hQpAtp1jip6FF3y3pRgui4T/lzRw==","signatures":[{"sig":"MEQCIFSSl8ERpc3wpzOQtYl3/K7ya1cmyZeyWjJ9RMFsPqTLAiBm1w+TRGCqZY4xStHc4y8LCuMDT7FaGpjZH3HMyksanw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHbLCRA9TVsSAnZWagAAjr0QAKC0OHm1M24t/TzY5RT1\n2E8Q3UcAz4EgXukeeZXExwaxjUEb7Fv1N3EDMPIACPU28FKNcdGPOzr/m/v6\nBIdE9FzilwuL/epYmN9wkfMZ6Z54kyjSWdtZgb29e8cHgGZe5uYsLy500QH1\nZx38nsHzt4ocvwfQusKbJ+PDYuzyBrnMOPYvwgGQAHt++wOsq5b6iRUSWDyP\nB/0w/mBSOK2/4WXJn84y1gZaRXUe9Ql3nC0/ajqF2Z/JpWkr1i80A/eqLS40\n29ztGHSBVDS/223dewbXJRzJvoPkzG/aUfKrLb/Jniu0OvfRl5xOdN2RxPrP\njGfr7NNCW56bamEKSWBFpDCNnkO6qIP4Vc/Ek9F7PDJfFRoz3rRXIdBM1+9x\n0HI8rBBJ9xtEo8NkWsZ7tqEDSPTfxcGZSwj0YEvKoRbDEqpc7YXqsP8Xfaw3\nN+TzrE8bjxbZTU/9SEY6YoeJkE505BlkIf6mAKo/5BXFm1oAyQI0aOLKNvsU\ntXBoh48oWYIdUPkCK2hhQxmnNCwfcdt/hxa84jouwM/QRAk9mI9J0zJRhDsp\n7MLvKjjKTGfN5nCu1lwE3+8eAJwnvcTo6e0VhBdzZiWfGXplEJySNFCWi6/f\nbp4WgI4QYIjNjSe/nUZXOx9Q/XybflTUSKz6HlhPBXSheS/c415c4a8VOsgj\nNy7W\r\n=GlCX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.8b1cdb1be.0","@material/base":"10.0.0-canary.8b1cdb1be.0","@material/shape":"10.0.0-canary.8b1cdb1be.0","@material/theme":"10.0.0-canary.8b1cdb1be.0","@material/animation":"10.0.0-canary.8b1cdb1be.0","@material/elevation":"10.0.0-canary.8b1cdb1be.0","@material/feature-targeting":"10.0.0-canary.8b1cdb1be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.8b1cdb1be.0_1612478154532_0.01798889969122497","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/menu-surface","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.8271f00f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13e89a2000e499404a9a7787d77a3ff630367ad7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.8271f00f7.0.tgz","fileCount":38,"integrity":"sha512-nr84CJqmomr2HXgMox2tk9nVvcqVywtypdHGrqxhjkHag3l3q4JytVR2ySx3bNIbfqVWo8XV+TWcO5Cbg9355A==","signatures":[{"sig":"MEUCIHz0IlULSEui0fqZOJfiMNEs2wXylidYO2uJFPU42UhHAiEAh71aKzMsIsTZ/av4kXB+CjuRKBxqMejljDsG3qCPjmY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHzPCRA9TVsSAnZWagAAK20P/0r0+FDNu8W3MqInjIYF\nt4dKTvjkSfHQEMyltFXtyPjKbJBCMczfJoitYgSY1zNcb+/4yF4aeEGIjLrM\nbhpPxuqgD8yB1mo6DUfuJaVYkMHlOVhUWLuBY44+/Vw7rGu8lbGEYLr+FSV5\nLUFmU8vtoUdP7tAY5iJ8xy4tgigs34enWvER7BnUdbGOqdyrL6rix6THkZik\nJ8qgh7aLe7CD64NxhD+Yg6LsSxvy6OowqgLB1kvL8GpEOrfdigM37zHmd2vm\nxiJtTW56AgLEBMeEM7yDbfeduLhJ/cCr0sSNRk8ORmdVz3wPym1RdmdZT+Vq\nUQNqwQ3Dr5wOfMEBIwaXjCdiBQHOtyaTV0OwycfWpcUJrqG22wZhcyfF7h74\nApMQjJsbAGGJCQmV0UGC68bwpjDeRiniRwidAzbp2hS68UuKfHgg/jgd4aIR\nYTVf2KeqAVLEm3cVsUPoCm61vjeEwB3RZewL/Px8aHFegPgPs+jhgr0om+Js\nkQYFlgPxLrqccePV7E63oIRERblTpmYN0UkepSR48Me9DTxgpGCHs1K0CwhU\nx5rSLg95CCE6yKoLAgdRcZHWtY37XhT3VVH2vFFC4gRebzL6li+UvGgcqdE4\nM73xDrWfeCwQSZCLcznKaESVzqkWYMAtxDze62UslKxGPvP+VQ/X9xK4G/Af\n4N4Y\r\n=CYZo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.8271f00f7.0","@material/base":"10.0.0-canary.8271f00f7.0","@material/shape":"10.0.0-canary.8271f00f7.0","@material/theme":"10.0.0-canary.8271f00f7.0","@material/animation":"10.0.0-canary.8271f00f7.0","@material/elevation":"10.0.0-canary.8271f00f7.0","@material/feature-targeting":"10.0.0-canary.8271f00f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.8271f00f7.0_1612479695469_0.3714777245355303","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/menu-surface","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0-canary.533092a90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c65a49afc618fe58bde6067994a6e83f76291b12","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0-canary.533092a90.0.tgz","fileCount":38,"integrity":"sha512-ybnk+4BbbRk66AJdvpoIBzZ5Shy+gRwIT0MPBakBGHWXiVCKio/QAEOyGgvDwTpjDTA+qDbP9ZAqTufJQL1E7A==","signatures":[{"sig":"MEUCIQCZJBU99wZsV00GDlQhjyLuYotixy3eXzQETrf3ShWvvAIgH/XNsgFHObAja7uiK1OWGuL2g5mb+WyCjzM8AODcXfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHL/cCRA9TVsSAnZWagAALtoP/R47rsGA8exJedvogEny\na/XA9vSpZ5xO1HHXCH1om7XzBxL4SOEJhbbMiZgyemdbkEGuLXrb6GnZZ0Y8\nNLmIZKKFM9Q/m5GnSBlRdNYrkmvLjpGeFGVtRd9FyjmdnTH0uFY2cTCnPw6Z\nkzHrmDsFIStGmUuX0cY3L0je6OyD4hzUK3GnRe669q+U8JgWtt6CoNBG0gGd\nQyBe0l4SrlO90awcKYH8jgDU+w9cPB5ETgDcDXKGrBQ7Bq7RqUgL++LoTwBH\ng2gGwwstrEnbf4hm9if6994cJ84/8v+RobWfAVQmQNrZpI9b6CKLeqwZV133\nHf59qgcJ/eos+4KVYeSkffUK8NpeoLBiXgTO8Bw22/tOux+dmGvONeCrWfvN\nCb/O4e+TsoswxmnHLiY6frD3tQeTwIFLFLw1nOzF/rD4VvaOWTRlUUGkPn98\n6OUWHYboavYoq4rMR1HhmhOfAzHNEGGPu5zk3q8xVH/bR+9DRdQmfsRdFgph\nLQkOai0Qw+9rZFgmB2giRZq51bOMuNp2PDH04TRve1RPDDiPgaUCFaBZsLR8\n5F8zB/7MrGoUY3ed11cJ+56BigjpXyfgPsrjtge9/Bi0hBi6artCGcOI+qmt\n8aRvTRKdvHx0HwiAL4L8G60PxKJGetdoKCnFY5Ap4TMlSojiZPKbo/c3VHJA\nX8c6\r\n=PmnL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.533092a90.0","@material/base":"10.0.0-canary.533092a90.0","@material/shape":"10.0.0-canary.533092a90.0","@material/theme":"10.0.0-canary.533092a90.0","@material/animation":"10.0.0-canary.533092a90.0","@material/elevation":"10.0.0-canary.533092a90.0","@material/feature-targeting":"10.0.0-canary.533092a90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0-canary.533092a90.0_1612496859651_0.47129531842782346","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/menu-surface","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.633a9fc7a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1924688bcb6dd89367034b85c37d55fa2e6118b0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.633a9fc7a.0.tgz","fileCount":38,"integrity":"sha512-lHSnYLP92nYCgdEcggV2GZr2MKR7y9Rx1BjmfSWTKRJE+P3dYMpN+k0UnZXV/+vdOeDdgVuScwW0UFLMLBheWQ==","signatures":[{"sig":"MEYCIQDo3qz3FjEy/BGXwrFBMgk3z2yxUEFAsKZoiQRNw8xGTwIhAJ+5Tv+Mn2SE86ZB2TQNvpF5DZUaW5jnSWNJjKsISNti","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW/eCRA9TVsSAnZWagAAmSMP/1wTvWV1mH1ODB0N/WRA\nz88vQTqYVvGhVmhyOpjL8tUPUv6cFLHBlRPtq+VHnDDyCJYNYXoC/Xj9U9e1\nllGyStbHeQG+sySa+Nn7vatYr20VUINjkH9RREqoKzkn9C1r183ba01sYuxj\nr1ehx3hyqaD001ILTWczETsWH5pOfuYGvL+C1kcA9t3/y0TLypPASv9oaZdA\n5kb7dzk9yaqXSRJfLyGWt3tODWhXWjpFStxR4R1r0ilrVyaRj994U0Yg3c1h\nEjcDjPfwEdZqKY1UkX6zZWru7bTcxk55TvY3jVAjNWxq9EjRqGrGPZYZrPo/\nEFqW2dlWwZLNZGdrUA7uFKCeSziSMDGON2vMjTHZuc9XBkpG0FjVEf2SU/9q\necrY6ynzrFPPTO0hpVjS2eVQFHD/aFwFnNMyg5dQa5RFSzDqKtLiV2oMvQXg\nhkbsWwIe5WeiCsYj3u7XwHydppxIdEOxqNmAxED4JoifLkFW2oMCSZ5dAbg8\nhPxr5SDyUzu2YPTRyUsc98Fthhs9yXHxxToO+DTFT5NAycATndFrum1uj0az\nwju+pxq+58KgYrm53sEWE0687TDuesrBT1Q38Rb2f3Vx80C/237FfyfAMYqJ\naQZcGNog3nUEIMBoyKnrl++vir5xqUZEV8XI/j2065TlC3m6lwzSOybsGngN\nh5v6\r\n=BYd1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.633a9fc7a.0","@material/base":"11.0.0-canary.633a9fc7a.0","@material/shape":"11.0.0-canary.633a9fc7a.0","@material/theme":"11.0.0-canary.633a9fc7a.0","@material/animation":"11.0.0-canary.633a9fc7a.0","@material/elevation":"11.0.0-canary.633a9fc7a.0","@material/feature-targeting":"11.0.0-canary.633a9fc7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.633a9fc7a.0_1612541918052_0.9399155727205413","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/menu-surface","version":"10.0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@10.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d388f0a711ccc67b07d570b39bb5935f80fd7bb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-10.0.0.tgz","fileCount":37,"integrity":"sha512-YH/FYlUSmKZoEDtPA+EpV+WQy9caLsa3O+K9MnVq5hpUcg/ezKUa8hP59de+3ubP5Vex60OyVtRs9A/btb64PA==","signatures":[{"sig":"MEUCIAYfF9lCr5ythU3nv3oT3lu0j8I8Ru/Yvry6g7V7VS4YAiEA1ePYCJhoAk69CizPeoD6tIe9LDIIb0CEIp9SwWRuwYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":341852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHXAtCRA9TVsSAnZWagAA/gwP/0tHAbsJzY8V5duiuqRB\nEV9npOQITccphfEeQRuu32yNYWh7dKNrYqfQOyHoY6nVHfxkKR9VfwpBmZ0n\nJofccAfKujzazCzkTBd3VgjifV+K+25+6DX7XDr2xKt+qkHf2UVLbcYHz+rB\nSSroiud/KbFk6Tj5mOJypWiLsmPPYC7rWbE33BQxfKh/b/mBOjh5cFmcpoQb\nnn5UlcN8I4GHFuMG2m30YVeRhzqqlYLXyvhN6rPVVeWzOMRAz7XvSTWsSTFL\nmmGKzQZTIpUffvCK7vGmq6W4/cufmoCBDI8Nd6oLreH51FTf8bkbgiNfYjiO\n8HGiWiY+bwKANioINahrImc+0boh4AoC8IBksrXmyhciVoUJ8UqL3fPeCCPb\nEtqMaOnihYv81H6l8L8Kg3L9adkz6mV0VTXtJO0g9sqDVDFApZZZSWh6QXI1\nf8Js9Fq+qtb4ss74qzNLBCRtwAEmKOBKl4XSwmQ3BWMY4taAz25RqjQhCMHS\nmvClk5m+gOgAXcxQTDKvKzbYuH6vmI8pbFNcgxK16FURzFJKdMTjOPXwEZaI\nTkmXwItXOk99IyEfe4+F7+YFm/3ffANBM00myvIOoqamNrlNQWo0tn2IZiCX\n72fQYJlZii5gbeQT+S7/qO1Uh0harSrFXiTia40dRP+30UzQxwZX15czio6R\np9u4\r\n=6ANM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"^10.0.0","@material/base":"^10.0.0","@material/shape":"^10.0.0","@material/theme":"^10.0.0","@material/animation":"^10.0.0","@material/elevation":"^10.0.0","@material/feature-targeting":"^10.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_10.0.0_1612541997477_0.7473035550511495","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/menu-surface","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.b5227247d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ee51382f1df28c3e49fc13009055a2a1579eb74","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.b5227247d.0.tgz","fileCount":38,"integrity":"sha512-guGleD5kzDLYZ95cefMgbCGecUd97el94Of11Defbc/9/UpRCW3rGSBQpRtn6RTMIpC+B1AYNHsYaBhUgByQcQ==","signatures":[{"sig":"MEUCIQDjvXD1kVoalOMk1ZuG3kyHhiHo9+AxUj4uc4sK47lLbQIgalDwLaDGBPTWnHsbV1V9AhTjhZhZQVBzYiWRdT2A2LY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYOrCRA9TVsSAnZWagAAGuIP/305gj/2BUj3iw19h7ht\nbNbgSPeR0jmhU+1hVwB5hN/ZIbxWHauo/NNLVjSVPcBJlMsQD8+RskNJrRDT\n8mxgNi7fMx6jUW7HDFM/+fobH7PG9JQM2OuusOz53b8lEP7BRlxAKxR/2Ozz\nrxvD0pTW7XUIUn9lgKBC0EkS2my69mFaJIXovBKnwo73cxdoW5vEXpMPMFDC\njlsarCoO1QVafX+AYK+b4pj6J/12kGiZPPzTWU/uEH8adQTcofbTkHPCriJh\nZCgJHzuToecWSQ/EF9UN9w6wTtYoUb6dTRQfMnFOrVLruEOKNrbX2SnUs3w5\n80AsNmNzPL36wwKvRocHtee3EZFaFwYhq/MssYDGaSW2F3NR5k2r56YwpXVK\nZfZZIo8C1FBH48aUgyCDqFuL11HL79QJpbVOnByK+hazUeuSjWwdPal9jL6T\nqNkipi23sEUz5Ipk0hxoU9qWjEmR1Bf/McpT5NQh/l8n0rF4PhBqY4+QgzAX\nlDPpd+1LbeD8MHxGzyleeqM8Xpk2SAjCndUCQ7/ArdSHlEW2kbZez0z+tzRR\nQ/+f89ciCPXwFfgElnRurMAsUVH4wK/EvOSE+6xK9bGkjUwm40wk9ZE9zci6\ntsUk4fcaWc14pLGU6m1aRCWljinb0P6SiqXpR4vzU+ltCg2t5sVIVBwzjROB\nmCmn\r\n=W4wk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.b5227247d.0","@material/base":"11.0.0-canary.b5227247d.0","@material/shape":"11.0.0-canary.b5227247d.0","@material/theme":"11.0.0-canary.b5227247d.0","@material/animation":"11.0.0-canary.b5227247d.0","@material/elevation":"11.0.0-canary.b5227247d.0","@material/feature-targeting":"11.0.0-canary.b5227247d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.b5227247d.0_1612546987095_0.600110959162327","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/menu-surface","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.95322b11e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27c6133ed3c9933f113e97da70f38668d9f38cec","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.95322b11e.0.tgz","fileCount":38,"integrity":"sha512-1rm6oNx4VLLu9t3LbzShyN9vApbFmuwU2g94wubfoGRRVAHm+khgmYznY6xpSv1hGPAOuEF6pmcod8WTP9MDtA==","signatures":[{"sig":"MEUCICTeu1BoHm7vVLxZZaSrn7yYVK0qiB5ExWJURvnZ3UgLAiEA5Sx4rPtUpSI+IUqzo8+rFVoJkysJJaLZgcSh4BTObpk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdWUCRA9TVsSAnZWagAADpwP/jWC6Uy5j8oJ2LAHSn+w\nq2utIAv2FSwkKYmgNXrsIw+QCUnynzWWhrLt8QgBnbE+zl0kaJlpKb5Uz9ev\nHhCL/aqFeHo4h7BaXgWQi23unXuvP7k6DFUrJbJQo23UOA/mAecZPBtUTs3E\nLDWiorkQ/XYo2QUAK8AGX20aXnzcMRITTfN0tKR/f3lZZ1jpo05/LKvCWvfD\nyz9H1V9Hrt9Mx4S0XTInorb6Fj2yDJR9MC6b1K58rmdHB/ThMrpn6Z3IGSXw\na+1jPne1NEZpTOgAFWuEM5FL6dAx7IPXuXjMWhN6ekZYvShZwWE54tXK4oIE\ni7mz9rxISXCF9aB4SXqisNYx+xY+X6IrS1rozhUP8rd1w2ORk6Ma6g5LS2d0\n9AlDmpX12qv/fFj50xtS3KaSxnql4i0I6HnICtkrybEwOt2kce9imlusIdxO\n1lMf8H47jkdtpwwGLHLgkfRPYUJnmCq/LOcjMvyx/5Zvv3lKabe30JU4YZ+f\n2z+SKNZzhtj5ROyT5ie1XtWdw5sWnuRDmSvEJ1ai5ggZILd9lAyEvX1UQ9Jv\njtbhnlqi9nJ1KMK4i3pvxvIMSts4iqjL5MKsfaiJJ/qVOqhch79xmd8oTGAx\ncUmdxKZr4MyZpXmHJiiuAbK/jW93T8H0vfIqFLpTTPBC9UDYa3vsKgQZvLPn\nGaqG\r\n=VDkC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.95322b11e.0","@material/base":"11.0.0-canary.95322b11e.0","@material/shape":"11.0.0-canary.95322b11e.0","@material/theme":"11.0.0-canary.95322b11e.0","@material/animation":"11.0.0-canary.95322b11e.0","@material/elevation":"11.0.0-canary.95322b11e.0","@material/feature-targeting":"11.0.0-canary.95322b11e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.95322b11e.0_1612567956302_0.5213844914059147","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/menu-surface","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.1f318ff0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5cc7a56996a6a5b873c78c3553b41074c8c0153","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.1f318ff0f.0.tgz","fileCount":38,"integrity":"sha512-CD1qBx6kZvzeHhpk+vatMyPy54JJa169przlbAojgn46O1wGe5WVafm6keAAnMhkZ6fY+CWakHrGVdRHmxvkow==","signatures":[{"sig":"MEQCIFuhmscbiT5OM1L/17YGUzj2AX/oTs6i6PQP+VNDy3sFAiAi1GbebEttENdVMVg97HL+TgC4N1Kudggpm2maRoNudw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd1dCRA9TVsSAnZWagAAQ0UP/1djEwunpRuqTeoApwJI\nm7Jj/jliKodYcRTuZQt6Ttcuh07WPl9GanDCgvHZaflqcQMUs1XYCVXyuucw\n+RU2JUr+EeedamuDGyih0J5gxTybd+byW3oyFg4UocJfB5kRUh08k3SgLwf9\nDUmVBensuuwPdVO9LWzAFtUz5P5MK0InNQQ/zdKFcqnN9Wxqaseq5CoPfjxY\nRhKMEVmT22qwWhNcx59O++kfVhpWzVgcdg9UPTjTAtPhyYndHisVSLlLjI0p\nul60y+zGHYV/2VyIK/t5ARX/lA3fTh2rleKLft+AKBQSl6dObuoc+iTiMKZu\ndUh2QPcih/zcoaiGbiTUzkNeYMkbp8QOPae3ojtL20ITdgGBtcTE2wnJ2tWy\nvxiyDKR7aUFX1ArhE57yf/DI3A6a5NIXWPdzUTT1tRFFve7FnmcXFbRqJB6D\nwu9CrR62dZYDnX5NB5qg7AXH6OFmVyABq8BxeTrvr+F2J4A+8hHQUq3FenTu\n2FIQb2HEMkATX14irjHmN/PKw0Ed5mJQfw2shSdTF2Putu+SBmbK6WoSkz/O\nfzKq2MQ7zA3yKKLQsVenghRTk0CGIM3WCb8py/wgunB1KhkFKMqO8MRjrelf\nk+3rbll0A5lQz0ev37GmrD0n1rb1FQUtL4jxFNbTVc6MVk1U/M2Udm5P5rZV\nuJVE\r\n=y/GN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.1f318ff0f.0","@material/base":"11.0.0-canary.1f318ff0f.0","@material/shape":"11.0.0-canary.1f318ff0f.0","@material/theme":"11.0.0-canary.1f318ff0f.0","@material/animation":"11.0.0-canary.1f318ff0f.0","@material/elevation":"11.0.0-canary.1f318ff0f.0","@material/feature-targeting":"11.0.0-canary.1f318ff0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.1f318ff0f.0_1612569948716_0.26017787046378915","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/menu-surface","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.ab12cf7a3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2ceaddf2613c5989845cc30e9bbfd9bc3274454","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":38,"integrity":"sha512-3wwtVUbF2msArIODy8kz2LdJNhxGqCzRM5YwJhrt17CfiLkRP7H/fm+ePDzb8ZDuEFPUwarEaUOJr+3fDbheBA==","signatures":[{"sig":"MEQCIDOwTpWgr3z6Pe6UufmyPUcytUN09IZTuccPNP3sGBEzAiBXve/8Q69SnJ6ocNJL/lgPDzrPkpuG7Zha6mnzLGTaug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVMICRA9TVsSAnZWagAAJtAP/jNPTtq9WyRFmehg/Zyt\nafhiuDM5t+/QWWuTmDO1pg68TUA5BZlTUGc1SPRF4oGuHx/95o8DW5PX2fUy\nJoseZjX9vF0DwPEzbJGf70SXLtKdBg7mJhZxESyIrBpU4jmobF1lmljnubPT\no6DPNlh+cLtwbe5oV6ETwcey7GOFqHyQbNxwbd76tyf4mqXGgodZh71HvtNh\nHhO8dsfgAdbVDM4zBJy7ptmoBHZXuzTEXQqRrmHZj0+9sww8kZhYPDIepY9T\naBz2qoEeJVSZdyPtreun5qoAjzZ4hVc+Ad4oe6Jdyzbln9zc5NtfWfN3LMNq\nk+mN1IV483hRIZKKHz99eWolckK2mhcfXBMqMgnEgvLQ4k8KWTPlYXgBoU9o\nbcPdMsYMxrxE9+9klviLlsI7kqcyQkHNtZgSyOOfROkgMrw15C4Uqj9v5Wj8\ncGNwOSuM329bvgggeb6JWTwZ8dUz9KP5ASdgRfAEeS8hdgkA0Rr6i4Hn+j1E\nBmnB1JaqkTSMdgo6X94lSD5b7f8kU19V0E01mgFZBxA7j1dDv7VJ6upWyhzm\neHymkxbwG8+rL6+Qpue/0R/p/S1zWhvMmR0gyVVwN7Fhx8AMYeRierfdplSQ\n8vWe8vufPFQX+RWYciRAvomX774REH/VTM8QPF307iWfDVD9IYWieK9glZj8\nR2ZO\r\n=CIWJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.ab12cf7a3.0","@material/base":"11.0.0-canary.ab12cf7a3.0","@material/shape":"11.0.0-canary.ab12cf7a3.0","@material/theme":"11.0.0-canary.ab12cf7a3.0","@material/animation":"11.0.0-canary.ab12cf7a3.0","@material/elevation":"11.0.0-canary.ab12cf7a3.0","@material/feature-targeting":"11.0.0-canary.ab12cf7a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.ab12cf7a3.0_1612796679612_0.2737907056748523","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/menu-surface","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.98db2c5ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1e757ab5e4914fc81a74951051fbfc8f29ba457","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.98db2c5ec.0.tgz","fileCount":38,"integrity":"sha512-bL1Myv1mKo+E5/C7EMgyv/VcJeWVBIzWt7oWCY/6eTbp76VIubHxiHgrjmmDPvqgMSaYr+sZHlWA63Pl/Xy+4w==","signatures":[{"sig":"MEUCID730Xs3YoRfxvVdJBDdkNhDWNJ7gy2leFYH93fAO+LnAiEAzc2LBIE8DWltNgm1TB8EX/ARw7eE4U3bziD2xym17VE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVpQCRA9TVsSAnZWagAAXYQP/RoBKxjO/srTxx9mR43W\n7bLffUTRHpksS5lgY8HhVY/YKB7PoZPnCDKnDMxPMITVVjYI13GguqgzeBEt\nUEANmzdBxBVOSOfkyA66WwQ5FxVHtoKFyH8LrGgMFh4+UTYFflDWtDYuubzc\nCKi/BWr4cZYJH01mf/pZvL6HhK7Q+SS82rQzDEZeB8apIZi32MyeDPUdM+NY\nJqxq0vdxa4bNLCeeb3KZXbyOahxMHoi+ogLuYcbh4PrPhj7niOGHIv16AhBJ\n5W3tb0qdJ8P93e3io9rP5QULfxLbIgpzN1w6n8NCuslsYTwNVu3JfXHfxTm4\naRfIaHaYN4f72u2PbXmBmJhtMAwwfVkt3B8R8uWMRJc1+HcMmwISQKbrLGLL\n78bF8B7szWQblwKbC/WwC6ESAN4B1guzXtSK+p0PFt+Ih50Up8FrdXLwtCD1\nGEgxfk5WE91ogYDwGxziA0cQrzzrcPWQi1xdsNC3aoG2ghkHmtjCMXuQLfSN\nkdKDekgFiVupTT3XR+FKMgVVGKJEmCe0qySVeyAjFcJYyNol4CUxhpXiJxZu\nILQqhoFW+wenfSV0PCaLw4VoGIS1WtYLcJSD+U1A5KtXbnmDRRTWWIen2YO+\n8M3GT/nucTZ//mzgtSZJ9HoP2JLk0pSdg34XEVkDpUWT6L9qMvc9lP/t03gy\nZKVL\r\n=w8Nj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.98db2c5ec.0","@material/base":"11.0.0-canary.98db2c5ec.0","@material/shape":"11.0.0-canary.98db2c5ec.0","@material/theme":"11.0.0-canary.98db2c5ec.0","@material/animation":"11.0.0-canary.98db2c5ec.0","@material/elevation":"11.0.0-canary.98db2c5ec.0","@material/feature-targeting":"11.0.0-canary.98db2c5ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.98db2c5ec.0_1612798544345_0.668325393748878","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/menu-surface","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.1f86b9f6d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d361425a0c567cb8c967faf0c190fcd7c4374a35","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":38,"integrity":"sha512-jEyPIEbKRnXYrpNvJop8OVy1PwbtK1tgSpi+fPRBnshti7Hoflo0TA35sLRLHl9EOUkAhh33JSBeKyposWQyUw==","signatures":[{"sig":"MEYCIQCnTPVU8MfOC5gA6D/KUHTD4iP4pPcaUI0lH+wHki6e3AIhAK7jBUtYGIs3S2O66BcvZShMrOihYxM9bz73HeT01fxv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXJjCRA9TVsSAnZWagAAzQoP/1UFF1XBJMajHx1xTCxz\nxVvZdlIrBLGNozco6WMzLyW7ul7l585L0CQexVWUOnPywS8aXgYsgDodBxlA\nl6k79w0rhX/JARk02AMSZvGRLwuCKSVJMaAdZ3Ef0cX+DYzYwcdKJYPqEFsb\nNK66dVjgoqESyZ9v1lLN5PxzT4o2VxKki6MEblB9U4SUHZHYBg9A8wyIeeDC\nOU0+rNgNrvfJtN1wp0Ct7AUk3pmWgyIxQv0LU437tCxhFlwmbtwTjeEQ6PCu\nFjBOi1LfRiMcIzfA5XpINrqfcU2KM2BudFza4c8hlnxRxt6HVMjQaD7vr6bz\nys/pTMDJOrnuBQmKA2FW/JuiCLijcTumycyeIZWbC8Xp802JuwcUunN0HdNg\nqFxK7WM4Ko8x6C5vZc+6/p1HqVN9PurdQI7hCOw1YTOdgRoO06SfeyYwNbTz\nXylQ0b/Y/9jGiu1nqAbvPCe9ik5M4B+ZhjFulgYPMruWO7V8pQogect1Maw1\n4XOKAkxVQLppr/cKGqBNCxUIzdUcqtYZyiAgdxX3L1rT7R3FgX7HSsLAwqQA\nF5aq1IcAOeY6XfW4DetY64ev74/vZ0RSURVuZHfozBVeuoZGkc+6dPOZEmj/\n/g4/BpnaoGSsZ0dXLr8h/26ZGObacM1qBGQkinQHJYig9qRh3s1qBolR1I0i\n5tDx\r\n=4iV5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.1f86b9f6d.0","@material/base":"11.0.0-canary.1f86b9f6d.0","@material/shape":"11.0.0-canary.1f86b9f6d.0","@material/theme":"11.0.0-canary.1f86b9f6d.0","@material/animation":"11.0.0-canary.1f86b9f6d.0","@material/elevation":"11.0.0-canary.1f86b9f6d.0","@material/feature-targeting":"11.0.0-canary.1f86b9f6d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.1f86b9f6d.0_1612804706561_0.1885599357206431","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/menu-surface","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.aac8f5d9a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4fc308dbf9553655316c3923c16f559d892cdb3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":38,"integrity":"sha512-bQF9tx+Ah2pUd7jMeWjxTOmb9S72O/1GrhJtghyEl3kIzFHIfmtimGnQIbyW1T8XpXL5h0zDIQcomK3o3ymuDg==","signatures":[{"sig":"MEYCIQDzgZFD9M1hpPpx5EcbFcpqr7Ysv3XI4VTV4MQ4Ol1HQgIhANguuos+JJkqE7v79zYXv2qCeaVx8IfrTzy8sKGlAHJ7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXx2CRA9TVsSAnZWagAABxMP/1Sht6NtwUqOhrQiNu8w\n9V6NYnkEBHEaDz7eSDNlRQOuU/1rVftRIMcGWnV3HEdL5JGD5Hm2bHSRnrNE\nD6CI/qVAEIyzV0Om/6PGqHBs/D8qR/K6hWsSUQPr4/gq93zXYScOIAz5rUc4\na7HXtG8cBAM8sxeHuHTWp4Ea2feoNqFLh/eg2HdaNiHtkTi0/CuYsUCGQpaW\n5+M1z8FZVRIqIdGxG468im2OSABVoMeMOWJOFk1NaoWNNC35UFI7nn1meMHJ\nAKIRdp0V8kE2gXPHslEg+4YG9cg5vf+zDbapGTr3XM1pnH6Yp2rSw2LaFdcf\nGeVoMeINpB+xPC0si/c/HvSRjLElrLMZHddVykQEizUsssQv+Y7L/RN09hX3\n7kRmawWsFYPmfM4KyLM8wB9q/zt+Fq+tiE+J4AfIBilci3Zl9FM05wx4OCG1\nX68hQyKClRfjPnp5BMCtsBJw9i7xCU5afwp0KmGba1uNWh9Gj3AIGA39u6Cn\nV1BMUledH9Bcbj5PfRZYDW8r3m/p5Iddz3HvGGeHRPt2GybNHXZ8eHaLR/Bi\n1ROrRLjtDsql20sCbjvc+rPNl63EnkOz9W5sMsKqHVnhnVlg8SMaF/NNFWx8\nD7a9h0xuVdVE6cbacdvkZOs2JpUBU7TQ8jxkA3t9gQnb8DcIczuLpDG73yP+\nnn9K\r\n=UmUt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.aac8f5d9a.0","@material/base":"11.0.0-canary.aac8f5d9a.0","@material/shape":"11.0.0-canary.aac8f5d9a.0","@material/theme":"11.0.0-canary.aac8f5d9a.0","@material/animation":"11.0.0-canary.aac8f5d9a.0","@material/elevation":"11.0.0-canary.aac8f5d9a.0","@material/feature-targeting":"11.0.0-canary.aac8f5d9a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.aac8f5d9a.0_1612807285845_0.1210872393677993","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/menu-surface","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.750e18fc7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eaa10cd73e1a49f653b157315a1da369dd0828d4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.750e18fc7.0.tgz","fileCount":38,"integrity":"sha512-GMC+25fniEJCYs50rtin+Dv9kqElQl7/F0Izwsu1qJ5aSENDsavvRSmQtvpq3RdriKTh7gAzhdQ4Z8GkWpX3Ow==","signatures":[{"sig":"MEYCIQDAzjqGm3huqwZmZu3jE4zUFquPq9+TPXm5tf2XScKTFgIhAJwiI/OUjn4CCklPlu85c/gV3Mb/ijtwKinQMDGyu45I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIbA4CRA9TVsSAnZWagAAf4gP/08v7hdaWR/aP6gPjldE\nvh2yNnQIo1RpBuigYlNa+IvwevIHiYkFjjBNEX6IXfEif7YXxI5LUiyOQMtq\nH2EpZHGvnltIh0mhylqlezCL3Xq+jmmvk5JSR1qFrrGakwuCNkxwnvqZXtVv\nP8ot2XKairNpyYpLCxJix0vSOgzZPPYyIzAgLYE7h5Y509sAH8HgUD7NgjQG\nyxAc+ty/tX9515LGCOc8TwPOwZxpdyKlZ6V3SYa/593gj9MMk3pgmnpLqM9P\n/WyhgRTOTPXjj8som5QzBlNm63gyTN3agSoiFVDrCEjSDPhcNGCSXBWPYLzE\nSelWDOZDpzzfuhn7oDkXP0u3v6obFCwZT71n8yxVXTH28nG4fpwMsdUCUsUu\ndutTFUDoWyp0lviGu2AUs1K8rMGCoVjnNNPndE4KYr0biW4XhPgnj+zzVVsQ\noL2B7TKp+ivY8QLD8/kEX3Rmv0pyjhoCZ1E2Jgkmx+jXF3/l4VLbtgR2LgRa\nQEma1zWMZCEzcH5A8yEqjHSFo67AlWxf9KyYY+ZQzKVfuea3M0+AAk68z+bQ\n3rARSSIo1qzBbzRozVUpDMT1XC6c+cr5BDvzrpiHPRUpDM1gJUIVmI7kWX3t\nzhFDd0BzpzvGN3gk2HDadG7XndaBdNgQpCblmHRPvKjZ3wqCHm58DxYPOxEB\n9ht2\r\n=cfeB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.750e18fc7.0","@material/base":"11.0.0-canary.750e18fc7.0","@material/shape":"11.0.0-canary.750e18fc7.0","@material/theme":"11.0.0-canary.750e18fc7.0","@material/animation":"11.0.0-canary.750e18fc7.0","@material/elevation":"11.0.0-canary.750e18fc7.0","@material/feature-targeting":"11.0.0-canary.750e18fc7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.750e18fc7.0_1612820536152_0.7535017383627565","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/menu-surface","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.b62b1266d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e34ee6fe69af120b1f7138500e79be87464a8abd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.b62b1266d.0.tgz","fileCount":38,"integrity":"sha512-dfYuvwzzKcHrj48h8bu+aLIDzwDo9dVe15DBcVImkhkmtm5DsDXJSCSfehKA3BitAXPvWA3DClIWmHdPA5IT6g==","signatures":[{"sig":"MEQCICaD+ohoXVAjlxrDnM19kGXpwO+kB5KYNIgxBjA53s58AiB+LjdqjU93SqYYVV/s5x1TJOQVZyw8EbioXa13ywdhrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwRlCRA9TVsSAnZWagAAXYYP/0U64VmKt3+/TJTvP6Bk\no8JZ6jshdBOI6nCeTxPGcURpfKKabMruTM3wuaoUwM3rvO4EbKlN99y1jpOd\nqoK+QcZtUaUIeP4uq3UADuifCstxW+yiP++tlB0j1IRHu3lon6LKjtgBc/al\nfPDD59+f94xLpYYM2o1QsdyJYOZAzMXM9y1cOan8xNr2ttBtnHoyqijAH659\nCwFv9G9M+1wUlmYX1KXfoErS4+4+yuAShKfOPQOphQnesRkt7tJ6WQBa9iH6\nYwfDgPABbhrlmgofov/NTfGIGxcVEodGZ8cOE4cGl9NFv+VE/QQ92pJoZEV4\nIYeSQIWX47xW+T+XTLvHY67oBHjGk10nce6RHlu0YzOn4utLpamjJDbTKoZO\nJZdDTybluDrG2WCD7H65pGURD74cP7YNH2BTDnvW2qJT8Dyvpk6oEKkH6Lm6\nb9vjDy2hE8+jEzNiKImWSMFMWfQNGlnDvFuMoMe11i31hq87Zx8AkewGK1vn\nnmiEMbEIz2kNad/OpNKr2C5MdvlrOxarn7/7cQuJZcg5mRrfSbK7ztnzKJHE\nfwUxUy1YY2AUb/ysABNiulUaegDUEzTprXlctxhhJMrogYvKX9FkWFnJ7iJ5\nxWvHu2XOaUyPx9qmS3/L7uJi6ihK5f+dKFLvjLgwYi/m5Nr5r4bxKlUEpSqL\nhreo\r\n=/Tm7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.b62b1266d.0","@material/base":"11.0.0-canary.b62b1266d.0","@material/shape":"11.0.0-canary.b62b1266d.0","@material/theme":"11.0.0-canary.b62b1266d.0","@material/animation":"11.0.0-canary.b62b1266d.0","@material/elevation":"11.0.0-canary.b62b1266d.0","@material/feature-targeting":"11.0.0-canary.b62b1266d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.b62b1266d.0_1612907621264_0.7086152212892933","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/menu-surface","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.a6b3101fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78abacbff0f7c4725b2d3d3c3779e775b968f0f6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.a6b3101fb.0.tgz","fileCount":38,"integrity":"sha512-0I66rFvvruniY7p1NXv57ppYhRAiXDMdzrICLO8I9kZgCU6UF3GFKgT35fZYpbv3pwJwDJC85p4Tm/af+/eQJA==","signatures":[{"sig":"MEQCIDB7Xq80GgvOyVGuoZaYAHXsMcn/XmIYwHW4alGuc5yQAiBxoiLm4EbsQ4OCPhjvzjeib656yk2RNaeS0xhkoUpInQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbslCRA9TVsSAnZWagAAe9MP/2WNg843iRFGDLt6kfOI\nmD9E24JU9Xqj5hjJvT6ttzfkXXZAc5ZjzSsJcDWofBBnO0G0q7Y/toldF0Fo\nuysYjX/vkULiy491qC3s25IHtUIQXun5OEyrc1fcViVYgSiV+nZE4jVM5GJ7\n4s3Kogp1oRuXKszjq27x0lve8tcQh2XL7L4rkcGhmOYK/MZDk00mgmARunh9\nuZgeSOnlakOFFXDBFviDtmtOym/t1BlqTBjoBTOMso2h5rX72fg1fkB8Jg9F\n5DtNzIxXZ64nJ42Xn8hnsYsuPodXLcw9YjLy/VIjpW3k0Ke0M5/EWUFMHG2/\nbg9yVVsjlNk0c07OB0smu3IGzN3z9mSjOqOhAbfRtAWZhvjTThDi6jWzIlaq\nGqNYfCxeeVedi49rPmsFAk8sRvBFgMz2x3YzR13gNLBuVJ94UKPd4ugQE8oe\n/tlvpZs0qYGij0x2WonD5jqXGHis6wJ1+NgnTP5o1HQFwHNsaxY3Mh8e5THT\nz06fZojEinHvqxSZlQtr8/0Eim5CkvT/kU4790glRSJqkZwLMNgpANmKcK0Y\nuFu9HDNfuCJRN76XwOtaEwPZUm1BJJaOOjRKn2F2E98u98I/8dniZgxWWKsX\nHcQUbJItpnHdOAxgxudsOeQzc1gqyDq1Jjksss3kLWn0i4PhV3ouEs4UVtXP\noMb9\r\n=LizM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.a6b3101fb.0","@material/base":"11.0.0-canary.a6b3101fb.0","@material/shape":"11.0.0-canary.a6b3101fb.0","@material/theme":"11.0.0-canary.a6b3101fb.0","@material/animation":"11.0.0-canary.a6b3101fb.0","@material/elevation":"11.0.0-canary.a6b3101fb.0","@material/feature-targeting":"11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.a6b3101fb.0_1613085476908_0.8519188458109213","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/menu-surface","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.ed88df700.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f03ff0f040eab3a1a8cc7bf43326b6e8f33082e5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.ed88df700.0.tgz","fileCount":38,"integrity":"sha512-p53a/C3lx937oN/ijUaI7QEfLziPjnLB+Jq0jCXWWZPZdqWVxHQQGyU0rp8OiF27WvgIcoo0fNq89a/Y7nc1MA==","signatures":[{"sig":"MEUCIHpwEzj/b/s2yNRoBlB4lusdWjuAf9xNrfcJe1zkhNaUAiEAycDD1895I5Gxe5NFyjiKxQSYLbm9vyNrENcXwvM+weM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcbZCRA9TVsSAnZWagAAeNkP/RD3uPzpWzmrDtOIDs4e\npXgqsRQejsO1qWnmdjFagCSe0TcrIu6P48GwMD613hiBmMlul4yFi7C9Rc1+\nOYXaCPoSsVFu6f1E1g/OSsrFpY0bf0NH1TBvtwk3Kf0WlIyNUsd459ObHwe4\nHgvcy+B+2+ErVZogEtJ2Ct/OMSaVRIdaQmmicSOSOx4SJqdOUAtJTAzksxz4\nkyopRSyJAsXd/C4cclJFQrd5G+w72ovc83iphfwM3uKew7/B98IdqiBZiryB\nuw1RHFy4dY0Xhp+I8nJi+X4anRv+vA3ytvwRNojiux8SubLhQ37OOCzlKw78\nhPXnYqhETmR6MQifImvWqttJaRw6a97heejOBjjoF2fvMuAEWpHOX3Wz8ERT\n/Wl3W27EpQZyacBGIXnIVEvgg3D6o2R5U0ov2wCULJGN0Q0gTKocTJiq9j1F\n430tPMGqdogOzIDDNAmGLPNhpjDZsjgWl3Fdk8EPtlU4DN5Wv/vBCmKKRG7X\nihFKjDXWyfYrL6+3Rjrd736T0ZjLZLmsBOlE0vk0/GCAFP+HhCB8ICiTE/N0\n1ooDPY1ymBI8bz9iaZIZJggPnCDHTfjz5RrPMpojeSocdfCucT83SEXZ6Rp/\n7PhKLUE7t+wy/hCBaZatdfW/38QCvbUNea1MCnIBlNY0FareIOmEY9USMh/l\nirXS\r\n=6zIC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.ed88df700.0","@material/base":"11.0.0-canary.ed88df700.0","@material/shape":"11.0.0-canary.ed88df700.0","@material/theme":"11.0.0-canary.ed88df700.0","@material/animation":"11.0.0-canary.ed88df700.0","@material/elevation":"11.0.0-canary.ed88df700.0","@material/feature-targeting":"11.0.0-canary.ed88df700.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.ed88df700.0_1613088473205_0.9018363940333014","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/menu-surface","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.d30efe6b4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99384e509622c27d71ab0f6b86c73fc731ea2a1a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.d30efe6b4.0.tgz","fileCount":38,"integrity":"sha512-dLmHns9TbDnKr9VF1lMt8UBF+Bm6E6FeIzpUsJPqDe5Yo2jV9JexWq87rFM5zO9E5Iodzo/vm6/0QzXMtNxYtQ==","signatures":[{"sig":"MEUCIEgOvTV7BQIhGqvhVtu3M5tImsyn1hII9WojKUbV+ra2AiEAz7BMjrrX3gvSTXmBBzxMyjVEmrtLOzfwxAcUkCyB0hE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJestCRA9TVsSAnZWagAA804P/i9Fr1AwfhLZbQsbBAyO\n/NukvjTPEVLZTFFGfHGIJBYUlUm1z6WM9df7SBFAH/kWRT4e06TvshILbWES\nIOxT7EVXUqZM8ryxOGKYIHSBOl5nz6BcXTc6GQcY5v8O5ydM5pdFNmhHA+lv\nt/2rZioLS0tCRcHxIRdiFpnMBZUgTTT9o0ylabwFUx/8EvpxykrzSxELZUGH\n3DSVLspv1vf17DL0YUbG7KJZPmwcX68cw6U55Xq3CwM+6J2/e2qHRrgm/SPZ\n9qUyPJdjK22t3VOSTZZrZBlGRy+3JJr+/RSUTMcFlHKD+3I1Aii36aosPEbv\nLxZuEHZZZCVmqx7TPovgIcLLICNk03033SnCJTJ0kjS8qe5O3BrbsAW3/aq+\no5RsjET4CnL4MN6mHi7bZR67Vf/K+ahgTROHh3zjqhGb8xcyN8edaXRyv5g9\nEgn8TlAmaMZ41TJtZ3tp4snfspy1BooQYJvaO7Szj5vFGQRSXFn/6oKw0l+O\nLiVQK+m8nMOiVHG79TwaV++tAE7HySrfZiu3JhDybOHxzLa3t+EgTFgWxtr0\nUcxA6P5sPunFr8TmCTrJ2a+YXz8PkEChvlZBNA0iKsY3bywCEY8HXXRgN0kE\n4Z+KH0dfHMA1f9HNuG0bkKUhySI0FewnYzn+Sjs96ZvdtfjzCkKbnCN3wY8s\n/7DE\r\n=Xl2k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.d30efe6b4.0","@material/base":"11.0.0-canary.d30efe6b4.0","@material/shape":"11.0.0-canary.d30efe6b4.0","@material/theme":"11.0.0-canary.d30efe6b4.0","@material/animation":"11.0.0-canary.d30efe6b4.0","@material/elevation":"11.0.0-canary.d30efe6b4.0","@material/feature-targeting":"11.0.0-canary.d30efe6b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.d30efe6b4.0_1613097772667_0.8656051112051075","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/menu-surface","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.0393bdc4b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31bc37cf834820ff02b82b4717e112d163b3c4e7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.0393bdc4b.0.tgz","fileCount":38,"integrity":"sha512-rxPHyihZ2K1oYP6h61hZgUwsSM8y/xH30BzTTJt5mP7hUsO2pXC2BXWh/aKRtVOKL67QNzHcb/wToJSZXrgwhw==","signatures":[{"sig":"MEUCIH599xjRVKorvMQoW5oN5SMOP8NgH6TAVc01DEJ+u5evAiEA2gj8HtZ+hZlZlMqIRkNQW4Su2fGr78/0zLvbqrsVwDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgS7CRA9TVsSAnZWagAAprUP/2a199G9HC+i/JHCCAT4\nhEkHcXPbW5BG6/mKxdtcHFaCNtibyjIC5aNVssOCqYKXO9QQdvOFNoJJBGyS\nmwO9rivdb4ZP9lgw5EbJvi87QXFS/m8ToR8y0DsBxCeQQ4k0BRglaAZ8OjCd\nN1IEmGDIA6Yyn1dmNHm4G0NJ3TE5lYw9ej0jdsKynAkFoEpuQ+v1R6D1cHwP\noIgMvZMmP5VZPChyiefqksCrc636bpe6s2jF1YwFFyO8KBLG3qji+055cqhY\n+DoBwhDm0Bp2g6CyN5D1j6oBsrT8MXs0UsEFoQNS0LDGtBVvqTOEYnPm+fmP\nJgPmb2Mnk1c+eAbObmLy+kR+UitZxmOlch36mE0jQpKuOZKnttBHkcaSa/C7\nFi1rXsKaMBtfiCCb6dwUkWLfbd/wP9ILXRDPqDz3xgCY+Y7ytGnrHUvP9MxK\ncmTA0QH8cAYGfcjssG48N/zomCkDbmmIxBNaJIoeevCQSuEtFzOHoalp7HWJ\nE05AkBM/bz+xEueAEwiy2t0EBbNcDYtxp1D9QFmbY8DHuWmbDJgWvDqwTkHY\nva44NwcJaXL2JlzTobmOkQ+CgYmCm1Wig61LwGwlb6j3rdinmmr14EpfllHR\n42jbV8jk/LbGdXsXuy+2yYVHysNxlz3uOrTag55MKPf61ej5NwtjxWQKgB5/\neMrI\r\n=1Erm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.0393bdc4b.0","@material/base":"11.0.0-canary.0393bdc4b.0","@material/shape":"11.0.0-canary.0393bdc4b.0","@material/theme":"11.0.0-canary.0393bdc4b.0","@material/animation":"11.0.0-canary.0393bdc4b.0","@material/elevation":"11.0.0-canary.0393bdc4b.0","@material/feature-targeting":"11.0.0-canary.0393bdc4b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.0393bdc4b.0_1613104314999_0.5260474008827158","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/menu-surface","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.7cd26af4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2041d0236e6441393c10d6e8dec8159209bbb57a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.7cd26af4d.0.tgz","fileCount":38,"integrity":"sha512-3iYKM3vc30m0670SNCHqeuVGHc38iNY72mNgLXqxH1eAljrB9GE4/7gQsUs66nOgDCXEAPLcyF4pY6kZX7i/lw==","signatures":[{"sig":"MEUCIQCVi4nCHW3jdF0Vfctt7vIWPgp0Clrtw5Sc/312myebhAIgG+Xl8bv1tBwdx4sQlzrXdAi2t2nTIQI4/V4uENW8M8A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqYXCRA9TVsSAnZWagAAeOMP/jrlf69SWk3hMraAzIAZ\nvQLdc68Y95s21fgPcEuje/rSA1zKIEfV6m721Ktwb5QaFQvkeFPjF5nKBn5y\n24mzqxdb9zj1bS360o49iJnh5VyfziJYbqZPCZ8IB+fHWNeiOHsZB06u3rmP\nWPaqUYOyy2gHBddwE5qGcLC51Jr9EZ0Qw0KFlZ5IORg1B4gM78zIArm0l9PT\nBoDoHOcS0ICxkfBLDb0BdE9skmOV+R2ntQCjheQoJuBDCV+6M6a6ZHtmgOjM\nCWDbb/si5/rsGvZHtCBpS9CzQ7Lg9QemZtTeof5ac+WS+jV0W6ztOPmOPjvO\ntaLe1akfmaud8J5oG+4yyBvs0563EFH5MOffArbRWO8mhnmbdXBg1r69z1Y8\neWtrQpwT9EyoehR1muOcYsiQR6D6DTY0GQzHB6i3lbxHcON3QiDDHqMkZZ+N\nCa4bhEluxRg5XgQQ4UeyMAtNpao29jCoMzzLAlk9dQnD4EhQYTO+EeGO4OAt\nvRIfYm8iGLAadVIOqh3iA3/OerVTceP41eU0or4K9Fj6m9EiQfWlx+o1fOKz\nkHYRPPJXEvY+INajNyKx/cAKZgjS9MHZG2RrmNnqgcdBS6GH9UrsATACGSnl\n78cZ+bB+XsLZd2LWt3xFrIKJxtx7zyoaiyiL/BjwTNy248kh/Y2lskntXr0+\naV4r\r\n=V8r9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.7cd26af4d.0","@material/base":"11.0.0-canary.7cd26af4d.0","@material/shape":"11.0.0-canary.7cd26af4d.0","@material/theme":"11.0.0-canary.7cd26af4d.0","@material/animation":"11.0.0-canary.7cd26af4d.0","@material/elevation":"11.0.0-canary.7cd26af4d.0","@material/feature-targeting":"11.0.0-canary.7cd26af4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.7cd26af4d.0_1613145623492_0.32762881343049477","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/menu-surface","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.71fe9a067.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25f1cbaa25e39777e28358fba7531638d4c977c5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.71fe9a067.0.tgz","fileCount":38,"integrity":"sha512-mNH0L9yP1KJYB2LE25G58wCP2L5pBCSRPkq20yaT5rtJvg4XSJwyf4i1PrClQ6/6gdiUoKtOyzO4USE5g+tMLw==","signatures":[{"sig":"MEUCIBe+HQw8zoNztTPbjAcxlull+Txx7z/54jtQsS9K7aMSAiEAjG7THxW9WczaPUh8aob8DmV9AG72T1acrx2xHwDAJME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq11CRA9TVsSAnZWagAAbx8P/iEnqI3jY5lXXiutSOLm\n8mwQ4gFWEibYOCXceIJXu7mn+VnzZXGaUcTKSaHvognobBBONeCAR+kHuA47\nXH2O0RV+KaG4f95Q9AMM5NtWDkOiHWAL7/0cyQ1h8uClBD6MCxMaNJ8ZGMXY\ny4lCrQFq30V0SpqMCJb7XkTGSUqMERccM1ggzKbWXtk89/5EWStbhkzepK7K\n5uRRctiUkrmB4IHqloy9GyV3AKLRjbjGaOd3NZW5tfeFYbIkZGkZNQgYG3cg\nKXJGOjj7as16GqHaJZH1dkYIEtFzSpg/FYoYwaposP5N7zsVLdMDJtvoCrBO\ng+uiDuHXT8vYMRvh5TyV8UHxHgzRlWX3JJY0WvScQdLiWiwP91p+ELTTa16v\nB7jCWPfT15AT9l68kOIvPgjqd+oiuh0jE5aT0rp0gAjmwSE7uNE0e2ip43+x\nu1PLQec/QsdPD6H6hCr/cBMp2+tLcO8znPmPA4yZBojXpbmUxqKbRlTGDTbd\nuFhT7HZjOjlW9fmAnT9EyV7ZcdIZjGvtkCnpYdV6gnuubFRcmtmD4GYeu4Ll\nigqVrJJAGLGaKdJKOVrVjDiTUXOoBLeuUBKBqyLxkN8HB4HnM8idhvbxJtsz\nqdJINRNGG09C/ghN3JVeWsDMUhvan7IL8HpAHp0R1qwu1pLSy1RQnCRZjZzJ\nGIZ8\r\n=Axfu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.71fe9a067.0","@material/base":"11.0.0-canary.71fe9a067.0","@material/shape":"11.0.0-canary.71fe9a067.0","@material/theme":"11.0.0-canary.71fe9a067.0","@material/animation":"11.0.0-canary.71fe9a067.0","@material/elevation":"11.0.0-canary.71fe9a067.0","@material/feature-targeting":"11.0.0-canary.71fe9a067.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.71fe9a067.0_1613147508930_0.5235088470233349","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/menu-surface","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.0fd56a86b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87829353d2f386841d557dfaa3d09bf490f2eb1b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.0fd56a86b.0.tgz","fileCount":38,"integrity":"sha512-d9awl/JY0ie8FcNQn148uVZZ+Bt0JUjvfFMYDt3o+d/oN2vDRX8mqBxZY6ve8zsiCzl57hmyGlJBl/4Y0fxQdQ==","signatures":[{"sig":"MEQCIEa8h/TyQ04Z0mBSKLOUpfVYL2oDutZY740KZ0j1a3VdAiBOc2B8Nj2tfBGH7IjJzx9x4DLC9eAdxFoSb5XYaB6R3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxl6CRA9TVsSAnZWagAAs64P/3PyJncMlTsthbBhEiIs\nZfxBEs65q2hHpAx3Xj2GB6Yyex1dXc3uv7u5tfHlHxwBDUFYwCnTajl2A4jQ\nWA0wxA7/ANWQG0yhK1un4Dpposoz0BK0UYyMQRGgsgz21fzywK0bOJxMJ4Ct\nKehB8w2pkenwMkvOLW2+0J2Io4hZ1eR5OFvZrRWohjX3zrmGGXgNi1NYKppJ\nnX3rlD9l6CDEVS7ZT4wj9nCUyHQHQnFWnjydmdNAcEqWed1JWrh58gtE/3wS\ney35QMN+IKNTa8jPWMdDQJy05Rkwu73hcFtySjAph+qYQrSQOfT6DArQwH9y\nJ24N0WJRFsyx0Wo33di++82vCWJfRveeuxv1qEg2Muv+PHcvAG0Uy5o7XLGP\noJlOlbE5m4XjSUQXrjOUnw2A8HdIImq3CyJTDtdpDvROqswFnvNFMrYxlRqD\nmrgE/dmQ1vSNeyDA5bhd9jdBN/e18qlCcLGlsLS1YZSVdksyFs+GmJUalfQP\nl5I1Vcoy/39TzKOOYAWQCcw0wLz2q1gHZ48SwjftfuDSQF04aF7Vx6vrDtX8\noPen7cDdUDZB58O5tzSEk0tWSw27aJqwrdeqO0otPMGeY6vaSAtF0ZFbDQXo\nCL58YR/CSPm1pS7YrvBPIG8knnJ/b7JSDXD24E5QZKX4C6VqZAK6wfaKN3/t\nT8aW\r\n=k1nV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.0fd56a86b.0","@material/base":"11.0.0-canary.0fd56a86b.0","@material/shape":"11.0.0-canary.0fd56a86b.0","@material/theme":"11.0.0-canary.0fd56a86b.0","@material/animation":"11.0.0-canary.0fd56a86b.0","@material/elevation":"11.0.0-canary.0fd56a86b.0","@material/feature-targeting":"11.0.0-canary.0fd56a86b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.0fd56a86b.0_1613175161454_0.8447394424372163","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/menu-surface","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.f19bbc4af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fbfda912c076c990b5c082f2451782b51361790","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.f19bbc4af.0.tgz","fileCount":38,"integrity":"sha512-XtPuoIZeYfHSrOJ0HtHCpJLHM4UNWsKVLD1M5NUCo97IzRe6Zd8UnfbnG19uuHTIegEbZ9UcjloML5VjwY+6WA==","signatures":[{"sig":"MEUCIF+KAzzDrSFyrnY/3+KSQrBuwT6nasngJ0eM6Puph0c9AiEA0zHWrr847uiBH9qc1/vgYDzYEDzafxl6mYQ/hLvc7xk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLERsCRA9TVsSAnZWagAA3Q4P/2POHE4/Cp32cPJw5f9N\nT8de+Cw1I/3t+u84+hhRl0LzHSpHwDFHO+oPkYl6PL0neBtqNYOwXvRR32Qd\nse1rJt03rBqGNkq9EPaMKEQxfpTdgqk8gBURzS64O4r+3bLVfvT1t1sELZxv\nwrUaZhZIk8USiiSQ7oE1Hkj6FJ1vwUvpsSRTUPN/dq+hVmjMJcyfqZP/Q1vg\njMHEFJdc3rjLun8RtzvuKbuqRFReCKM1xd/s0S2H1FG1PcAfidf2TF99UrLE\n8640Fjs3yg6jQbVM2JYqqa3iCdg2xrdm1T0pAVrDl3/ovtpsTNFm5+38z8ug\nonq9CiF6dkZZQXPqUmJj7XrPHASU4k5BNYQHkAb3HAkOxE5vA75+pDlZ7N3j\nhANBB/UvwdWA9n4uRxSuxGYLcdYxVutTUbghB+msS1py/o1uf16IGqglVEsY\nKF5zPiuV+101FNDqZE9/txZ4z49qTsWVpUMuJ8ltm7eP4Mcrtk2rPEeUZcN4\nHYvmO3OhKeeMkTRUpwaXugqS1Na0hekgy0TQ8G8es9JEjecR/h3WKH64vsgZ\naB3w/YHkEm83/2L69Oyzue7+3/yTOEs2VEEhOejUAKYLm8OQGYaqg8WUKp+W\n2PZpBx7RvdR7tQd52NDFN95a4AAABn615vf1LB9Mn1PJXdXyKCbniIHwmFju\nghpA\r\n=PhnT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f19bbc4af.0","@material/base":"11.0.0-canary.f19bbc4af.0","@material/shape":"11.0.0-canary.f19bbc4af.0","@material/theme":"11.0.0-canary.f19bbc4af.0","@material/animation":"11.0.0-canary.f19bbc4af.0","@material/elevation":"11.0.0-canary.f19bbc4af.0","@material/feature-targeting":"11.0.0-canary.f19bbc4af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.f19bbc4af.0_1613513835958_0.005191422882254493","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/menu-surface","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.f9cac96cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afbb6d52d7e84f369b25bc0a8da5c704fe94a616","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.f9cac96cc.0.tgz","fileCount":38,"integrity":"sha512-Kt51nYjbgHNNlc4z7e+VShxY77GnbJX0rtgf9DNIShRcdNdUp+LP+hMTgFCTbMPnF/3yLWYspQTPiByxjcHnBA==","signatures":[{"sig":"MEUCIGwzx8cD3G6JBaMjjf5hWYZ+nE/b6UNO4bZdzVNbHiYdAiEA7bxI+AM9NWmjNB89t3IHiWbXTxBoxIGtpqCrsMcn3l4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLUASCRA9TVsSAnZWagAAjF8P/RFyxOowOMaVGq8qEuO7\nbyq170rwjfR8E/KqdRM89ppA/nZ11qnTrkaWjIEKTF+V3azQYp2Nb0krDXe2\nF72UVEyALwfzpx8bdT4/so1GWMLd/9uU97H/VKdZeIx7C6D1oMS4VtRcMzW9\nQo5S9Sn0Ox+K8gJl8ngwnJdyRvu+SHVKLe8a+6ocYM9U14riC9XqZ3XAX5Vw\n9r6AaUDdOt4CqYAIfa/wL5pxQ86tPPJGpsAQs0+td4nlcPstTMYvIbfbLwt+\niUZyxl1URbAZlH4STWOemCYjoiySad84B/MYcWJdPnEUEaYz/w5JNQljsS2P\nqxVpbuaG3DwzPAbWctG3QNFOd8TAvi5xEz95AzFkFdIazoF8Kz12kYaT0oUT\nlFbrJrntO0LQpS6fLymAzpJ/VNFysme27Iw4YeucnJWEIyq3nr8TIPgxyj/1\nkLiPgC9RJc+WVvvcSrAYxUqAiacF+gprxuqf8pa/J4kPoO0cz1pe/uJDlAMY\n+6B81ry/U+LU5V/j8r1kdUXmtfVp1BRffpjHE/B58iUD4JiHu3Z8GmOTJNOE\n92tzUgO8T05sUEe8L2y2GrjUAbGPBeLTeEXIMvVYewwPk2CrLjcr1FXg1+lC\nwnM/AyGJiSgwYZdeuQTNRJV2rKubUuqB2GX35griqOviMlYgnFRx3/plYd9h\nfkdf\r\n=1oxv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f9cac96cc.0","@material/base":"11.0.0-canary.f9cac96cc.0","@material/shape":"11.0.0-canary.f9cac96cc.0","@material/theme":"11.0.0-canary.f9cac96cc.0","@material/animation":"11.0.0-canary.f9cac96cc.0","@material/elevation":"11.0.0-canary.f9cac96cc.0","@material/feature-targeting":"11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.f9cac96cc.0_1613578258156_0.5769929379161123","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/menu-surface","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.79ce0878b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9d83c72cd08e13dbbae61a529c166479c83414b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.79ce0878b.0.tgz","fileCount":38,"integrity":"sha512-FlUQJC+yy66ElTP2ZfGJkEbt9SErv5AFPGZPMbH9B4NnIx8j3OHSD+kD32ZtmnUQLAVpE+QaUoyEUANVhyXPPw==","signatures":[{"sig":"MEYCIQC5SWQzp3oiOCVvvia1SvkoFIbgZREoRjFEPD/ysNcCGAIhAPXLuGNY2Ley7Bb/OfsjI6CpcsgqoRFJJKaly/H4hKxY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW3LCRA9TVsSAnZWagAA45UP/3BJaaEv+5N86Ci2pMqN\nUXQJhtW7Qor0UkqPiSfcF4A3u8St128vV/WFrw8KD07e0j09HebtCI5OI46v\nSvFq91Nunwu3ku5sF5BAQ0obewkprWyJ9JGeBM2Zcv7LaDGshtuqx/c70J5O\nruePi7S2MeicN1roxg6jn9uAopKYfvp1isTm2n6LPWBV0eIdtOaULA16wLVO\nNfn2MA8Kz55w5X0ssghyAyu+OQvsHVP1lXZEWT5neeeaaWO0SDn//Iv63jXp\nAp5Tlh6iYd/hIahbfK1J+ZFlXoP4OAZjReZ+YCRCPewiSkOsO40/ZbTdQDO9\nW9BUkRskuYCQuzsMeKldZTIHZQ3vrHOk5tG0ZoThCTyPK2w2ofkOWrmDKHvN\n0eDvkkHqGb3u5AcMvmT2wb44Xttkv+jLgSAQAqtw1X2DOeDNCa9rc13kQVej\n6zv7AueYySYEZlXk25FhxChuIR8Plwd7LLNE3LtkkJb1Lexr471zpGkKg+nR\nve3wYlMzV91VyqkZgESo7XUiyA673XSu5a2DO9KIllM8yJbTzcGrPATNRTEo\nHkvyWXW2NlJ+doWe9GmY8yXBj+nBqeIFZlbBrJZFuhpwrKMya9tg9aif+Uri\ntgiX2saZ3ssQ63BpkWmnpzK9gTEWdmSXRIRc5K5kIIV4msPqiOGGIA9q0LUt\nfzvO\r\n=Mo04\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.79ce0878b.0","@material/base":"11.0.0-canary.79ce0878b.0","@material/shape":"11.0.0-canary.79ce0878b.0","@material/theme":"11.0.0-canary.79ce0878b.0","@material/animation":"11.0.0-canary.79ce0878b.0","@material/elevation":"11.0.0-canary.79ce0878b.0","@material/feature-targeting":"11.0.0-canary.79ce0878b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.79ce0878b.0_1613589962884_0.8301068591741525","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/menu-surface","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.d6e507b5b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69145aea2da707169f64b156aaddcdc4162124d9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.d6e507b5b.0.tgz","fileCount":38,"integrity":"sha512-49v4hA0omr7y5B3Mxcpa1kkJIgod8nGJ/2pfqvZorlTtJovKTQuU0QdtUJDLDPwiPBFBlGGFb/TVQaKSRJ911Q==","signatures":[{"sig":"MEUCIFmP/bmcpcE9MS+sc2DCPndiIJNc1AV0OPP501Iime3rAiEA1keACiku3H49QBB/b7D5t68hFK9xyqMDvpTP3ouY2Hc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXWGCRA9TVsSAnZWagAAsoIP/2QMT5R5nP6Sy/I3t2dI\ndiy+ayfsmiTHKi5sRjdQf7wu6aWLVwVg2ghWSSrdvHE9qjG6NXJpLm3ch8vJ\nlWi6XI+kh6zhG0PnsmTN0KMe57Lex1QRs4GjjgBHigM1d+Wzkq2l8xlGs9Ac\nyBVw/HQcuHy4K7liWgvatuwLfmR6g9odqbnu7mN+8J+c0+EMNXcphVzrl4qy\nvtQWAiaEDW/rNMxqXLYa8d57bNenwwG0EfuWAauikhgJxE7tFPvP8W7idsgo\nsAaGvfTDahVyLO8mf58yu9gkhTYF9te+KHg7yjxBB/IgtOLnsvTGRMyZtUJ4\n5PDFsWfugDNYN5p5LImoy338RPnHD3QC8wVI0jpOMFDXWdTH49cE9nwqDSyt\noPVW+Zr6fxac/ZSWHG5HiDTwZSTB0Vb738lg+yAH0RG8jfCFxdkWH5y95hlj\nfDZiyzC1u3zXpMzNNubfvMn+bsL5qsvKiuPrE0RfwIvQJKLgAN+Rli9bgoct\n7+9/gq8PIW2QCyuD+WtoZEezvurIIYpZSR8nqMVRJegcX/9Lf5WtH7rVSpyR\nWuLPif+cTsVe9vjXDT1ObU2GG1YKHh+jHlmD2I5TA9wZnvn6Wv4cohMvVGA8\nAeM9lQvjyRF9YMXH3MRluI+E1ZV1cG0P2HPqMjV8HGNwqBVcbdlUkTWXmyzA\nIK0g\r\n=6H87\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.d6e507b5b.0","@material/base":"11.0.0-canary.d6e507b5b.0","@material/shape":"11.0.0-canary.d6e507b5b.0","@material/theme":"11.0.0-canary.d6e507b5b.0","@material/animation":"11.0.0-canary.d6e507b5b.0","@material/elevation":"11.0.0-canary.d6e507b5b.0","@material/feature-targeting":"11.0.0-canary.d6e507b5b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.d6e507b5b.0_1613591942307_0.5427314651193214","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/menu-surface","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.f2658381b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d71d930048a0391a146e8e1c4183210f31191da4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.f2658381b.0.tgz","fileCount":38,"integrity":"sha512-mpoG75P6Gsj2wicyVsojoLN7azAcnndD4jx95gBap1Ghc0dJAz0BkI4DWxGKtna2w1BAv8KxUesDPlY/sDqhWQ==","signatures":[{"sig":"MEQCIHqal7Kk6dJGhofBLY6dfOEC/2kLzqGVwOKskBFFoT5jAiBHyBwVKfNkodMQezXRSn0lkZZKSkgynkJHZwfEjjES+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZyZCRA9TVsSAnZWagAAhGcP/1oQV8U4EEDY0+7pjxr6\nQdDVf2wu4BuymeRQR7UoSDhxwNP1ztV+CVsJamsWMEMgRDgZgvxULueymMEb\ncpnkCrxuPQ7860aeK9Rib5crMOB3njbx4l98E78i/6E/XvSYtyEbOCFkPgyY\nL1QOTsBMoVpXP2FJZHHmvl1t+wSBClpAcMYmIjYnTFxj16m/ResK8ot8kjtL\nkFA+nIokNjwkzaGinzzlQZNfSOM14U0Z1DF2VeCJARgkAADvC8MMXavghKuh\n6DnUq6iv/LZZPk2K1E2z8zY2NQ6Xflewve1DGX5jmM5hzK9nAj9F9M2H36Kx\n1Rgz66GDhvs2JsaljMrHZU+rOM+695Ee8kncC7G1hjYnK+zu7/1/SQVsW32w\nbyPk2GpNOgTyG5hhmMYwd0DEf4sipT2ZKL4Tw5dVlUt7NpLj5Tl6r8/JudQ7\nwligOYazTsmMDkLdtksE7wxmZt6aArBxbe9YKUg9QTL3y48MNdgqZAs2XRhS\nhzy+WMJB5f8/yQQJA4hvkGd1kJSVuJC5qSE9GF4JS3mgP7ecTcpJ+eQ/lkOk\nRVqYzzAO8aszC1pkRRB6Xoxw4ziiqi8dp9vIJZvhNBLMKVEJHSQ6NoE5afYj\n/DQ7WQIgUSGnqWJi0JO2t11zWCjR8pPgpvyeAesSR+L2SzUy+zlX/4N/uDU2\nEEHC\r\n=9o0a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f2658381b.0","@material/base":"11.0.0-canary.f2658381b.0","@material/shape":"11.0.0-canary.f2658381b.0","@material/theme":"11.0.0-canary.f2658381b.0","@material/animation":"11.0.0-canary.f2658381b.0","@material/elevation":"11.0.0-canary.f2658381b.0","@material/feature-targeting":"11.0.0-canary.f2658381b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.f2658381b.0_1613601945159_0.1771860003647805","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/menu-surface","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.97c4d4035.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c2789de257552ef759c4d9c0893a4b68dea2a78","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.97c4d4035.0.tgz","fileCount":38,"integrity":"sha512-jit4urDsnCTgUUWAfEhkMDViCen+jcjzSaI6y1c5sRGCVoCwFy6CgMg5BX5Boav0akRm3G193g7NRsnJaQcRBA==","signatures":[{"sig":"MEUCIHfEoeKYSL4ZPHIg0YPXluNNQMs9Ysc1DypvdEnGg10KAiEA90FngjDVQSvTsd+zn+4mIn09rfB0Fdaeb/143QSq6ts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdKJCRA9TVsSAnZWagAAJg4QAJ1SFeZbLA/nxNPO41ez\nMIUMAtQyh96ZaYeFF1XLqZg6kpTlDcuxbvnOLrnbpyzK2Y+VdjIszbFjDgFD\nwxZcpjlsFeRnL0nFZwZvOYLD0q3JqS/c9QzTrbFKU8LwEX/UijgQhTxx1/qy\nQW1E2P6QacAH/p3soai2Yp/9RgpFUy8iaH/MGHyt2+/Q62cU5OcoCcThaHmY\n+DyuIQUedhJl66UEwpDCSjYZvnu/1fpk73y8P/pq2LJlkJTem+baqMFquB3R\nkQg6IaAow2vNdoqd4FVdTmi6zsioGuVh5UC5q3cEGvZ1bx5bFunAvUCU40hY\nVekRTvoAr/q4NcKeBsmmHJCL5NhjdEvy99ei6sS+ELUN2k3KnTD3pk6euiPI\nUGOzN/J25IJDRdvsQtwGQRFU5N0q4bPEanKAh3K1mJuLTD7tzzDWRz6BnaWQ\n5lWaIEfY2rcNQRcxUrq8axL+Q+oSNOX/J9dFwcOG/KAK5b5Yf4fDMGxd9td7\nJ/hmbNdQWQ5ipHw+9jzIGVhGYy26UvaVJjTxyc6K0Q1xaOkix8ypl6Ag3WlF\n0covFvdb89QqlGllB7HOXwQbLWHeflpybjQkrcD0rgalHqW9w1Q53B0WJnsi\nNjffyvgMsVb1N6F3SEScB6okI/1+tmv8Y7prTHIa526BPmNiPQcysXl/6O1m\nwzr7\r\n=HXK2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.97c4d4035.0","@material/base":"11.0.0-canary.97c4d4035.0","@material/shape":"11.0.0-canary.97c4d4035.0","@material/theme":"11.0.0-canary.97c4d4035.0","@material/animation":"11.0.0-canary.97c4d4035.0","@material/elevation":"11.0.0-canary.97c4d4035.0","@material/feature-targeting":"11.0.0-canary.97c4d4035.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.97c4d4035.0_1613615753440_0.3350100130860212","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/menu-surface","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.f5bb4648c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29859455933c293bd5ef2dec6d84cae5115987b8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.f5bb4648c.0.tgz","fileCount":38,"integrity":"sha512-1oaWPM64qteAo2Quad/uSpkasJJ/oSUmiKX4Yi8cy3+tX+BSJXupiDM5ECvfxnnIITojy3ImFf71iByN81Cxsw==","signatures":[{"sig":"MEQCIAVbzlRm09zVywYFeaHBwpYkZKKK/bLqZ+dW5F+0bkNXAiBah95q4ECDcCdNUHaGsxMSIBCWH02jrLR1CG9FGhvGKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpCMCRA9TVsSAnZWagAAP8kP/jtu5YYPr4aB9yddx244\n0dgb2+Ctxp1R+hr29gZIrl5DbaEhegvQbtEQMu8aCQIqMzb7jA8NpA9g8Y/n\nhvMvpgXtKMZ3aA1FPwKKqNDPmPVZqxUn04c+yfdEIX4+vXaMWauC6oZCSdjS\nx6MRoI6+Iy/Gx3xcXihrmVhnV0Kh6ctYrXUPfNSuiGUCEMl0xg6kucfodnoQ\nM4jiy3daEymY9C7AmxUck9nDaDWeUxhf873n2YJgQryZwgkhTrvjtIuvQ5fg\nriwZA9O0qaQFByMUsc3F4wJIZqNnAVHA+LorKzq43KpN1y9EYzRMIHq+nZiI\n9whqbJagR34asgIM/6E48+h9cqVSLUUIej5G7X0KztUTNbJyQiA1sdLkIjX9\nK9Z8QqfYBj6Wx6kfl7CPxvtBUysUUNKxLWGFNMIGMmfnAOcbZG/fNsAZAIyt\ngI+LIqUrlTgcIjUbDsnFjDfANSiDyzDimR9p80oOOGpKgvvIuYzZ+Q15zCHB\ngZEhp5xgrn6EB1gk3Iy6Cu8X597Lcco7rTHUzG1GyE30kuS4mDtBujFt2hdR\nv3fGWZvV8MxBkeNkhmo8M9JwEPA1iEuN0rpEFXBr5r3Ek+vAGR+2V7DM5Y3i\nXc29NxYzoQMWk3o0bKqmQ0DR7j+BD2bYCU0JmojBHnRGTbV4ZeEitAB/mpMR\nbDx8\r\n=sH1n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f5bb4648c.0","@material/base":"11.0.0-canary.f5bb4648c.0","@material/shape":"11.0.0-canary.f5bb4648c.0","@material/theme":"11.0.0-canary.f5bb4648c.0","@material/animation":"11.0.0-canary.f5bb4648c.0","@material/elevation":"11.0.0-canary.f5bb4648c.0","@material/feature-targeting":"11.0.0-canary.f5bb4648c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.f5bb4648c.0_1613664395492_0.3761469733364824","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/menu-surface","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.302c7a960.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73894d81ccb82a9e3b8339a6005ce5cb6d18eea8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.302c7a960.0.tgz","fileCount":38,"integrity":"sha512-I0V0uWQoMoVHYYwS4VHO9d3qZ7m8droBnE3Vop6nzwpgXhfhW1GQITF4G5bVfCvwzUvZvKHhPLDHEHaoFlRvZQ==","signatures":[{"sig":"MEYCIQCDT3/StfiI44Xat/kR7RgcSpJFiLCuYeFnuyo37uv3pgIhAML5lRjZAAGx7Po1FrofTj0+Q+G1HTFm8LS5IIFWKp49","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrRTCRA9TVsSAnZWagAAYlUQAJw8bfzuhA99g6fq2sQ5\ndUNYHLNodeZJCs76F137lZxJQSTPY/VGWrumubrW9C7aGisY+wQurCUYDco/\nWGvZEju5wHx3DHZlQVxyrnt6YP9wFR+K6p6vftcHDL0ruzUH0HHcw/2HCtwv\neqq/8u+HvpewOBwI5LvDnyC5zSUIpvX6ck6SrX7lx07L20w6KKJtbpoBeaay\nVeMivhzJLJicRvMmjsQRxfJIXyfvw4yfJy6CmoTeyRC2J5/fZS4YfI6UGgh6\n6+zr5CrBc6x3NiNIawZT0C0fEDwAMJ7zcdIcl56Bm0QjopsQEeV+mCNR0TMc\nUFKqrkmkiq4q03SGRUO5FKzn7Qyfz2TXq46F6ubQT6Ec5CCSNelbFsxGFMLl\nRDfny5EdAZSgc5t1EnVbTBNan5sAD9upQyFPwO8qwLWxudyW3bIcCOH7NvHA\nMGGoGL+YxJXUWne4MtQ5nsjdlTxucR5j4lZNSspfsvniITFWYtvJF5OkARoH\nv9nkjBlk2W481u3LKRO0A9nOi0DRD9khcBF/kPMXzm6pQVVYegNHzpW4EF1E\nibEVo2TMzgrJ+ck1SnUQwlrwGxYEGvJXC2IwEV0xuI1ZB80Pz9XnrmsmlLvO\nTQCr5aIns/XMAdnLsC1mw/6LO3eMqnfaNLqYAI8isQ5wOMAZUjBJIBaMllgU\nIbT+\r\n=LlPG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.302c7a960.0","@material/base":"11.0.0-canary.302c7a960.0","@material/shape":"11.0.0-canary.302c7a960.0","@material/theme":"11.0.0-canary.302c7a960.0","@material/animation":"11.0.0-canary.302c7a960.0","@material/elevation":"11.0.0-canary.302c7a960.0","@material/feature-targeting":"11.0.0-canary.302c7a960.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.302c7a960.0_1613673555293_0.26254262164483033","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/menu-surface","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.aa0aaf026.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3f3ff2f2a98c4c40ca936187e64e4334f4ee2f5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.aa0aaf026.0.tgz","fileCount":38,"integrity":"sha512-CCsWytWEfcyVGnKCtK2OdEcmFdM9y86PUnxXC6jxItVKk3dtCsBsMfWvH1QuVfu6Yfx7Nu9qx8P86nugpMAtTw==","signatures":[{"sig":"MEQCIDTAuh/zs/T6/67Yi0Q1TWmwXpdLXMrGRw6WBG7B9/yXAiBhAQhyBiMLIwjc4reZgBMZ5s+HQ61Grj+PWlDtprMe/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr7tCRA9TVsSAnZWagAA5pcP/16fzwWCSSsEsfinv8qg\nBZkzGxF9/Ipr6/nseTZ3rRgQ7bKkh01RCFCN+fKiYxeqyMQTEZJpePt/yumO\nogctmFp/6/g2JjADW5T+54iN6d2yW3OjCKSlrJhtU8ODzCpUm1Q/nOl6EIj6\nixG4aNeW6xWyIefQ4/4tcBLsutKIT41s33p/3zzS7SJKkWJZggmhfbkCSJ0j\n8IyoRsr0vXP8DkK6jTHEWKXlHSeGD9rqJxkx5CeYcWnYuQ+DyU9wVs9uJ0v4\nkDi4BA3xNJt05UDDIeyg0EG3ZAiyS/fcMBHQNNbVYB/8HMLS0T1LrmndAyOq\nB/ncf3PHXFyNjpCVlF+/9ZJKkbPjg9CkDn9Dw8CWWVQNkRboBgoA0azcU+rW\nrpeJDMeGkZazGa2bdw1LCWbnBretve8a5aOmKGeJK244Vu9ceg9s/ZrY4GOX\nJd5oKgl2I1kDibtMAu8JAtnZ7i6qovSNeEDM4W+iRuf6+jLEQmdca1byb+Pv\n389PV93KbRDsWyKiDGovoIzV8QzB+CvKEL237b4XG0uOrdwZTvpDmG3c3YPk\nppZSiOPzRio9mzwdo9GTOj5cvr/axRVRCSpB7v7x/Dt8dmeFrmMpb96eaCke\na2I2uusfRjT4x0WejEmhy3hHwf7HnMXcqOcQpdvSUGE7gvQdpHGWJRQUhqaM\ns2wv\r\n=Ue9Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.aa0aaf026.0","@material/base":"11.0.0-canary.aa0aaf026.0","@material/shape":"11.0.0-canary.aa0aaf026.0","@material/theme":"11.0.0-canary.aa0aaf026.0","@material/animation":"11.0.0-canary.aa0aaf026.0","@material/elevation":"11.0.0-canary.aa0aaf026.0","@material/feature-targeting":"11.0.0-canary.aa0aaf026.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.aa0aaf026.0_1613676269420_0.5374397930328567","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/menu-surface","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.07ff0c452.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16efa3e63c812270b8d992eb4186afc6d0543a3d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.07ff0c452.0.tgz","fileCount":38,"integrity":"sha512-RFi83yJ+MoHg7hEVCFyylXoIu6mU+ETXGBAWs24I9KpIrp69z9lK9eu3bnOa2IJUKzUAmI8kES+XItt3dbTi9Q==","signatures":[{"sig":"MEQCIFuRFc0VB9Yko0uwEX/vs2QSwLMo4EPf1GYBLoWzVK4wAiA+LEkYL8tB80XPWRLcqYKKlohj9h+1e/IQV1ME9ypCKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsNZCRA9TVsSAnZWagAAjhMP/1ptdWMee26QU1CI8fAg\nqvbHBc2SGvGFxiqovjig/QlZ5Iju21zxW+YazW8AYMCTWYbblC8oH8A5QWNW\nqsUqBuC1euvumFPUzT7xKn/Ne3n8u0CfGWIcxqRQ7krxiSzlsLh8+wzIMJhK\nkMZeBvjXUpk2efpMHbIgCa0dYWkCgbMHLv1kf8Ope7ciCeY/A/ffzhMI6ysu\nalZezZT742lmsR/t5V0fWN6D7lzEPiIpHYQFURhv0QM8PMkTbbQ/CTxHKrYM\n2vqesFl0w29TH0mB1vLePIDks3ljaf7D5mv4bB/+5x4usw7aiZJztr6HIO0p\nqS/Xajv/sXWzih7YPviRgm6DjtaQKV4b8S0Z+i3yQTRgBw62TsNFujNEIZDs\nT/Wg8nKxn3AzaBJSxhVLMIe6HIpG8PYNaghC4oW4qbBfd7PAc9ns7QkPnuQ2\niojbiX8bjE1qqmAeT82rW8ShlWXOXIavMq2lVddECQvVLsi8YZzkN8py0sPN\n1N5HBLNbvqMmEgY42kzkuXohcnrdkbxIcfxjfXPklpkZjysmSfsgSxXnG4Ju\nLyfhiOMutpmXzgizbZxVTNX0wMpC7W/Wulplw1JC0sfHvzDqmNypPsv3Cl9m\nsGNmJdBZGhAZL5iNuO1KTYbYjXz5veHhmkhaDnkQ6E7tS1+ZfycwQU0EU0Z2\ntFZ4\r\n=YQBl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.07ff0c452.0","@material/base":"11.0.0-canary.07ff0c452.0","@material/shape":"11.0.0-canary.07ff0c452.0","@material/theme":"11.0.0-canary.07ff0c452.0","@material/animation":"11.0.0-canary.07ff0c452.0","@material/elevation":"11.0.0-canary.07ff0c452.0","@material/feature-targeting":"11.0.0-canary.07ff0c452.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.07ff0c452.0_1613677401100_0.10136181571253222","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/menu-surface","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.bed7ecd3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7814d352c714d00ab74dd84b5742a377380f211","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":38,"integrity":"sha512-eVhh+D557PEB11s67Oh2uMDogIxT9Y6indrni4KvGP3bfW9NsQi+4Q6q42gYYzxdgsxMVKqM/3Huz5KNKMznrQ==","signatures":[{"sig":"MEYCIQDSKRxk7OYEcOHGzFehn1VMrDaOQhTQ195bobMirZg4OQIhAOcUFTw8nMfeYYr9N8SJxPx0pdVK0gf3W+aDiJ+2hIWd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvgeCRA9TVsSAnZWagAAEzMP/Rw7uyb68M8ULja1pL7Z\nffnhWDa3v5CWzo4SeSmGIhz5jbHbtmhDI0B1i8E5KbIgOHZbMVd2WPds/g2X\nm9y6uLicT4bQHTPLBWlZ9SEsfIW2x5XFsgagcLOHwAityMP02NBkBm6KE+F9\nXUYMOO38kpiuOj7Byjgu2FT9Md+gb6paEBveBsmbAThX3HA24HcjfsvZjnRA\ncDzep2Wkn93Qq8FWRlANhLYyG1MaPjiu/0+xEo0FEAEIgdJgSrZKpvmpQOs7\n8rLGP+6Mz5Cp+LXSxeJi4uUZ49rga9YiQSf5bG7OxvBojxc5tVvsN4hvJUIT\nxphUVaYBpEvcqIVwT93QGhDp22e8SpyCxnM1+KaKK2yUfCsDvWRHjZ2TBpcj\nW4tqnEygCCJHzS8qjn9laX5ZH/uP4cXEWEgXNvvk1KzOeN/+o5E6QXhAneH1\nqnz6LqIkNiSULJE/zqiXL3WevnjXowbq6sj/MK6qMYO/Uvr4p4QJxxHLbA5L\nSeYTFSajon/V6uBFoMg1OYmjE7xBLuycsmQnZySzi6J8IYY9V3prxEmLtWmS\n1KOyCnt9rYFizbfnqxWPdqWWWcm4R8gIr7B8HobEeKWGkNDLJee/lMhNhNY5\n9pod5OQ0XeVE6//Lualv/JidL8ZAvWAXpZVxD37dTigIUCTMXacW6/6NsyqZ\n+rzK\r\n=kj3o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.bed7ecd3e.0","@material/base":"11.0.0-canary.bed7ecd3e.0","@material/shape":"11.0.0-canary.bed7ecd3e.0","@material/theme":"11.0.0-canary.bed7ecd3e.0","@material/animation":"11.0.0-canary.bed7ecd3e.0","@material/elevation":"11.0.0-canary.bed7ecd3e.0","@material/feature-targeting":"11.0.0-canary.bed7ecd3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.bed7ecd3e.0_1613690910445_0.9339444930215619","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/menu-surface","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.06dead2d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efe81f283d7224ad357c9bf2d98ab21cbcc082dd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.06dead2d6.0.tgz","fileCount":38,"integrity":"sha512-wCHaXFO0M9rSK5nyygC9NAE7szyuX6PC45KrUAIHHIw9+LqMmZwCidgdHFYMxZDcCdeiINT1H0FXHK4BC/MYNg==","signatures":[{"sig":"MEUCIQDtASrR14Nesm9HwJrQe3cME8PKfbIGKJX6vgBLKgIpPAIgeXA2ln+bV288MAErumm6wEOdpxsVihhZwsm+OgPO1Ec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwhlCRA9TVsSAnZWagAAsUAP/iuAkEQT6a3krQ1m7p4B\nDLK83V2JS53Bg/rdjD1CBEJhhZoa2jmVG5VYOjZhFyG2Pmu4Dsn3pF6N4f6U\nzZgi/OIo7faaui1wHUsbd7FOrEAichhqeSXXhJqpAwOT2Pm/VD8k6dPZ3g/R\nfJgVkhHZzRuzLyreamkhaKamoslJ3pdnePrnkoz4wsiYvOtvqBltzhdm1FPB\nq19cifY25GMJ2cbaJesyNa+iatv0eGwWj7hAO1keX+T1xdiTGYiSLt4+bCeP\nDCrlQGeTBd1H4/Lkc33c+EntHiqXTQSgIGuOcpdyn9Yqes9sSKTFpG2yEgk5\n/PS/T2xaSoHfnOTRcDBx1eHhYTaLnlfaUGD6NRlzxWYIu4W8AN/iCMaecwvF\nE31clY/qQOn6AHrGThHMv3xVXwU4bhg20qbQQSSgZc4oIh30cEGYgP2y57HO\nwW+q4OOTPqt1qOCKOgGBOc1d/9F/zlL6nRHAeWnxPZbYF1LRFDU1wSAwd9p7\nGjY22jsyJymjBPyadH8TfuqzUDSqfk7MT6VmPN5oR9IRPqxOuc9krkvLcIbW\nJ4hIyBER1N+RhDrxvShKqAB/46jhROKXu6gEso5jdducJPBJOx+Ksvl38fyn\nJxTUjF73anEqL4/a4Of5HZ0ku52feQSfBobo13VyDHl79nV/L0X1rvqfOjjO\nqwmA\r\n=7en/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.06dead2d6.0","@material/base":"11.0.0-canary.06dead2d6.0","@material/shape":"11.0.0-canary.06dead2d6.0","@material/theme":"11.0.0-canary.06dead2d6.0","@material/animation":"11.0.0-canary.06dead2d6.0","@material/elevation":"11.0.0-canary.06dead2d6.0","@material/feature-targeting":"11.0.0-canary.06dead2d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.06dead2d6.0_1613695077493_0.8046366170566213","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/menu-surface","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.cddb03553.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0bd7689be8b404bed9abd20c584a3b500a5506a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.cddb03553.0.tgz","fileCount":38,"integrity":"sha512-pVFoIUn+EfUKFcP31538F0VrIrkbem38wazqIa9Z3+cZJEtyKgCwy1ocaP0w6JjAk+MxWuGAxAoT7qVjgZsAkg==","signatures":[{"sig":"MEQCIGBAexVNqepAp1UCfzkMBx7rDiOkTxSkHe2IsIpEpinnAiBCqyq1cx+qvyFsmKeyNYXkcFDJ3AwwXck7XSo6WzGp2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLyz8CRA9TVsSAnZWagAAiiUP/2GkqrlipiCbz6xlpFIb\ncvztoP0WPDbFR313C6Tkc4BPxLz2nOUGA3qO3EVqfzTV6je8ClzyEWHv1cpb\nQMPpbQPgrc8vYcOYsvR+fO/1psaZYVq+903ANb82Z4k3LfS4COZ7vhWMfJZq\nkHSRyNSwaEKZuiedJSFNZgq3hBhbRgbkSdEubeALYHQZCdj/D5h4upB+XydH\n9TahrR+W4zULoBYIGKEYoLxmRxnNA5YVm4xxTIB1g5i48F6lzJwPBf7xkl47\n0zX1upDzFstVKIgwPnR0Xrz4kNZIW1mrY6kfGdI7FeLKadcp20nbfyCGf4h1\nOGAZNdA9T4JReDP9UOvIv997HyL2lKSf5lJbbid479OXuhAcPv7jcudb9Ves\nS5ey+l+Qtt8vMC4urzf7J2UqVccnHmWFjhjp8Jqh2/2WBUSqe1m9rDF69pte\nwO7BaCSc6GWlIncH+KhpM6FDVLAVBG5+cluDVvLAVpdZJOLFau5MuvL2Q6BW\nPczJ14+FqyUXGVD3rudabkqWzDIIA3JTnpHherskluC5Uen+CAv+cb4VlFMk\n8xbSFM/bkyKBKmE143e7rREV8f2Zl+UrULiAdZtVNsEbcwQPKD+cIANP49fF\n+9qAszPsfHieTVR1cJ+volG01vpAxWeAtAi6sNqgA5P36P9iT1piO2DE2duD\nVZUi\r\n=fKRk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.cddb03553.0","@material/base":"11.0.0-canary.cddb03553.0","@material/shape":"11.0.0-canary.cddb03553.0","@material/theme":"11.0.0-canary.cddb03553.0","@material/animation":"11.0.0-canary.cddb03553.0","@material/elevation":"11.0.0-canary.cddb03553.0","@material/feature-targeting":"11.0.0-canary.cddb03553.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.cddb03553.0_1613704443984_0.29101229788648575","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/menu-surface","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.d6d8d0476.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0467c8af6131f9960d7847a3dc1722b9735c8646","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.d6d8d0476.0.tgz","fileCount":38,"integrity":"sha512-9Pc2yTYiLv+J7Z9p9XTZjLkaEj38QXph2/TiTK1/WCGf4ZOO8P5WUvg8beMbfViVD/bH+NoOhHweGsD/n00BTQ==","signatures":[{"sig":"MEQCIGKJ6lmhct2XxweVelWNmNPVP/WhDQbZ5UFTwFzqLLUkAiBvLIj9bK3LA3qS+eU0ovbHDi7riprs3hFb8dqACkglZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL06hCRA9TVsSAnZWagAA0hsQAJO/SYTSqLt++MWtIh/X\ne95pdV4XNpr+ZQ16AweUs8tEQn7rsaFOjN0Avpnp1/lTrs9Lmi77LRb7OtDr\n78PDxIGMd2eYB1LZPwMj+Xfqh1aMat8wUXN9MqI80GxJ99kBz1hoAoYeYo2n\nmleyv0WOsEeggRK2bANiOoSsfLnh1HFIwYw+PYvnQ/ZrVm1pKherHhfGsn2l\n82pj/hPLZaZ+E9xaYpQ70coryAexxOMaFsjrAzTkGu8SsFPnXF+2b1j71ymf\nwKUHPD7Rf1Pi4VIqOWc9FH1xgOqLmYbHry6OrdNxx+80dsXyG9hCrdG0cglU\nZBMfE28IOqmz9P9SeEPGEirU9duPMyoBk3i1aeF+6+AzmCT2fhqj9cpJzyRV\nnpI6WJC6YCt2/PgLGkj/byY7OKNGYyepdzKo9BDDNF2o4pu4rt0ILbIK25yR\n5FG51c4bnpj+JK90jXQ7P52EV9Q3KhxdRE5jDPWtub4LZx2n+Ycd6TF21LU5\nuVFuyO9jsnbO/m/qu4vnpai5dn9j1dnkGGA8nZ0U9pK1SyQqrkb5xoM2lNfZ\n1TNZYe+Hjg4ufLPceyRth93uZHvc2fP76oSkhnE5XiSAcNqYOhF2sMEiWddt\n4CQZO54manudrm9lqk3vSwxDbF2FjUoCuZqakIi95o2okmP0gz4eKe7Wh0BN\nwkmV\r\n=tNfh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.d6d8d0476.0","@material/base":"11.0.0-canary.d6d8d0476.0","@material/shape":"11.0.0-canary.d6d8d0476.0","@material/theme":"11.0.0-canary.d6d8d0476.0","@material/animation":"11.0.0-canary.d6d8d0476.0","@material/elevation":"11.0.0-canary.d6d8d0476.0","@material/feature-targeting":"11.0.0-canary.d6d8d0476.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.d6d8d0476.0_1613713056733_0.5541789941878643","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/menu-surface","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.0b4a4b2eb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0b28da91a043169e6f57e6bb0402ac6cc68b62b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":38,"integrity":"sha512-hxtfkFYFVtWFuxW7ux4WesXnBa8dtJhsQZeK7YRhdnRAw5mgJAWFwKZUE2vHfOTLglR/EQ2G6fh7q1x0u0y8Gg==","signatures":[{"sig":"MEUCIQDR7LK7JmvbGB912B/EwebGwY2H8Hj5dkXEr3Q2PFEeLwIgCSR5BLieKUdh1DrIqrH0sS1TWaNr56CMXGvsFKPbks4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL91kCRA9TVsSAnZWagAAjg8P/RkFSDgmkYwCx8Kj651j\ngaJtYa7Ye13zw2pmO3hZu8q9prq6p1lKw4Hx1mv1a552IGN2TxZp4U3aYNAr\ncvV8uffiISenr0YCUEHYXMtAFX3TLWVU4xRPn4dllRfwk77cTEHba63fIFoI\nTp3+/OubTGqtvlvpVOMbW/Kzo4QCxDvSEXtRvgQ+dSSIxFOqzZHj8B1Oswmg\nM/HFnTkVYaGYd6ydqqbjJ0IM+O5NdMNdrZq6BoicwwX0zIZPlhRgFH7eGRKn\n1uWq620P8t7sfxI5sWmhNZvEWNnkHe79Q7sYJoFvo2EOXy6ldxTcZAa6lD9T\njLHaMwPUbS2IbVQJVqNNQ3hpkBXOWRKpm9Tnhw99Ry+rngqQ886Hn/LZp/9A\nr5EZ/nEQSPRFWvnL45XSfw8BPNNhid0SrlPSBi/2XA0FRigqJD/b1feyJn9d\nEb20bBugrYJrc8NKhNgTsWZkQiTnT9WxNWm54kKJbj5dLiIIaeqiMlHAbV3p\nxkWaUmWLfxThJid0OjDgB3Ikj/55spG36zvY1/JQvor7KL0+fXS4O6zZOJHd\nBiWIyF9Gt6CniKbx5AHZvEzaqApriKN9Y2GtpsDYRtY6zpzwxbcHoQgS52Fr\nNj+2JjEDDqp9LBnLRrk7NozMcYuABaaMys+eEBHVXUDJlFVcfHUbg5hpXY3P\nApGk\r\n=esGt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.0b4a4b2eb.0","@material/base":"11.0.0-canary.0b4a4b2eb.0","@material/shape":"11.0.0-canary.0b4a4b2eb.0","@material/theme":"11.0.0-canary.0b4a4b2eb.0","@material/animation":"11.0.0-canary.0b4a4b2eb.0","@material/elevation":"11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.0b4a4b2eb.0_1613749603531_0.3275168885125872","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/menu-surface","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.3201cae47.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cedad3001eb71f89ebf9a6abbfcc45eb353d7f5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.3201cae47.0.tgz","fileCount":38,"integrity":"sha512-jzYE9psp7vURxUwg9m+FJTGVZgHQNrdQxWKuDf74HWhYrNVo2nk7GxUVxjfn0F93fYdq0KFg5hXh/d/eI0PHJQ==","signatures":[{"sig":"MEUCIQCkYbfPCyJRY4WGaLihiwP8bb1NDHh8hHxriVhFkh/YMwIgdZcndzKK/DK3otKOyeiFHQE/YOBBR56AN5bdRcWvLrY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMENRCRA9TVsSAnZWagAAQs4QAIm0MJeMOOg2EOaMjTAm\nrhPdN3/xw/eEpxkhMAjCsXybUr+cCsf4fLcpinlU76Bc/bBhsUEtmGKcHZcA\n6Xf3DiedQQEXOtUBjFg9LnUVXlsCPaxVLtE7m4OFWDciypt4H5RtgB/hWN6S\nQbxSD2whZjabPm4wUFA6G+R81o8QkQ5VPkyv2nhKb1KTnqtbQlrSEKIUZ2GS\nowOP3EKcFw5kMj/NjxlJIeC+Ab4xy+8aa2E5OaDM7e02+WeEdNwDC29/wpe4\n06SzPp4s+cVOSylTwLOLKH6i6uFBukROWJXeulLHXVCzvh9MzgtsUkx45z8y\n51xpKOk+l423kZSHkDE0Y7Ua7SF0mf6CbjreZ/ShmXkkyogA6ScpWKj8Uu6c\nbRv+dh7Da6bytsKTJUgJFi0kOJlqzUY8KKW95gBzhXd6GIi6t0PXzXkW//8W\nn30p0w5Qpe70SP2LUA83daI/2sAjMynAlWDYdns1ehg80wczQnV5kwQBai4n\nfmVUkMMSL2PBd3uHQKDjcx/d36/nMO8bdBEQN1cCI3Pc+tGVBFKamHfhsT1H\nadJZX+y9iRpq6YWZzwHk/0Fu5/2A5Xv/Px1Cm4tu79bv1DSTfGL16FdjdAB+\nUjLZd5GRlKr49x7Ld4jW5GXzG3JmhzfCTV2HH4N02GT92kwrERIzHfp2asKc\nW7u6\r\n=FzDj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.3201cae47.0","@material/base":"11.0.0-canary.3201cae47.0","@material/shape":"11.0.0-canary.3201cae47.0","@material/theme":"11.0.0-canary.3201cae47.0","@material/animation":"11.0.0-canary.3201cae47.0","@material/elevation":"11.0.0-canary.3201cae47.0","@material/feature-targeting":"11.0.0-canary.3201cae47.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.3201cae47.0_1613775697530_0.27002104341768973","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/menu-surface","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.f1b1fd5d3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5c570bbc52184755824ed7558dff57cb8fc464f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":38,"integrity":"sha512-GmS/TGpKuj7UlDh/fRm8iZrcrTtczm00zs4g+3FflVjAGvAILs5zigX1xNAAP7tLzmT4sZHMSt+jROZrT/DVpQ==","signatures":[{"sig":"MEUCIAC680chA2gp7jQAVhL1oCglzqUAMOlFRZfkx/CatwZ1AiEAxFU0/5wzt/qi9bkjZCVll8FNshcM6Y86FO8lrSQFMBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNAr6CRA9TVsSAnZWagAAyI4P/juAYnXKhsj1ue1eiHgn\nLJ+ZNv9JljyvZTNTwc60bOBnj0rRvDUEHhUHyb9Z3BTWBGCWQxHOyYMftFk/\nDFM9786NKMocRgBojqH9WuBQHbRsy9ob7McGLRHdP9fEqQL3oVGWLc3EuYay\nZkLsXNkrLPgMdnKLLpxLHmPLrL/hzl6w2kRc0NYZeinpXtUHMilDkA5IxPC6\nA7kERa/8LPbGpeHFhbid3lubU1sHBQIVOaZodbx7YNkAXmpEmWhHwv5heFel\nbRVAlVqnIo32fgOk9XFlqS4Ncj+7v/8jXJhMstyzs8jfPtLYIHytr6cnAz76\nI3NANddDmGrVAQnnl8NHm38gJkwtBJF2SokuW07DM/EFrJr2NhIsbC3TnJMj\nlEjo3QkJKQxbx8E3oKg5FDgnf7H8QPvhdVwBXWbB6AyKx524QyM2wvVWUpZE\nNWKqCbC616dqzKclT4xqeMmS4K13EEveJND+b6rqUjBGUjhWYYb8aL8SZu1m\nRVJKV9xX4PWudG5iXtrb9fxirTW0Og+BDvUH4wgJbOOEQwj1ftwiia4ksrej\nh2kwnpWtiVGmz7VQ2sVnbS0v9p//SGGrRrjlrDYCIEN70t3cANlWAvouckqi\n6sy5GCJQLp8VrRfC2rCEYtf1XVLb8EpEJpaefJAvOXmATCll2NqkXd1xBn4r\nbuPP\r\n=/FRz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f1b1fd5d3.0","@material/base":"11.0.0-canary.f1b1fd5d3.0","@material/shape":"11.0.0-canary.f1b1fd5d3.0","@material/theme":"11.0.0-canary.f1b1fd5d3.0","@material/animation":"11.0.0-canary.f1b1fd5d3.0","@material/elevation":"11.0.0-canary.f1b1fd5d3.0","@material/feature-targeting":"11.0.0-canary.f1b1fd5d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.f1b1fd5d3.0_1614023418066_0.8448841759863184","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/menu-surface","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.7899e0fe0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34426cb9cfa94a5592d0db34eff859324df34493","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.7899e0fe0.0.tgz","fileCount":38,"integrity":"sha512-Q+Isc0nRRlvO9bvGPOG6e2qzJmcDhpE/o7AzXskIxubLiInzr0SPfF3HrFdlUWiNeY3ttMk0jkZcw1wY9X1+TA==","signatures":[{"sig":"MEUCIQC+hTGFTj9kygpSbbeQ7vm/6B2v9SkSGJswOavoErAbBQIgJg3Ms1lS0zmRwTZwILydQQJjFlXhHb1UFaLrBxrffa0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDRQCRA9TVsSAnZWagAACC8QAIqnjUthEFvFrFHNuEgq\nJ2hjd0XWB5JuW1eKE5ySrhHiPUoQduRCOAS68nJ1B401+obJl/W+SmQ4Qrx3\nDKWH18HpiaaMG0lkN1E6AlKPFfxFHEwyxbXrVROVPJFULiVKZLJju6hhXWz6\nrwEobluIqr352Y63NvdVUe2Eezay/YNjU8UGM1+Bot+4kTuzX9JYOK6+Tluf\n/0lByB1gkkTMRTY183dWRbD4+Zv9UQw2E7WSk1YW3Ecy+VrWl9evL37AXArD\nHL1nvkXpq/dKmzSjAPkd63GLqTHAkNg03WejjnW3W+kAatFabzy9mErTCtEd\nCMcZCpqP8Q7hy+jd/EPoipvZy/RaPuCLhStnK0EuwIpsV1fQqT601tsuxJ8H\nbqJw9d2fZnOCzpYDRSM3+Eq/kfomicFhZfAAE2saqNOtWUkEEBqpmnZaOHgC\nmfgI6GQyRucCy83X330+auBagpAyof7SomUdsoGa3Syfdmps+IvqPA/blEed\np24V7OYvcGHosVyT3M8OJbbJAMfw+7WdU5s1KEgllH5/j+GbssAkOfSPDsBP\nGBUhRnHOFBXrU1cB3zxaxBgLeAXSxLxJ1lJSG9gcMSsO9Dn/M7NIGlADtwza\ns5IfMPoPW5Yfho/xVAlTQlFLmHf0FnoLXyuhx1BufxBEiAQ15M13t6hSI0Z6\nPajy\r\n=aM/t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.7899e0fe0.0","@material/base":"11.0.0-canary.7899e0fe0.0","@material/shape":"11.0.0-canary.7899e0fe0.0","@material/theme":"11.0.0-canary.7899e0fe0.0","@material/animation":"11.0.0-canary.7899e0fe0.0","@material/elevation":"11.0.0-canary.7899e0fe0.0","@material/feature-targeting":"11.0.0-canary.7899e0fe0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.7899e0fe0.0_1614034000117_0.8251273493575462","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/menu-surface","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.f19c86d13.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08cdd8957e7898a54ab5dd48f902d00ecbdeb4d8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.f19c86d13.0.tgz","fileCount":38,"integrity":"sha512-elgzofQf1OG1aaA7vEMHB5A4maCK+wNetr9Cq3f/e7k4iIeuRG7ZApm+KmYon6rIfQLWkikenDV0fy7hvzjiTQ==","signatures":[{"sig":"MEQCICgaWf6vjrgkhGa9T2JEipDnolL0MOFHQ9oHxXaKx6aiAiBr6Hgr76Rm+7YeD3LGMNDSBEcVcnt5xhgExIol1lmD4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND7VCRA9TVsSAnZWagAATOUP/0vvcBRpMjC+iXZY0EvY\nKWAXlMv5pnREEq51uV6v1cyEGfd8+1CClCBqvg4GubsfEuKcM048OPiSe/qW\nBJfTSyt6fDUw8ywqtqL0+OogeAJ6IDLB6Jmq8H5RlRpmXhziMqFCEhtrndE7\nNH81H5tkQrsqgxjZ0Q43fHbJTCMQ6EXD13X3gPiwy1ohRmkEB8Y/iHqje8/y\nLweQFNRhzDS+JoybCYFBsPKw/5j2unjdNrewiheiLEtICpTcWEx/H0Jqb9e+\nlxiQK2SqKwO5E8TWI0nMYzFW9kX35G4evj3tDqIR3SGxM7JauhcmVKuYHTJ6\noscJJfottzSSyN8OvM8tlxPWLmyjvsM5aG/rv7ZDwJd4TS3enf/C4cNADX08\nikRcDdDtbhf6GNtCADunyz6nhCPUF5GaLAyfkJUOY237QlBWM/ZhuyT0/jZb\nBIU118Xhkk0pUE75PIFdCiY9L+Mm8ZiALPgb3+KVxqM0Prg8qwJHKwacEdfD\n9tQ0hIHnHIPNJG7RscjiGO7IWPyzou9rGha6JZY2lY1DHJC8httkX7W3Mls5\n1sc9bCEVcbzbFqI3ODgoUlSSjfZolN/zTKVOfYxB7BPwdJiLv5pODM7iM9+J\nc1r+9W+tWdJuRKDIVlHkqlwuWoTSOAU/5Y+0eMs06HhgNIXP5zn+icFai5kr\nmf5Z\r\n=kxJ8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f19c86d13.0","@material/base":"11.0.0-canary.f19c86d13.0","@material/shape":"11.0.0-canary.f19c86d13.0","@material/theme":"11.0.0-canary.f19c86d13.0","@material/animation":"11.0.0-canary.f19c86d13.0","@material/elevation":"11.0.0-canary.f19c86d13.0","@material/feature-targeting":"11.0.0-canary.f19c86d13.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.f19c86d13.0_1614036692680_0.8383158736852951","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/menu-surface","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.60e892d79.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0effe5220d11a5c611151ffab77d31f49423354","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.60e892d79.0.tgz","fileCount":38,"integrity":"sha512-yfPRo7nWcM7hW+kyGptTSXi0D0B7eoOCNcHM0QWtX+QBH/weaMLzdmV5AnfPE88tCEmTCGaOfUZWwDst7qFIMA==","signatures":[{"sig":"MEUCIQDnWwB8hMJ376IlYykpXZNCyXMB1MIebyuUtZMmKZcF0QIgRUUNjIH8b4ZKnyLXSbR4fUb/Ddqp9jITbflkCeKyVKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFccCRA9TVsSAnZWagAA+LsP/3ehQlgQDmmJGICVT7/F\nhpDwsWFK0AcJasH2Q8mK7PR4pLSVaVGq9V3RIGSJ0KuRyyenO6qB0am0SKPs\nFGJ5Iy4iC2bWHts3CX9MsODIiuLj2oqe8OZpTMQQTFltug9h3cDnV+TacEyv\nV+TaMdmDkIVgjxtgprG5d29hfdvgLnbI0p1LYe2WJIHG3fAhO9SjC13NTmom\naaEhoI6D+TzifaicDiWNgFqClBS6gE1QBggY9zxg1o1+re+t8O3Tq+0m7X0a\nMrj+dJEwkJjZ1LwqeBIs7ruxgR+1XzZAUN9IhKkuobZM9k7C+ikgXl8cGKIS\na236lES1UwT3tKb62F35G8ztnFDCm73BPMCp1T1Rfs0OpxLwzwnpGk2s2vlC\nh9RSDWi9cae5xO63aMYz+6uDTSizMmwF3V1hjEE0Rgn+gZ2ZeyOycahzyGJT\n32tzXUKP/sE1HNZwKbisVdj/R1lJqIw0ffEoarSY4dXaUVR6ijyxZUZptk9I\nwS0Qsi/Mj5PQpAvDWLlM4hrymKitmdKeoZgT41siw2GroTB4fZ9vPJrMWeHd\nuO+nc2PHBqLn2lV0Fr7Zo54y3EFwufSh8VYkTL8TLNBqBKfVzO6nsAjxorNg\nhNticmnZ8syWoNe6wk56LG2kA/ZpssAscjU+rROYtRnFKHUS9Sp4x7jaHOrS\ndvnl\r\n=vYdE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.60e892d79.0","@material/base":"11.0.0-canary.60e892d79.0","@material/shape":"11.0.0-canary.60e892d79.0","@material/theme":"11.0.0-canary.60e892d79.0","@material/animation":"11.0.0-canary.60e892d79.0","@material/elevation":"11.0.0-canary.60e892d79.0","@material/feature-targeting":"11.0.0-canary.60e892d79.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.60e892d79.0_1614042907864_0.11391916959592119","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/menu-surface","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.c96bfa495.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f01a4deae73fd9cf2d805dcdb5d6c082aad05965","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.c96bfa495.0.tgz","fileCount":38,"integrity":"sha512-zN0U2SQv12jJ/dUK/zWjKp+GBT4hEisP5P++vwiZFq5pji68zzkO/Y73oef/DNBx2t35QVULHGlvErhl5GYRsw==","signatures":[{"sig":"MEUCIQCyxkUAeGTPUDxKb0g48VyQXCOheRBohxoS7Hu/U/qNMgIgC889ja+Sb40Rg/Bw+SCpPUjyFaQMS82bNL5fxCJNQFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVixCRA9TVsSAnZWagAAxi4QAIOTH/LOqSe21W3pt6YM\nCt9NTUCQ/GgsmEzSZG/8t/P1KFSgmQG4YW7aWkmizymNMxqC5zmjo9+HMTbu\nGw0FmtyB7kj0GHCICQzXbF7pXAuFafIb71SV9Y9hr7QINyBzGlD+3O9waXPJ\natZBIfknQ3HNoKquERarx4b+wNBQf+7lybV6PBS9kpjsvR1nIjW3smwjvv+g\nHHAgb/JzXxaEmsbKHzA/SCaGmQsSMFAVoxIZCF85ob09lM3AuG3YSwP7qSyq\nVaj+i3L3cXyFTwKYObAfYVO3s1tVJPCc9MnxazwAkjJ+zecIHoUaSQZ2kWCi\nv8aVzcTtp/Udcfc6IuowAIzYjJR1elgzth911OQKLg/VIVeVb+sEekXFrhUY\nISZVni4NxLHPmBCGop5yMr9eB2ges5fFLwUC9dfBlcUBqIzA+qsRvX09/3m8\nmgyzPta3NYqyMLF1MJgbaSWq+06H7GEkRbSIPBoLR6WcT0O/R4stCYZmR+jY\n7eQm7HnW1V+0i4gCL0yTiWSEPXsnWCvxrbhq6E63vjieZiC9SPrQs3FGxoji\nVnpMzSNXzAgJNYiQQ+xQdHm9BQz9mARvjmj+KVhH/AkZguc7I1wWiqLEO7xT\nqm7WaNPdgLePCIKGDGICslNOWgqLw5kyqddNazKCwzHHS4wyZhpRc4oo2MKG\nFLTw\r\n=9kY3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.c96bfa495.0","@material/base":"11.0.0-canary.c96bfa495.0","@material/shape":"11.0.0-canary.c96bfa495.0","@material/theme":"11.0.0-canary.c96bfa495.0","@material/animation":"11.0.0-canary.c96bfa495.0","@material/elevation":"11.0.0-canary.c96bfa495.0","@material/feature-targeting":"11.0.0-canary.c96bfa495.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.c96bfa495.0_1614108848430_0.562302062308252","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/menu-surface","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.fa9b59f67.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b065452ea52c62059b8b836d9d54c8697e129b8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.fa9b59f67.0.tgz","fileCount":38,"integrity":"sha512-PykbH9wgM3g6J6GzBGQAwwEml/rzaBUPg5AD31Sza8r+1ig/BqD1q7y4fgNGa6qBbcp/9yJxJy1TVTlMi009Fw==","signatures":[{"sig":"MEUCIQCEgxS1zNYcRCBLBIvvuOS4AJNyl/7U1TT/+jUpJD4mFQIgEvd6hTxt6mko389LzcDw6s4gP+0w3K505IxQ8lsfQHw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVj6CRA9TVsSAnZWagAAMvcP/iRPp5ktpoZSalJ7wiNH\n1yukmkXMWNwFcdB+uDeThGWRBUHFCQ+go2R8VOq0rVToa1i822PTEGWOZPCY\nadaUObNg2Ek+JOMVbU+MxxcGY26/e9sQAvQ0wSBJT8ZgURdrIKGgEO5agqmr\nX8wOZ6iEHuWdaQopC4Mc2ycs2yxT6eHoGNNpdFzRagMMqg1p4/xiNl7/kt08\nvBna5SHvioQOdvt55SCqdT3NVktI9iBw/yyvYvj299CxjDgqbf3UYRVijF5J\n9ljVwrNjf7PI96WRYzrXo8yKj742D5pbBKzpeej3Pux6ex+agP/TBxfCkVHv\nWfmfqp5NfMzOWyx5e6SLl394yjX7qjVSkuVUzfbrv4gyps6UNoFc2K0yu8g9\nPaGMgjgbfMnEyJ1yVgpOxwoI4ZJXD5f0gNhMYl15kjPA3/xvBxnmkvWT3i6m\n69aYdeBxjVaT3wMxSJnUXnQ6geE0OC33asWRgFTvhV5aY2ZMAIhNsCI5is8O\nrf7/mt4vNqTj6Qi9usSjlimvWKtJq2srnb/KBnCnJXGRZSDoh/zSKB9GtcDw\neYiADw7vK9/bGOP79Ii5mDtlSlk7ipqwh6I7Vlv9OcW8LBDE+OlzrcFXiH3A\nlyABcxLGuOmJYEwtsAF9U9rPQZTpLl3TW5Jc/JrQteyLKbOTZkvejRRsZnrB\nHsdZ\r\n=S8xK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.fa9b59f67.0","@material/base":"11.0.0-canary.fa9b59f67.0","@material/shape":"11.0.0-canary.fa9b59f67.0","@material/theme":"11.0.0-canary.fa9b59f67.0","@material/animation":"11.0.0-canary.fa9b59f67.0","@material/elevation":"11.0.0-canary.fa9b59f67.0","@material/feature-targeting":"11.0.0-canary.fa9b59f67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.fa9b59f67.0_1614108922222_0.6397106708823366","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/menu-surface","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.869e3497c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1edd5c6376438c23219b2606be3f5a4010fd587d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.869e3497c.0.tgz","fileCount":38,"integrity":"sha512-w9IkldUG7ZG5pYoD++rawSfO7QaZEuN1NPOxglnfdcbDjIUjv21AGLd+PECDNDO3EztVIrukNsM6ZNTqXd3soQ==","signatures":[{"sig":"MEQCIDcfccoPpT415k3FFqH5srqFL/sdG3qDMjPYbrbD0EPHAiAX2tZuEyaX4pJucEE3j5wpTHEmhB7rbfP2GwfvG++2Lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVkVCRA9TVsSAnZWagAAF+YP/2ta5I3+9DVrnFCDDl+R\nIDk2pI+F0FUUdOZo1y2ZsbSfH3AhFWo+AHokR6XqOXsWphHWgPmLzUZJXUDB\nXTV23Wk3IZWatjuYPFKZo5rLJyS+OarRBziKxr8/26sxAfnGEy6ZE8oFCfpN\nD3//jU1c9ov9AtutVAuL40Ar29Roxn8kjJUQhe7eyGK13EYbxTb8lsGhWI8D\n2NSipQuvsQAESxI/INrPqw5X/rIOarYY3LmtRXN1rBpeRAwFxOmhWFhfVLWI\nnVPH7G4Ns/aNazhnJchQhb0uvfvThYLTg9942Jz7x1676x1ypFP5p1azJdRb\nvBRMzlkS8gDaSTEhNxHAfaIqYmviX3rELhUlhqy+dtTTw7sDP77oHrS5JgIt\nR2vGuR3FVjb8r0dA6AOiMdCEwIhT+sOgYC6jCokwTe3+R6ZdJcNcubuGmD65\nIDUqsawL7kIdnZzdOtm396gTT4MQtz2x4xkh0vXk47Qj9St6OKmd0aiUI4ht\nVWwQ0oVqI1nzWIga6soXEJxybY5miqUsKA7Ww2bp9GIghmcmA+dvASIeuJAW\n4nXoRojgpeJqiutaWGNrQ04TBEGW++KNS1SOqvKEpoRkJaf6y7/BcltxRC+v\nhjwWMT+k1S5zIMG1e5nRtkAz0GUGdi7nw65Sk08vGFxcAv04axjBhr4w4KGe\ndHrY\r\n=TUBa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.869e3497c.0","@material/base":"11.0.0-canary.869e3497c.0","@material/shape":"11.0.0-canary.869e3497c.0","@material/theme":"11.0.0-canary.869e3497c.0","@material/animation":"11.0.0-canary.869e3497c.0","@material/elevation":"11.0.0-canary.869e3497c.0","@material/feature-targeting":"11.0.0-canary.869e3497c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.869e3497c.0_1614108949051_0.42934075976033537","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/menu-surface","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.8ecd7c9a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"694df96536e6fd707f9acbf1eef6b5d35fe62d46","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":38,"integrity":"sha512-hG0tSHXc2oyi0V9jC5JSCEzhwnw6ZkIJIt737T8B0IiossUheTSFhXDDo3p+wAKgfhozrrPT6erMylikwpmaZA==","signatures":[{"sig":"MEUCIH8pI5g1lHX6TzrGmVG6ebMsynALPLzaT2MlCsmnkmT6AiEArzF04T0tDdJPo+dOQtTnwm3lZPkxvZ/WN72RSIgQrys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVzFCRA9TVsSAnZWagAAAksP/RMp2NA4hieMzzYCAs4G\nswTOlpVTWKmSCkorTgSNgjQuGdv66TtGjQ2IuqtCTjJsdaHzaoBH8BLSXN76\nw21KAGT7LlXjFvJ7SzMrUanJPGRH8Ne/M1Y07Rt+Uqz1O/yim99xe+crYTw2\nHFdpaZoQdA9V7P2xuJxpDOHU8R8nnMbmOaXxZS4ujGIHsCEVRk8G5UZPj3nn\nCoa7J2LCAc/y2n7nPqgOQjK2lW+u6zhemMD9MQ+A6mwHsSW+eCgclmyUinqO\nMA6VzhV56Sn2PUxoJW9mpiX5QwQyiWBHVe+uxH7jkEKarZuew+L2k/1oPuOv\nHBa5QdhuWg6pJvK3OHi3u8bs5/9tAtf2hOVV8sdpEKBDT2yDPzFJhbRQvIlc\nXtrakoOlLutrKj2s9AlJxgfjHsy05yZbdmlp0tKNpiL7lwBBDzBdqOirBHK0\nnoANQCGV6Xhv7EUmhiR85+BSlpBPy/m8qmKtbYIOYEJ4QLDTV5EoUckXQlPr\nY3HoS9cDPz6yCUDgsofa/VCmI7fXVDAldYpT7K1HPDgtMn+p1qyviDdjHPAv\nz8qhLL4ClDcgaVTfkKeJQw+ed2AqcrAjQaR+h3GpKJBZNLKbOSyoOw33SSMO\n3JL4uyF6TfYKpUHmdZKE0Jxco1KfO4Phg7Tsue976mxqM8bJFOCqFUOCRKji\neWjt\r\n=zRUt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.8ecd7c9a9.0","@material/base":"11.0.0-canary.8ecd7c9a9.0","@material/shape":"11.0.0-canary.8ecd7c9a9.0","@material/theme":"11.0.0-canary.8ecd7c9a9.0","@material/animation":"11.0.0-canary.8ecd7c9a9.0","@material/elevation":"11.0.0-canary.8ecd7c9a9.0","@material/feature-targeting":"11.0.0-canary.8ecd7c9a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.8ecd7c9a9.0_1614109893328_0.43584998570709144","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/menu-surface","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.9c85d505b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1adcc746c890a9e36d7ca30588ed32d7f5235e3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.9c85d505b.0.tgz","fileCount":38,"integrity":"sha512-huKAujzVLzRmciL8nzjM06RytkW0ukevPOdPuc1o+DOz3CZYs+VV+qANaKFc9O8AizSle8mW6sWrpNl12Fg4ug==","signatures":[{"sig":"MEUCIQDthBTIbt0+Sy3MRjQAHQkq9mJen5bk+KuhEtJDQoYRRAIgX1p685Hyelo/yK5/biI8elTO8n+wwUD13dQmfJC6gMg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX7CCRA9TVsSAnZWagAAVPgP/ias5IeSDfIkAEYU5a6c\nFkY0Lu2zt8XxeN5vOG9sr+iu6SiBv6WlARcf4a3GOYRAPHoxDp6YTIf8hgKh\n2lhFiLdQVSdW2PfiFbtKzW8lfMMy7PTcR6kz/j99jsfhMVY+UF35groz5g63\niTGDcwm+rvW32IOlbNj+0hXDmjnYoJJTsg6R9bEevB3QjkVDo3LSRYIPTbe3\n0lZoBTwEsbYCtIkj+yQLF0tVZE3jOvKUKREz/3xkOsS+26ZvgP3OXHTbS900\nkI1tH3sW0vqPTdHv8ffV8LWGBH4DR5Kww8UR+L9DqgAP4IAsRk4Jnz9hAWr9\n2eSDwwnJ6IelqZrMgnGn9KsXek7OeAWFDLRPxQ8qOZvl6OTOz1UT3R2I9XVV\nujfbDYcp41IcV+8D0qifzfAlW6o0xN3rKBDRlmdMFpdIyD74jJwoeoa/huau\nLUIeL1YLLp7m70Y9fKfdZBUx96AVx1b1MkdZDeooXW7mHKEM07FLhcoET9Pq\n+rNT/GZp85uc/3EcFSmr+nC96G5CybQ94f6FgXYBPdwNk9hHaiyabgv0MCi7\nTgCE7xdfJo4vy0sjmzNP1/wXkMKFW8g6jvRyvaHRAnSLb1Kt+WWTaZk1NC1P\nH28p8reRak3FWP/O/aLkFGuwKbu8/gEYn2kD9bNekDZldeCaJyWbt0sayDe0\n4zRI\r\n=1lL4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.9c85d505b.0","@material/base":"11.0.0-canary.9c85d505b.0","@material/shape":"11.0.0-canary.9c85d505b.0","@material/theme":"11.0.0-canary.9c85d505b.0","@material/animation":"11.0.0-canary.9c85d505b.0","@material/elevation":"11.0.0-canary.9c85d505b.0","@material/feature-targeting":"11.0.0-canary.9c85d505b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.9c85d505b.0_1614118593645_0.04035468638025419","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/menu-surface","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.9f2e85fb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bb87eed97b103118230a09d4f859a0d6f9c02e2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":38,"integrity":"sha512-nes9CgmyQ4wW/hcuyEKJobfps/4sZIEOz68xBT+Z4L8ZBIjEtuP07AjTiG16GULS9le0QsTzkNswcjH8x74hew==","signatures":[{"sig":"MEQCIGW67Bp8Z3RpURv6K9rRc9MWXfi+7z0v0fxQvQP/8sbgAiAONXC0R986ZQ9lnLBgOTIYtKvGFS7pnixIhqQN7vwnIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbCcCRA9TVsSAnZWagAA55kP/2/L8QKJBdFG9p1PTl6y\nqc6ZDSVxGp7qxiLI4fobaaU27ctZEvDMN3vM/+fqMQ7F0P6/q+8CvqZMVFqk\n++Y4sGFrBiBr4mr0siRvS61GtBkR0QYMPgo8wIwL2v3O/lghGjvREghr7CNw\naeNQdXGns68kvVD3/i6gJBpbcHRbu80AQCB9sukvw4G/vgUdztXUCPuwab9B\nM4L5sdYm8kiPrt+yAO3+7/qeV9rYSEwMEvn/mSTXE+2xhyoqTnD6FAR+5KKR\njPwMbE6aKQkGWa9wcpV8Jy6xW61Sz5T2bhjaiZdORX8NjoHptiy9UXViMSD/\n69+fZsyN4yUjoWy/MTRcN+1b8H3wRk1B2A6zGEuFnBEOQ8cWaUxO8VvFGNH3\nZSmX1aX7/6v74sDmiS4FA8Qo8rKwKv2t3nNL8HwQEREn1LBYd8pEfOA3Wt4M\ntGD4yiMUuupsgo5l22JBL0GM+wmafIfpvSnfJ4ywGwOBJ3wP2H3G/EWXwM7e\nLjbOtcwoKZUzn+P/cU8FB77Z17z8RM7lF5snejDtQ3guAtW73n6NL/MAskUE\n8KpDkiYjL9NxmAZfvwZusW10hQSg0kzUZHedNXmlHFFjMYh9acdt4G0IBqQD\n6Ls5tIUkuPEPHx3/BBsnIQTWl1sMxSi/bkzDjW8RAHfMoiwTIL2Imm8LJOG/\n8QsW\r\n=j6ob\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.9f2e85fb8.0","@material/base":"11.0.0-canary.9f2e85fb8.0","@material/shape":"11.0.0-canary.9f2e85fb8.0","@material/theme":"11.0.0-canary.9f2e85fb8.0","@material/animation":"11.0.0-canary.9f2e85fb8.0","@material/elevation":"11.0.0-canary.9f2e85fb8.0","@material/feature-targeting":"11.0.0-canary.9f2e85fb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.9f2e85fb8.0_1614131355734_0.5515049545711435","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/menu-surface","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.19c4f29ef.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3e01f46c3f99c82e461fdec0a628995deac853c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.19c4f29ef.0.tgz","fileCount":38,"integrity":"sha512-QSEzmt+RKlSQPpq27WWrmoNryPfGtAjxT/sXcDDJMvbTyt1Bicr8xG7ikkFqmqXhce53Tpqgb+hVRZED3CH+pQ==","signatures":[{"sig":"MEUCIQDrL3LBueQ0fTfSpf7t7Y9ySnKkx385Xm2CcYD9HwZhFwIgZpMzE78aS6gZBOySrp38sK8kKZObtVZR7H3nAvCR1lg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/ksCRA9TVsSAnZWagAAj4AP/AzRNRL6vrOOPWoNDG2A\nriYuQqjH3Sw701H5+REyljvfoYl3Sxp9a8+kOLs91JXteqqR2qErQY6KK9W/\n+6SsEpwwjOE+5ef9cr3VwJNseBsri5TUE3HxBeE3SFwya/V+Y+cVE6KuTcSx\nSFW6GxWaU8XfOGsY/ov1XRBDlH0+MWn8x6FmhaGsvr00EcAIgps0uqdos9MC\nA+UcHfgmfkjnmJhLw3R/t0RMo1son9Lb8lqEwS5Tu11vzDnYYhyNg32mBnVG\nK1bHMedFCNZjlFtEfNlnVhOsJXnXND3Is4y7qQMI0b3Z9fLzR+73WSgAMLbb\nE2ROPckYauiUQ8uHKRGXLshkNziWLzuf2yLcj/aQ3+dwHXSsoSHywiUD6TG5\nR6Rb98GY294HP6GLm8hiHUQSCD9CfUKMw8wsfUKeaK8HY8u1sfkZdh1jUkla\n67aaGsOuG4inRDLbT1gsoTCRCpfe90bfEvJ9N2mp6+L+bAwgixURo5Xdk5tR\nw8AGuVn+803bskSW1ZXbAVTRcQGgYG+F3bgh+EexP105Xx111uZttbr7Xth/\nxh3iZPkjwH/MTM655MEaBZQVHn6JDuj5xprAKUuTQrmLLnnStwH0XTOPojr8\n1Fop8ESfENyAFAYsEvgK8lYaCF7deVkA2vz8oL/z9Qe4kHcoowq/gqf47WKn\nC2KE\r\n=EsSe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.19c4f29ef.0","@material/base":"11.0.0-canary.19c4f29ef.0","@material/shape":"11.0.0-canary.19c4f29ef.0","@material/theme":"11.0.0-canary.19c4f29ef.0","@material/animation":"11.0.0-canary.19c4f29ef.0","@material/elevation":"11.0.0-canary.19c4f29ef.0","@material/feature-targeting":"11.0.0-canary.19c4f29ef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.19c4f29ef.0_1614281004183_0.9485499731664431","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/menu-surface","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.63df6e9bf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b678ab2bd12b0ca6bff986b1a58d68e2f350293","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.63df6e9bf.0.tgz","fileCount":38,"integrity":"sha512-czUtIlkBHN/v0OwMTVovw2OE7+SVrxilVvOFyqfvhWD11ssMvCmniOdFmuOybQwLcrYiX80D2IR6/HC4jgeQVQ==","signatures":[{"sig":"MEQCICGFfBE6aG85hxfNnQuRdPjbfhAMS7K69hpBOOUBam19AiBaC92DtsYKysivqcdwCXRpGyXP66xngHMFW0NwiJUMrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/ydCRA9TVsSAnZWagAA4H0P/0oVbnfEOes24fv8an91\nJiWBV4pIgPAZMhaqdmfitbPRsE4EmqXwlfjO8BgR8+gcySSSntr/qmIwf5uu\nuGRrBihCEGltHy746ZQcKEMqbQA6gPh7njanwlhs61EBVn6guX2AGr23VnzY\n8kSm+dpprqX5z1q5xcb5ayDpI5Sd6VNFHZGaSAKmU16fxTi8Dol6oLdY3Jx9\n5fqkWB7+qwuhRQ4uJQCHVuooWwLChMP9eJmAqhJxzrHdIxRqKzF8lxFqetsi\nigG5zgdJ2knVIJq8eq1V87cjuIGBtDX/3i8OJCssNFFLUXtjReBIJjP+QeJ1\nRByHurmw0LTUyRH1sYUD1z577pDnlDMYwiRxMOjeHcsvFY9mYV4EAXVMEZck\n6HVzZjAarMloAiW5mloE6R118inyrW/PbcMiGFRKdyoaPuJGIAmUNR4ojLxe\nC+sYjskwLX/Z3UCYOQUYnuXwOb0jo6WNGIzHyT3kqAebrm0hJZI4/xUmQYai\n0e+BJpJ/VVYEMRno8Pd4fdn/KOTenoZOnaHUrzMgWbcoEqdRzu9OA7SX0xjf\nyZ+KDatcdgdo04LL+HWKqT6hLzf4PkdM/5U2x4sMI3luwt4Ek5Hu534/jliN\ncn7q1Lz1MLI8BXHHH3e/i1qK737xBC9ioBXytUCOAP1XpFXIBsuW2rgwT0i0\nmxhD\r\n=KRSw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.63df6e9bf.0","@material/base":"11.0.0-canary.63df6e9bf.0","@material/shape":"11.0.0-canary.63df6e9bf.0","@material/theme":"11.0.0-canary.63df6e9bf.0","@material/animation":"11.0.0-canary.63df6e9bf.0","@material/elevation":"11.0.0-canary.63df6e9bf.0","@material/feature-targeting":"11.0.0-canary.63df6e9bf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.63df6e9bf.0_1614281884966_0.08056591632832388","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/menu-surface","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.981ad970a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45918a959060baf6f9703804e61c392015f0c05e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.981ad970a.0.tgz","fileCount":38,"integrity":"sha512-3xJb5rKdz9xBYSU5K/eBTmNizqhu2YYsLvIxua4eYmjDiBjRSkYSS0Rc04vPXqcB1KPLT8I1Owv3/ftwF2LoeQ==","signatures":[{"sig":"MEUCIDXmeETJ+67vxEc4ad4rXT3YipU9GNplHW7+Iyz4LOtGAiEAu8FIyuk12GIFvbrkaE9EfkMMjZXozl6EWImcxA8jT08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODwTCRA9TVsSAnZWagAAf2EP/janQbRdOLwxFb7P0uPn\nrwwZzkIk5seeaFxhti5QwdNVmvx/xPO/yFgmiEb0a4ThAJeuLj03riSw6a51\nph6tLRXNNAr6jdNmbh/r4Am0hbj7b1kvP+P/NTEeIf4H/nFpkqP8bqdzudgY\n1M4UzPrwwnTFB0wpBOiTHccsGGZLjYlDxpi3R9oPEp7wwQV5Eu/4pUWa5Ifo\nCuh3Dd8PISxUrC4K7WTMTZ4Dm3kP7FJCgKF3wIRiaDnDS0Dzot0e9fLOlsd0\nhqpvqTJe5XjA9jFf0CwoZN8t8EH1l1MXqQN64bj4N26nWJLSJVsYHrsEjqk/\nWiM/vOToaqDcGOpR7CDM7iTcnKCowR7ld4ln0cMa7YK24/K+5e1Cu70YehOg\nv61RYP3v8iThJY8jpd9fud+k7hXbrMenvOq5kVLs1nDKNcbxy2gJQ6vzMyd3\nwWtw9IJdgsAaix0Arj3B2H7tkntjebWIXfdNTef826Zo5V2ue/oGxOE8OGOq\n5snDNLOsTcikUJ+0M4BtO1NjV/fuuCx7Gg4AmkBqMxSvNlLFV+SLwNVgkp05\nuQ8Up9OnF96u9fWg7M/FtkuVGTHkPpIAXZqytt3LblXzdfersAWqXZ5cYkoO\n3fLIgEznf0tzgnT2Qz8RSgCLPHw8hWqbjEMG4QRP5qvv3q5E0RgEhzcnhas/\nrnfh\r\n=/7XP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.981ad970a.0","@material/base":"11.0.0-canary.981ad970a.0","@material/shape":"11.0.0-canary.981ad970a.0","@material/theme":"11.0.0-canary.981ad970a.0","@material/animation":"11.0.0-canary.981ad970a.0","@material/elevation":"11.0.0-canary.981ad970a.0","@material/feature-targeting":"11.0.0-canary.981ad970a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.981ad970a.0_1614298130519_0.6692767515450821","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/menu-surface","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.f9c9e39d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c4765bbdb583792b76a532b42e421f80181faae","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":38,"integrity":"sha512-+zA7tQC2WqvzwGZX/c8a/AOzZINIr5oIvnAom5UWM/jIAIoR8d+XX5Zn1hRgusafhaBnzk6hS7U0ZmIA1TKtjg==","signatures":[{"sig":"MEQCIBXk8vhl3KO4upZmSL/v6c4k57Sy1NCE1j2gkyzYSVEVAiAHNmA+JzWOlOCiD5tyCR+JbfE2Qqb96HeuE6yWOqpRSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUBwCRA9TVsSAnZWagAAu04P/A/yAwdADWvA70iXCumR\njZOXSVeuJKw7zCvcelrNY5zOibqQTGy4fvTxAgmtdDmo4JypaXKA7bHktsdC\nsLxjZVSoxRHz1TKe1w79ED1KCK3qU0sDKHceaYjb+ialKl3MPkvpXwPA8q4R\nndS9Xl3Rdd2XQdze37n8id/Cgz4DoCxaaqXiXHdNWmnGEzWFDMQ5wCLB2Erm\nyavyW/Xdjmvo1u85aNDw1cflOzlwXbXTz1zTrGGtra/ULhqlRSdJpDWOzqaB\nXBEI1KGADNhpICKUAUUq4lMEFxiswayS9hxCsgnwdVarXfAewMFXXxJOeHXB\nQsoCQQ5YmoK7Gebp1vFQgbtiMw8kidVgQ86ORtVU8i3F4zS0YyooCova3x7X\nbRPkdgsfTUHLfwP9qRwthDWMGM4HwwWceU/DldTGzxvrJF41Wty9AiV7nJSv\nbPSEod1oWayqmAJ7TH4yvWVnrfG1XFnR9ejB+c3GhmP/Wm/sHC8YNNOQBTJS\nH1Nsn4diDAZciAQP9qzgYAs1kyx5OwcZ4X9+hMj7o9yy+FAOoE75AidgC+Aj\nO+cg87KnlRSUzPBN53J1+s7GyydcrccqNQZ7FIOdKJci6uYNL1zZbPBbOgHS\nb2Azrgo5e0AU2ZBuwIbdHZjS4YvIfVoPfUSmWgbdAgrK8OskWuQ1xz1cqztb\nau7y\r\n=7Imr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f9c9e39d6.0","@material/base":"11.0.0-canary.f9c9e39d6.0","@material/shape":"11.0.0-canary.f9c9e39d6.0","@material/theme":"11.0.0-canary.f9c9e39d6.0","@material/animation":"11.0.0-canary.f9c9e39d6.0","@material/elevation":"11.0.0-canary.f9c9e39d6.0","@material/feature-targeting":"11.0.0-canary.f9c9e39d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.f9c9e39d6.0_1614364784000_0.7415241689181824","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/menu-surface","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.c97d7d881.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e8922c45f4200bde2ad5074f1c48695c7762b71","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.c97d7d881.0.tgz","fileCount":38,"integrity":"sha512-zAmrFb5UBktWn5JqcI3uo2RaHp50P7uBMn8fMDr+ApZXuqnA6C/lX5a/fTUFFtUJ2eXSRLw3+1+k9ywV6YemQQ==","signatures":[{"sig":"MEUCIAPrMDxmXJnVpWt0WdFSCVgYKsoEd5Cc3aKmMYxkPAGYAiEAmUUUnxVulR4czgFh72tT6Zh0/D1pTFbQw1cXrTdd4M4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVRpCRA9TVsSAnZWagAAINwP/38gEMlUQi3/7OdZXhSJ\nE7BkgIg4kuttURB5s8m/4FiUhYsWPXOYSFXvS7h750m9Y5e/7SEnlxwT6rBF\n/5yvuh/jbH7OYAg1TTZgGYTozo+0QbmlULEBtsl0H1wlj4W3b6lHraeWlmz7\nvOWp+bR8eiSbkrTuYD12AvSd9ECkLlCYgFO0OL7+4vg1yvCxlbLhY3u9kXBp\nYZ0F+4ylVwhG/SW1CPQmZMrprzMbevgCGcMweeQrUOp7+M4qksy2NNplWHTY\nfXfdYnLpaGIdLITK9yMNGq42RBL5TSRnpAoHV3z01FhLflF4VJGYai/7zWSs\nqZsZlZCG1A+YfwuAp0na7dZNtr7kArY5D88yehb/oBWgG4iCLOTpgppwKbcH\nSeXtQszDmkW4j+o3xxqGD/ZX/CRN7m7HQNCu+R/39EGaYtghUB/J67tKIESm\nXj13r8rFZwEz1Trw7p+mZ1l5Qh0CodOphG4ESnoy9QekMg6pcf6P3/gC2oRn\njCNAimz76ZP/z508MsJ75rWN/8a1jlml8GLRdb+RrwoYcVcncluTUThEzqOJ\nntdhaWyG4O3WhRq77IGfyA+xMQSOLR27x+OPbRndFRf+Ar9aRwe06JfPzdv1\nkbE6KVc/4bpmdTMC0mg/KnJvHvOeVNFRbvRhM1nRT2rFFyZ86lqRSITJoy/X\nbsT/\r\n=3AD5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.c97d7d881.0","@material/base":"11.0.0-canary.c97d7d881.0","@material/shape":"11.0.0-canary.c97d7d881.0","@material/theme":"11.0.0-canary.c97d7d881.0","@material/animation":"11.0.0-canary.c97d7d881.0","@material/elevation":"11.0.0-canary.c97d7d881.0","@material/feature-targeting":"11.0.0-canary.c97d7d881.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.c97d7d881.0_1614632041353_0.0019048241078352124","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/menu-surface","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.bf670dad7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8826874041e927f74420770706e43edbd966d01","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.bf670dad7.0.tgz","fileCount":38,"integrity":"sha512-BfAAYQNpj3yyLrxNrm7f+8PRPfjkSiztDQVZNzG+rJVufVeSIY46lnnKY27nubhb9cfHRakSWG9SgSEfu6uaIQ==","signatures":[{"sig":"MEUCIG3fL7Q8EGzYXI8xofK3i35YtyvlZKIf4h+wqVIbLJo5AiEA2ktvY5uD5k64mxHDt0gHvMTfxywnr6uBPC7kZFxAJqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":344970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtaoCRA9TVsSAnZWagAAmRMP/A1JXzCOXypnqe1xEGt0\neeRw81CXmz5Ueik8zVjU8hTTyEJz5jUsfKe0QsvxFyRQJWtL9ebIgxLILAMS\ni8OFoyz+4WJkbWcIdadghH95VFmV9cGmvCh4ZzB5M1GBfAW9wpvT5YPPKQNt\ne7/hWqrmB68A3yQMT96WA6k74th7XwmCBhQ6f2ZWGf+qqn4/Pp8Wt50N9vUR\n5wzCobvC/ZdiD7yXHyu1rAv2qyNGEHBUhSimD7BU8yI0umUKYrM8QW17ukYa\n/NuOZH2dKRyKf0suQflifSZpUrJbTt6nfitMsCJWEvSp4xfP4KUuN5sHhwW7\nF1+gQxBBVu3IC7gnTqIqLEBMom8e9A6TZ29dQvmR6ijkoVqvmB6/QyOWGj02\naXPoRcFIPZdRJP4V7n3MQrFOWSEkc1DN/eXXhjFmBMiUrIv971pk4G9ERf5S\na6Z6JLfC6+yAkDr9bp5Mtrvg0g32H3c3G9ePLXJ1Xn+D7VOhguB24u590Eyw\n2mtFSvJ41xEeIWDIuCybotSGbCoM31z2peBnWKNQ5VKocuugTkOQ7g/+NoBN\nAeXFvcVqbamgOuJzRwbnFQFoj900bDMEO3yh0UILv+7jxspxkpWzonyZaiAB\nCmo8o5UUSvyqjLYWKFYTOjg/Ib1JXD+SL1Cmr9ltN1pxNqMzkaTRll1WTJFb\nza3b\r\n=Yp+1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.bf670dad7.0","@material/base":"11.0.0-canary.bf670dad7.0","@material/shape":"11.0.0-canary.bf670dad7.0","@material/theme":"11.0.0-canary.bf670dad7.0","@material/animation":"11.0.0-canary.bf670dad7.0","@material/elevation":"11.0.0-canary.bf670dad7.0","@material/feature-targeting":"11.0.0-canary.bf670dad7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.bf670dad7.0_1614730919929_0.2765459984416465","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/menu-surface","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.c7d98fcde.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d3dfcda13d7e403714706d4723d42741d4a6f39","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.c7d98fcde.0.tgz","fileCount":38,"integrity":"sha512-Oan0c9DbrF9shkynVxldRBKLruR29fcFo2UINN4w09J8KxJ0CutzQYYFoRSug3ipj/4je+MSme5r1JpcVs43Vw==","signatures":[{"sig":"MEUCIHSldE5Xq3Uu0AWgWpHbYy5eDen5LK3CX2ypH2Dixv4BAiEA5A4Mlyl2G4yJIInSg3g/pmWPNdSIRCYXhc3Ycz/i/So=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":344970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/KBCRA9TVsSAnZWagAAi0cP/iVc2I8HqFYFwmv/7FRr\nNrHc2fDaG9id5Q7f4pTA6CpZ8DvXD6aRV6gM6DSFfD93gnEiyTZktarEAwEB\nM9MR4m6XvBXfI0Y7cN1Pmmf3knrk7RtI0f0Gg0B6eFAIFWnI9qw4DOUUh4GT\nwdna/Is9lykwJWtBsOy3zA16Abmd+PjriGvuDcGiD2FPcnBL6XDe7mwQynzR\nvgwDlKoRfb43MZk6aPTsamEGcrHx8kKcm6qt8Lc+5yNgfuvmFGcmvW3YNGaa\nq9D5qNN+Q+VLUTHBL9SXn495moviDRNIFFVCLa9PoeL5P0ey9UFwjbJCwEHa\nztu38GaAK2+jrN1YzJnB3ToommguJlAs/kMOdULcWB5XgQMq2pGSk651/SCO\n5sO/Bb6A0PqUO7wXJmsj8qjErRh7vhI+vDVwUu1cydeXmKH/zWnOKw/Rd9G/\nW6LpxKEaml9BbWZ6IeY0H+MHOsitq6tVsexcD/Z7URh+9bL3TQ3z64v4GEjM\n65YBPTn7O879FkL+OLw19j26jcTkzFFas/Zplt+ZxkWalwQNPHiI+ROLmIbF\n41pgfvj9967fjIkn142JYm4PGFP8rRjQGXgDrcnutYFMx6bu3D/fKJDAR/5V\nIHYxs703sJlkvZ5j+R3DYK35BfaJrXzWSXCAGpP8kzqXXl7gziHcM7Cuewk7\nlaXd\r\n=mc3O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.c7d98fcde.0","@material/base":"11.0.0-canary.c7d98fcde.0","@material/shape":"11.0.0-canary.c7d98fcde.0","@material/theme":"11.0.0-canary.c7d98fcde.0","@material/animation":"11.0.0-canary.c7d98fcde.0","@material/elevation":"11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.c7d98fcde.0_1614803584665_0.9441412890656131","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/menu-surface","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.4fef8bc1e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65391c6902e7bad8f5121baa7c6d870f2ef2b2a2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":38,"integrity":"sha512-4gGvcgxs6rUz10e01+n0r/CwUnUgZ9W9Tf+PvLjq7Avj7Xjlt81RdwbMrePpQ22ad0HUFUTAGu4P/XG0ZkC81Q==","signatures":[{"sig":"MEYCIQDnsESfXxV64adlrD90OYycCw1l79a2cJinP7MgR9NTNAIhAMYfdLYrK6nX8IQqNLSxvxQuDegG7oTrce3WkwMDJBX2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":344970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBrSCRA9TVsSAnZWagAARz0QAI8NGfYp4KATMfmlsu7P\nzORQOQNGfwDgBMopbD6YY53YEmClNNunVY0maaLNbGpCXcV2BEDUuxJtX8OT\nof24jGQaM3E49vytpyW/ta3xT+jsI2Ywp8YLCLI2EPTQ+if35zeSCZ0FF20E\nmRjajHBDxDE86tkeIisRDU9lhS5IsO5jHesZWm6mkE+u/4LHrDY8rwC9eYFF\n9fchqAPrQhggKeky0vfL2SJDk1jKhpVY2UErxWTI8PoO9uZcRJnO2oS+a+lC\nHI/9jY1ecHNpQNAfbDHC3GO0DUnI1R77ZNHnwMbdpicxwDRwaQ7oO1rAJkYl\nblt6FCUJjMe32WpsYgEI9kB2QznXvcW9ukwH9BxHu8DqC4EyRUaS15W+gqoC\nXQyfN6bfTpYcJtC13qvaL5BYqdIV2z2Rphm88SKyy5kt8H/NJFKRox3j5Y2q\n2LRlJ6II9gYOmXP+ODpM9vI8yemWl/VEtn2ZHGWyTllYXiCoaP5RD3Fcocbm\nKD4QUxiWkKVROdxo4XAWVuEZBRg3chPElekc5fB50kkrHyFB3lNedlJ2pQH/\nOL6qCEIRSiXjTVpQFjgFcg6s1EeD5OYg21KMMjPlmmIEVJBn11xjhuPIQStz\n8XY/TxyiTBgIHlukKraMcorf3M9ToV8+4qJwnpsF4QTZpLHQPPDyFr44ODLk\ntOoH\r\n=FcHD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.4fef8bc1e.0","@material/base":"11.0.0-canary.4fef8bc1e.0","@material/shape":"11.0.0-canary.4fef8bc1e.0","@material/theme":"11.0.0-canary.4fef8bc1e.0","@material/animation":"11.0.0-canary.4fef8bc1e.0","@material/elevation":"11.0.0-canary.4fef8bc1e.0","@material/feature-targeting":"11.0.0-canary.4fef8bc1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.4fef8bc1e.0_1614813905704_0.8464654565795502","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/menu-surface","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.afae3a3ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb420668b3ee7aaf149db7a23445834bca67386e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.afae3a3ec.0.tgz","fileCount":38,"integrity":"sha512-uFp0D7DNk7FuMip9poNA91ieG5BQw2ZQHXBiLwFMj3IZZBqhS/7im8X/Hq1zbBb2CyMphPtowpnrZ9disx166g==","signatures":[{"sig":"MEUCIDU0R7YOQAzB+RjGGVGxftQ0PckZ4Lww0YuxSChepfEeAiEAggYSGHvmWnc+9gY/Ga1qscrj1bcGGEua9V8huKM9+G4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB8GCRA9TVsSAnZWagAADL0P/jrvi5VQNIxhe6rMkUl6\noyA3i4V3HyxgiC7zVGIucIcNj+MKaPym55cYcPIMae1muRlCKj1dUimh7ct7\nxYt6DjSU5aIjD/xqD4hLpQgYMPRiT8BQ4MT5iRyaLt/1o3C/os1GO326+9q3\nmV8QD5Ra17M2hxcTGRxK21DaEevC0nfrEQDWjkUGdv3JCrLycAG4IWv486ye\n1sjae2BKSKnjWxJPopCCcCyQFfjA3X0uIvM6Pv3mKP9BVSWRr/tpXGMVGVkx\n9I6TeOrznJk8FM/hlrr216yuEYrZTzdlH/W0NagvIje9hk+ceg/tm+yXMRWY\n7rjCQi9EUOQqaUY1oFQS/ueSrmlfJ6wNfOn/TsE/wW46cWVnNlvdhmwJNUgQ\n51+wl6dSJdvp8tm1phpNwEHtC4B/sPXCj4VJUlXX1jKmvllA52+f230iCwOM\nyPI1oaJe+PaNYrmLl9QFqDp8EygnvboUd4Kz6GN3oVWFvG5/GKlAB+px5MPZ\nFhqvNFokXD2GbuT0FpzwP/BZiAL7Z7JfWpDaQBeJ4BBg9NxDxLvetNxu5+IY\nIP7eB5Vsr7xv6WJVVkHl7ugnmPnI4n+Yd6YBWzHgcoO9JO1Owwc5iDr56WIB\nhdkDbsYI+c8qWn2I+ccjK+V++uZ1WPXZY+KwE9PVfxzZF3giXR2FlkzsEt0A\ncuRx\r\n=PXmP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.afae3a3ec.0","@material/base":"11.0.0-canary.afae3a3ec.0","@material/shape":"11.0.0-canary.afae3a3ec.0","@material/theme":"11.0.0-canary.afae3a3ec.0","@material/animation":"11.0.0-canary.afae3a3ec.0","@material/elevation":"11.0.0-canary.afae3a3ec.0","@material/feature-targeting":"11.0.0-canary.afae3a3ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.afae3a3ec.0_1614814981791_0.05158254781535887","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/menu-surface","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.0a0b10f22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1729b166935bdab6eeab802c62ac681d3e6441cc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.0a0b10f22.0.tgz","fileCount":38,"integrity":"sha512-c0HOzR3ixOnzVpTgtoHyu7Z7D7u/S9YXYkzwfcwrm3B4gDAwj+zHuIPTI8+NvkLM8mlk/4iyX6GYaijpDGfUXg==","signatures":[{"sig":"MEUCIGV2w5V+NNyusSZue7QQ9JhxDf9JXBz5amdCpPenOaopAiEA3Oxc6Keg74F5R6pIyfUks2rc7V9MENhuiQPERB/Rdfs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCNrCRA9TVsSAnZWagAAWfEP/2n2SljGTrHZknJpqEwj\nH+shkZxhWIsAZZzJd0mXoLL35H1XL4WCaPsaU7UNgWhB7n4z8D4QmSxMamtp\n0dzmYHHt2dna9GpMjCFfADAW+d1cPZYr+CQDcL4lW93aVBx9VTVkpofnslpF\n+KDAg/MOmDMq3hqIe1uqd5ufOunbW6ODVDjbbOti8uvi7H+f5MfMCUtaqXKB\nTiHJbaxtCWlCt8t32odSXw6YYV0jab1s788AqI64gimBZPrtE7LQ1wXFK0u9\nBA4zKJgK0fBs0ApeVVPEqGCA/ne/tiJcIPTzwSLyEdbk+nsPpyrmnv/Chdlc\nn9TwtpFJX/VHUHTUjcjkaXkswLT4F0qdIXDTkOdtVycC1DfUx82tWplTvpTI\nvw9bIhoQ8EuisAFbBD0p+toI3arGnEagSSh5H5U5bFPxUdzRJhFgWn2/ZSqZ\nD1aZX6gGiEhnVftwb3YdKhhptQWcJFeLVP+yN9i06Dbct5Vy9jHEkc1uEU2a\naqopxsCL10eUn4ANtJSi92vLo0LlzhSjUX3/q9X7RDJgTA4PXzx6DI2sH2Px\nG+GDQcJI2jKcSfdq1EjX4/Kc0PifvUHjrIz3I7KJukC2kIO5LPk46pYaAbYi\nq/PxASvOiwZuwfzAk6cJUFcjsoLt6NVKnkH+ackr97F7QYl9JyBWhFA4f61N\nkjO1\r\n=Lni0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0a0b10f22.0","@material/base":"11.0.0-canary.0a0b10f22.0","@material/shape":"11.0.0-canary.0a0b10f22.0","@material/theme":"11.0.0-canary.0a0b10f22.0","@material/animation":"11.0.0-canary.0a0b10f22.0","@material/elevation":"11.0.0-canary.0a0b10f22.0","@material/feature-targeting":"11.0.0-canary.0a0b10f22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.0a0b10f22.0_1614816107295_0.795991566489952","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/menu-surface","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.6f678a91a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"949dc1b2f42f988886964e7c5cd05b30f65639bb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.6f678a91a.0.tgz","fileCount":38,"integrity":"sha512-Yg7/lpVPf0WL4prhCgMq0xaU+mFpYVfXH6ttXi9K+9gD2YPZRMci7b8NfWMHtC8+P67LlpYEIeZcFsYpYfKP4Q==","signatures":[{"sig":"MEUCIDsuXcWEP/7SXrZWeQvc19hVv+qND0xWUpdebVdiQ8bxAiEA32eQAoNsx9cNVCs8HK5b7J04S7qRU7A+bSRk99nVpEc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSm8CRA9TVsSAnZWagAAzJUQAJYwnVmGS4MLcerP0w+g\nez1DseJt6XoZfexEzqMr5QjhOjXsNkPeJX4041GsszqxfvT92Amf2BNQFSTq\n6CGkiBcXOP3yvXFWPehj3DI6j6+3d282Bn54ZeJjoV8ytL5YjfmpdxNIa6fj\nHpHStg7o35cYXsvja9DZl6a06gkEOrxornDkIEScMLlx+DcKwzIZo8ymP0jl\nDczib5pHG843sP65+lqadNtMRzaCUYkZMzAhsPP6t47wVrDJVDjDdqEity8M\nLUsexFS8SeQdY2U0arOPeUjyH7PURqnNkcqPfMUumeleuiMhbP/ogERKul/6\nF9GFfQRRphm7/fkqttUMy28fytTTcLcrU4J0vBj1JVsltnFtoix40w1LoPtn\nAbaSoBtPToIoNmx7ovFytkrC/oMpoZQWWhEju90VGM5nB10Mq14Ikv0tGrTS\n8eOTJCtd6secVnJsA9DWxn0smct6jJj44kxkMUVj3CQxT5xeHmR9O3oqf/QO\n42QPyFxcJTYGbSNQBpNNrMa5DIVQEnd/2W/XffkUbbY0IZ7W0U9y0lbNqDsI\nu89LLYW8UqDYt5MK+6s1317EiSsLCdRnQsOBpDck4TnocgxNywNoXcpbtpLo\nMYzzLecxbQ25C5gMhOI5PcYj+yju6eESf/hVDlwoP52oLHrVphrXw73s6noP\n6wUl\r\n=RzTb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.6f678a91a.0","@material/base":"11.0.0-canary.6f678a91a.0","@material/shape":"11.0.0-canary.6f678a91a.0","@material/theme":"11.0.0-canary.6f678a91a.0","@material/animation":"11.0.0-canary.6f678a91a.0","@material/elevation":"11.0.0-canary.6f678a91a.0","@material/feature-targeting":"11.0.0-canary.6f678a91a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.6f678a91a.0_1614883259916_0.7582733588676724","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/menu-surface","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.f5f1b613c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"439f69d300b2698225437ac16342df7cd583fe48","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.f5f1b613c.0.tgz","fileCount":38,"integrity":"sha512-AC33h4qVtyYLLEknZ0n1We0pDXI7wQlWRfVPCq491jgZ5xx6FvyZDX8yXqzCRXPkOvzt1HjJW2BBWCf1tHTaMg==","signatures":[{"sig":"MEQCIDhFhceKH0En7xWGi5j7aG3odKbzycsemOQyOJuM7fnhAiBEr4cxB2cg81cwSz+3KOfOw/ECH2AYyLl+Mp6EU2Z3wQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUgNCRA9TVsSAnZWagAAtZUP/RaEQisJkp1Dhn0TafEn\nh+TUvHTAITRUjKKFB9cd4sUy9Vg2rhmcrN4Y23Fyc7SOQ72b2TTumTyNFioG\nJGtSjq4R28aa1wS4NvHugV1tcGZnshHBrNwDf6wptNtsLDLZTdqMgmDLx15C\ni39FdURF/XTOFmlxGchDnLJKJOFXGNZvkHQDKBM9yVQTAWptteNc3dYBcxGz\nNuNul8qjyrSy7uT0YbmQpnr+0XttNnv8wyAmHeBm65n9UU+m4AMQcjZJrGbt\noGU4D19Htj9J78CjbMXMXY3pHHgsINBvh8j3wE9X22nFznLstv3AmCrJLPF2\n++45jEXQz72Xby6uh+i8dGmZDiPjZONV+iN/2oDyH9ITWJqC+1ku6Uy4shyU\n4Cg58QC9bMOVpzGNN9SoiggSEz2DdTyIRPcw3O5opOZPRkyfL5yQv8hZgj+h\n2sU/BXVyj903xNRf2Nj85PunQGf5WZt5poshETah30NOSvsetlBDOPzSqofs\n8a0jok49NbLZ+Vq/yq8HYrZpxHsqUgmJw+cCss1A+7Ou9oScd2xFv8VoMcqV\noXMleQEWlR926D1RAvmPgdc4qmWPcWQef7Pgo5E8xB/bg/BJv8bA3g0y5t3K\n7JN3Fu6PPMV4hBWw9BTTcKFIDVzg4u1fPaPT1oiN7aIQI5zzkWs9rlYSelTn\nNfUo\r\n=x7q5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f5f1b613c.0","@material/base":"11.0.0-canary.f5f1b613c.0","@material/shape":"11.0.0-canary.f5f1b613c.0","@material/theme":"11.0.0-canary.f5f1b613c.0","@material/animation":"11.0.0-canary.f5f1b613c.0","@material/elevation":"11.0.0-canary.f5f1b613c.0","@material/feature-targeting":"11.0.0-canary.f5f1b613c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.f5f1b613c.0_1614891020974_0.5618564127502639","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/menu-surface","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.606e767ef.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddd1b65ba5bdc1068a9f5b88ca36bf49e0f0aa88","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.606e767ef.0.tgz","fileCount":38,"integrity":"sha512-ajWpXCIlSMLRWafH/OZDnM8ZOCLr5dDrOdXmptKrPcopaGljOvVqrvUfA9XGHkdNQKRXqWa0QmjjTe2w4PnRjA==","signatures":[{"sig":"MEQCIA/lyKYkqbUastPCMn7gpXqUToOycPa2yeVgyaljDEEHAiBUdTNTVQnzCFGt4EjiI+oqPcQDgm/BYNeU6GRPR1533A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVU9CRA9TVsSAnZWagAA1IIQAJ3T6wZ4fKsvjnpsQM9i\noWWUKt1ULyAf2w1iGA8Gm2BSCHRWFs3S5tDdhgQdNVkpYvrdtczhqNlTL1Z5\nf7OJHEkFM+1NHX3ir8K0gAmli9n9Jnq88u8n0gLcJtEfUsksDammx2VU/kPf\n1kOYFf5Gynr8ClpUPMogYKsLIJ2wTcyxxlaYVvSpVgJFP7MfvE65h5bBigCo\nvfLtbC1PcuZkGOldkkeRn772Zo0b+WVbICdjwdc2obEJXnRiJg5SRFfuMBGF\nAqBK1AiDFnlzGRwB7J+cwzaMpsy//lSkqUAeV9UqIOyVAqG3vinZZpbWZV1h\nferuf/WPP5PfVZ3aQgNHlQEk4wE79C4hDE4BqQCQh+U3gSa8dnZ246i5F4cb\nnoSJbh16va70D3QnTKHzat2hXYHePZZTrXVke2LsdPcJfEm6p+IESEID5E07\noEejo0AseLXCQMH9C1Aa90Jr/M/otqbCepRO1DFv/yYn6KOi6UVTk6tnPOMk\njtJk/Dck8639smJxOQiPVxJoQAXR2jYSyx+iormCD6nk9qq1y8fHyqOvUIlZ\nXa1kpNMZTSV0yMazC21dh0y4dNQV8klardpvuI8FCBy4LLmZ0lloFG67bCNK\n69rOZdHGZRSZgas0wSAkI4p7wT0CK+mtC54MhX4EZE67CfEx9w7QiC55rPj/\nHoRe\r\n=qYZ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.606e767ef.0","@material/base":"11.0.0-canary.606e767ef.0","@material/shape":"11.0.0-canary.606e767ef.0","@material/theme":"11.0.0-canary.606e767ef.0","@material/animation":"11.0.0-canary.606e767ef.0","@material/elevation":"11.0.0-canary.606e767ef.0","@material/feature-targeting":"11.0.0-canary.606e767ef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.606e767ef.0_1614894396704_0.06588307118270942","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/menu-surface","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.f77a4dd1a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4911569f51251dd781a59ba21e833134565a04bf","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":38,"integrity":"sha512-+jh11dOzTCV++g0uSmZ8L4ss+mFi3PqrqvQNrCic0tSQVn7+HlAdKLmTG9ljt0c+noEQO2sd3JWISo37TggZVw==","signatures":[{"sig":"MEUCIBb9Lj0ZoAHXiEwhF+0RXG3D5ZIL9UFulyxUA5prG4MXAiEAwmBBq6kLuxrnJ/G9qu4yBXHhM8fzmsEFNiH5YblmJwc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQwfSCRA9TVsSAnZWagAA91gP/jBFsVZ1UNQ52jJirnFK\nMLwk8d/0vEUFIscQyO2kIZmtW0efmMMoGiE2eXGUkmkLuvw1LT0nXl0zehz1\nau0GVEK1YxSxCX+9ppFH3jZmaU5ri014Y+7w2/1kVjgWRg9XVAQgbz05odo5\nADxe38Qbt/ov/H2s+GdnxhpJ1qj4AtEoD6gu+mohN4pXT5e+zoj+K6iqP5Pv\nj38l9IodQysgKwpS9GixOuVlcxgLwffD0Ir0SS0PfqFp9/Z4t54mKMApxD0v\nILBwyQJrPqMw2jpy9BcsmmQm+dCZ1okjK90G5GgXekd5xZWdxgGqXahNzRzh\n7+X81Gtw9YlmmnobYZaU/v00YG46hFd7CiBaL874HUdTa/AdViTwWytghZaM\nYosMxaV2MZVOoGklp0I4j4FARjDk0salqEj2tat3mUp+EgoOCWa8afL18kiz\nhyhkriQBHP9HlvsA/QfN6DXQlO5GKiyv70b36b6+rXjC35zFu4L4Qar3mbeB\n8lspGASLdwiCzYVIc5bUieKjXO8ZCHN8aIlJ9M6ICIhex+LMmBkJ19h27Cdi\nzRwBupJg4PYAOQF9zo26gSmAzffia5ScQAsJP2K4SvmSf9/kaZMGdlNUtoVt\nNhXkMWqPzIqx2lFl1eFFL5h7FOcnhuiAtWewsinezylhCO6xBzKe9UJtCi3G\n5fc7\r\n=81z9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f77a4dd1a.0","@material/base":"11.0.0-canary.f77a4dd1a.0","@material/shape":"11.0.0-canary.f77a4dd1a.0","@material/theme":"11.0.0-canary.f77a4dd1a.0","@material/animation":"11.0.0-canary.f77a4dd1a.0","@material/elevation":"11.0.0-canary.f77a4dd1a.0","@material/feature-targeting":"11.0.0-canary.f77a4dd1a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.f77a4dd1a.0_1615005649561_0.9044402027847729","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/menu-surface","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.2d6ba2c23.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cd4f3e369c20225172dfff01ead4647dd0e4c86","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":38,"integrity":"sha512-5RO7g5TPJKeeJkdZyv6yfVF813CQr+R297tHOLI1/pLVSq8FdTZ5op5/91oLbkqSDclNdpTcpzPWKELrw1lazQ==","signatures":[{"sig":"MEYCIQCXcrZ099KSEKAzepMi8wBCwER3RfYguhjdd07eEjJDuAIhAMAmiK1XcnzjcgWqQdOy9dmf1+g0C5agHKl0X1fW79xT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqjsCRA9TVsSAnZWagAAL4EP/1xZrxTYiOXKrB+Oo4f/\nBssOFOePeb5gFeQus6y+1WaPR+KV6fFYZWbVoCX4CzA/GCRQD/CxeyndhtYN\nkmw3qOkHwW8GRKyM2cNnY6ZnfMm7a1t8N/THILhTineFnqLFrhQwgfjrN10G\nBTwkLvYWUk1VOGjSPZ51j27wFUE3mWwOdO8C/wGI6KKIQ3nDxoIyOS22QNgH\n0JnPxQ88LJVpxNfPlWTh080VNsFXw6S3h14VqRwFc7nqyZpACAzmk931Vw2q\nea6iFvCXIqIc41LMJtdfRV7GjjrN0Utf56Py5EXL3T35zq+APUdWFjv52H9s\nCCdW7U0BhtTmuQHGgw5R7TbUAuxthTIqlmPBPrdH1lEMrLsDMChEd/5XX6Nx\nEDiFZW1FmfwfK7Hxq6+8tV/dwc7QMUnSpuaIKdYW5URpUtkcqgH/VaVV6gKS\nVSYab+2ptPpHCKOwlTOdXK9d/qnBdOG/Qvhx4Hr/zH0LLHp11jLquostK48k\nV2H6PnGU2fAoIOkSYFawC5Er/sKBQzpisqsWgtwGN/0owRvDI0uWwsJhEUbk\nsXTaE/QiluNQJ+ZpUeB1mGr9++zEkPVu2XZJ4/FBqC88DF6zYQKt2FzFvj2t\nDw/Tb8Pj54oEqGYVyDke2CveEN4KVUV7p5NMUoPidCI5LjiQcuuL8b60cdpQ\n7LDC\r\n=WBuE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.2d6ba2c23.0","@material/base":"11.0.0-canary.2d6ba2c23.0","@material/shape":"11.0.0-canary.2d6ba2c23.0","@material/theme":"11.0.0-canary.2d6ba2c23.0","@material/animation":"11.0.0-canary.2d6ba2c23.0","@material/elevation":"11.0.0-canary.2d6ba2c23.0","@material/feature-targeting":"11.0.0-canary.2d6ba2c23.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.2d6ba2c23.0_1615243500316_0.895084334958161","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/menu-surface","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.7522dcaca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89c9164640ca3a8c5884b1a1988e74e4c8e3e9da","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.7522dcaca.0.tgz","fileCount":38,"integrity":"sha512-eHxYlkMYVhE6+QHNV3Ozu/fOoSWLwdnEryjgAVG+lezy1+Fl8kKxyJPpmOnDotL874CBLPoa0pA8qxidIIaqfg==","signatures":[{"sig":"MEYCIQDRVgkJMYSqrka8BInIoHg/HPRqFEfyKR72m/1jIYgHFgIhAJSyUA5ZhTANT4WcWKu2dYPpib4qmZQKNnnf8ZcSTo9z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsEoCRA9TVsSAnZWagAAcEoP/RYHGADuByTlK+4PEm7k\nbtitvtwVGJKU/oZV/pY/p9ueyX6BltkPzIzoa9LzkBKdT4gSQ7eDQeK1vfK9\nsXMQDbEoIcjsZZ6bjnxHVaXUfaE+P5wuROVbXXRoCfMUV43HsdtJAyOd8AM2\nf8AtJplLvqEIl0bkQUu6R3VTIyV7rVEM4g3Jjy8mbPOarrgPXjfuWinZF7CJ\ndDYvhZv1kVMzA3WXdwFmiRyCEKaFfjVqJTPtMa83SyGL+A7NfCHyRMxn7tJo\nKQOKWrDdtbVCTZWKUHXedkpykz/Z1ywg73Mm2QQeBo9a3CZxhOFgXI7AXiaz\nm5XBrt4Gr1sHlMfM+uE1RM+FolEyM7mpiO2jhD0FfSP5xqu/7JObpD7bolfq\nNKITME27vzKUzdBzBxhmK602s0HTLIRCS9qta0eIOYxfQ8LEL7d7EG/xHIG6\nBEWE0HYUym3tzrLjZHtGaDTEZCeGxGpebGNRbMacE2tRN1itCLaVPEE8xA1H\nmw/HDhMGy4qwmBlpXeRklUVKhfmwmgy7/aSP/ubqPXX/VK45Unf0Sf94/m+g\neNZmRdm05MibhZQ2ZOvi+VV8Oed0JFY9r8yxodtuPeIrlgqzJSFl9u9tG810\neX7/rKQB0kelaiFrEG2iI5YNqtfypZlv3XOPZXxS2BA9v4NmO1jPtbrta80B\nxW4M\r\n=p7aQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.7522dcaca.0","@material/base":"11.0.0-canary.7522dcaca.0","@material/shape":"11.0.0-canary.7522dcaca.0","@material/theme":"11.0.0-canary.7522dcaca.0","@material/animation":"11.0.0-canary.7522dcaca.0","@material/elevation":"11.0.0-canary.7522dcaca.0","@material/feature-targeting":"11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.7522dcaca.0_1615249704397_0.44421670002702607","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/menu-surface","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.5c0ab7401.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e20830ca5d0d21574ce3f0fc6e505b77b797608","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.5c0ab7401.0.tgz","fileCount":38,"integrity":"sha512-10qHu1lwg71+U3dm2HMplUst0rcyxRUR72XXu4A0gmNVMyHOSgbCOgz2/J2waMmJC1DRPYsFj4eW18HgLDw4tg==","signatures":[{"sig":"MEQCIHAsw8Z1cyTryYtJo50zbTUQkU/uXQGrPsATk4mKjwHhAiB2g4cpQLglNR+vNRfukx5O9eM+5d7OfdWwT3mYrzMdWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/xgCRA9TVsSAnZWagAA6BAQAIyVSXi/GsGAMqgFdWah\nFzjn9wRQlpqQ3T2K+S3esabmNM+Yx+BTPHjg2Pnj3K/BayI/1umIKC1HSpgT\n8dLthxKc7u/ERhzxhms0+FmRiGqC5wFfC8XVZbXVZ/wCAjrsTnRCC1DXYkT2\nDBtPyP1VpTDhiD3wTWX4eVlryqd1Dfp7I+XnGYTWWlVZGrB0FNxNcSKumXhE\niDytxYKRESKi7Fb2L3x+d1HpfVHBiMv8DTZGAYgp8Mny33fABqFiGRIbpI4w\nx+Sb70y9XUY0LcLE7elRLHM51gD94PbZqkTBOmYnTA7FsUwvs34ZjS5aSppL\nyBN4SM/mjm2+Ppp+XRgRwozbHILrWMu5YhkHMBBMdMm6vFrzMb/HHiYofqt5\nLebuNe7+erFgjqel6jOKZVkSTy8HdsqULFhc/qU1Ib5nyq3E8xpX2eXH1VPd\nBmqv/qZnCEalSD/a19/taZYWB6WHneq3f3fvuDctGq4ejmplMG3WhxLTPb8J\ngKIdG1QxnlPI8NYLurHhIm8iqJpCVTkg6iyN++Wt7vJ5s8aDoJ/NsT6ch4iC\nEDs+ab+lBJ5713aWxG1TrrFyPIlby1qq5lq+F/SrnyjsF1OaMcL/fDOKfriO\n/I1ls+Ie/Ti63bHJQx+P6NT33H4K/vmLF6CZpF8DuucEOh62nvFuRpzGv++T\nDl34\r\n=rt6C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.5c0ab7401.0","@material/base":"11.0.0-canary.5c0ab7401.0","@material/shape":"11.0.0-canary.5c0ab7401.0","@material/theme":"11.0.0-canary.5c0ab7401.0","@material/animation":"11.0.0-canary.5c0ab7401.0","@material/elevation":"11.0.0-canary.5c0ab7401.0","@material/feature-targeting":"11.0.0-canary.5c0ab7401.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.5c0ab7401.0_1615330399511_0.9061382948827883","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/menu-surface","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.59010b6dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdf9ea45d1acc4638a244be3ae2f9733abebcae6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.59010b6dc.0.tgz","fileCount":38,"integrity":"sha512-tKC3a+8XUp3rLPKIHpMBk/u07IfkC+xRmllHB6PCkQJdjhF4T1qWO7CP4AQIAr1r77kUb/cqYKcMWmAv3trISw==","signatures":[{"sig":"MEUCIG9gRWeNCMLq2MWbE82oh7jrMwy8el3oXntQV+TI6/TWAiEA0Cvt81tJ23rB/ZG2U3gWosADywfo8B6N3tSHPGuRqJ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPqqCRA9TVsSAnZWagAAowoP/A5wKHNeJsmVPxXtAM3O\nA4pGovphI0nr06OreM4pYjd0LZafKu5w32pjUjJLwsqbL99zrZwP53lLb1KL\nYrHH9gKgZogf5V+F4RvtWWPxHiTMM0smM8k1gS2Gf9ADRm/kU5N74JMw6B+v\nOgQq0mvynVplVHAsITX/dh5PwS/jk5ie5+RfyfQ+Li2UC+4bpL/A+9qkKfJt\nCjM9ehXUp3SGCdjVdrW+hUbbIQu/Vc0NraPhFtUy5Hg9Eft54zLb5NX1WoSx\nXJVd7nSgMe73SKoChwXvwIZwxn7Ul/840d+UZv//Qm580uQoRUq1TopzuW2/\nntb+4288KeClnMovlHwLVvLMVJ0fz7rkhbwpr1MmkzEYYkQolar3K2lzVFzg\nossb8DADy0txZgFFMROVZQCeJrjVlfMnIqg/VivvfCTFo4S0Qj2u8u/acX8/\nqyOaG3Rn/GgdIzruner/sZF2+HQmu1c5c1qgDn4TUcQmlIQXfaTjiVIyEkMj\nwoBnsKf2LdUR/Pa9QVnAlvcexypGO/st9Wyhs3TAkf4q5UdpMa0iqcymfBjl\n5BOeuPDFgW0H1ijHCXfN/7ou/3ReAQSomM+xr6Y/jsD36tB77uS6rFwg9qt5\nl0DTYqf9cBE6dNHJLNTJ88ObH34UtLScJDxW9vs5ttxueztyfi+P9tmiooGo\najuz\r\n=KBpB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.59010b6dc.0","@material/base":"11.0.0-canary.59010b6dc.0","@material/shape":"11.0.0-canary.59010b6dc.0","@material/theme":"11.0.0-canary.59010b6dc.0","@material/animation":"11.0.0-canary.59010b6dc.0","@material/elevation":"11.0.0-canary.59010b6dc.0","@material/feature-targeting":"11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.59010b6dc.0_1615395497268_0.7737125604988595","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/menu-surface","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.9e52f5544.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"657fe53c493a44fc34b90f2150849d41f1596a42","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.9e52f5544.0.tgz","fileCount":38,"integrity":"sha512-aJvfvq3jIKymNf57tL8b7VYuNkRZWGWl/aEI0chb/yHazrq3I/GtWFLrTL0RihSvi/IoXWe6zKBiESmDTDQcqQ==","signatures":[{"sig":"MEUCIQDC86zCe2rhqbe7PeKn3ZxnGDDt9ikUYDIgjopJxWrKDQIgKgSBOt9xumgRC5rRtzZnxW2SBLXI7AuBiMLYNxms/o8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVWBCRA9TVsSAnZWagAATswP/RT5Rj8HzAU63LR9fuNR\ni1ePhQ6YOrTpaAIU+1UJQhEECKj0OIsLikwIwsAiQ3qBNhn4zCCoGUyslMoE\n8egtmbqT1pCJyO6qwB509rr6mqRYbi8KwLkJuBV0OcdqZ0NqJ0bZhT49ywA4\nc21wDlb4A2jQOtuDrZasy/Pwp4aKQFszdfyYr7ffH1b6cjmJ4A4WtJ6O6Pdp\nn6bzjdOsladkXnHEY8DYK/OfqHXwHd3zr6kAftTjRuZuHmQq4bECc3LBEbj4\n9rYUmFNraL38h3S2zAqjylllH2do4vrTP3cMYPT6/Qv7DM6VZ+sT1TL8tg+S\n7F8a5lR0QbvIXNqImPmV1RLz9aDZJ7VhWwOZ6Tksj4qzN0+LgHb53bUhZe5V\nQT2feLHUhbiCi5gSPokZb6Z6jvitMhyfJ7zP+5mh26SR4cXHAjs8eZmf41zI\nzOoEazX5BsGhqzYMWOHtBySpxv7DDTNiFlhfcva3pcyK6iogr328Od+FPE1G\nRQHggMoMMj80bu8bOg8VfGGDcbhR2e6WgYgJD/6hGyu3GamdiK0p14sTlNB/\n1/tYu/8Aox47w3JyLVOwQV4ZSS4aGJqoPvmV+Vfn/3gCPE9ZutO4YpdvjGgi\nMwrnTO7RKKz3kd4rm83EmrFX6QOLsw6vmNNxghxoD4HxeSnCKT/erlf4aE2Z\nu4fw\r\n=h3+h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.9e52f5544.0","@material/base":"11.0.0-canary.9e52f5544.0","@material/shape":"11.0.0-canary.9e52f5544.0","@material/theme":"11.0.0-canary.9e52f5544.0","@material/animation":"11.0.0-canary.9e52f5544.0","@material/elevation":"11.0.0-canary.9e52f5544.0","@material/feature-targeting":"11.0.0-canary.9e52f5544.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.9e52f5544.0_1615418753245_0.41107581633310764","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/menu-surface","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.a678806f5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c63a58021999f60f911ad3ae6bbfe4ed2471d1b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.a678806f5.0.tgz","fileCount":38,"integrity":"sha512-/ynbpGOjpfV6qxYSnuGMikKptYPRJxNtoXuT+Sfk2YiI70N9SRXzbQ+WY/EV1N5MhvxVEldZRltbGZakg5yEGw==","signatures":[{"sig":"MEUCIFXQ8oVwzW9QK+Sjxex+yOuVaQVQcYHslfgzYlcXx/LTAiEAkkWj71tW+5b/x5OAswvNz9COXk8KVNNalh3kZArEuag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXdtCRA9TVsSAnZWagAAAT0QAImUcPSDdS9lJlskDC0j\ny9/MjoKY0QIr2G8U454rK6hj7AEhYeUHEPTEGYloEs7LYc+fq4+ezTPPpAYD\n4ArgrFsjp+a7RiUTP4F7GAYhHC3b3QiWhoCAsctE/wbWqbw3jvHnR87KUR4D\nPlU6pbqfTXSQwUYcONJ1tKNaO/y044nHmXz+coacXGOFl+c5K+aQjGDq+1je\nI+VuVGVG1KwdQebkFFBSIX/4/3g05WFV8sRAIt6yoaOqPvxhYbL6p+wt4Mq+\nVtXhD9XyNn2NT3adBNsyFZRZ1eNFH2tClkxgsUJyxfTI/slkHqcrXVQ6UWxm\nvRtHwVuhvp/QUgjEpVau4jGUGSzl4/tfYP9Nu09CjoNJSzxDxIvDlH6Tuulf\nSu0OGVHnGkrNZ1NtyUd0GEdfk4Tf6I29j4Xc2nEgIN7pXr0FrhCPnpMRCI0y\n0Z336PNbrDfeEUZXx2wyPxLtmy4dGCTSDlIantrd0+SijtNEdOo3sHtHpurz\nCl7wjIVMPlaxDBxKGdBkxWfE2Mxbn1I5RZGwWa4KaA3Ej2walBL0zpNaPCkf\ntxSAtf9YVem840I/umQMraQNNzJO9Ak6RcEq9aYqu37HPds/zmhBFepR1qVB\nMUO+J6WH36hS0wkU7geGyNNjJB7A9X4gPXHzolJNmtSP3mnpCBHhkDEsjFNh\nVf+g\r\n=TDzY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.a678806f5.0","@material/base":"11.0.0-canary.a678806f5.0","@material/shape":"11.0.0-canary.a678806f5.0","@material/theme":"11.0.0-canary.a678806f5.0","@material/animation":"11.0.0-canary.a678806f5.0","@material/elevation":"11.0.0-canary.a678806f5.0","@material/feature-targeting":"11.0.0-canary.a678806f5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.a678806f5.0_1615427437414_0.8331483558558703","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/menu-surface","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.b2d22df5b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"634c8f98ccf95bbe106c959a27c49544644a7c44","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.b2d22df5b.0.tgz","fileCount":38,"integrity":"sha512-x+FuCK7IL+ynTUd1d7MP/fWv0JBWGMnlsG7PSkEPeqDWyJpP614IrRCnbsTAGuonIRu+sYwx0h0w8LvvwZ/M2A==","signatures":[{"sig":"MEQCICS6yOKVRfQNaeo/MS2dTJDU8tgpkJMLD4b92G/SUaRYAiBc/MRoTQ4p/iecq2ETx42Lxltv/4SxF6ltqz0w0/4WJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk1qCRA9TVsSAnZWagAAG60P/RZ5ri5EDLV3/octsUPY\nK4Eoazrq4+nUs6M4Jy7B8yf25NpWVxfvCgBdKTdJ7E0IHciwaGjASlF4wOkl\nQn+f/SdD8oow1dyaUnyfqKjg15zpTljhufxx+YV+JPh1gWYsZbeRULU6zBLG\nInGtWqIvnLA8PA4S9ertWqI6jSvYS+7wYmgW8IZgeawX0OxNWa/qrydJzlGB\nqlionq0hLrdqc+7+GEfILp7tFDwBAImn3R4yoExtmF/JC1j7nfvR9ixGGpyc\nVFZVUtTgF1e2bf3b95QvoAFG6WE+sbRvw8HdJWWmzrF3YMdrsjC3cG0ED/rS\nL2Q3DOovbd+tld6DVETJPPQOpLnGv5v9yYRn/+fvS1lgeCjpNkWKFk0MJegV\nHMly/tbYrVnsdpD2+fukwL6O8oEEj5Ebcsh6kZAcyQSUc0ds+HL4UAxqTJSI\n/pRrwHxbNh0Te9MpjpmqhPrNR/YfzXBMFPZr4Zg8cpCcptDIqdZS2s38rRE9\nYS3igVcasMJ9f1pCmn8+qeGFVqNK58Y1bAc2jt3VYrsP+2RJ8B3fRMQAKdQM\nKo1nGFAsDfkTM9h/KJA15iaQnPcOp66bPJ/sK9yI3by8xJk/mTDsrV31Hr64\nF9eyPIQigIoOftozxbhlvIjN4boDYY1L8ZG2yTVEet6OgzkFKEx97AMZSz4Q\naYlk\r\n=4fbD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.b2d22df5b.0","@material/base":"11.0.0-canary.b2d22df5b.0","@material/shape":"11.0.0-canary.b2d22df5b.0","@material/theme":"11.0.0-canary.b2d22df5b.0","@material/animation":"11.0.0-canary.b2d22df5b.0","@material/elevation":"11.0.0-canary.b2d22df5b.0","@material/feature-targeting":"11.0.0-canary.b2d22df5b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.b2d22df5b.0_1615482218015_0.9195743579174736","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/menu-surface","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.81911b707.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f870c42c89300d0aab2656774c1eac983f8e454","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.81911b707.0.tgz","fileCount":38,"integrity":"sha512-LLvTqS30bdqpR+g3D7bldMWF5sRzrMRwpsUFbOc8JN+1b/k9lC5GObuC5XVaPD10h4BdEM+75Bq6+gieeml+2w==","signatures":[{"sig":"MEUCICkEy9o6dHkO+mpfTUhteP+kWf1VztLjvVKw+C5SlUpGAiEA6Is3q9rTVZNw1GbINwwC+oB9X4L9Pj0UW6+/EXIQqnA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmBKCRA9TVsSAnZWagAAB+8P/38sKAMhfx3lQOgrNjND\n1vyJfQt7fJpKgTZJQkNtu6R+n0NX22UekckTDR28wDCuJrfFbbw9EXekIGZl\nH6NZtgFDPyftWwLhbl5MshZ7wVN7hx1rYNjN6g0/0xLG+EY6CQvaV68wYoi4\nzV6uFR/n4chQLxX7+eP1rLo6MUhyySkXPNU4wStQtoP8zVMNo5qtnmE8agXK\nbYcP/WiQ7ufakZShheb1nA/D/LFJ/qp9IF4apwMBVWz4gsBJyhemedB4JFRm\n+oXuG6b1Z3pJuXIFU4VLlAAbX3wIpPk5jgWrE4jUjT3jBTzniw3ggdiCovJA\n1F3f+yRF+twhcloWFC4TKjQ2RNYo5alSJEzzEydVyEeMej8IpsoBp3oVcD+o\nWxNwF+zrcbtS6eJQxDEHBYoMBtjvyz8r6ncCUM+uSU6sI5oucIp4s5gqxOBt\n4mm6BkEHx28Ia14NF0wbLIXUDAfob0JJ8LYyJOCsv3WoYB5OW/7hQO4IPjJq\nRoAbG0t5XOz5WKMLqFiI2kSXUcyCMtJx4MscUUWqet+rs2YxsSwioG3xVHUo\nZE+p6x8HOh6A+iV+inFK2BoRhtSo4HSYVwRtTV8oixROsyAWIfS9CoxBfzDx\nyNRdBG7k7ad97doq5ZYXIBPwfB61sJ3NJ2eoV2O7dHAJgdS5i4ierrlljGW+\ncIvK\r\n=HkHz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.81911b707.0","@material/base":"11.0.0-canary.81911b707.0","@material/shape":"11.0.0-canary.81911b707.0","@material/theme":"11.0.0-canary.81911b707.0","@material/animation":"11.0.0-canary.81911b707.0","@material/elevation":"11.0.0-canary.81911b707.0","@material/feature-targeting":"11.0.0-canary.81911b707.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.81911b707.0_1615487050341_0.2580962176858712","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/menu-surface","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.9eeb35c38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75b4ac74567c2d71ada36bc7a2f23e5bb78ab375","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.9eeb35c38.0.tgz","fileCount":38,"integrity":"sha512-wyoPh9I9kD1w4QoWKv3FhoTSt5AICos1Ly+KCEyYmEjFMHVJ/xYf03mR3m5vi0XHO9twqMjU+osYigYBEIUikw==","signatures":[{"sig":"MEUCIC0HLYPVLp9s1diXyUQvEy43wZNxbXNzH+dCTBg3LOSrAiEAgs1K6lVhThOKX8JVDil11jVRyG2S4264HzYkoLj3zlg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnGGCRA9TVsSAnZWagAAP8YQAKMyNHDqu7OY8WqAiPaM\nVAs1zFzPwfSh6XseJ70sttzjv/vKP3gsxx6tAM+FxevI2+YNhbrdHUf578xH\njrgKbWoiwbbkBXHI3Un9jJca3Sun7AGWM2finVEzjTnlH6sRro3W0tgSL+C7\n7YKoYHjxNC8UIeLpndnSEspggzorQP/e04yobkblAsb7V0JidD9jOijivbFz\n/iAqNlaHGDuPzCgDCWmgvxIPspW5G1Uf+olC3QvUaOQB2YUBdDuRHIvzvhxl\n38WV6IhpLfca6T498O/d0BNV6enKHk8pOle/AgwRXmiTnWHwmjYK0diQDCoH\niiQ+cgYNM0cBsePSa9lrlavKbZGCukwDfx0Q6nWIWygcwosBFDJ8DL3kGt4z\nzyLF7xTWAxTc5VpWclllHYHJtz7EgLxdJtV8XW1c3JwavbIPVbU9T/Wg0sQ9\ngd27HgHSiKSbRaYbH2iXKJI+djPtCKUsV+c668fFwmEOYeBz8F/ApUqiR8dJ\ncYHoSycFbNXTfHXkGq23MrFt2gKIRabrsE5CPqvIGx+ySrZtqhyH+7PzVmZI\nmD5I8Wgq+HPxzQAV8Jqedpfz2QLwq82tTESTqkAxAUM9QOy2Mx8EcLxvt27a\n9mhWPCT9hEbak5xyBHh2rqunkzreSrqgs6nnwqsBmVcypWdw2l1xNijT6fjw\nWX0E\r\n=Bv3n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.9eeb35c38.0","@material/base":"11.0.0-canary.9eeb35c38.0","@material/shape":"11.0.0-canary.9eeb35c38.0","@material/theme":"11.0.0-canary.9eeb35c38.0","@material/animation":"11.0.0-canary.9eeb35c38.0","@material/elevation":"11.0.0-canary.9eeb35c38.0","@material/feature-targeting":"11.0.0-canary.9eeb35c38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.9eeb35c38.0_1615491461958_0.5557133877140121","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/menu-surface","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.12be3e95a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cf9c729d50e57e866feccc2d768c048b3671c52","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.12be3e95a.0.tgz","fileCount":38,"integrity":"sha512-ImOYI9vGyT7o03CpTAHxXPvDMhmBDYh3llBAe6A1dVurvk+poGdwq5WGl7b6wlHIHOfd9WqJOnmxapD7CHOa2g==","signatures":[{"sig":"MEUCICZtVcAh3vo/7qp12Uj9PGzMRozxJTbIf703qfJQvaUBAiEA9M2OCU9QugDlOFyfaLyCxopNrZrae7202qntdXQw56M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSndJCRA9TVsSAnZWagAA9EsQAIaUYCOVOtQbWSQSiO9f\ncZWXp+ncxiXrT2mmHaxHmqgCcC2JbiLReQqgCD3/1XYGVYX8v2G04iuYbn2Y\ncQ3EyAtOJPA5rNB/VbncsD5TL4f4QJ6dlb5mg6WJ6Ko+yvJWY+IM+CXSZ6sJ\nMptb17CiJ8fCmB7ri2rzoGqLc2SnAlIoAMzSeSbCU41xM5IMbYLOBhikQIWe\n7o9G00qMQWWTQsUb4TLi1DMSXKvx1NVBJiTj7TgKA35Pxb2ayde6z+GBvKS+\nhX4dmRZB0LWc//GWy4GXbSJEKttllpxMQUfCLMhrmUXZCSCK/xJ52RpU3GQK\nOdPhHPkDyVir1ADPd12+13jn9qvytGaaTBk53CM1fN/d2Fso42bCuOonr784\n2ahDI+9etNlQ4KniVmiGk1pJjAbAHYQuQ7aD+cCgvewuwLx8jcYudYVdP/S3\nAPQsv37bYDWPW/jC8lXQbQwPDO8RlAAtOXmWv62cMqiS76fqbXO9vHf1rHxe\ngXKQ5egBQnWV7+uzGM6Zu+FqPJmcyoR39bNdXXzjTvvLcLRmLFLrPH4aFNmW\n2efqv4xiZyrE1CgR4sHlnGVYep/m5a4iIho8HlN3MbTTVgfXGCO5z9GYU1c0\nQYVvq+YUIMRcgYgpRsv9lf6c2EYeI0KNIXxOxJLoq6TFhDrys885HGAK7xzh\n1yvp\r\n=dz3z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.12be3e95a.0","@material/base":"11.0.0-canary.12be3e95a.0","@material/shape":"11.0.0-canary.12be3e95a.0","@material/theme":"11.0.0-canary.12be3e95a.0","@material/animation":"11.0.0-canary.12be3e95a.0","@material/elevation":"11.0.0-canary.12be3e95a.0","@material/feature-targeting":"11.0.0-canary.12be3e95a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.12be3e95a.0_1615492937014_0.49072996241079037","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/menu-surface","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.e683bdf4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f516f84d5cb545ba427cee8955db26832027eba3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.e683bdf4a.0.tgz","fileCount":38,"integrity":"sha512-Qjq3f+RWAx02ppOG+7t3dV4PGhpP+Bz1yq7X/xHGWPfY/Tr6UVVYKLfvYU3w8tDihOmz7eWCtL0W3jRMmaHzSw==","signatures":[{"sig":"MEUCIAJDvgBqz502Fykdexw2xm9c6IUK0Lo82ZQx+b2HtPADAiEAiuUFS4bbfqR6vHSFN+skjVfR9e4oemqys+d597gQ0mo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnkQCRA9TVsSAnZWagAALjYP/3UGY2c3YkgpzrAi9q9B\nuZSqVb+aCZmD2az3MTkDSo/nbCUpI0L/A/Db0gdOaaD6lSeXiCLywlD0i5BI\ntGOlyq0i/rU2lQzFhUzUgKf38tLOhRggqr2ApjjQzDg9aK6ZvHH+cKe8Fe+D\nxTB2fvvhDXsvhH+7/7u9IhCIZH3eOHkG+8NZOg+5ndbfp9+FQV5XO4OgaR8F\nJUuavPrI73pFMyLj5iUv0aSUQo/GHCTP6bljPEycuNkO2A1P0O3RE8oieBRC\n3bmVP7wSABIFqHpX+rluLk640rFtLIJ67HNOXrv3bZg1fGZaYvaqzlnbVmFZ\nc0QLrJDiWM0b+oYNOGxQobyUxGL22xaXoAFBDUN3M0iKl642YjGkfftBPERe\n6muNmyaSTu4BZtbANj/pHZ9ilJMpnT/LTjnpqAZ3Wj8mDq3/RkHmu1u0JeTY\nPuotgrcFbDM5UynT0q1tlCPXRNAKsS106sQGgFsviSN8HUMFIKQjVvUkf8XX\nmbExOCW8NrBNBHUDH9WX5n961QCgnYITZxlCavIuh0uwp4P0dfsWfx0nz0JF\n1EOEtqYjujiDujlCnp5YPxofBO2LNjXtNjJKWwfhWcWf0TYSxJ6tlxf8o7fo\nzYesD08SWQClVVleUZFJc7DcYiFgGqirsylyQ4yOgtAXR0yjnNMKmSbAWXKq\ns/YU\r\n=urGM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.e683bdf4a.0","@material/base":"11.0.0-canary.e683bdf4a.0","@material/shape":"11.0.0-canary.e683bdf4a.0","@material/theme":"11.0.0-canary.e683bdf4a.0","@material/animation":"11.0.0-canary.e683bdf4a.0","@material/elevation":"11.0.0-canary.e683bdf4a.0","@material/feature-targeting":"11.0.0-canary.e683bdf4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.e683bdf4a.0_1615493392392_0.5142091166590925","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/menu-surface","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.a07b6d486.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdc1613c7290d4b231c29fbfc8b48e58f14998c2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.a07b6d486.0.tgz","fileCount":38,"integrity":"sha512-IfnbxACVAk7wEPZsr/ICGHFonfaJlXpr4lMQna0d9GVE3DP+BlMq6EQju2MY1XL/RhxNmMc5InFzcEQq4UoPJQ==","signatures":[{"sig":"MEYCIQDx2JNP5sZrmt47HegRa4d62wLNXOsO6EctyiRQDWj0xAIhAKOcIA3hmvXNnCAh5M9LOAll5j06WDclOT/C/bxjsciM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn7ACRA9TVsSAnZWagAAv4EP/AmEarYyPnHM2qbEicQ9\ny6t7HR71ZFF0J38sM0DijFKQH3KIxr/vf8aIu85z6rV4mSpbUXLVg2BbPdn8\nYz7kCV6/4OhNOBDrzhEJXO45WtH7eVGorBnVXA6EglKzBl+8fQOGrz1a19Y2\nh1UUXchlPA1TONNDp8jUvS9tYY1orbk/F8t8Q9km+LhGgXxqqYPYee3z7zLM\nMUxaeBy01jEnyB217DmwRN0MQziOsDOqPA2TwQc8htHr9U9ks2GeGw72f0Oy\ns6PUh9VgpdZQQ1yUTJSAra6u9eL8D/YZkyfQvuQen90TNbtI7rTyISRd8zP7\n2LiTMOUEp53tKKWFRfLbk93JEdDllptnt9gWW3srV1HOg6mauj1+YNB1elV9\nvLKj6hsCFKz2gcGP5uZpfpEjwP1t+pV/pfivB5N1GUHPzLfAM1rCjaKfXxwM\nfMdWXqShtVHOEFQWSZGZbSfJtVN/C0UTvCwveiB7b8Qj+ZP2kA/B4VWs6WzP\nXWdW211t5GQTfW/dGuIXOf5ZJA2TUu/lDok4WUVIcfQ/873f4rxE3h4o5bcK\ntgY1hPcJtGCjZUVX8cZ2NQ3CliQZoSWANTQXkllvnA3OP1isameky23OmnU0\nmR0MpxLunHAZ+gfygaKEX7ERAajHksiKtfRCmxz9HGen8nQTH89B4x22jBB9\nNgZP\r\n=OmJF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.a07b6d486.0","@material/base":"11.0.0-canary.a07b6d486.0","@material/shape":"11.0.0-canary.a07b6d486.0","@material/theme":"11.0.0-canary.a07b6d486.0","@material/animation":"11.0.0-canary.a07b6d486.0","@material/elevation":"11.0.0-canary.a07b6d486.0","@material/feature-targeting":"11.0.0-canary.a07b6d486.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.a07b6d486.0_1615494847653_0.6498100934168338","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/menu-surface","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.1e0653477.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97c499b1690b9dfd07c5edfef2bb8fa5600545cf","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.1e0653477.0.tgz","fileCount":38,"integrity":"sha512-8r2P812WBAguus3vpCOEft5I8hBQxrwt8/sFR9rf6bYEykOQmgVbkpCVXgWEH1MwbnbrAjP3BRcXfUVo+/Og1g==","signatures":[{"sig":"MEYCIQD4/kvVSB69dCE6zh3lcVHzvUExQXF55iPZq52GoGW3bQIhAIPFao/pHLO/X17sQ19koDqXpWUZ9W9uAPGM23Fe1Ll5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoBpCRA9TVsSAnZWagAAQlIP/R+lf9OjnjFmI458GBo/\nw1vw8DHkeiXVvMg6npv2qC9npp73993C4EabGB0oD6bm1/twuXfKKh8YbNI9\nznrOmfs3VB6k11fNDDFCqCV7eLC15W66R+kcypy52WpG9FtrwOHjTsKjPpRc\nQkJYM8QswyJoHg4ftu9gD6DzO9d5Px1W+6D+XyZlWtK8ow47FdKR/OF64tFr\nGFNsWvZbTmL0vdkMGAz9z1z7RIWZM3RWGmwFZXfVb/WvHqQgR4TDUOuk+ihF\nKSOhHbnwkE37+KHL84IfxltlTadNYnFon5uuzzd+YIjilwyklPp05fgXLMgw\nZKKNAKGbttvyXqd43ELyV7ZmYA+mqacNbMxUL0A/e/5TzgVtPHRPDu25a8mK\nPr9jkEXVCoiO6xVFRAXWWEJ5NvM81e3zqyDiKcCFg21A1qvpVqUgCuykZOBh\nPGEMMk9I8AR7dwscxPW1QXNHJFkVwXPieFV3UBdHQi0onBK9/4Q9EA5dI5/D\n0E6sudVZxccJJY4jljV/TZqnV0flJDAK6hUUxAF636rn+bCbY+S7Cb7T9bPh\nGSJpJPM8+dlDEC8wlPw2NHqAVdgb1Ymmal6jzMBbrTLyp+iBBqHu1cDtz1mx\n1DYMm/DlR9a5Oe0KoNMjisdT82IvtxOzNNKmDmGWpzB+xaLknI80/WxP3J73\ne8Oy\r\n=jvZ1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.1e0653477.0","@material/base":"11.0.0-canary.1e0653477.0","@material/shape":"11.0.0-canary.1e0653477.0","@material/theme":"11.0.0-canary.1e0653477.0","@material/animation":"11.0.0-canary.1e0653477.0","@material/elevation":"11.0.0-canary.1e0653477.0","@material/feature-targeting":"11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.1e0653477.0_1615495272707_0.9820759252082985","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/menu-surface","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.148e8cfcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d7875b45b5d980c5a010dd9aca9a523c5fd8408","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.148e8cfcc.0.tgz","fileCount":38,"integrity":"sha512-FjVUQit5HGUf7t3R5+cmjcRwAR5ehM8Q7gTFtz41BkVINfPD5+Xrb545emSciOCfvXzQ/n2rsOwp3+ZlCf+plg==","signatures":[{"sig":"MEUCIFRPZIQVXVr11d9PsLXyUYswrXcKsFDYInqWXn/eFUuaAiEAzi69OmiY+9R/WsEJ24pFKf7VcJDFgxAL6vT0P/IpfTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp10CRA9TVsSAnZWagAABp0P/jDe6MHvhSUQdPEgr12v\niOZ/7EePoRTXiN9IVDkTB5Gmd81j6zwmeEKsM2um88vVXrXxlikJ2imd/DBs\nmIO6XhnzE+rZXs6wCP0sq8KgscOqsNd7/LZmRn6+bXXO2aGF0RPlz8/rVQAt\n2n22UnvXSw7AyxIIWQDR1K3PrB0xSoeikgoe0pXQM8sF8DVbVNi62e7Xs1yL\nZzBa2CUDT1VNNr0rJXbDffDFnRGXcTaJeQQa/Vsbiw92K6yO18jx+EtnlJ70\nx3nPECkB1pcP7F8Wte9LrdyxoryD+XCGFN/O3RE2G4jHJ3eKlpit4LXZ1tLt\n8BwHTOOZcVrduCLkHhkYMHQ0eQXbMz4GTSVTNasgiCGR94jgrguuvooA5Vn/\n+hI72YsDOkpV2tA3Wh8HfF8LQYZ83XJ6v7oSeVFN0cYN2AHewRM2d+meEZ5I\nfV1dwQG3etF6pIXNb4SOCjv3JwhB24cyWrEe3Sf6Bd0DnnOA6qVT7kfmJ5Yb\nqQZPbyCThgbfROwqSsEls8qlCIohhQyUlZof4wYXVn3xXzRY88I0rmVk4InN\nfpVa43NmVjLl7oEZ5/hDomr3pLK593HkwsqISm+OcyGpeOuYHm7FbXIj+qM4\n9C6v9xQ5lxrQdNJF7W8iddJYBVObD1/3NFzZDSWC2y1l4o604l+DbG+MDtj3\nqmAW\r\n=4KuJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.148e8cfcc.0","@material/base":"11.0.0-canary.148e8cfcc.0","@material/shape":"11.0.0-canary.148e8cfcc.0","@material/theme":"11.0.0-canary.148e8cfcc.0","@material/animation":"11.0.0-canary.148e8cfcc.0","@material/elevation":"11.0.0-canary.148e8cfcc.0","@material/feature-targeting":"11.0.0-canary.148e8cfcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.148e8cfcc.0_1615502708416_0.8149144032891282","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/menu-surface","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.73a227194.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4964f90c3ae44f5db88292a06abe51e026cedbe4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.73a227194.0.tgz","fileCount":38,"integrity":"sha512-T3CGapBRQpsLLSFnYi/1RvAlgf/pQPbwwRjJdCPXcjzYXjL7FDp31JTR5GZbt/J6EDrLcN64+MborWcThsz0Lw==","signatures":[{"sig":"MEYCIQDkaHDz4/UhsAPjYOxBiWsyGWBylKTb2Bn53Cb4zS4tTQIhAJwXGAcB/v4Q7ESLI8kkM75mZbqFK6ytku9PSQ2RhdmN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrTZCRA9TVsSAnZWagAATDQP/0hPXSJa0xv8sJyODmCE\nQgqQ3BTHKsJJkfQp+Psn/dsj/wmAwJSFgNQxH1GVg9AbG3dOCog75IIEMfOT\nxF/ZZFtnMWYUHi6eeZ4xWmZtSx/ZtHx2IabuNt1gaJJCvPJnCVBFZTePJzuE\nz8uZyk7zMmyJ29xJkl5JOheIKJ9BsQmEJev/pZFx0uj2e6cTexAvDNlzkD02\nxIIjz2UgwtaPx/NLV2IIlmoVZw4eOAt8b4v5Hv/Dg4t4yzyk9NkFjmYsR/y0\ndXK8PuyK4AX5+oZzEvC2ZJ8tHGvIeZqOIOWQR/LhMZmBeI1Lrn67gWHZpXGn\nnfWbZOiiizyi13h2UVFOYoMH63DGR02gX+FooKjP22yNhev0/D5V6eEi6Bog\noq0ABRriPyXRigE3zGncjVeL5uMOfUezLJuN9u3be+819SVxrNZbCGuSe6v+\nM69KJF7ZvGj0+zhvbxWlPpCAfzfYDEOCr7nRxpWhzcu2geowQaSy05XrZTGM\nZYDSMk3Z0oxLZYFFtEWkwbRC2jQLADDaAF2wGmORMNs7pp6ckA63Y9fvWxwD\nHCU9pDIFNgp9eAV38jkuDfCalVvu6dPVCN7XvKonG7ESIX9fka1BLkTW1wg1\nDXTGU6/HiPjB7WcUv5jM7/mOX12C9gvJahDQn67oUHb7F1ZHc1trQk+v87/Q\nNNOf\r\n=lrvt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.73a227194.0","@material/base":"11.0.0-canary.73a227194.0","@material/shape":"11.0.0-canary.73a227194.0","@material/theme":"11.0.0-canary.73a227194.0","@material/animation":"11.0.0-canary.73a227194.0","@material/elevation":"11.0.0-canary.73a227194.0","@material/feature-targeting":"11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.73a227194.0_1615508697262_0.40483884134760895","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/menu-surface","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.f8579b7ea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d5b3b57ae55812b6345a12cc99c5753174e2188","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.f8579b7ea.0.tgz","fileCount":38,"integrity":"sha512-D/75WbgPqTKnfq2ORl1zd1VDWaLXnpOfPJLO6pLwzpHKMau5yDNBEtgghqf+3fxiO7tRPBus8nQpRPRtBLGN6g==","signatures":[{"sig":"MEUCIQCSbHN7j2o09RksZqxxD9GWUpP3T4g3636l0aeYMvHgcgIgD+iHT7RCA3vaTMD39qidKeqrwWWshfCQ1oKcQC9rK9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB2ICRA9TVsSAnZWagAALH0P/29MGIT1oD9KvobDerBO\nc2ZZCnaFFY9dgiLv5wG/X2JRs94aGhL/ha+pEl7H2NMWkQ9vwXTFoRqt97YW\n3I+qMW5M/iAKIcZUygCjvmLO9CAEccU4e95MFGVeTRGhImVgJZD+R8WJylIR\nWERAU01yEP/+GhIEH5VrILCstWFxfN1uy+mpn9Dpcr9tYZJKZSYmxRtBdiqp\n2/W/mNL737O0rFz1G+nEZ/3MNITLZ5pPwPSD48OS+BbPo4qjza5qVr/KA6Xl\nhQhBXCYZ37LJ8m0CW13d9brkeQaGEmOWESIYptAI6C0VKWfj/HpcwBhb3uZm\n1FIQU7YtjxJm7T8qQH421/F0Nj+VfuRYmfDHcJqsJ7aHnCT1Zq6Tfvcei7sA\n7iz/P/6yQeQyJodcfoyQBO1XQP8m7mf9oqGtEQe8hE2vqg0U1byfAn9Z03bu\nhNcKnB2n83dIQdJ6fXq1lONLo2/JzB9rBcXJkvpVua5y+EvcZBwr7gW+AQRY\nfHtpW1LyF27PdUXf7ie2PSidLA4HaqlCoWvkC23hTlDpS48ZM8Dw09mMKvD8\nFPYx+HnncMiV6VpXELK+L7Gj3reUuY1NHlTXW1cw+7/Bq5KF2d7yjqOgn5TG\n7H+wG7DvWnxEQ6D5rI0NNIU1yx7tzEhu7y3umUrjf/qxeCWHp/cQbYNwmF4s\nq4jr\r\n=9KYN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f8579b7ea.0","@material/base":"11.0.0-canary.f8579b7ea.0","@material/shape":"11.0.0-canary.f8579b7ea.0","@material/theme":"11.0.0-canary.f8579b7ea.0","@material/animation":"11.0.0-canary.f8579b7ea.0","@material/elevation":"11.0.0-canary.f8579b7ea.0","@material/feature-targeting":"11.0.0-canary.f8579b7ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.f8579b7ea.0_1615601032156_0.0863777173797311","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/menu-surface","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.d2a39d300.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12ab019babec503ce9001f0c58b2d79edb08261a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.d2a39d300.0.tgz","fileCount":38,"integrity":"sha512-QKnn/OEv9Ab35i6VaaovZl8llqOenk+9ubChTRvbVSDUDMNoursXaM5/6b+JbAIdToza9sH53chhFqZ8q1aP9w==","signatures":[{"sig":"MEYCIQC/XjsXmsJvHpd752EA9UeiojfWyUNlNQ6z2VDk3Bn2aAIhANP77WK0qTUtrlH5gohm7nCqjblOIwTESjGd5pkiHynM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/1qCRA9TVsSAnZWagAAzAcQAJH281bX+3GTXWof6aYP\nm5tIngUqr5W8jWEKchy6PEoLGdS5UEWNf1/JpX9kXRNVkv0Xs5SZP8QOgTrj\nHMhXdA0YWyeACHzR+H2yOpO6/1zOpF67ePG0Wxjh7oCDaFuFoBTZhY4RSIhk\nz1PRp62djBsFY+FIXG3DtNVR2eQ99bxNULL8fTdTjEXYmFH0MZNtqV2VLxTV\nHjhsdGpPSRn2REsEB8JgspfFbgN6DmNeBDU9zhVNseFwyl9rXBFh0BAw/7kO\nW6hkg7COS1bQnWcwUnnpwCDgkmYDcgN88ppmVXRwUPb4DWMyaQguvxdSFjit\nVTUYO0shgggdQvVNDJD1mIktVsDITQ4/3LrkbVLvvWKAE9DcFPZl8RjYRY4o\nB3alG7/QIghweXxy6pw2RrqZAKFfS0NCNRNYeGbIZzRQJTk4QMjoiXIVP5Ib\n9m1bHCsZCmaSnRgd8bOPiiFT5PA+vmu2g88MUf37W/gL8Vpu/wgL8J5JuKyo\niS+xILy3fBA0jd3zCa0BcTcMpDcprA49LfgC6Fvr4hAZMRsEA90T4YWzkRBL\nKcM2n0erz6wCcnCTxkDjyMobWqA75kYyFnqBuZBj1lQEfOR6GpHZi//B7G/o\nmYvjoBNx1qGdP47bld7GB1emBpOU19KCeib4FU9hooOjfAeGBQaOEM1EAqrz\nlVvz\r\n=6uXU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.d2a39d300.0","@material/base":"11.0.0-canary.d2a39d300.0","@material/shape":"11.0.0-canary.d2a39d300.0","@material/theme":"11.0.0-canary.d2a39d300.0","@material/animation":"11.0.0-canary.d2a39d300.0","@material/elevation":"11.0.0-canary.d2a39d300.0","@material/feature-targeting":"11.0.0-canary.d2a39d300.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.d2a39d300.0_1615854953543_0.5814831288080038","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/menu-surface","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.7cf67823e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82d670b52f8afa3e6e21704aff392d77ccde5c80","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.7cf67823e.0.tgz","fileCount":38,"integrity":"sha512-dQwmXsTPZ00xVeQ4gTJsutFc/37JBwzNGDBrLoo23thu1zUDZzj5+Wx2z+r7H8AJT/ZYY+YdCn5npkjLfpaRvQ==","signatures":[{"sig":"MEUCIQCAVGYn1TlLww4VtFinnSxGas6442DaZfP9xN0M5NIK/wIgGSx7VLu231x+NK0lqusJYAwavzu4V/EWC+jXCiBw8y4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPcJCRA9TVsSAnZWagAAtA4P/iGlOxeIj34ms4mX2k6g\ng69UsuZhzq4Pmpfk76tNoSkdAYKIzrJgoP35GpqxOz4yzuhOvsMjB9ugka/b\n0cgDl/f5Mzqvlv2OrtiR/q4lawOusvDzUycaRBBEQQKurwxt7/qVcq24ghsn\nVi8JbXnB+SKTiCgT1ffYCaDOxfxzEOg7RbSKLm9RX7Lsvt/I84v4JY0wfTiy\nT2P3UNlPnXOV4muKeTZsQWgqdzMMAinEhwNfF7G5NcLwdbUhPztcCOPQHga5\nxDjlksXTlnYAANXGdoCHqUGiBqvF7PzgKf3FB2ebHhbc5GKZfh6wQNRF3g2m\ndjAwdZP5/chB+1yf30kQZYU2xNKViAkKKRcKeuzwhRR2wQjfwHeKReQk5dLZ\nNc3vketqqa+YNaNk0TMLU0KH8sB6p9Md0Z7rbvQ6WXhoQD7/UAiunnwXMzFZ\ndrjqFADTO+S5AIdNh7bwm5jYGlIz46rpGg+hCLm4p9Yp8mqi5DKIpn7IWFH4\n6JH1xIniU6ZOHZnZ7EmrePMBw0EtfpdSMCI1X58P0tGH/fvXG0ah/c2SIzrf\nsbALe+YpBojfXAHz5BSbtm25Yq3ZW2avwFgtbmL/lZ4p3rRTFvg9JWazrfTP\nWxlIRJv+op3RaGa0eMl4MWoGJGrNSDdugao3RYXLHJzkdlqxmUYm+YyFoKE0\n//zy\r\n=buHJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.7cf67823e.0","@material/base":"11.0.0-canary.7cf67823e.0","@material/shape":"11.0.0-canary.7cf67823e.0","@material/theme":"11.0.0-canary.7cf67823e.0","@material/animation":"11.0.0-canary.7cf67823e.0","@material/elevation":"11.0.0-canary.7cf67823e.0","@material/feature-targeting":"11.0.0-canary.7cf67823e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.7cf67823e.0_1615918856930_0.13526414219718164","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/menu-surface","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.67d780c79.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37a4911198a7c3f16c9f6897f0b141ece8d49e7e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.67d780c79.0.tgz","fileCount":38,"integrity":"sha512-hFrbNfJAXeBmUDWxbpDwAXw9qaRJl/6PXRg19erN+yW4YYq8ukt1dGU/6EcsH4B+uEjHKuAsEe1SfM2/2967PQ==","signatures":[{"sig":"MEUCIQCIhCfMwFQfMPX37o5yubOKX7fTdRl6q4+pnZY6dp4irQIgWIYRioA5TA9yCdKsOIkvarwcvcsVY+r38Nz3RX20Tcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQucCRA9TVsSAnZWagAA1nMP/jrONOlU4/0jGuI0Bb9e\nr6nOA3tj/DPOjn8YXhg/sC8vEoNZR6G11rOZcVVe3oByZ8ryKoNsR931vLST\nx+0uXl8da8QmIRUZisH0VMrH3T8e7qGBKnyCkpfv+FRWz1QmzUxaBXETgf6p\nnvL2V/prMa4hPT+NtDl5hs9rmUK8sUppPmavxCUUZ1ZyemUPEN3LhCqYRniz\nXNwqa/SYwZEGeMkF/uc8CZ7NW+yPbP3ZTqK+u2azrF2KumTdeGjBbkDP+Hti\nCuvGG2OJv40qafK8hUtQR/Xu3jm1+1YDSSjbOKPCZ9iQbiRl5nxMLtR6IS2z\nZiQsnfTq8Og5T6uJ9dgClX0RfRvs7UvRlllG5deQJjNspm6H5nLx0Gbmh1+8\nNGno1rgwM3FcF4xIkgXiVy62npqF4VNK5xQIhY2UFoNVXNRwH6dk0uATEcU/\nvXa1lo1qpvjjQKfPhS/0APvxDuvTezSlYBib0rIblda+ooDL7eUqJQPOp+tO\njejGAFZXxPPsR1WkzWs0qZa8N3MiJGtXDWxjILtrgczN/W1L2LC2bb3cx2KX\n1fiHRwAhOXrIi39tAFGuFFg5dzTwxuqCma2Cs+Ik48m0FLaE1+nKNB3ZZgnb\n9Su2Cv8aDrT+A1lVAUk5fpZV6IkPOEg2KmQByxt0gzrfA729eqLdN/E/GXw9\na4ic\r\n=xirb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.67d780c79.0","@material/base":"11.0.0-canary.67d780c79.0","@material/shape":"11.0.0-canary.67d780c79.0","@material/theme":"11.0.0-canary.67d780c79.0","@material/animation":"11.0.0-canary.67d780c79.0","@material/elevation":"11.0.0-canary.67d780c79.0","@material/feature-targeting":"11.0.0-canary.67d780c79.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.67d780c79.0_1615924123672_0.8217528444322042","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/menu-surface","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.0f358ddae.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"238c56a3812a0c9cb76873348f5e93b0124e4aaa","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.0f358ddae.0.tgz","fileCount":38,"integrity":"sha512-l3BMY4LrhB1eBNJvCrfDtPh32CTL9E8kfeWQuIQNL1UHBeQGpVEPnGAQDkxTsioKmRwHvK85Y1zmnWVwdTVTzA==","signatures":[{"sig":"MEQCIBSooE9Bg+WBflblgDbMzHvIqQ/YRSNNXhVS6H5mV+H8AiArdYMBBaIaaFPqNxWEIhK6TgryEsKkw6zjAUzq9uxXyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS19CRA9TVsSAnZWagAAInAQAKENj0p2FLuYOcDnIn2g\nXdLc9dB4quRBE0doY1kqdlkF9ElyyE0wmtfIv2O/IX4IoWJcQbGoRn0IGZw4\nU/uuLtEBKf52JNskikuFaVyJ+LC+73vwYN2AmezltBU52SkTLLP970hsuF3N\nNJpwUHqT1eITK4drg+GmPoD4t/+mzPB0GG2P1xihrrTepkGx63K7y9gYMiig\n6AzPdl55FJgyH4LyXqvjxlqru+ccZEqwKH0KUM7SbuEazwZnj2Rxe6nxw2qL\nHerCf8+S4SZFCfywsC3yQvESsq9qBGYLXwyZPLnOe/D9lCtCpb+vtoYSxYlD\nrAOOqy6OdXD+8JMKSK419fbC1TsD59/cSHUhAqyEfdPtzrwAKiw+WLFQUzAK\nvebRslAprAZNoGX+qlOnuk/SaovJAzB5J+cFF5pnXaAni10MGw3sUPf0QzxO\nQ5Q5pJLOGU04NDgKwxBZZP0ZdF4CkabciaCmMpGo76OnZ5nyTbU36lzCEJGt\nRkydeZSUBiT5jUhArjNlYEu0IxFJMre9PHCQeCQ1JHi00dE95RsEeqLnTkRN\nXWxGubkYRmPFYs3UXVitfsJq/G9aRRIKbWP3Yev4T7CM3WsvGBle+DUto22d\nv4Nw97EBn0TxfoVtA0FQ7gc5N7QumiWSm6xRQt1cjJjmlaH4dFAlSBLjzRNY\n6nde\r\n=vx1w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0f358ddae.0","@material/base":"11.0.0-canary.0f358ddae.0","@material/shape":"11.0.0-canary.0f358ddae.0","@material/theme":"11.0.0-canary.0f358ddae.0","@material/animation":"11.0.0-canary.0f358ddae.0","@material/elevation":"11.0.0-canary.0f358ddae.0","@material/feature-targeting":"11.0.0-canary.0f358ddae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.0f358ddae.0_1615932796569_0.9021922606034656","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/menu-surface","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.67eb0df80.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a7380ad6ef4dc3e7d1f3a17646189ee2d41ed10","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.67eb0df80.0.tgz","fileCount":38,"integrity":"sha512-G31kPLmiFueRqgUDmMg76mbOWwhvGqaa7xrRtYY14cid/6UwukWwF31rsi2NYeSv9OAHVpKR9pOVhgPLKCOcZQ==","signatures":[{"sig":"MEQCIGP9PHEXTnA0y86tOv+f+dX6YbvpWMc2PXMTqESNiEKcAiATJWLx56NsumRHpv5fa0HguemaiAqyRDwseAQeyu+heg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTPcCRA9TVsSAnZWagAA+z8P/iPD3JaTtQx0DosqxHt4\n3w1LY0NL19tyhIzdX+SPsYRCQOFfLz1iU9k5cNnVNxcyhvYc++l6eVwO6UR2\n/1VBTdDddZ31r2beqyYNmEIzxyohVvQoCAcoBmKlBocZWPrdvi/13t7nx6uv\nOrsrBPecMUwAYKOPmX2DxCV5int20i+ZiMjN4mNn3OL0X9dL7woxYftBCEeb\naSNaXBMOyL1MCwRRHqQGha8izFc6LLhwZgffm+KMcbzZdScukuS70LYEeNBY\n6TQgNIZKm0ge4MwzEPfnprg/htP6hwgkvXax4IcMnXiJgDPPk6QbwC3YVpQM\nQcHFKhpbu5+u2pfZiNTOeEOxunNnel9poNt2xnUL5leRfZbUy/qAB7qqlpk7\nonfRhNmyyWi+dfGt77C6HbujcrpgWBy1xaAWWH7aNlmgVnHJTny15NpFS9Ox\nd2ZMyptTVZY5jiuzkOx5ZfU6va6dXGFV19fw6MksiRUIOHT6pzBRLnsj1T68\npk7RHvalhd2AWSTMeR7qaqoThjO1ZwGpA5+rRo/UeZULBE7TsMvuIW11ArdU\nfWadulSNRIyVaOjX1h2F5yYgjG9mv5OeDDveR/5XqF0Wp5hV6uPZdfdh1zgm\n6bMjPteeMpAa+CdpB+RPS2qtHwMMcIuVcrTmWHbjegv3bEqE/gvP4Av9LUHY\n9Jb7\r\n=QD9m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.67eb0df80.0","@material/base":"11.0.0-canary.67eb0df80.0","@material/shape":"11.0.0-canary.67eb0df80.0","@material/theme":"11.0.0-canary.67eb0df80.0","@material/animation":"11.0.0-canary.67eb0df80.0","@material/elevation":"11.0.0-canary.67eb0df80.0","@material/feature-targeting":"11.0.0-canary.67eb0df80.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.67eb0df80.0_1615934428168_0.6781750979277654","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/menu-surface","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.941ca3b3c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f02bb445903447f98ec83f423272dcb345676dc8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.941ca3b3c.0.tgz","fileCount":38,"integrity":"sha512-ZzDuKRkgnD80Gvp+4GRwVy1oLajJAMnCbzZUU3sFr9KUeY3/XVlqREV8VOXgufczfY4jROzZwXSQkJVyiPd48w==","signatures":[{"sig":"MEUCIQDzXXK6G4WQsmfNPf/wM4Zbo/pWjdPzE4yDqJAvv4hShwIgNIdj1kYdWbxQ9ml80BJiCIQB9jgtLFca7VhuHGKpPQA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTRECRA9TVsSAnZWagAAvgMP/3D7g2ExfB0/IMxTBAkS\nYKr7dxT4+Hn0fP6b7+bVq9LaPZ7vb29T74wa7LSQkEMABOyNFrmkO27YpkJx\nKK0NNlkDipTAYZH8iljRtnVWCwwO5IfbbYu9AXykI9qpLgvsp5l2/rCf0A/m\n5vljv+ZjGK+d2Ovn8AabCe9EHZ7DeL+mHU3gsyhSsvbxArA8Sm66X68AQaYJ\nZMQARdhoAtrrvHJZTOrds2ZEQnvYTMd21PGABe+Q1v/4P+ayriYcMgcev5mG\nIYXst723F4AUWTbFe9xXJiv9lkLhG/B9XqrekZU3i8icmV8MlaK4JOugj8SB\nbV79ddpTzhxVH4RPYLSOcJnfk2XyWFMLZaB0w628/QA5uUya2DF608aYiXl9\nciDjSTlAdJ8XesSQv7/+NxlRbyx1TwzYCpd08kYK3g32n3PbPecr73xHT6YX\n6AMkzKv1xt7PUNjyI/LxGUgBs5K+JpzTF7BGbOPJ3o9Tsskxp+Fc/7vs+UlL\nN/dPfqxIEt41vGx0ZFznPQ5HCIhivHgqPJe9C6/zuMthm0K+VPcpfm2Cshkm\nmwcP1CCl+LihyZoSHh6Zz51ss9UOQe01t0fT6SWWwhuenkeN4vsYUNUmmUwV\nC9IpPlj/7/dyJ5Yuf2tKnErL4gaiyQPLJ0JVCMGytlUVeBk2kVvHI+enV8Ck\ndOQO\r\n=ZI28\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.941ca3b3c.0","@material/base":"11.0.0-canary.941ca3b3c.0","@material/shape":"11.0.0-canary.941ca3b3c.0","@material/theme":"11.0.0-canary.941ca3b3c.0","@material/animation":"11.0.0-canary.941ca3b3c.0","@material/elevation":"11.0.0-canary.941ca3b3c.0","@material/feature-targeting":"11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.941ca3b3c.0_1615934532410_0.7106735701736482","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/menu-surface","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.3344d12ad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e965eb6e325582cebcc9f155e736929cd25e0ed3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.3344d12ad.0.tgz","fileCount":38,"integrity":"sha512-TIQ8howwmYYvZZctCH4D2Cusay5xCq+QiL1v9NtkrYC+G/JMQpZgx1FSta6ds7e51dAzKjDSOitTmjjeInvDTA==","signatures":[{"sig":"MEYCIQD2YM8Rd3AvffXMubhg3NPNAjaqw2w3wp2WhxKi+7S9awIhALxopNvyIBcf2Hno567L59rEGGLSBEZlycIfgOFK+yPK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdO4CRA9TVsSAnZWagAAq+AP/2HmsuU1weLLakdHO3kK\n6rgypnHNJ7JfLnSNThB3j2CDC6Ui1Q59+0pTFQwnWF+k/jM8tx+11VHSAWAZ\nd41uMCWpZmHfVte7mzf8r4YOXfNyeudbP2Ek4GCMczCrIOca7y13GHtpuxWq\ncdZpgd13Zcd3jNmFRAnPAWFBU/Mr7VFTMXbi1y30yYKBPBGwG4xWPiFSKa+n\n7MI1jD+A7Ox0V4fQjePeT4NKyJiScqnQCFTNlTdDQv15iclKogM9xryl76Ka\n5+A5XboKOJm5OnkezkdX40/kCtvPek1a8Xq13r9pePrDGhsye9HjXlYVolXh\n7olyMbJVmUAyH3rpBdiSivcLWxropvquWBjyXAEwO2Tti1CeKp95/rm84KdO\nEH9wiNzHqUxZtf0JZGCVmgu1ElKdcZ/NtcuqXUcgxq9/B+MoqcBjHi/D99Ua\nzmUigNf6zMP8SNV+7X69VlyWO/MDsezJiESqupr+Bi0dUah3YdJrrniwcjZx\ncTiExUnfaBRVzK/Ia/eA44O+0UZW8Aox4KFQlqpO0vx32ar2q+VQkCSfaOcn\nWWc7zsMIphD5zNh5XbomHEKMO4JNmLgYc5TOIhsqyQrWRL86pdiJ2/H5yijp\nK0+L378/IFT0OSdp4gBcuGjSRgRCoXNXSzFu8axdNzkjBZzm5SE1ysxKhMyV\nsybD\r\n=CK5R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.3344d12ad.0","@material/base":"11.0.0-canary.3344d12ad.0","@material/shape":"11.0.0-canary.3344d12ad.0","@material/theme":"11.0.0-canary.3344d12ad.0","@material/animation":"11.0.0-canary.3344d12ad.0","@material/elevation":"11.0.0-canary.3344d12ad.0","@material/feature-targeting":"11.0.0-canary.3344d12ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.3344d12ad.0_1615975352302_0.5618406213835554","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/menu-surface","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.6072ed604.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36e03910b794980ac72d63287b27cc1489f3fce0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.6072ed604.0.tgz","fileCount":38,"integrity":"sha512-jFoNJA52WGnbGwpae8yvC7gWts6HAwB4YAvZqEjUqN6HiPKUnp/e7NZ+pRANFq9AWb50cGJHiRL20j8TdB6Xgg==","signatures":[{"sig":"MEUCICQWpoGmM7l93FyIpMKdMCYW5/lfxvpMsBmLa0Z/xuVdAiEAmgbQnSmJtdyfP6z3RQO2G92bziCgooLk4RSKK2KznW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUooBCRA9TVsSAnZWagAA/soP/0v+G/+Kw6HwlVx3+KLn\nPqMclo2na1EpBQmWlYwf+5R7djJaV/NUhKf02EyzHzjlJgY42mZ2DDveqgXc\nSwxZX4fQyXFFkCOi0POD/VKTUHvzvIEV/Y3qcKBkGlr5pwuHWFTiFUqG1HnZ\n+qQ4moXlQT+dwflBD9quAvQA8ul3xK5x05HP4m9eQf2z/7AmX/asfKYtbgiY\nvQhPpGopgp9KByEtca6iuSDl3g4MQlCSXzvQu3TDlF09no9yix1kbnPCkRNI\nO8rXip0LiFFR/FcBjpYHTRSql6Zb2PBmG+K/Q2cEzINsw8rgtaf5/CaDol7k\nDniBkiBD8xw15hgOvZ+kxbTJtyLgWieiqzJQKJqaOBtp3WQi56CHzv9/r+1E\nxFce7jY7buop5f0qv5vxMpwWbnQRM+GCP9C+xX9p4nju/oiXKdvPk1rwdUyG\nh6TSuePyOArgjIu8Cu5DIlr6+f4mCVhDfc4xdww+p1LCEnnEMxGgNcZU5D9Q\nueph/nIZj4kjgzsbO1BwCRKMmZQVvAwWv53O6g6V/fjGpi1Me0jWYbM5eAX0\nbeg+xRBErqMp4noNjhGkfPssmomi3wnbr37IOOi+9voPORGbhxINWAVKg/c0\nro3LgxJ59ql4rYaFYr8Ep2DBQ5OwvXmBFRb4eN2gTPX2NQSB0G1H8rSK6bd/\no58y\r\n=pcH/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.6072ed604.0","@material/base":"11.0.0-canary.6072ed604.0","@material/shape":"11.0.0-canary.6072ed604.0","@material/theme":"11.0.0-canary.6072ed604.0","@material/animation":"11.0.0-canary.6072ed604.0","@material/elevation":"11.0.0-canary.6072ed604.0","@material/feature-targeting":"11.0.0-canary.6072ed604.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.6072ed604.0_1616022017412_0.14647492220273262","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/menu-surface","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.d3a6862af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c91a7abb02fe8797036d8b805c4336d802cf386a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.d3a6862af.0.tgz","fileCount":38,"integrity":"sha512-/h0Qe5G49xuTuRwsypr0mFZHBZOqN6OJEk46B5BLkzHvmX8dSQCmzH5ZY4kkcG028qGPnPsZGu+dDBjEXp8ZgA==","signatures":[{"sig":"MEUCIDSbyjNkt9lyEC77x4sfs4c/AgXqdP23FSF6UelzEyknAiEAj5+HA4999lbuGCCpyU964RK9Aw/q3903yWQfZjpM0Bs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU33iCRA9TVsSAnZWagAAo0oP/iA7GHMcj1tTpyBoYRCT\n3+kjFL0cVVnjWKitfOu3zQ/J5tkLlxSCLv8zQenUXV8fxaBRLj5Hgdri0qj7\n1oJyScqS3Wz8iqRI2DuDV6Sd0Lt3ubL2shzElN2ryQXXAd5NhIRc6nGNkaxY\n0Ue2TbX19xql9MNZrjq5ev0+58ReLvqMpnrIudYwzcFTlUXCDHkSAO2UL62i\nqH6tMDeuBkIGNmbE/gorhFo/JFKPAT1uOaPjlWHXUNQ52MBJfA87imjDLAdT\nKXNNyu358dAz57fTm3h9YcJcy6k+OwqYQi6mbgUp9UxHK9rerkQCMssBG7sG\nyuqLcq28Vk/Vw3a4nSFVsQG2/nz1/sbLDWJST0ms/Xrvt1zWe2MpPryC0+J6\nRl93sznoqLg6WIShPmExDpOXqRZXjsxE/mcHmZpByvgTVNsr4pL3PYi0hKMt\nppQT0tTldwPbJxR0GK6N1w2X/ZHzjrLfdgjzEj6kkiZ+PW/D+frzle6IrKwf\nANpNIkl9uJmRNnLy6brfIJzD3lGM0ffPZxIwC1+an62wZPIopKCEjisqL7et\n5JFy1AS7CqFBIzE35j6BiGrILFWsNsa8Dns4KzY1COTM9/8u9qc2VQEXJk7A\nGvfXDTwQJgyT1c2GY9qFX9ZbpegONwNpYQA/r8klcHiXAjjxswGQXXZ+n/pF\nX4ts\r\n=IrpW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.d3a6862af.0","@material/base":"11.0.0-canary.d3a6862af.0","@material/shape":"11.0.0-canary.d3a6862af.0","@material/theme":"11.0.0-canary.d3a6862af.0","@material/animation":"11.0.0-canary.d3a6862af.0","@material/elevation":"11.0.0-canary.d3a6862af.0","@material/feature-targeting":"11.0.0-canary.d3a6862af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.d3a6862af.0_1616084450214_0.7827174559697023","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/menu-surface","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.40dd242d5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a87f4ccc4fd2441d7dae447d0ff0e4192499a3ad","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.40dd242d5.0.tgz","fileCount":38,"integrity":"sha512-DyPbXjR95c2TVOwpXUmsNMhVZ0UgaxEnNt0kMeA7ZOUR3iE24DUE1bAnJhf7m4ATOzwYj2GupqQHPKjBOmU41g==","signatures":[{"sig":"MEUCIQDk8Xffpe5TthjlqxLRIj8maF95HnlK76LWrDUAmDHbVAIgW2kWGcRhMVjeOczA16qvMSiCzUuOG/myvRlKXa7FHFk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8OHCRA9TVsSAnZWagAAZSMP/2SjBbJi05+IqevwTZs8\neAugLk2MlQ+4XyYWbAX9lTwMvoYQexOLVRHIAuDaZQiJQj4gGXvkf4PtF8BY\nLyeuhoZxRl7lHyZpue424JOKSCRoCv9DCsjOeJL3xSJHqpuJaV3CCOzwOJMp\n585hD/z0sXWVCjhlYrQAqxq3W5wJKA4fKw43jbCWNFzYFDUmqGLUijg/Vax9\nNhiPdcFR0hf+EuGlLBNeqRDhYq2VD5A3jf999M1QLnS29CRawRyiB2Sj1KUe\nKJiWO+FCfwphwXW8p64NMwpbqjayLIt6vPgvMtfGeaNv9aIW267IwiWqtad/\n5WPoUJDDwvQ3VmPNYBfxg/cIpNUmJikSeP/OEUCjcmHkXn6ZYLIGNp96icE3\nd56Ahn5dXaIujQ+yM5E1a8e3z3yfRyKeHYezksqvEBTuPpjsaxo/2e5b65Uq\nx9UAVTBLm+7IrZ3ppfsPL2hWpmg5QdMyCNTgZN1GCWizt/zADaMTt5PHtYSi\nIGtjPBNiwhUBCcN+H2A9tbBnZLm3gwr3ubJO7pnMBjcdR6oD4TOKncc1EsuR\nHezbZEBYGMTCBynkMvLpgL1rhmh3fmDEa/H8QtzKUzNEfoHXH6yl3eASPpT3\nXmrRJ8nj8DcWOMJKqgtx5TCZ+ZR8RK8CL3uoNiGKZB16hRWJYAItwxIl927t\nDKXK\r\n=pAYh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.40dd242d5.0","@material/base":"11.0.0-canary.40dd242d5.0","@material/shape":"11.0.0-canary.40dd242d5.0","@material/theme":"11.0.0-canary.40dd242d5.0","@material/animation":"11.0.0-canary.40dd242d5.0","@material/elevation":"11.0.0-canary.40dd242d5.0","@material/feature-targeting":"11.0.0-canary.40dd242d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.40dd242d5.0_1616102278458_0.049368114725433454","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/menu-surface","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.ec8f8465f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6025d9cfeaadc07d5714667a5fc640ac607ca205","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.ec8f8465f.0.tgz","fileCount":38,"integrity":"sha512-8BVM0fSG0s7AMLmFROgeHb5tEsErumnt0MZYMeAVM5qEpOlg/17jyJNILFDy8CoV/7ngQZS9Wyrxbe89tCjT9g==","signatures":[{"sig":"MEUCIQDvrMw60zbuCLWhBDeOhTYC9xpNtJHQMP7Ng6Irt0b8FQIgRyYODEXpAROUF7K4KCeOFvVWjHkP2aCjP/hj7IF49HU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8nSCRA9TVsSAnZWagAAUr8QAIirh2cLe45gFKhN64xB\nVLX0ArkSxFEo+BjYFJJfXvyGD889CAntK4NhgyOFGubaMs1/ThGMIBju5WdC\nw9bIIdu1pBjpOEnfqC6fuscDajjxHHV8qOUhK3Bk8RrvMEdNjZ3coKi9EwKf\npkh6sSAbrtOjCmLEfCUvyJvNvS5EXKkrieaa1zpAX4i92m25GG1JZBb4NGMQ\n5USSFU0UytuZPFhpqjHasOJxlkAgMhoVBBGUhs/DSPGAoj2DrbtL/Bkw39P1\nPupMrmrTVoXoAFI1d5phLwN+B9sCbOFldEfw0ClfMntb4LBqTaB1jEEbyMgG\nmojAy4cCt0AaV5JuI/ShiSJUBBy2pBHlsUFA2i5s9UUXiJYy0OcYPx8NiPsu\nfYIW548y8NBrvQAJqvqtRc+E58YmBUq0ktbdzZiv8yRu2E1p+Hf/tEL1Zl6L\n30qydvIlf+HzfLXFaoLi+/T1CvTSWkKg1pvEBROcXMmPQB1Imq/mq9Jgf9rv\nDvajypW9D+ndSkkZVy0c+Fgoom8KkO4zU6v1xcrIuEVnPGO3xXt7rGUDupEK\nLFG1ws3e1hRAAnT7aomVc8VPCbK9yTIQkRmxi4mHc+o1/oxRO0HUaPXl+PPF\nd+gpMko4NQBMq4IGR1K6gqEAS//rJmIoDNaKIsGo4md6nXAkFLP2Ldo6x0e7\nEp/9\r\n=F69i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.ec8f8465f.0","@material/base":"11.0.0-canary.ec8f8465f.0","@material/shape":"11.0.0-canary.ec8f8465f.0","@material/theme":"11.0.0-canary.ec8f8465f.0","@material/animation":"11.0.0-canary.ec8f8465f.0","@material/elevation":"11.0.0-canary.ec8f8465f.0","@material/feature-targeting":"11.0.0-canary.ec8f8465f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.ec8f8465f.0_1616103890086_0.9671260224449105","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/menu-surface","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.da38969ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9da87bd90a9e45840b0d57085234574e5298de8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.da38969ec.0.tgz","fileCount":38,"integrity":"sha512-4AqZKSvs8xyT22injm4CTQ7qjdw9jaUcOUwP5AQDxA3VGoRz8fDhgruExhsFEzrg/e2qEacsvDfcSt7WNbJfFw==","signatures":[{"sig":"MEYCIQChHJb7M9OS8ncrjukWyyKKrtRFKeG86m5PlIUryummmgIhALNpbvqFXDtwi2Gij5CdGcdG9+QO9PG3+EwPc67wbjwj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9G5CRA9TVsSAnZWagAA9wUP/0Up3b7bfJKpj0pcFWND\npHOdna+AfSzCBVapUBGPlwTz/cFKpL4/ojPwZI1Ye61FIqBta6IvqxrQTDom\n6Qvr7o+w80y2+Z4U+2kt552RfD7onsUZjg+r5sPjxgfHPjLYVtwjmlKEl0kA\nb7uXEhUy39tFNxKqY4P/Asi3l3rxN2ezWwAxmIrO4gFOo7vgWox4AAWS/rW4\nlrgj8TXmpLuJ9USOKR7dWIJ0P5hjOe7NbpzmymZkqEVE9h9gD2n7oDX1kMRn\n6uVXSPkAaJtEmuJYbnCw44sq8ye0nsh06FEyFLK1wlG8OQ2+ZytShy1fvX7Q\nL1kHoyXnmm7SzLm6+Xd4MzZy+5fAdwDCZlUMUqVfs5u5VNYMQ8baqhqHugcg\nkuNSbZEYINbF6lmcffTjnmTirzPoxg9auDmXvCcqRR/WF63RDDmH/l1BADGm\nUt70KHi8fZ6EGUovcGKSy71INyPXpDA47a1crDSrojudgH/guFyRhzpz04B9\nL2UWk9RxOKE8er18YiRvs1NAPu5dTDXqKEEj0vNWRd5+/65NCOTVtQd2KyOA\nqVfs5jDgZrWZNVb+naBpwAF5OuI2gIDULLZpPEZxIfPqshviajWuLqSat1RN\nsBuqn7QUrfvVNwtGiYxEa/lW61IS3/Oj+2fv2Wm5PwWV0Ewlt3kW2LgFXxqq\n0vn7\r\n=AgQe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.da38969ec.0","@material/base":"11.0.0-canary.da38969ec.0","@material/shape":"11.0.0-canary.da38969ec.0","@material/theme":"11.0.0-canary.da38969ec.0","@material/animation":"11.0.0-canary.da38969ec.0","@material/elevation":"11.0.0-canary.da38969ec.0","@material/feature-targeting":"11.0.0-canary.da38969ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.da38969ec.0_1616105913004_0.3596078919639063","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/menu-surface","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.f5246264d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf64c2a47b206ca1501862f5eafb38a4ea7af33d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.f5246264d.0.tgz","fileCount":38,"integrity":"sha512-aYoybjYkj1egUTCJyp6LQAU+Hxhm8nILrteZ69KLfY6PF9tmPa2y5PurOOm0M0ZfHZ4XZZ5dcwUTesHSuZJDww==","signatures":[{"sig":"MEUCIQD01XptCXQOPiGyzJyS4hPnCT4W2fncdLYZCTmsY2WpewIgJsQHPjaAQ8skmBqxRpf8mbIqeKgxsx5rRvJD+fA1rbk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/K9CRA9TVsSAnZWagAA5e0P/iGBDc4ClZLaXjwKMQT7\ngJaa+tTw9w+8ZRpaQ4UWdDInKjcdj4yFvH1LmBmZcn1Rz3OoDIsrI+ny2vAO\n7i+L2ExiU0qfiizojWChLJHIJA5vqoCE3QBdx+woZm/RMZjE8ZpfXs18euKz\nQt2qqAObicwX7W07u5SwpGpdTpZbU/aeqoSgmGv8HegWmCuSs2y+5BB0jlYN\n/K/8tmLY4i/Tt6HTjSaMcWxhIjnVNLMuui37xE0UoplXf7Yu1ch1uEbVIDdL\n2imdWCEn+yWi2EPPc7N5IESdhBz7KmtfpnXCCz4qhurdtlFyyBiXQ68yYvls\n5i28jb6rfLzG2GUb4wW052P8nBsBz5VBIRT/35sAZtmW3krEy8U2BkcmU/nG\nEwmegrs4VA60IKr24NcAsQ5S88JFMFkUFWnvIvWU4C1UylNbGXAsi/VBmrzp\nSyFVfSNF2tdIFp09BnXcE91iQZr4m177qLgTwwDc9vZztGZC18uhMJD4NYqJ\nDZ8eE7ZQ3U2gYcGUxMMnYaNHcUz5yS8uZx9qdVn3fGqx1ZxuMYTQs+zzw1j3\npiU1yCU+Xl5PVPMU5lyPlXqd9IdDGo/ZaXg0pEtzC6b5753EqBI/Q7usXEtO\nzUwvBmOaq6CY7g0GqRLpwE9ccjyVNqLVaNmFPRIeAvbFodtS4BUpB54FwfPH\nbcgH\r\n=Itwq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f5246264d.0","@material/base":"11.0.0-canary.f5246264d.0","@material/shape":"11.0.0-canary.f5246264d.0","@material/theme":"11.0.0-canary.f5246264d.0","@material/animation":"11.0.0-canary.f5246264d.0","@material/elevation":"11.0.0-canary.f5246264d.0","@material/feature-targeting":"11.0.0-canary.f5246264d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.f5246264d.0_1616114364647_0.8653988598494291","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/menu-surface","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.03d34bbad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb7f81c4ba3e706067f006dab37a4ce7a6f64a60","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.03d34bbad.0.tgz","fileCount":38,"integrity":"sha512-fxWLFrllha3vf97mNO3UHxP5BE6mijTt+j3TipslfY75iYeNbmRhqG9GQR5aE7rkUQwANLOZLDRuH9SxVg85AA==","signatures":[{"sig":"MEYCIQDkVuDK49WVQd5PMMeqxnzYdgxelYDRiYNa8phGs4htJAIhAMKEQ8a0egdYD4UcAbDIkZdFIEmpy/67kfdH6NntDPFi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/W+CRA9TVsSAnZWagAARn8P/j1r6yyl2vISHrGF9t9X\n58gVVCIdbK0+WLTobz9ojB3DCdarIfMWsYFVCGtXEoKytO9rvusINbPG8032\nLXM8cJt620WaV7kvlROeu5pSEZdataFQTcyk415xlB56ovwLK383JqQADOW1\nDuK6FcC7eqBW8WKI2fn9bN3dt7nHaTRP/nj5qvGipnFka95z+8jex4tS00Gq\nqBBxjFscoUaI68cR0e5GdznVnSbag2BiGzM2pvkKlZUJs2xajTjXrObomGYF\nW+GXUtsNWY4G1h4grwcA/C+BZERx5/R2GPa+ZFoluvi2HmY1/JlSjwRgJCDV\nFX+OFEpqcGSYXGdYNKSdqHPgKHcqMO0I1lnefOL+4DSFQhrLOIQFX9j37FRc\n77btQJGDwVgDiRvVqC0JCcz6kwKZketJO8mm9wZhyBU7erkkmMc4slQJ/j3X\n2YSpXpkKGtPjWNNT7TFv5lMkWb9jkCcICdLrFkIUYQz7ga+4ufThhkK4xGtO\npuA2yPe02fteFsb2V/kTYOQzP+HwJOOhF7lgjvx/TIakNe4skBbDofG5M+yQ\nFJWhDf92LhGpvlKWdRl+ygNraK0HpyiyLO6glPvpFH5z1MZVT5tsoiuRM78j\n5HpHY5lqdIsJ6CU/JlNJt2G9tkFHtxaTT78U6mT4kjfTABOjRpPrSiX6U0pq\nBKLM\r\n=vOxp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.03d34bbad.0","@material/base":"11.0.0-canary.03d34bbad.0","@material/shape":"11.0.0-canary.03d34bbad.0","@material/theme":"11.0.0-canary.03d34bbad.0","@material/animation":"11.0.0-canary.03d34bbad.0","@material/elevation":"11.0.0-canary.03d34bbad.0","@material/feature-targeting":"11.0.0-canary.03d34bbad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.03d34bbad.0_1616115133533_0.6117931253837237","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/menu-surface","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.cbc57c600.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6b44b29d0254db66f916b1c40f18441d4faa408","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.cbc57c600.0.tgz","fileCount":38,"integrity":"sha512-AkNL6zD27lA9/5YXrX1orh4WLabQyU/xvndTZ7Gb4TzMiNYYkTiIV9jfGj6f0/Y4AZmF/0Tr4neBI8btLxdChA==","signatures":[{"sig":"MEQCICDsN1qqoelSA6pPAd4LpPwCf1U6CrUzuUSYWQ2t1x7EAiBRXk98LUBGZKDb7At7Z1rRx7Zr21OvTYJNEoTYZmn6+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/euCRA9TVsSAnZWagAAB+QP/jNOrr+qnG4vFcXqWfF4\np2t9iyKrUdo++lo1xhB7m5hQ/K4tEm0568uBq+F3nC/Yw0G4iunFzs2yHfp8\ncmNk4Lp3nnoTGkLCIhm3Ps8r6EWfU3anNlHhZxiUVSd44H5yd0yLGtMq3ZJ5\nQM31ldRhx9wTgNJkqBZwtx48xd8IxZj3lFQXhp75MvcoMs3CC6dngfpHuNbL\ncO1gEkIQ4HtoNiR4vSFebGN8gPPJUqNLKxHFXFJzLcKNo/924R0Dy4KGlb4L\nMzkZ9Bsnxoh/rCJj5OuvxDaHt4COta+39H35tF+mwxvCyuWm/s7DFZ3LLL7L\neHWZgRwLht5y2TNPzN2VD6oImt43tmkWJwQRpTzKKcLd8T32rHR7Jiyi2TrX\nonxY5SX92PGKLQt63p8wPmNKtK+yj4646dVpC+vR8184UM6mhYAhs6r4sS4C\niWzIZmU5TycNEdMao36DMb6t46eI/vci4Dp6HRHCp2BZhxmUcqauJ6/5FYH5\n5BP0rwuoOv1x97su1Ck4IeYsPGeajY+GAK5OlRE8yHhB/6qqp/5TZ1K1Ya0I\n6rLSbFPilNwGidwaJ/dpIfYU3M6zAqwKCh6ZRbMuNbI9Xzs6UQwwGV3zQ6eV\nB7bk1x3Jjyy5mX/XW3zEcHRTMV+1D9Uit7dXshPluys0NDqnUm1XM8idiYgQ\nm6UG\r\n=ZJFn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.cbc57c600.0","@material/base":"11.0.0-canary.cbc57c600.0","@material/shape":"11.0.0-canary.cbc57c600.0","@material/theme":"11.0.0-canary.cbc57c600.0","@material/animation":"11.0.0-canary.cbc57c600.0","@material/elevation":"11.0.0-canary.cbc57c600.0","@material/feature-targeting":"11.0.0-canary.cbc57c600.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.cbc57c600.0_1616115630170_0.6316207091299255","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/menu-surface","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.d6c5bcf37.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6434a5daba977d481448388ac2447c472aff6242","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":38,"integrity":"sha512-SI1kKtIyLW5f9QAaLs7TyxysE3PQWCiQiY+kB1BI76C8HE2ERX4r/3heBc3nMB5X/c8SBwb0ih/6ATcK10ZRhw==","signatures":[{"sig":"MEUCIQD3Ol6d+PWNdDOLO2YRs0DAvR8L6F7qEDJKZKDla0jTrAIgSBoN9lIL9v06aYs5l3SBMtYDEwf/BVwxO7Tt9dTo1B4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/qvCRA9TVsSAnZWagAAXJkQAKMlBB0X49osbgJ0Vylr\nxJnjSfR/4ULtz7Hc66RAzGStmoX8ahHbORFaVzj+J6bxTLlAiuyCJ90PqyP6\nD/Os/1SZIUgCYq16YaKdgYF1jmhgDKpJSlbVJpUMiTOhOGks0UDZaPmu2TiM\npGXXgGeRwmdwR3FmtQ9UfGriMN4AYGY4kOUupfYq2vrpGs0ZpH4rYSRVqxIo\nSDQwVCmkEK8bNJ/eCdP8zthyKm6Gw+bl875f1+QQZvF8tpkKI0Bt3Ee2rvFy\nbykYytK+Wzz+h15mpIsy2Z45piOQ7X4++A4bgElNUlFjDk6BFgOTL/8aAPW7\niOxddvRD+pJG5ESeVFmsosaJH88LaSaRxKM8tmKYBunJmIODMwY8oQROnzQK\n9rtLnRMDaT0bZ4WyJlz4FnYd1EXLVgRX3MausoivWIyOr6nY9+NGnsbxoG6p\nT0ens5mhO5FySifqI/VAFAIJ5f1Ulq13Yx/PBjxQ2WFLzFuNGbhwOwzPQrsk\nlqSFNr5IMWVNlpho27nST0eJYgKrh334u047d7A5pFgMtxJMlQFx+Q3wmPV+\n8nmOKEDpig4CRaFpkM59bwbu2nIIog0HQaxJBBIZzQv7p63igg6IXBCZ6iwc\n5wQo/4u+cCX0IprlK3+iGO2GPlD3zgU7/d1ECbWNvJVS7kx0UzLjzm024a7P\nIAgo\r\n=7woJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.d6c5bcf37.0","@material/base":"11.0.0-canary.d6c5bcf37.0","@material/shape":"11.0.0-canary.d6c5bcf37.0","@material/theme":"11.0.0-canary.d6c5bcf37.0","@material/animation":"11.0.0-canary.d6c5bcf37.0","@material/elevation":"11.0.0-canary.d6c5bcf37.0","@material/feature-targeting":"11.0.0-canary.d6c5bcf37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.d6c5bcf37.0_1616116399039_0.571727825873475","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/menu-surface","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.fefc668d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"857d7b3c9bcc0d2c3215e1615772b7f62c093dea","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.fefc668d7.0.tgz","fileCount":38,"integrity":"sha512-cJDjyrv2yNYRvewKkFFzWCqdJCVx1Zis02V2yj0WQL71bgI0Lnvk3f+fsJ+NRGIeJWMmotHFXfh2YroJRCq9iQ==","signatures":[{"sig":"MEUCIQD7xf33WlbdfITcBL9IlK76/lClWsc5CM1N3rg3r0+gYAIgPXR40DXgb5bjn+YPq0ifvESuElw5w3glKJ6lf33L0ZY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/+yCRA9TVsSAnZWagAAW30P/0lJrCW6ZhyMf+d1znnJ\nYA0Cr87Wvrg4nS+b3fYObOuDUeBGxdOqBq/woAmYDmppPNp58oEpU8hDlpTv\nCrMbQNhNEhbC6hFgvKNqTJmb3L9byvpA2B9OeciPj7sUOcFTZ6JDWzoSV2xl\ngQZ//uY4PSxf/nJxJbwMY6IUANWpcSegq27wxLzZsvoUCO+3p/vwedhjBqd+\neRsSOEp1e+FLR8AXbRUJW+21ESmZw3y5E69ZCgqhC9YLGgAKyNv1Mabuvn+e\nSDH5jUWkkCFBZefa9vhXUfVq5J/babwU/k11vvg8Y74D+0/iVH1uilu8XFCZ\nxoprI4HL29xGlecEaWf8sfrX3SV2KdXz9BYHAdhZXH8fLhqbaswIW05TqfmT\nWTjXCaO/ooi9jbN/3P2WZ1PgNnmu3p5tr6P2EERdIXA8vo/Ey5rH8L/C3rzH\nmg9FgEGWxE3HyraOuRAG8QtSGbmYDig1cV2QR4aeQ7YLKgkBxNDFmdyVNf7l\n7Qt6BR4jQFtxfQKaXGZagjdFtYJr3Y/4CzRFGT/dvCoHUDPhsi3z5SfkTcK/\nmQ7zZOq2BneFmOJNiV/fQr0xHMgPnQPt3sKCLX6epGEoOkbIe+0oGwxWy9+p\n0IV1l1bzBbttfucGXHW0L+wU2bff9cDAfworZBSMyHfnPJ4piDbO51qQUPbQ\nADLm\r\n=NbC9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.fefc668d7.0","@material/base":"11.0.0-canary.fefc668d7.0","@material/shape":"11.0.0-canary.fefc668d7.0","@material/theme":"11.0.0-canary.fefc668d7.0","@material/animation":"11.0.0-canary.fefc668d7.0","@material/elevation":"11.0.0-canary.fefc668d7.0","@material/feature-targeting":"11.0.0-canary.fefc668d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.fefc668d7.0_1616117682406_0.5027503245607821","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/menu-surface","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.faa7d3226.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3d982dd0e53726aedd787cf07746e27f679b493","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.faa7d3226.0.tgz","fileCount":38,"integrity":"sha512-6m9K+x1aLmLSMXbrK2FNjmJT2GD5llZ/QyKMgZGeDsA6JoPq+imqcbAcKrccENUra5uYN9fZRjSCK7WXA5tzcg==","signatures":[{"sig":"MEQCIGgmwvf2vL6PxhgKy6OBr8r5fwxFSgDYYgBmGMW9OtvgAiBIzoEa5SGbCR595kGurmsstYxSuywXXm+SDpKVPYhB/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOMbCRA9TVsSAnZWagAAcesP/13GXYQTWmNbti6v+p3Q\n9bOPKioTmNWJyuzSkWdKJvi6K8ZyNLFbwp4q/VdQRp0y7svd1J8UJDZjfNek\n/Nnh0dJny6d1onAso0h5HleCMcn1uj2/7HsBZyIolxlj3ssdyDxblW7ApwJY\nmLmCQWx9v+N3OHy2Vt9gjEQY3uo3BBce6WHShrnqmhixSHzpNjgJ1PE3fNS6\neC9285iCNb8SIzCQE/iAcz9XnKedse/2B1tIL6HQADdpk0YexzH4C/UZOoas\nVIUd3dcpEDmCmDCkT1/4KI+Voi5jacErp7Crxh5+nxs44Z8Qyq65V1kHd6/4\nVcO1KT5uQK4z1pUTzz7FpY9ek5YPTVdr3lSAHlVNoyHYrlY0ek8IUUTU7RQB\nq+NDIrrr//MkUeZ3kJYSRQeE0NYRI7IALvnfOwpJjcOGFvea8pSPaG0hRIgy\nnIs18+Qr0ejJwHEYfUHrwB1IRFRxSx6ogDVt+HcfFp+ToIgCv1r4bdJHaFNm\nSTgHAZb5EFD1SaLT6Cp9r/3NpIfdnMdCPspOZSjIlvUL/MSoruNhKrTu9/FZ\nXjlmB1Nhpl/hwswgqkUgpfY3hpbRybHWAGSUJHcOOVi9kCreelbCqx/tS6w3\nbQ+okD0mW8/Hy5ZzBNEXvBXIYdvJnGyTtqo8SmqC3Jx3XevQZG7eWGTgHhee\n7guu\r\n=x3gq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.faa7d3226.0","@material/base":"11.0.0-canary.faa7d3226.0","@material/shape":"11.0.0-canary.faa7d3226.0","@material/theme":"11.0.0-canary.faa7d3226.0","@material/animation":"11.0.0-canary.faa7d3226.0","@material/elevation":"11.0.0-canary.faa7d3226.0","@material/feature-targeting":"11.0.0-canary.faa7d3226.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.faa7d3226.0_1616175898529_0.42931817654775717","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/menu-surface","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.c60449bc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1914d04f967736fcd7d87248c45bf457b6799e7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.c60449bc8.0.tgz","fileCount":38,"integrity":"sha512-GKXaZK0bQPAO1TqA6NMclSN0s0uB68/Xba6uo5E2T6doAMRI89ELN3rneCP/3af35eztDvxNDonBQEtSM4snKg==","signatures":[{"sig":"MEUCIQCNk8/vsMLv/PW+3rGbNgxeXDGFtaA1OhDt0pOMY7uCZAIgAXCfz+X7h2tYDIhp/a+OOSpvsTKp6PdaE40fzMumesA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOgICRA9TVsSAnZWagAA/QcQAJqUGl211p9AsCz1ULca\nPCwDpQPyloDPd7kAzgEtaX+OnTsYsWq6cO+hmsG6AF4iTMpzEIkJGgXVUJiV\n3qfMcHyMQrMClKHguX4zv5WKCJmpIartU6mfM8nsnCSUJhZwXl9bIXNGjvba\nf5oVUlJ01XEDvGpR5gKibq6GuEF0NzsD9ZXiO2rLKkbIBMFCJR+T2Y7gZ1FE\n+65Xd1nKtWlEjOa+6CZpo2tXrYtu0yiCAapuchdZZ4ixjvFW8u7Zvv5I2RGz\n/WxBfznL1DHq7FRPBCwQrboNvnCEnk94pC/hOrmLdetwzVdRThHwhhjezcsH\nIfSzsHlhN6daHyuFf1TauuH5cUNFR0mQnvhnFr6NHrRGxxsfyoYTAI6N3okD\n69Aut7b5agxvhcZDYPNDLOhC5Y3VwP96WqeZAPAScdUHI7woVXFK5/3jxEWh\ntWWoG0pg/10aXConUA3DDbKFjN5bYEwJqSUGPJv4FXrl/djkry2EuLU56C6x\n4N8YLz3i5pMui6chuodXLwX9igyteLGkURCLk7GBV0lOpPXFfMdrTQgvuJ/i\nPYwMWO8mUoHEqFNYtF4D4ckplxukbn1PCw6JjFoXPmHZ62K4lNmukKlHRxGl\nEM1TqKUWYUHWma/e3F6fQWoDyAiH7e/ZWw4CUnuRyXkt2I5un3LGDr8sE8Xp\nSAlx\r\n=FXT4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.c60449bc8.0","@material/base":"11.0.0-canary.c60449bc8.0","@material/shape":"11.0.0-canary.c60449bc8.0","@material/theme":"11.0.0-canary.c60449bc8.0","@material/animation":"11.0.0-canary.c60449bc8.0","@material/elevation":"11.0.0-canary.c60449bc8.0","@material/feature-targeting":"11.0.0-canary.c60449bc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.c60449bc8.0_1616177159244_0.9055248250305732","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/menu-surface","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.5f0fc444a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3531716dc0c5b028f96247327a6bbbaecdcae73","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.5f0fc444a.0.tgz","fileCount":38,"integrity":"sha512-XoiZUdCiF2QhTfcprT8s1h5l/9zrFNa3fehwd6bwybA9U3PAb2EpeLzNB8K2RX1I8HIOJ/iRKB3MbXLehdpwiQ==","signatures":[{"sig":"MEQCIBplupVSvCaSY7+gFV4gahNdiujaPX6uGUd0kbdhEfipAiAi7ZoU3for+8cAKBO0HvjWcyLqX/+6DFgscAUiHl8HOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO+jCRA9TVsSAnZWagAAIxkQAIuNLSs7M/Q6y11AExHG\n984MS8XzZyAlebyCxV1ELzZYt28tu25Cffdwzb2MrUgFW99XBiu7HWwGZGz5\newNs36Czn/lJB2pdw9C+ccvAJOmLeeou2dgCiAaIP8uA1fhg2fqgqBco7Cc5\nAjyBBGlj6mfxpqz71HabmOFrTrln54BdFSQdxjZxfHR6dQ00YLqAZv1RerUH\nRvcEwUc14+CgFLjAbi82Vc6Qkf6X+dsc+RTlyVi/ZqXM/RiLn3BZt17WDzik\nfSYveUJuUcEnGLdhQYDWnBaoqVuDJjSndE2mGZcqoQtZEpbt6Qu5KMakvrwh\nFEE9+AmQ00MaJ2aGRCc2p9MPwnPKuv2WOseoxBOg8F/r3XRCctCcQrB8zl5H\nhVqM4MvyBbsFlSZBED6VGa6YN2L67t1optX7bIHdklzr3yP2ulh4RaP5X0LJ\nADwf07bM9pZjHqftTP1HddiF+sIVeu/tBe6/jotop2fFSO86x4K3bKxvPEKo\nefZxzgl4pxFI4VzWtPN29C16aTcbrc9nuMydikKM4I3peJCrx6rKOWtyMcPV\nA0o0TzlXwQT/9JT0EGQo4zgC1X5bu6nq19dcN0J2/O6KNgkF5KRLQ5l4AcLc\nWm0+8YorC46WktwMq86vJtK4237dPrtCdkh+nuT7WE82dmwguVur45bHodQR\nyMDz\r\n=SwzJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.5f0fc444a.0","@material/base":"11.0.0-canary.5f0fc444a.0","@material/shape":"11.0.0-canary.5f0fc444a.0","@material/theme":"11.0.0-canary.5f0fc444a.0","@material/animation":"11.0.0-canary.5f0fc444a.0","@material/elevation":"11.0.0-canary.5f0fc444a.0","@material/feature-targeting":"11.0.0-canary.5f0fc444a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.5f0fc444a.0_1616179106675_0.394281682776531","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/menu-surface","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.4567a750d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37dc9a73f94b860ef633786e6eb0800e32c657ac","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.4567a750d.0.tgz","fileCount":38,"integrity":"sha512-WB3k4WbMrBafinLdsTA4wJ5kx6BSg6EauVcWpvAn707IQYvvCw6Xl/8Ng9PcokH7SvtXrMUORGR8p0JH7vaFmw==","signatures":[{"sig":"MEYCIQC8W/g7CO2ebhqbk9KLyDmnnrnduCu3K29+aGOf6/BIcQIhAMi/CL1k86P8wEX14kLPtzWo8CdE/5B4KLWveS5l/wtC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVkrCRA9TVsSAnZWagAAsNkQAISlAdsqoHw9/Mrd55qD\n/1ltL+yNJaHfLA14yOrwyEzE6Lnz8EgwOWLwYcwQXrkHiVtH3FHcKnqJZgIb\n2hl6p2XZgc6KGTvNYm6nYphtGZOIfa5CtxDeFYd+ZF3nb/MQ0LRyUlAgJoxZ\n3ZY4eP2DgFRBNhlFZ9hG8EqygiDAXuxCo+RaJq9RaSrYa1k9dyUf5BoTFF1X\nEYNOQ2EbJTFnOO8U2m6VmyBWJRpL5pt95HOw0oyaS1QiAg8m2gODhYh2lc7n\nU/s/ia1z+iafSLUVshPvo2bbSS5hO38Qmbi18JzYtRRlhi9xL4i3IYB55KiC\nlf7JdetRPo/kxLNPOxGg89imsj0H46eqCtc+wXlvNtDBidHAIvO3tmNDNo/S\niz+E4kTbYPrVb3kIn5I5Fy7ejmLgFN5nww5oObAdCESodnpvyk0Q5NEoDZyF\nwiCieYz+Xe1ysU3faEi3KlLSU2geRJEA8kIboa3YtglUdMAxtWzrrVzNiZdv\np03VKxhS28zc5a8i3Yu36usHqNuqb/rfI6b4Pt/BGBGn+tXx8eHk6T/apUqS\n93CgZj1NXLJMlgma/Oy5vaEHSWTTQg2dUHMjLnDvmpkz0ZlLqHdgrCno8Lin\ntfWGnFjqhU4OKY9APjsl26fSv/BBuMHEmjbQQsvFkit3WSmzsGqLWFWbcVqP\nD7Of\r\n=0tWR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.4567a750d.0","@material/base":"11.0.0-canary.4567a750d.0","@material/shape":"11.0.0-canary.4567a750d.0","@material/theme":"11.0.0-canary.4567a750d.0","@material/animation":"11.0.0-canary.4567a750d.0","@material/elevation":"11.0.0-canary.4567a750d.0","@material/feature-targeting":"11.0.0-canary.4567a750d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.4567a750d.0_1616206122705_0.45332846282409167","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/menu-surface","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.0cde52f5a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a29ed02c07d4b0b6c07b297fa84061073fec95a7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.0cde52f5a.0.tgz","fileCount":38,"integrity":"sha512-+H4EolyACIiQbcnyxdiKex8b/CZv497pLvm8vtraCOAJKTQkY6qn/Ij3+GjRmiuXGboPKzrrB6xCL28mnKy7DA==","signatures":[{"sig":"MEQCIGsJzQNoxkGKZsSJsV2pUuxkUc6TxTFLucpPQS9zEvaUAiAwqmnbEA4pwTR1ocMNCcV1HA79XVjBthV5jWxlxSu0AQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWTBfCRA9TVsSAnZWagAAC6wP/2rpIRKuTsRzGSvThykV\nV69ag98CcASp8huzHtXnuJCByLIXVItWS2dznv076Rl2xB9iamd2FiH8o9eN\nC2DfAuhaZSwVQjdc+Vzd+chxd+3vz/DFrDdMszCVwUxF5jF6n9Gchgxc27dz\nPUCb58EP7YuM7RUPYRjPW/94d9e5SMzUNaubleIs7+UJjUqQaAPavR/kr3fk\nYnQSdG/l3XXJlaHew7Mdeh4B+ZhVMDxHztE93asghhRYwefAyFOvHwwi3idP\nCMJnlp1ma8Pan1ToNDewR9i5qV38rVV8rwG41p/3JymCx7GStFDhlM6kHYih\n7slvn4p8u3c9oU1u3Et9pKtExayKVl0ZN0XpyU+Lxo7yaQfZlEwSz5CxOm2W\nTIH6ub7IOP3mdgZLQ/5EghzlyAPSzrBg+ZMEuRIOfpMQ+phGkiYHsiykYAeP\nXyx4Zf3XW6s1nswOK6hRor2liG/iUBslcRQ7I2v7Q/XDqVkCRjmNCSBvj2hA\nAUZEToHMZN1GGPyQIK6jAQh3zTdb8dQrZBhZCBYwVI0d1jqNgXbm/0B447Td\netdl3WQ+4/SBvkCA6pjoM/7ehA0jTrJoUBQarPuEQBOkxVO40JxehR+05H6Z\nRnOD+qr1Wt1AWAJ5L2Dvi8w0jAxGHi+owBuamW/kF532ClmyFKpy2ZxFjpe1\n7Vxe\r\n=FV7u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0cde52f5a.0","@material/base":"11.0.0-canary.0cde52f5a.0","@material/shape":"11.0.0-canary.0cde52f5a.0","@material/theme":"11.0.0-canary.0cde52f5a.0","@material/animation":"11.0.0-canary.0cde52f5a.0","@material/elevation":"11.0.0-canary.0cde52f5a.0","@material/feature-targeting":"11.0.0-canary.0cde52f5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.0cde52f5a.0_1616457823385_0.8388608809476923","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/menu-surface","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.48f4b67fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7ba167a116bb67c67ccd01fdefdd8af4c988dd7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.48f4b67fb.0.tgz","fileCount":38,"integrity":"sha512-Xmqce/3AeTu8DY8FMBRvACm78F3U3kRp+WDJbNqppuwUbqRGGPZgorp63z6wl1Ne/x8J5oKC2RuC8ZU1iz2q4A==","signatures":[{"sig":"MEYCIQDab16vzEsKhRxDUtTCtXQDYzA7DfKYThG+1AzpkEnu/AIhAKFwBgvhUpkmi4petWF570Ydfqpp/uNsirj8ovy9vifY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkeWCRA9TVsSAnZWagAAcLUP/2POxn4lQE+zwLHibsNn\n4/c824DdIcl5A/hyQuaXcDlB8qU+p/F0oiTOiGgHF9vYZxmwGubYOEoSLg5J\nOqMyuyVfVsSc58fz9YG+miWf8DpDv/Wv+b5HHQFrrgsrCOSADLnYOD1QczpG\nelYRFgg6GwHNNM+spcWGZlb2syexEOTvHHvLdYl6qiwKcoWNBTrxSJCOrDjq\nrPBh6DcODWCqXYwVYNxQcPL8jzl9udtz+/m2PasNCFkjavdSeSGFFywxMEjU\nk8eqI5YBi6CM/9+OLZ96Eiai++/ethuI/c4UAEKk11rTKyOT9ZvOM/RHO8QH\nP9oFEzHnS1jQxdybHL/SJmjuXDfufL0TuCzQa/2g+DnnZnAxcLX+OsMO3BIk\nMjbbrmny/brd/KMiz6Itn0AwAsdnK4q4a+Rw/GCVUYMKJYt/W5J+8TK0Pwwz\nQhA07ya8TpN7H/Gi72RKR/9P5frhyvZ2PFp+1WMnJfyebGnWftNOV8TMVxIX\nzeREHdeicf7AQb9mUPfCe50WIiFc3S1GNhITiakkN+zklFbmxokV0NlUgPFZ\n7uHQ8Bat5Mm9S8sten8pCObnZqjxDEa0u1qh2NpGksHh0ktH5ZO7xWhwiB7C\n/eA5OeN1B0VIoNBiXE3IxZUdwxRekHOKNKtsQJ7f13dfVl9o6PoMjuQtFHaD\n2bab\r\n=ao14\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.48f4b67fb.0","@material/base":"11.0.0-canary.48f4b67fb.0","@material/shape":"11.0.0-canary.48f4b67fb.0","@material/theme":"11.0.0-canary.48f4b67fb.0","@material/animation":"11.0.0-canary.48f4b67fb.0","@material/elevation":"11.0.0-canary.48f4b67fb.0","@material/feature-targeting":"11.0.0-canary.48f4b67fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.48f4b67fb.0_1616529302079_0.21213869654634343","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/menu-surface","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.0b8cff734.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d61301a84baf7b46d6b0e7eec7ab6ef2144502c0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.0b8cff734.0.tgz","fileCount":38,"integrity":"sha512-Mbp2ZJQyDHgP3I6+tLDto7+wIQ3zibnX2fpbEB53KTd7m8Rvg1Pj8iLKdMwbl1DnL3U8dXMTt4sSipAnmi/NEg==","signatures":[{"sig":"MEUCIQDwdC4hefr1ecmpbh5BlkGdNmbdK5L+E72u4LEzA3cbegIgEpJyN3C0MmYnsyb4zuaOIdH3+4c7Ygr/ZITTSU09ge8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkoICRA9TVsSAnZWagAA+BcP/irE4//XJb9lhF8TJnIT\n32kwUUeBwJT7/Am4stxJ3gsX9ZiTfn6UV/B3ZB9ttS2Ah3iMwQHjYkMUOpfG\nrxLI6Gw1LfjqBAqXTeXxmXjPrtUC1dWeuvnn2vLomCp9YU07xN/KqIx/Zglx\nrDYH+WVfuVOuawvw0Gcj7yOpiWoQwhvqCXQwRLg4QRlrcFA5/zwIsBCwWM58\nk917BdltP00COs5xpkCT9u1fjUGyqmsrgC/mT1elxKifME8SDWY4HVvxecQm\nN7fYdnfV+bbWUVVCR7779xEvCCpzFeqXLA5OAAyBttXXepj6WcWQcHNTb9W+\nyoOZ6fJ7hkppPraZ7/pXTSUs/aYjjgiY0/BrR5vDNeQhLVHFyR8YmnxMs0EI\nnGzyxVgceiN8esXiw8YIKoP7xH9ADCe6q0RHzrpo+W/44UbvllZB7IR2nYqm\nIk97capgW/M4TuNvplSvwOBq+Nfb9T6NoD+R5h1naWQ3awIARt9FO0zU+vmJ\nIcWPrMjLqaInKQOLIFvr4CT/JBPpH95TVazNturEYqCY9GUuKQgddtTbSWrz\ndJxwx1Di1NRCVSZPMMlh9wH9iV5aROIwyndJdAxhJL4MqIDHbbVsmcBiQyaD\nIxhFJ2Mns7PbAqGK2XT6ty+hrh3ZPmidAZUYP92GtRgdW7eQ0h7W+fdn4GA1\npAZF\r\n=XLSD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0b8cff734.0","@material/base":"11.0.0-canary.0b8cff734.0","@material/shape":"11.0.0-canary.0b8cff734.0","@material/theme":"11.0.0-canary.0b8cff734.0","@material/animation":"11.0.0-canary.0b8cff734.0","@material/elevation":"11.0.0-canary.0b8cff734.0","@material/feature-targeting":"11.0.0-canary.0b8cff734.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.0b8cff734.0_1616529927989_0.8093736149115398","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/menu-surface","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.8943b991f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcb9f8f17c19948af5accd95a3afa34adab842c7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.8943b991f.0.tgz","fileCount":38,"integrity":"sha512-OIuXO91LfFSfUj1k6qRqrPJUOqYNHwKR5zq2X+g9odN1cLUNYixGWKP4nFp+Xkj4MlM6gYzyLf4e05LgkzWquw==","signatures":[{"sig":"MEUCIQC2WynBokoinYL01hqsXhARCmI5EG0hJE3CJv3j1ckNxAIgEbJNd4ZDzbN9RtoE9KQEKiXqTGS45Bff+PHzlgCOZTA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWk/jCRA9TVsSAnZWagAAGxgQAI85DMnLOucn0lPLeaMG\nc0Nxxrqe83ioSY1zwZNP0zGUkHfeP8uteIqlWC1b5ePSKE/8Yk2yKbloG9Ui\n0CNkF20NpGuZcsGs+dTik3z9fWgdzFqeBW8DUb5X5kQfVCIE7bylBqHORVAC\nBNWtm44lDdUz/nzjjHyOTj2GMysIBiKCBvGBDX8g/OwzzunoQG0GeSi7bcYc\n4GWQg60UjTfZwsE2iYcITVcj4D5KGHXqPJTnWRFEaOHOkIT2bo01WL3/ygiR\nyFKTF7Qtlc+BRU5E9YDO8IwJxrGIzz1DSQ3oq94zjJGrahcbQ7jwwCAQE7ox\nDm01kxJCzML87wObKrWyfdkbJlBDRH5cyVjqhXE/GxLKaS/5VMg7GzUmJDt/\n7owTfN/89W2B3e4Y976N1I6xO2ta3XAaeFyYchumIXdOzivx4815RkBMpdsq\n+Sc4duZhtorKRAMGQDKOvrkf3EYRrS410iRlLyjXiMmhXMi0Di1yPIfxehw6\nTnCz8Nh5D2CeRnYXwt+HAI6BgSGZEFH4K3DH7tzGMwn6m7lXo9OJHjhoX5zj\nAEV/UfpWqdfMyYVf9ZNgkYaH38DcjILjPZ6B5bPAApmWXZJ6e+GtRKdHnqb+\njgyxcKNUWdXuW2ppBaj+ki3msTOD2UEeK3dmO+DLzI4pTgdBBSgQ7EQysOOq\nxFbf\r\n=MAq9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.8943b991f.0","@material/base":"11.0.0-canary.8943b991f.0","@material/shape":"11.0.0-canary.8943b991f.0","@material/theme":"11.0.0-canary.8943b991f.0","@material/animation":"11.0.0-canary.8943b991f.0","@material/elevation":"11.0.0-canary.8943b991f.0","@material/feature-targeting":"11.0.0-canary.8943b991f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.8943b991f.0_1616531427146_0.8480524148795521","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/menu-surface","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.3955d8d3d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce7588bca74b9a1150b6764b9911586474c24557","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.3955d8d3d.0.tgz","fileCount":38,"integrity":"sha512-b/vJCJSGdnvNngfQ9MYMB9UNwvvv5l+1eEZjvL6jfHStuMJiG5gQ78/mGVuOwR+ldOEmo+uhCtmONwmQtUnlsQ==","signatures":[{"sig":"MEYCIQCU9fqkC8Al4iYjo3WC3rQ3AJ9rpd8+VB/UwBKSU1nCRwIhAMeLf/2gBJq4BH4EktM8yDDe5sAJ9106A1OEOkQZVeT4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW5BBCRA9TVsSAnZWagAApXYP/j9clM3uAp/6zCwvJZW1\nWb4On0kuGVwvfL5vhD388HzL8yM6FtOflQkee++95XO7nJiqM0TBE++eO7pz\nloyk5/vsMOPlJHeaMiPR+eQ+fodrcfbl+bOLsc2976hh26jpHlTSmy5yxlW5\nf1ByNJAMJGsrlHN0Yr2f1h3/4L4cRITl5qd3ko56Of9IwYLC5y5/4urIt5o8\nzDAnWCmJ46BgXBFi4R51eoYO86sysUuIGAUP9buo/VkTx8NpFRwKsWEDFk+S\nRtM2dBiY7Zs1CSvZGf1M0VtPmwa1tqByptEt3+qF24+BltzoRvv/gRIX7wJr\nkNfvhWU1ENw+YK1ik9I45mgjG6pdGXNOTCFEYj1pwGirb8fEiYUqaIs26/u9\nGnhuNvA/b90kuVKGw/6ezSzzYgmLrdh2vIyGQFXTmvfb05PZauwB06CdQurO\nrPJwte7h3tZ6GSE5MFfeoXfGLIGYSO5yMS5Qh9ND7HvnYKlmGO5DNiQ5TuT7\n20Bbk8C4iwso+80+P/CpaTjTTvERxX5ne3aHatJc+u8o3Cnk9UVA0xWJIt7I\nV5SS+MMxIYoFXHw0qm72n6vo5O2LFo61ebmFOOI5FutXliQLAMAvCPzokgZw\nczfclzu6oKIfGsilM3LFo3vw1MneFTxkU/9oQyjHPktisrD1+bVNDNJauHdn\n36Z7\r\n=df00\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.3955d8d3d.0","@material/base":"11.0.0-canary.3955d8d3d.0","@material/shape":"11.0.0-canary.3955d8d3d.0","@material/theme":"11.0.0-canary.3955d8d3d.0","@material/animation":"11.0.0-canary.3955d8d3d.0","@material/elevation":"11.0.0-canary.3955d8d3d.0","@material/feature-targeting":"11.0.0-canary.3955d8d3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.3955d8d3d.0_1616613440765_0.25077612014129036","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/menu-surface","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.23ea2d85e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"030c171af6ccd80ae10f2ae1020f5f054235f45b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.23ea2d85e.0.tgz","fileCount":38,"integrity":"sha512-Qx6AFZA6AnUvC4g0dCVfSbksKZzrIhKOFDLUThQyPVV2PIuwrj2NHDtgltupCEvgJsAu2Gw4cRKI+PnvmV2DpA==","signatures":[{"sig":"MEUCIQDKH75cgD1eykaUaWOwZ81hp8DfgmR/9+wZ/iaulhwwjAIgZyWHMdyF92o8TKXEUdtLCxllUnJtrARiHvE2UD/IBaM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMlxCRA9TVsSAnZWagAAWhoP/0OhRZeP51CvWrWNA4Bn\nRlK5X5Eitw3hR6O4jCc4XGU3JFU6KeVlXC/CT/bwwN5fNOKqWE6h9EwawkVM\nGQ555fZQEQ65fYIWe+hW/4/dojNsx6oIbNo4Y457jxOsUtkdF0bSy+6mgH+0\nOkPRCe9pWy/z4bm62LEihBnnKu2N73Hit04dFoOnwbf1Na3xWWEioJst0Ioi\nFeegMi4qFANRZAKqvYhaqB19VrCJOE6xqYS99ZZFmZ8USrzCrmc8xmEnFYYf\nFLbOUezav22LcZKJMPK77SG/W40AX8J9f/LyS43hMHVnjv8M/rvq+CthMgSE\npBpaIsIXzgJ3YaUPu4rFTOTmRvaXkr8Ee6XOaCistaYvvmfmx0N3U6GvGkHW\nigHRXJDfpRch1cYFvEqSeDWOMmU5VAEIURWqJ1Trh4U+uMEort2aiAA5JYq0\n07dc4v/s/m3LJ4k08FQcFl7B4laE1yHxbznnu6vEQ89qnrz2qYnJXao4u0Hs\nBrZuDIUx5bZEDuG+isF5+ggKaZxUbE+bcO7MxvTF1kPZ6nWsboA8CfbezlJZ\nJNNXoCXecUY7y/r22DLjoPtl3a126BPXB7XCwLDbSztzSbM9263+21s2qSsL\nRog/RIvuRI0hIq/KSJwPua2miNPMd9347d9elTX1sdkr2bnS4dFaBPWPyqCx\nGAwV\r\n=B63P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.23ea2d85e.0","@material/base":"11.0.0-canary.23ea2d85e.0","@material/shape":"11.0.0-canary.23ea2d85e.0","@material/theme":"11.0.0-canary.23ea2d85e.0","@material/animation":"11.0.0-canary.23ea2d85e.0","@material/elevation":"11.0.0-canary.23ea2d85e.0","@material/feature-targeting":"11.0.0-canary.23ea2d85e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.23ea2d85e.0_1616693617273_0.5594868039920842","host":"s3://npm-registry-packages"}},"11.0.0-canary.e3ec22f45.0":{"name":"@material/menu-surface","version":"11.0.0-canary.e3ec22f45.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.e3ec22f45.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"588b0ba749e9f45dcb3502084ffca74006e3deb3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.e3ec22f45.0.tgz","fileCount":38,"integrity":"sha512-gd13uZJe5xXTfxo2XYR8rPLXWguG/w20i6oFgGLBiH5g0e0q159i+7BWv03xEf2uwzmngGZpikHNxhqORp3dJw==","signatures":[{"sig":"MEQCICaTBrxUJx9qKyu8O2rbN5LuUvfbP36smKIOC1j0iL4mAiBm2aewUSjHQZFddmC//UNUTOgJMPqdmQC1+9c4+1xrOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXM9RCRA9TVsSAnZWagAA4jMP/13WfoMXVpe0SfpPKw4d\nKzLhB9A/fAt+ijlab4WDcF3W8vGRFt7t/UzB+viEDfJ1XSUhD2uBlQ7cKdzr\nlCSRmhR+Oq/AzUXSWHSLSFkaBtYVLSFgpzd/SWyHn8Y38xtzVh2xjdrOpsDH\nTKyONBa3hOeTetisvbTwpfCMTymf7uLwOC/UwrNM+BARZXFaS/mUvRU2eG6P\nWT/D2lwFLosmhvM6z/EAvQu0KquK8WmXaj9LzgtjPXIXkvWfV57OrX3pwyZO\n4DDI2Moa3JHbhpH1GC+fvsATS88KXOYMK+PjQJrRilTJ6V+YdWK8kudBXZeR\n8cB5lq4eepRfGGSS1TXGHZxJb+JMywcixeL5TptOzEAJil75eKwrx4tDTLZp\nJn63Q2LpnHH09II6Gfn89OAlIDTI9/7VWtxo0nUCdcRp+XggePfTauDmpBxP\nSONoz3XuegMySc9F4vaJIDo+3iBW/2i9gQjIiF6PR63aDiDMeCRlmRj1OTz5\nuptwHTa/zpBiBDcUL6NG5NjH1hsHWBf93TDMXbbbeodoX6H5y4/WQ0uxi022\npqD1MW3mRPLuCmk0fq5nayuEAlHpeBTE8OxgQknZph7YBaoQazE95ef9QP68\ncIcMt4rRo6LFIMmfnEYQeUkGlbbskO5GLV/FP1spx152daZ4T/SeBHjxvq7v\n5/eD\r\n=gcZW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","gitHead":"2827fdf50a2ab264554f8f307d61fddbab82c5cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.e3ec22f45.0","@material/base":"11.0.0-canary.e3ec22f45.0","@material/shape":"11.0.0-canary.e3ec22f45.0","@material/theme":"11.0.0-canary.e3ec22f45.0","@material/animation":"11.0.0-canary.e3ec22f45.0","@material/elevation":"11.0.0-canary.e3ec22f45.0","@material/feature-targeting":"11.0.0-canary.e3ec22f45.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.e3ec22f45.0_1616695120250_0.06477233113929515","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/menu-surface","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.4ceb42220.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"549fce2b7d589bac17bd336c79ffc98ebf1865cb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.4ceb42220.0.tgz","fileCount":38,"integrity":"sha512-+uhYhLBfWjcN8dT54FFg3Hd4DhypPOMuwugb9UDzTcP23GTOa5igOf/5Y8kbUkbqq/ykDurfXcdHnayAORJivA==","signatures":[{"sig":"MEUCIQCc4/JfcxkF4gx6LJP53T7gl8npcH+s5YZsymrWTLEuEQIgbUHS2kyHBWo7+g62Kj3Vl2077TapRcuir07Fv70uQmU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZQZCRA9TVsSAnZWagAALJ4P/RaPN3NWRfiTfRdpJw8g\nZHAY/FPqYUpnlebc7Gtmci7GYmutBe+VACxA3x6P66T3f7xyv3vR6XS9v+S6\nVySiE9j5hquiHv7fVrGkdb3FAFcj8ex2jOF3nnvENpmXBq+N7Okmx6qzLVxi\n2IMnD4DxA3Zbxnhak6nytqAFOMMZmG2hm7JLu2Ogq1hxFGbbn5IG+iSNrCSL\nf9yaae54g0egHigQgcZxr+QyAMw3wi3sHp5h4clzYB/Th9l1uS67G4pyQSCr\nvYniiqJIuBt+h4dr5BDAfjosWUSTXAYDy23S3Y0EJ4QpdUnykykoS4yisNpD\nW0btHhYt46ojWIDUY2BAjPW4vh5MXj1WI19ACya8SlkbL+xRzrP/lZFD5+KO\noShYFC4TCc0uwKmRDC6VDzZOP5v+3MJ5EBMEKZEWrF6Y/ppR6Gk6cWKwd74l\nEXlm/oAT38JPGBoTD4zfmJuJJbumNAhKlXZxHTwqvLMPnZIVaDSxgBIyWYzI\nK2TBkyN+JBjOyyaiGvX/xN9rzB8eem2YwYQSTKV9lIj2jm6HOZAsfPkjS+l7\n9knyaGPiP4Dm27uMWMP/Kgk6u416i+uFy33GkgXdj6RkLGL9ptetpwKBSSpf\nvIRCw+9pMB+317/XeWKpAJwmFvYecxY+2e86yRHL94JsA3iefQfqG/pwfCBY\nLQBw\r\n=/s2d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.4ceb42220.0","@material/base":"11.0.0-canary.4ceb42220.0","@material/shape":"11.0.0-canary.4ceb42220.0","@material/theme":"11.0.0-canary.4ceb42220.0","@material/animation":"11.0.0-canary.4ceb42220.0","@material/elevation":"11.0.0-canary.4ceb42220.0","@material/feature-targeting":"11.0.0-canary.4ceb42220.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.4ceb42220.0_1616745496699_0.6081307508911464","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/menu-surface","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.dc9c84023.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba26d092da109ba98634c487fe881bef0e8df0a4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.dc9c84023.0.tgz","fileCount":38,"integrity":"sha512-mDpY2l4iP7Y8mdyS09SAEKc5+wbtXDQns8MaczQv/LYDAJxCgytxNW+NKnQos4gx7MleUpHw1cAuQ0XnJWOVrQ==","signatures":[{"sig":"MEUCIQCtiuQpRK/i3doFFW817wVCztONK72mLr3dz99f/ax80QIgYUB8aKu1Dh5Fl4Zq3glImWEc3hosFxm+NhUkSTxDxhA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2ScCRA9TVsSAnZWagAA6KcP/1EGedLYnf8klZDeXbev\nDlIsZo+sBaQhi1apV4SRkECPGgZ3N92SyMB/vt0DUHyxnNIUFE/T/0hNWrYD\nhykZWFN2xlVQS0YylEy2aDpF8TeX4qoB6ti85J+lAsKth6Q9dMavnaAufTQY\nDJMxs7mlW/2tYzYCeGRmqFUGOMiVxUO48xfEJuk+PJaz/DxuzVHrGlWJZZ91\nf+kGzO2njZsJkVmJSyhdOFx4C47CT2IMrr99o6i/EWpv9nyA78DMAYpLXX7I\nW4rvpkZ5qw9ovaLJSo+ChETXedenonbCiay+kCy9q1/t0Uwx7prKPdNJG0Op\nUqgiCucX8md3GG4XV1QFf5DPyfKaPuc1CfE638rtC3qNlZph4oH0YJ67LNjQ\nqDIFnZk3tdLG/PiiqACbeZOHkMRBdzOZAOO3tCMnZMS7kO6hSnj4G4FSXF8C\n/RTOYvz6L0VrUjcJq9tJ6EOAiQqfQ6g2thyS0vuHrbKhWuIVUToKNEZba5A9\ngC0r1I9uUhhIgL4AYchzLHNItYhi+VfyrgqHHSBOj65XZYD2c0P5mxjC3JrS\nr1WefRkzSGsZqJZF2zY6v06juyn/Lp/r1H90cjDYdt6yo/SpN6izui9QFj/L\nJxJAU7ef6vvLqXjnfebgCAJjYMDdJ/RnpumNy/kqZs41qtsd6mM1pO9U2xqv\n7Rik\r\n=FerB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.dc9c84023.0","@material/base":"11.0.0-canary.dc9c84023.0","@material/shape":"11.0.0-canary.dc9c84023.0","@material/theme":"11.0.0-canary.dc9c84023.0","@material/animation":"11.0.0-canary.dc9c84023.0","@material/elevation":"11.0.0-canary.dc9c84023.0","@material/feature-targeting":"11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.dc9c84023.0_1617126556153_0.5967091794434687","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/menu-surface","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.56fc26962.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ae1ac43f82d578105e17e156b6c4c3719978f68","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.56fc26962.0.tgz","fileCount":38,"integrity":"sha512-bF3d5eeX5kLuMuB2hBuESRIYN89cOomEfhTP8Bwo084FSFZgAJbqg5wnTmsexWUVTSHBDM5k7mh3E3boZmRCsw==","signatures":[{"sig":"MEUCIFKngEh+Ke93Qp8b2pERpsu9ZTPYJSAVgmosBob5uFeEAiEAmRqM94l0aGSXbxXuLHGnEKEHBNXsfsKlaHf1Ja3gxTI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8CLCRA9TVsSAnZWagAALZgP/38cmZ+4RCVO731e/fsQ\nT9r0IZSuaepKokiJrWlD6xqLwBbc3SS7ymn+Ut8/uMmMHt9m+YKPeGAQdNsO\nbu1AdwLfZqfdkAt6EgfLpcEj4mAWt4sLU3avlfPsqjmdT+cR0m/9oB0WcCsV\nChL7MBbsB9xc0bbH2quM/ede9kRSh4VIUX45OcFZiOqaTviTadOBSpzFIdOQ\ncs13tS99gq3T6NVMkQBtiqG7QdwVI+1wAh7/Y+iQizF8lEugKQTaaQ5Ben8S\nagBFyKMKhoI0JcMT39c58abovHoQMQUIPho97KBs4i4AX1iXJ0uAPoDKO0gH\n1NTQVhpHYfONsk1NEAGmeBJrp4fhgOU5xu5bv/OgE+ci074l9Ch9LuhUn6Ve\nlsnzdUoDMUZTXxyldCUYAWI9djtXdMT5Gch5D+dBB13BE48sM3F7U5uDDi7q\nARhPL37RWSXIqH1n7MJVSFQr534ssXjmY4pK97+ddYKowOJq2iSImH6YVUay\nrH1HJbgGjUxQKdpjeLn6ZscY5AldRRbfa56u9o6F2RIOblbimz/D5ywY4JGK\nLrRzPziVY5JJRdpSmQsczbZAC3VewPanOFkY9AMMaYcBFhx5bZ6r0Ch0rDLo\nvbbNdfGzEtZvS0xGL5dVSR2405Q2rL3/c4xnRK3yoR7JthJVY8GLXyeXPDFw\n1yyU\r\n=ozO3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.56fc26962.0","@material/base":"11.0.0-canary.56fc26962.0","@material/shape":"11.0.0-canary.56fc26962.0","@material/theme":"11.0.0-canary.56fc26962.0","@material/animation":"11.0.0-canary.56fc26962.0","@material/elevation":"11.0.0-canary.56fc26962.0","@material/feature-targeting":"11.0.0-canary.56fc26962.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.56fc26962.0_1617150090858_0.7148723563497841","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/menu-surface","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.bc318250e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a48b304be9062080597c7ac3da696a881d44efc7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.bc318250e.0.tgz","fileCount":38,"integrity":"sha512-VPvYvJhBhzLglAKXPNPiT1fEgtn2m5Y882o2MzZZ1yVxoU0qk13SepiMzoBMNM+gCHV7P79X/uMI123K0IOikQ==","signatures":[{"sig":"MEUCIQCUf3LgEAXzrHGOMLHfLBDNKrKa3O0Y5x/Y/4wyqR1YbgIgP/tYsjIaKgFUHAUj7k68orrMce6Gg2ynFHMRzvut2Xw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9GjCRA9TVsSAnZWagAAtvwP/j8t3GHRh/odz9bYHv0I\n6xxrtQy3o3mn/nQ2r1qDaSKhTt/f6d/UkO7c+Z+F9zd0XQUDOQaD9EDSbNrz\nDNWZk7lCfT3b1x2PsxyjDp2qmksO6hRgULljQZVn9OtButggjCrY1dIkylSf\nJTB8vCEcmCCvw1tp7Ma+vW2TYgQom6Wu7GuKUBrxntL6x+NIfBjoBEJzZGKc\nF3SrEHizZ8a7AIUPKMUAauaHjevtOSXvSlcGPpD+chf+sdww5Dy6qjJE6twt\nKm16CbUTMarVCUzxpToe9nZegHMvMiqk0onun2omYgJL7eOaWqgWTVfr4Azz\nnalPxOFX2qYAtO0tznS+dkeJe/ZPJrOCZvFkJG6Y6lkKhvuOpeY+IAOeYAoD\nRtMJrU1/GjKLHc6apvFfF/Cn8Hf8ywERp7PTOfFj6q6ggZYOmdMIR5jecGCw\np+LwyrUEmzyNdedr3Cuiw6OKaM2I0clh+fcoXhl/VgYcvVrdCErtbM7yilTA\nKcKTvhOsejseSsWfQKBF6itCD5tsXRjHw3LWeT0p0Nv6rVBluunw8BdlS8HF\nLbJYTzrqEq+2VwLxqLESIyEI8XELkdsw5ijeW4kusLQdXVtiHlUTuixlZRcU\nK9BOdBOifJHhzXxAFKOVyz+hvgpT618JyID0p9sY1rwAFGMfltGX3D1uSncn\npyFJ\r\n=FVX0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.bc318250e.0","@material/base":"11.0.0-canary.bc318250e.0","@material/shape":"11.0.0-canary.bc318250e.0","@material/theme":"11.0.0-canary.bc318250e.0","@material/animation":"11.0.0-canary.bc318250e.0","@material/elevation":"11.0.0-canary.bc318250e.0","@material/feature-targeting":"11.0.0-canary.bc318250e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.bc318250e.0_1617154466873_0.019590077213949453","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/menu-surface","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.edaee19aa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8607524cde2c92b7abc22b58b5d1753335dd381","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.edaee19aa.0.tgz","fileCount":38,"integrity":"sha512-pfLtiS5khdEJ3BgCfjZcarXvWhjxOsbRxoWKEcf8Y7Xj73IolO6NXShHVXuKEGF1csgDO3eAg0bEuHgLQjMBwg==","signatures":[{"sig":"MEQCIFIiOyJf5Xva20rbgFEQlTSuzg4/PiaEHkHInKwHy+61AiALuExttzJXxU1tWk/bne3cS/+1mXqQh6xjeuL8V8Rstg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9qDCRA9TVsSAnZWagAAI9AP/jdGjWYzXMNVKZiheTlp\nE3Vn13QtLLwGbVB15Demu5jQc7d/Lk0DGSQFaUSh5utX8LAk/CZIyMgeQeeX\n2JCR1fs53rcAOh3z6QWMmd/ouRXjpE6B1htV50lkyRO5jtRpI4OP8RUaLNqv\nRQTCxLkvLZUm0Wy10LMhrtMXTmsTfIg6fs0bb63FvqgzKO3T2glHBoOT+uKP\nLoHLyjfkek8/YoIdUPLlDEuaEnR+IREqhDNkGXEKbnCa5drfmlzXFgoAEQQr\nkP93pg4PyzeUonqbp4fRSg+dKMO2yWwRDfba03big0+LGaCPt06aIN6XU2Bm\np4ggV6FsKq8CHB5scja5lJIu2+tSsPgcERS8hINfdCQgOyrJNuPSzNrmsEdP\n1ZGhAqhbDcOB7P5LMUS+Jb6pY6gz6SPCPPIkxyuRWdtNToqViLTljWIkt+Ra\nlKV/wDLlQ4XuT0RgwDkP2yYn5M/VhCljHo6MWVEfv+tIKXdIVx6vuG2kc2uk\nIMTAX+mi+wOcSkIUaKLekKSgnTM+ZQuifW0CT/ldbmIh8TsF/nVNX2xHebtI\nNdlBWNhpBQJSchdk/zJAlhXOHGA+EI5+8WUGgwjICw8eEPqqEbcDo+t8yz4K\n21q9lX7ca8oxBwQBT1lW+Zj3uIW9t8ih3WnE7tn3gBHGzFKLDBpcOo9RjYG1\nrSbg\r\n=G4Bj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.edaee19aa.0","@material/base":"11.0.0-canary.edaee19aa.0","@material/shape":"11.0.0-canary.edaee19aa.0","@material/theme":"11.0.0-canary.edaee19aa.0","@material/animation":"11.0.0-canary.edaee19aa.0","@material/elevation":"11.0.0-canary.edaee19aa.0","@material/feature-targeting":"11.0.0-canary.edaee19aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.edaee19aa.0_1617156738810_0.2725478880358547","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/menu-surface","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.24609b822.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a0ff03adb7cc7b2e37b39cd12caab7167805e79","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.24609b822.0.tgz","fileCount":38,"integrity":"sha512-5CzbVT2vEFmSOuldkfBUX3jKwRYGH/5K9+KViiSsL+5K9qzlhyoPPwepVhRRzBnM7TXZaYnFKilc4I5SJ/jCnQ==","signatures":[{"sig":"MEUCIQCC6FOwDL0phnUIKQ0K1UN/Ch8KeYOPFj1z1EOChiZvMwIgF4nuU2GwZ6gf22Kx1o07lhfPAAqoTB7jnnNHkrAYhmc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOJGCRA9TVsSAnZWagAASREP/i+KxRAG8w59XG82GlJ1\nhEGcP+fBgZ12qM2THD76Z62n26Wn6PT+pUjmk+mePMee2YcV3eX6EWz6to4g\nc/bhmps4B2cO5vydnzAG45aX1uN66coRChvWqkr63nn+Yvp5X86bY3NusOcz\nghNwC7Hp9jqm4Wa7JUW7GADkRgAHwIBXnuSW6DGwOuYFEfydSR6SqEvN4TTw\nYCaf0HdFw2MvW179vppctYfj2uTVyjFs2aHeqrLv30g4gJaRsKPkRYmFOE/5\ny9P+fIbNesOLdeyAQxS1NwLzSed1QWILl/CN0QfCYEjnr5MWZItpEWko5Yqb\nW5K3jf12k8x1+8ERu7h0ZUb8C2ZSknwNR12yvPtMypy8aNGRPAU1i9u2PE8U\n/2Pj5qlAYctFhGIEm1eapckUSP871CsjbDeoytCl0pxT2OdxZm6SbBB+iOf/\npJjJdXSCZ7GJpLXgQKPwr3762QuREgwHcmtmGuhg8n04tMu7RKNFGGE9F551\nQlH9M3bmrU9m6tsjUIQiSgEIZiXJAdMiboOkJTQ6mHzDRiTASHs2qJvCaTTy\nKQ/9YO7Y1zops1Ay/rd+qwP4mGsww/lDyB/SHmBt5yJknaKkB7stALN9Jl7T\nmdyxWiRwqum2aGrxmGg3P+8gNjzF2klybOXkGa5QjBsn8uJNXWfnI9U6uBzP\nmN1Q\r\n=wX5n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.24609b822.0","@material/base":"11.0.0-canary.24609b822.0","@material/shape":"11.0.0-canary.24609b822.0","@material/theme":"11.0.0-canary.24609b822.0","@material/animation":"11.0.0-canary.24609b822.0","@material/elevation":"11.0.0-canary.24609b822.0","@material/feature-targeting":"11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.24609b822.0_1617224261212_0.36615431673798815","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/menu-surface","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.b6cddc2b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85fc8179591fd288e524c61e66649352f77a4ca2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":38,"integrity":"sha512-quY/PSJ4zaPapyEc5lGYxtWmrkzWXPwVpcEhIIdo1yzkPAadtGasdQmi7rWwtZ08n6Whn2QXksqT4JB9/IyScQ==","signatures":[{"sig":"MEUCIQCJGdBtDxUkgdzUsQeufwbV74G0zUKuKtUKCPvd8P4/MwIgXG7BKmSRVi3TidL2SxpW2dfyBMJk6A9HekyeDXpU6Og=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeFZCRA9TVsSAnZWagAAcRUP/jp36Y4fcqnRVnc7P8Au\nlRL3nguf30XWEnTZABfmmCsuyrxo2w6CxULa2VRqbrfswbY+09mNSNrRd9GX\nvkVzi60A4Ccbhu4MCO6XO9/SjBnrLl0LL6vccfF0TkJgjm01UY+FzVRUQdjW\nWx2K2G7y3ffgwSl93S4fBaZ8Ct4nu7sW3bv/hsaZcPlrQy/kLAYQlPuKxkG7\n1PuJnSBAu1gaF0ioql9yOq0vUBzo7ObKqzLhPMdotyCyWBcuTthvGIw6fY09\nizuEQ1YhEUtKLGmEU41Y+xBgQTF7wPSd6RdTlHk5ri44fW/OhBwPWTMe51SU\n/KQWrm0ljFSBzTPZmWos24AU5fvT7oIDH6ORNSxRfAqb6uzu1kR5zHQsDUDs\n3l5da1oU8oqP5Lpx7+U3aLmSoGtUzqpDWAe1+mx31fZ7ot3Fknk2iR0Va5Qt\nv8ksEoR/zA/qAuz7b8QoGrqF8Vk65pC9KtOZIcXpct1R6InTUJN7r/ixAYxl\nszjzsPIXxlXpxnfLlhA46jiPCXijBBEjXi5561LaawoSElrq9fFhQgvuezRW\nyQPNfdDMAz4lnJJFfS26M9llt8WEBLKWQzPAgVvuPkERWpGNP4qxF0/BM29e\n31bDUgFmipHBnO2QbW4jil7TW2Z1O76CqugXwWpJrZ9Vte33ZfVFTP+I8TEm\nM6jq\r\n=N/09\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.b6cddc2b7.0","@material/base":"11.0.0-canary.b6cddc2b7.0","@material/shape":"11.0.0-canary.b6cddc2b7.0","@material/theme":"11.0.0-canary.b6cddc2b7.0","@material/animation":"11.0.0-canary.b6cddc2b7.0","@material/elevation":"11.0.0-canary.b6cddc2b7.0","@material/feature-targeting":"11.0.0-canary.b6cddc2b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.b6cddc2b7.0_1617289560593_0.9247835902396235","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/menu-surface","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.94937c78c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14887a2d8b6f32fd0fe3118c630c70e42170a032","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.94937c78c.0.tgz","fileCount":38,"integrity":"sha512-mq/K8LZbwKPUpdGTCOBmxxkkvhEcFQaBfxSonElWiYt9St6f4Go7TdjVe+hWzW+4J9IDqLyMHq9MUn1rqNgqdA==","signatures":[{"sig":"MEUCIQCuGLU2d4c5QO5F1kg/YyWrCZV0hXjuEXdxGKSXsqq3VQIgI0h/lTyNehqeIncFZAO6MXwJoc16eZSFU12YBXwhFjc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjS0CRA9TVsSAnZWagAAkN0P/3e/t26Z0FyfrqX8U+7/\nOH9iypAXQH5ysYOl28SrEj5Zvb/dBO8H7SkAJx4DU5YcEsnrAtXsZ5VmYGIp\nrxLBdIaltwNamLXxty34bkXT17tEA1YjlgYvzP2F00Z4ev3wc8KarUcR5j9Y\n07YVEzZMMH2oCQGwMd7MCO4NM1c7mUWQ7K0xFsC3S7TJusZK1a2mk6BGdFhd\nP5NP1jOtce3tHu7lOZJTqnrEI9iWvasDUV+anZnAn1WPOUeXgG6xz5P8GHpA\nuYP0X+ofEx05Zq1bgkRiO/92ASghWMw1u8R/BtsbIacTANE3oqzWcLk95gZj\nfPaG8VszR6Ja1n4DHhloJUPURTDWCuylrW+RuK3zIJ1QN4UWTNg5Jd7tDmmj\nq4Ijdf/pJ4QjLxUCq59EDqNuDVixhdxUbT9KpuOUxKxxWsMHwF+ncrQ/qQfL\niui/Ph5cp4ElfJk63FijExiH7fwuxkpn83sbY0ISop1QiQUckWg5o/+0pY7z\n74hChrIZFMjM39vDXBRNlZjWLPBLB4y+zjZ2IuxKCxRV6hFmKNfMYmnd3i2N\nAjGapkt/Rh6v5WMbchSwCbbeQSZLz0lT3VJwBSMLkwWA4jQONdFt6sDj5mvS\nwy9sgtqxgyNwJkoc1jqe1xIb91mc4NICI3mdP5WiicYUOMQ5r5R42pf8WG3W\nq0Gj\r\n=JtN1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.94937c78c.0","@material/base":"11.0.0-canary.94937c78c.0","@material/shape":"11.0.0-canary.94937c78c.0","@material/theme":"11.0.0-canary.94937c78c.0","@material/animation":"11.0.0-canary.94937c78c.0","@material/elevation":"11.0.0-canary.94937c78c.0","@material/feature-targeting":"11.0.0-canary.94937c78c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.94937c78c.0_1617310899884_0.013322457139717025","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/menu-surface","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.e7202cb57.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee103868b793231e1d561607d3506d1b36ee71a1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.e7202cb57.0.tgz","fileCount":38,"integrity":"sha512-Ev8L12I5xm3RbaNU4HMJBmkRz3yC/xsjF426/u/Qktj2l085qJqRftXNN0Yd4LimTIw8umq51J+sOYVHspDLoA==","signatures":[{"sig":"MEYCIQC0Jhs6WAnqIoqztfiWN3/bZxcANSyEMQ3PPXklrPZbRAIhAIF78DeIOh4v7Xi11uv3vW81JefjvkbmHX6vomMeUvRQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk2hCRA9TVsSAnZWagAAPrsP/1QHn+2Hnr4Ds31xEMsI\nYVqqwQrrhPYxUagIIvm1hzfuuBtNvRX6Q1XBslqcj4Je6VNRpyUuNiOHSh5m\nkoCvvFhIhPpqNb3iNECntAIGXXdxmMQ1XxrPRWZ+JHAt7BfYqmNnHerRFPAb\nY+dc75xIE7XQW8d7L0vaT6cFT8psPXrZXuixnlurW0TERPY9WUVzwNeNVMAs\n1/z83b5dSQWCn8ojRW6EKr/X498boHfsXjSFzzE3p6M/HtJm32yeMOVmqYrE\ngze7gsNB2Jh1JQ9zN1ach2MvjJoXcalDZuDOGl8mWfW0G1H7GcIZmMraDlYh\n1x9pBD6s163Iinc3ycEn6MPDXPxd7eooZ8RhtGM/pcNXon1tYn/0g4ffYE7z\nydL63KOsEIWQcQ969ObDQje0G3HoNRbK0iwdOsp9cu3DK7TmQq0otV2/Ydsf\nl+8/LzYOuKPF/lDmK/ZiV7hcUpmejLe5Y7fQIXRw+LhWji0XhDHVNcwwRUYW\n68Gr7qP3qekSHrOD/ijT5F6ORAB9qmvjAwuwJlBrccjsxcFCFYYTpKDhD7yr\nptqJhpxPFTP9LbiJHftmmXk5cDvGTGvPUqspQhiRaa91jQZSJIZDAanDQWMg\n/WtffSJ0RTLsLthk0Et1EaPrf5+3hqoOTI0nYxBlegWLaP93wtWwEsoU6P2H\nmpkK\r\n=KA80\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.e7202cb57.0","@material/base":"11.0.0-canary.e7202cb57.0","@material/shape":"11.0.0-canary.e7202cb57.0","@material/theme":"11.0.0-canary.e7202cb57.0","@material/animation":"11.0.0-canary.e7202cb57.0","@material/elevation":"11.0.0-canary.e7202cb57.0","@material/feature-targeting":"11.0.0-canary.e7202cb57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.e7202cb57.0_1617317280919_0.1110013454327401","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/menu-surface","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.1f636b205.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c116659fe813714e299a0cc328df3f31a564ab2c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.1f636b205.0.tgz","fileCount":38,"integrity":"sha512-L0T01PWtp/w6iG8gYockJOQpN8yrVaTrPKM5RgdagoFrQ++qkHhXkDRzXEL0oeWFnDB0Xh/aev9k1Yjdsudo2A==","signatures":[{"sig":"MEQCIGx+wq3rTGP76YnsxX67O+up2xo+HpxNWJS5VFEHzugdAiAefLCkXjRZcPMRaziZvaDQftNKnKOtzTY8WRXSvH/XgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5m2CRA9TVsSAnZWagAAplsP/iX1n0d0IUCHNEZk/7LR\nZQmnrZI9vCy1XPvfL9+z/HXB5dvLBQ2jCWNj5135FMZnI0KqGwMR/XQFkaaq\nVEW2lti0VEDKBYwny/8qqGACJjImYhkS9sriFJ4alvPZz5LfoFco+0Xs3LBx\njC8GYzAzN9YE9CralUOlTH+4ILtgcch2C6Z21WB6pte2FH1yIcLgICkS9uFy\nq30oc4NKbcUSYqhhV11a2fj9A+29FbU4sW96eZq2HfzpxjSr68h2I0xVqMEi\nKoq3uYbXekzzBXOHBCnjNYzQTgDyiZNZQ4WWxL2Pr+JQTOrTI8z8pBQcbuvJ\nEOcjrvYD77y5/vxIsLSvTWXxi4LNkHxiV8zJDEVc88938WH51Ts6vyyXWHt0\nZTHi99IGwtcVWFE9KxOlKedtLlpQNO+mYXP5oZ7hRWZloMd33GuZ/ezVPnkz\nqIHIXaul0/LHWfjuJWF0ipBYExZRyCiv3mBhNF1bVFAhL8qE/cyz9AQ4fGXn\nUUsGhqCQTP0nuLlLpnXbS+VL+Y2AXRwjKXVUXV6RB4rjWw6xVgXX40r8R4oM\nHJE3rdC9OBTiE1GajJFtWIBKwivXug3LV/bBGV326PPxFwEIXI2nmxjLSrDr\nsljf8ofx49Yvhy8GfXsCvAYplTUYX5ZQc5UNxG+77AuGo9bZAQ1KOZjVSGqB\nkzrj\r\n=D9u8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.1f636b205.0","@material/base":"11.0.0-canary.1f636b205.0","@material/shape":"11.0.0-canary.1f636b205.0","@material/theme":"11.0.0-canary.1f636b205.0","@material/animation":"11.0.0-canary.1f636b205.0","@material/elevation":"11.0.0-canary.1f636b205.0","@material/feature-targeting":"11.0.0-canary.1f636b205.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.1f636b205.0_1617402293798_0.681404725614633","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/menu-surface","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.94f50b260.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cdbc09ba3124c257c1394b1282be91fe031476a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.94f50b260.0.tgz","fileCount":38,"integrity":"sha512-oONedxjfn9S69CA+5i0ELreDu+6QYUgYcE7aE6mEu3MlbdTe9A/Yvg9aIumyaKOnxLRCN7kpfX4Cl3hLu75I9w==","signatures":[{"sig":"MEUCIGn3oxTFhakMSsk1B6bkNNLCUot/AnuAXn2FLf0OFxyRAiEAn+uWYoVfj7kqDaQI5EKs0RFlF9vttaG9ve1cE6BsxhM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaydMCRA9TVsSAnZWagAAUWMP/iYSPWIDjlj3ipGy0q6H\nwzWWDljZScCp5Trm6yZWD6Z+Cu9OI7+Sw6VFxsQWqMPsdcxuLzAJ7jqCw0aC\nGUV04ufKFTv2SXKJ1wCiVKeEtzWTi5sHl/mx4sK9JiQKPZmhido8Oqc76L6J\nE0cNvHMxfkvFDG8JIoiFX4ZrVkydLRyG8q4InBuIEqFGD0nj7fzRmPK1Le/8\nmtg4c7pRh8NindbHp9IpY2n9Su3T/4CY6XlDDDsCzbFc4G5uBbUxc5PNfg0b\nIBgolit810JEl7Y+l/jPWRhr4mtv/5ZB2kdDoPWzaMFiobt8QtozKlBYX90X\nKe8sf2hjO1V2DMSB+BdSRtLMCzxElkhUnAuchQ+FfduyG+YfhRnE5bxDhQ+d\nHIszKA5mHK5HmjFMGeC24J0hPfGhWShfomqPfWcayJewhlJj5V8D5QXAd75x\nGc2FbPeV5ZumkXz8Fh+OrsPEbRkbNToG6L4u3ePbbkbv12jG6W//2ULn0BAB\nTu+kilazz1i1yffNaDPnHy4Sx5cgghcbAEFf2CVd+1EsII9LOxkLx5ZAgPPz\nrZCsg/SRbfHdg5UvIE3hZve2jswGFNhlrMgGpfcxwwzdgtqqW/ZISyoaDNBP\nbAvgKj4HR3znzILIwJuewyN533MNFX8Cnlku2RVI6J5tBbaGSNIb73QCpwM5\nXlUq\r\n=fUBb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.94f50b260.0","@material/base":"11.0.0-canary.94f50b260.0","@material/shape":"11.0.0-canary.94f50b260.0","@material/theme":"11.0.0-canary.94f50b260.0","@material/animation":"11.0.0-canary.94f50b260.0","@material/elevation":"11.0.0-canary.94f50b260.0","@material/feature-targeting":"11.0.0-canary.94f50b260.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.94f50b260.0_1617635148240_0.6796606245823864","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/menu-surface","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.a4009b80a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75d7866bd120bb18d7f8ec369c0f5b28331c0764","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.a4009b80a.0.tgz","fileCount":38,"integrity":"sha512-ZishKk7UqrUAFXbDcngNZrYLaBGLoXO4TlAS5qtvSoZn6rbgCgGVzvg6CeRvCaIwrtIefmXa/CR1wOadodGVBg==","signatures":[{"sig":"MEYCIQDYvzRoQfq2ZprIGN8VXOg7I9jeSwZxzhSyjev4bb0UNgIhANgyjUCdXlFzTFg5VCi10bkGmX1lYwBmTwtX0ra0za8F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4iqCRA9TVsSAnZWagAAO8QP/joKJfa9r+lJ32Fofhpk\nUAR/R4LC8ADOyR2PirMgBQVyhtYxcKjXio+Mgww6jiUQEaLI2UBsRpMUmhf5\nuQtufq2lySAGo5cC/M0DVipFxOKYjTLmsEOY5UEYBXFq/UwvQ6qHKqoGFdR/\n2Ieh/I50FQm3fY4nD9LEnqsxIMFbE6PMXix2LIICjEYYO+4WVVcd59qYws9G\n/6dHQh01n06SjBD6vtQLK1x622H9nUYRRvwvZzFXa15dfUmEXmkqianaUkkn\nGEzt6hArWaqPUTF8qqIwU1iPFoxSnHqxA9sDhiMDa1fGQB9s5+dUpu8yV+EQ\nImZoX0BOs55Co/qkuFa0HmiuvDKAJn3SLOnDaZszSoiWNbkUoTubKqKqJbNz\no4zCgCyyrPSqLhmBfuj+ECRPHzQ26PmvDNzzfUL+9Qg6uFnxsawFgQTDtDen\ns3n662rcG88R12cqkGI2BLbgFu1otAks6nVj9LSMSjNVi3bBEfQ8vUquG2/g\n0ablN7OlNIhxtk5EEnEnBfzfpeN2sJyJ9ztncfDZ0hSQLl23OjiBlBmIFwwC\nzu6DzRE3ROG33SVEDPNYUxD1ByaYERGawVR2zB2Mi+x9mUHtFCotjmBkIAvB\nbY+dVElXOwZ4J+Pwy3TB2cynZw2yCxdubW9b7bn3GVmEeILFx1UopXYn3EqO\niw7c\r\n=dueg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.a4009b80a.0","@material/base":"11.0.0-canary.a4009b80a.0","@material/shape":"11.0.0-canary.a4009b80a.0","@material/theme":"11.0.0-canary.a4009b80a.0","@material/animation":"11.0.0-canary.a4009b80a.0","@material/elevation":"11.0.0-canary.a4009b80a.0","@material/feature-targeting":"11.0.0-canary.a4009b80a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.a4009b80a.0_1617660074101_0.607150004922739","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/menu-surface","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.15604bd0d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a633ac642f351c05d133641e0c306520fe391189","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.15604bd0d.0.tgz","fileCount":38,"integrity":"sha512-OnAAbxFGrRgq3LIgpPcIIGVTurOny7tZsF3WHnnoTEWP/dV5S6/vmmwDskVDycTaRo2bI3mCTxs5QDJr18ESHg==","signatures":[{"sig":"MEUCIAXUmBqFGFPH76LKGgYmZfMzl1GHbqdC6qkXbyxrpXKMAiEAgyRm1SnOcaGgGfLKo0GN0zVxAtFxkmj33aFsmlDi2Ko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5JuCRA9TVsSAnZWagAAGewP/3HXo+m6YPs0cpynmGFR\nSTM/VqlwCctiVGijmvxRm0Ws90mNMCu7+SYqgROExZJeAf42Q1z+u9cbFZwo\nuT9tHvelsfdKvBF+Ii1kobiLpGxu7ZEfTRpE5Jpm5iEBhzDIxDpwsa9N8U9O\n7LG+s9OXBQBgrRI8f0hNSNh8cRlmbSkLHtwAIC2rTDWhk89UBsk1Y2uJmADW\ndCtZGNazx6g5/2znW7Sfjk4zD68IJftr8nTDFfMeNhnNauMT0c4f2/foks9l\n/gdWgJ4qMimnztVdL4zJgjmcTAXtbU2ujFluiKMv/2TQusYX0CihPcXurRec\nB/DL9YHGOUCQJ8PxzDdMEL4y67ygztNYxdZjRN+YHvNjQWsaJ4d7SPrmS38P\nRmkd7n053VGq8IiBxIeS7ol4c8nOpewerlj0j/heHQdhC4OD/HncQ2/VRKqB\nn6z7YkyeM3360kxNeZKtcQmy20v6lRVNkwMGvZfrVZdRGux/RpiMw7IUzhEW\nZMIhtZrZUHEXx6WMQje0dyKMFMPnjV4FTMEIQLFszcbpo+JGwHLtutLfx+Gy\nbL9VM/zA+sz9viRqe/ZFEVRF4IN7Ubq8IteamU05BXXmVSO/WGCPvKssKxID\nCWVZQcWxQVP3HoM8xbicUw45EwfX0VlaJ9KP8XskFG7d6Owox/4JZs38Lnxn\n7da/\r\n=BVC8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.15604bd0d.0","@material/base":"11.0.0-canary.15604bd0d.0","@material/shape":"11.0.0-canary.15604bd0d.0","@material/theme":"11.0.0-canary.15604bd0d.0","@material/animation":"11.0.0-canary.15604bd0d.0","@material/elevation":"11.0.0-canary.15604bd0d.0","@material/feature-targeting":"11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.15604bd0d.0_1617662573618_0.3973544218181253","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/menu-surface","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.76da7876c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f032be3c10f5274960a8cf4ce959e944d014dc1a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.76da7876c.0.tgz","fileCount":38,"integrity":"sha512-9E8QUYRfeVMpkbQc5owPILFR4/7vgP3xxCUNR1eTa0PxOPPJpaCX/y1o6+ktjrRS6ccXiDEmCUIOdjCN+28LwQ==","signatures":[{"sig":"MEYCIQC/aTS/nZo5/LOWNININb0nViEDWAypTxpxgybOeEPbrQIhANqN+1dPlk3rZU49vIOfX8U4ajsnTCRNdpUfHZWNssrE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ65CRA9TVsSAnZWagAA2bwQAJagKdGqqm6V8yt6PyLs\nE3hRV5o2SW8hQaDcQNe0asnmx397nRGrY0zfe/j/lOMg5qJINz6kCc2VgmYh\nAMpe9u4AxlwW0TmmFV5TW+0nTj/3OJ4Q8od9GrfDzLL8nlEu9IF2GZ71J5Dk\n1Mf4YL7TK1PU2jquJf7MQEHd0XnJ4czMbc56fZ7f3/bA0jJWVuFrSK75s/VA\nK3f8U21LiBBQcZk9NqAzNrXR0TuVbyZabHgzFz84W2mup7XW818bBNdxLdi4\nqcW4zOI+er1gEHRMq/afF1E8slmN499CW8y214sEvoD5AGhijmrNxHKQZZDa\ntAXCgmXM9HOURNEX/RSc9tBQaFmb761d0h8DRsYRHfiaCDNIgWsewdeSGmhD\nvbjmfKZwvoUJmR3CuP4f5OH4W5PY36FjxODG4sTEPHx86UynyjT0D2oe4tk3\nDJM+EgRl4lYypLu+/1NS9XGndSJdh4RDR0n0Uh+SXDg4R0+mZBv6XXPRRIub\nuuK6xtM2JLuXHZFJq1QgxqZ2+ik2ANXhjtL9prJxss+mVdYlxNpc2XxPIgOc\nt7yiqQEjdncZZ5wkegPwrj2Mcw4QWWBBLBuN6eivJveArs1x94EMeLnMpDPH\na7qRbjj7mMarbh5+rMFpW0ZdiJjXicxACUt2NKYv05inkkaMbnn6My9EUVEz\n8CGy\r\n=sFVA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.76da7876c.0","@material/base":"11.0.0-canary.76da7876c.0","@material/shape":"11.0.0-canary.76da7876c.0","@material/theme":"11.0.0-canary.76da7876c.0","@material/animation":"11.0.0-canary.76da7876c.0","@material/elevation":"11.0.0-canary.76da7876c.0","@material/feature-targeting":"11.0.0-canary.76da7876c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.76da7876c.0_1617759927495_0.9672624955850644","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/menu-surface","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.6bcb6cbd2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"085d144054eec05720537b09cba508813702ccaf","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":38,"integrity":"sha512-gWVkMsPJL8AI/fkxHvzEXsq1tcnw8ts4dAx8Jn73TvcXO4ruHwCqmOxc/KKrnerCffSK5UNAczP8xFA8dBEYVA==","signatures":[{"sig":"MEQCICbmcNOMIhPFgeUXD6ecFJRHLok5baSQI+uMr5kAcC3KAiAvnHiPmXP8olb2+De+McP5+IeYFqdMG//h0fsY2cnkRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbf/tCRA9TVsSAnZWagAAzPUP+QEQPsZmkKb+NqucSrAY\nWAtodMWsjet9vSP9sZeufEtUR91dF+idm6zyZE/8Lez0cIeGAgV4gdw7Rya1\nMS9NNXB1ayJdgamu4ispwy558LAc/4OkuzUXd57e7DkOChmTJQh2yty4eeBO\nClr3PacXcVuvC0Vz/1dwnHGoM3nMQ7sbK9XVVEwQ1hu9X0WSnCtyiRS0Nxa9\nsrQmySO9ysQnLh/gq0ukRBi8dpT7JDzXSUz//2i0qEK6yANgfzs/s1ebYlT5\n1y4F+L/NdVpguiCD3XqgILc5j914hC8gdlTLzbwQCm+6Vv1V3wT/hg8ekHxh\nPvfT3yfB1YTYm6G51lzd993PZikqpREeaNyhzVUm+siXN3mvmou5yHTw8YCE\nJzAQsdf4MQ41rV0vTEafjc1sXpxThl2xFNe4p1meI/3cqndq3/TjcZPfFDuV\nOFKLBKNXoaoRVtBCMtgiFiHh36F4EVytdUvRuhI1jwX1ZBAE0XzXGXt1wJCW\nREoG4XdY18NaXerkFX/MRsIQpuSgmmE9LW1iQSgY+FXdWON1YUlztst2u5Wq\nasiwVSHvLY6HkHL7DLxukfZqeGHclP5kXRMk58Xf27eQkW30ij7+VnAI6jjX\nTQpSGlekIbygzxxHDngGSsmr8omp4f9UeD91bRCvHg4te9HJH06j89JHl8h4\nVr9h\r\n=jMwB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.6bcb6cbd2.0","@material/base":"11.0.0-canary.6bcb6cbd2.0","@material/shape":"11.0.0-canary.6bcb6cbd2.0","@material/theme":"11.0.0-canary.6bcb6cbd2.0","@material/animation":"11.0.0-canary.6bcb6cbd2.0","@material/elevation":"11.0.0-canary.6bcb6cbd2.0","@material/feature-targeting":"11.0.0-canary.6bcb6cbd2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.6bcb6cbd2.0_1617821676987_0.41460526486972227","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/menu-surface","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.c91e8d141.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbf6485aee1180d47aa8d2fe52872766581eea32","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.c91e8d141.0.tgz","fileCount":38,"integrity":"sha512-p01bOJYzgAyofjRU8g2fEWKhbjvTj8uYqiNBc3UZMkh254l9VhJf/gV+hk3gEHOmx0YuL+P0nX+KtTxpUDtEBQ==","signatures":[{"sig":"MEQCIDODZDiEuhv+Kf28wwYggnlmd04eT0mGaln9SGih4TJSAiA+YO8puYNxR54sqzKWQ28OqzzYLIlovbGoGXeUaLyHlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgDgCRA9TVsSAnZWagAALUoP/Rp9U769gR/uTsYt96HC\nZbaeXEzpu7eQ6S9IAddlYyty5S4Z7Sfh45A1NodiCMzHfTleNd2sxo9SxwoA\nsIPMdCs7cJ6IviVqIVm2tJ9BF1FpOym/AkeKQ03sXf93W3F93Gos9WLu5eNH\nb/DjfAHuxe2iWK5xSpcbnDVK1xXTQlnSQfHTSY9H6N+n3kI4ZI3rnVvRiS38\nqOhS0iB0ItygJ4f3bDFj9yfEZOqXi/Ikjt816QiySL8my1GA/1PKO+rXwc5a\nulPKkCUdkJfd6s7YkYBeKr35VFaOvcnwt78yvHbB2vcWGhMplP0GhFHWmQno\nLkelFdoCkqiasLvrDwqYMDhahQ6E7pPOktI014FerpO4vskS80Ay7g/cMW84\nqNbrBdpIE6msQZ3rBU1r5XE38mM3lLINTDDrzilySlq116LsYuJrVjtjhDmM\nsQRN3q9VnqQSEYq786SkhlydRTV5Qz+BsuQlJiQGKIaiwryEzdiUfQqABpxL\nix3+zqmF0FM5N8lqNbhT+cWWxTU1rTFvLsdV031og1jTAohzbxSMpV5um0Cz\n6bkPX7oTmWB2/QQAYVoLF4++YmRvrhu3rsHEP4qmOrVDDHHjrPVLqjCQwy9M\nIPikfVxsJ/p5qUGm3mtEfvTFEXpog25/8WhJAxlm7i+2DPHAbnbKDxPwtiFq\niasn\r\n=Ebi0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.c91e8d141.0","@material/base":"11.0.0-canary.c91e8d141.0","@material/shape":"11.0.0-canary.c91e8d141.0","@material/theme":"11.0.0-canary.c91e8d141.0","@material/animation":"11.0.0-canary.c91e8d141.0","@material/elevation":"11.0.0-canary.c91e8d141.0","@material/feature-targeting":"11.0.0-canary.c91e8d141.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.c91e8d141.0_1617821919522_0.1347791268906331","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/menu-surface","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.f77c50860.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed9630addc38edad472cc9233d680273f00d6c85","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.f77c50860.0.tgz","fileCount":38,"integrity":"sha512-Zqw5iCE5/R4pemYQQhHVNBdaVeBLjWi1/wUFCOkBBMdbf5rcy7noT19Bx36WIazPKWQsnI8FMLNCPkwnsh6fkA==","signatures":[{"sig":"MEUCIBE6TSHHt9BLJt7zVk9XlOLqhaP5FDhb+yhJTMVcfxAdAiEAuXzDoqxnpcfKrwZKoh7AYMao9naw6d02RRYTWuC3C/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyMECRA9TVsSAnZWagAALQgQAJbE0+5bGFGgiLh6GLPT\nXP1c5BROx67APd6ASe+JJUOx65AzvYZRe5eBgmo32hD6UASjgu5BoPlcdm33\n1HooWovy9HL5QmK1fNQ6lZfxvAVzOkS/lZo0js7Y08EdcguDzYK/U34IUWju\nw9+AizEjFr3JxtAVnsDkv/6egy7T7qG0JnDvrNtdyfmCo+xP9tzkQNLGeHBn\ne8rmAU1z5eVxlwXT3jsgsqxwFcCcjU6QGc34TMEA8WK6Jk4x/TO8WHeF/VJo\nAN6sUo7ycjmHqOyb537CLYKDiK7prfAmwadVfHwdqrtfd915HrjgZQ5e99Ba\nKSFauvm+WtP9pf40Mkx15esr2/DRDmda4ebqy6qJLiN3fhRSN2RjVsyIQ3NG\nXy8XpKVo9gyE4Mk5Uw8mauhH9rHENcOKNWEWAJF5kR5b7mXVO7x7/lv6XDee\nwCz7FnnCsBj+EmwiajGzUJUxZUJVK6rLkNqPvznJx/N/Kxb0efuZ80p4js0V\nM40nNnSmdDOl1h+viK7z4pacM20BmxCLH6nIEcO9LZGSVXaZieyKaXSejqBd\nDubsg58VF0c6kygRS5Z0UGN0uWqd71TwVpiEbOiu2DfitMTvCeurq9Yk7e0q\ni17NrXMFs/Ooh3sMdo1GTvNM1bDm4h19E/hTOcQrty89Eis92Vse3OfUFxt2\n85oF\r\n=mZsm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f77c50860.0","@material/base":"11.0.0-canary.f77c50860.0","@material/shape":"11.0.0-canary.f77c50860.0","@material/theme":"11.0.0-canary.f77c50860.0","@material/animation":"11.0.0-canary.f77c50860.0","@material/elevation":"11.0.0-canary.f77c50860.0","@material/feature-targeting":"11.0.0-canary.f77c50860.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.f77c50860.0_1617896195872_0.4190080610169986","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/menu-surface","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.367d88bdb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdde8894a7c45f403324cfd08b8da1b706f9478a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.367d88bdb.0.tgz","fileCount":38,"integrity":"sha512-gVUNuqAJrR2irtcokJrMf/RwjMqMdzdiB9/f1XwPRkW27MqLL+30fWIlU0jCBuflJGztDrQep3Xey3+VXDJzSA==","signatures":[{"sig":"MEUCIAoDPjSDUSulyZvENvYtOdCTSbKWA7b2W8zYzUDYeY5nAiEAq79D26+OyJPFTjW8WDuybhFSdPYvJpmJc6WTjsb/EQA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzG+CRA9TVsSAnZWagAAxdEP/3eVo7Kv4kAsh9WavrbY\ntBhGckCkbnc/+6S/0a8xOWo2iU0+TMaM1hYa75sL1QSnwWdCCi3pSru0oDCq\nV7QeLjRPpHAylf/nWgJAazwK66sVGJG1c5OoENdcIgGDVKaW4zpL7eAi+/BV\nJgj4AoTMkejabuJGpTzcADaXggM2/w5idmhCXGbpI5faMEZA6l8WBd+RrbSs\ny9niLmICA8Kgos4P/74FYFlUteuebNSSAstJx3kgvzm6zVYlglPtLoZ8c45Y\nWgDl6j2paVWW+VJyyOKyEYfzyXQkwXZnMnAV/HrIadLfWuQb0XgRybIjlxmf\nMe3FzgO+qBjxYIivrB3elgcsOuXSjyMEhwx7XxhyjJ5tgNccvqaL1SGFms1S\nFS1ZTFekDJQdHszYxpqZdwR+e06wyl5b/8R3jvKiLv/k0VCK0ecubGmoIEnz\nsUaOkRl08VhrsIr05fwVVjP5Ie6BwcPq161HHuzjKsl3vFHeODCYvlIE9hFP\nBcXeOWjMyiMdSAq4eWWMUaQRmMX24dJ6dY7vHwyaXYwtQoQxP7K05C4wb+/+\nErcevfXZ8uwOvgKevmh2w40QFQN3TprHKo/nEw2oQljLsAir7nf8cfVuyiwh\n1b/B42To3QZQYl8KQ1Xr7tp2dBOA52r79uoW8QZScKl/aP9aNkkSxORB5Ls7\n01Rr\r\n=5YPZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.367d88bdb.0","@material/base":"11.0.0-canary.367d88bdb.0","@material/shape":"11.0.0-canary.367d88bdb.0","@material/theme":"11.0.0-canary.367d88bdb.0","@material/animation":"11.0.0-canary.367d88bdb.0","@material/elevation":"11.0.0-canary.367d88bdb.0","@material/feature-targeting":"11.0.0-canary.367d88bdb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.367d88bdb.0_1617899965812_0.921247364837378","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/menu-surface","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.0ec437d3b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10f76c05bf3dc83650efa396b789f2e323b0da9e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.0ec437d3b.0.tgz","fileCount":38,"integrity":"sha512-sWO8IgskGXhIy7eNG7FvooxpuOIbN1q7s14DrSOWLY7flpeDEJELP6AXf2aX5NIlzCkvf4gvQjuNdAiSxnlBUQ==","signatures":[{"sig":"MEYCIQCOMLrR+T/w2+s3jtjnJImTDUWgGAHLA9lGxEVxmJMTxwIhAJ6I5xrIqTkIAurXEnCDMiIwX59aWFRggup6tgXP/R/l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1spCRA9TVsSAnZWagAAeiMP/iwI2JEWCE+/maW94j6W\n+DJVBlF2I9CFzuP/ChjmpI/AVTdhwPQPOuV4ajotOyBna+0F60M3LWWALDas\n7jXtrwwKpYA6AJAnmciKp8gacLCF0JoOfZmwhgTLP8n47D+RaPEbgDBUxJ/q\nZ8N3030OkWoyOa8ZClrVDbxbFv3gROa3wmq0uWxtQVB9Kjc8XUJnsBMvgl/q\n6Bb/zSoYfgb5z2qCJi9Rwa3d4En4idYZY3HUISwW4nm4mrekglFMPh5xEnxQ\nq2Nc1V8SoawG7AL5I1pfdqrwIoE8EXImpDJioCOj/g/Le8B0GCeTLS9Bc50H\nJ7OhnKLaLQw/MkktBjvdKk+nGHGmr3zCTcMMA0KFlHHhYaYHNuXxtFchxAvC\ntejANGofqp2UTNbFYF1asz58nbLB0gON/XACz9SoDtDCu9gf1bLsDRhjJiiS\nugUuNVFlzKFpZIJ1OCKJcA5/6u4kDkVSg1YhpX0inFRlbKM5PWrqlr6285Hx\nBkjrY2y/eSPayl070WUPBdAev82SSTBKPQCzH+Jykhw/hn+ussjdaPt+kfH+\npB2iDno4nW8pLnLPjV2lozNryoCTemJ79igfAJlRmOS8XSsvlrGIGAFzuCzd\nT5gDMGGoT7qFp83dVa5dmcNEXaEDJN96SFyfhJIwGzMuYHetInynXflZrKoN\n1X7r\r\n=nl+0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0ec437d3b.0","@material/base":"11.0.0-canary.0ec437d3b.0","@material/shape":"11.0.0-canary.0ec437d3b.0","@material/theme":"11.0.0-canary.0ec437d3b.0","@material/animation":"11.0.0-canary.0ec437d3b.0","@material/elevation":"11.0.0-canary.0ec437d3b.0","@material/feature-targeting":"11.0.0-canary.0ec437d3b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.0ec437d3b.0_1617910568619_0.8845033815442456","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/menu-surface","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.b2fa996a1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb7c8a99186bc37982f3cd1ec800beb62f3ea0cc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.b2fa996a1.0.tgz","fileCount":38,"integrity":"sha512-mhWAWxBhJE6/nMbb/op3UK2b3NIXxfv468H3qIKvOnPe7LCWEbhlzoJjMcoJmurVZ90hF5SAht/rW4rECzzS9w==","signatures":[{"sig":"MEQCICy1txnNeSQxWGRjROHxT0+yFfBIdD1EvfY/CQ6+T87aAiBP8nXiyUcDq0goEzHW3dYamQxKl6yywuSM02/CdBoy4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG65CRA9TVsSAnZWagAA+y4P/iz53A+lF72d5M3DUzT4\njxQcnl7oeOYxv6avuzm5Bm+84LxK+R1BTRklbdH6frSKH+RtQzA8H2TO7Z5+\nyHWJrgvlhK7rJ4xZETS3xEsmxotGewGRd25PDuj8nnF527Kva3/AvJl4iYkd\nOnZRDWhWvaq19slA56qgPVx0UlKTgvDo+obmO0pf5VN5fesO6S1iwmwGobYn\nABbdZwRGcGIW9xBcLjem8TT8I+2zJl8hfv5tZ2g7u3aWfj393XCBZSuvuc/4\nLSy+kKADewstAYQo3q27QozwYJ9pSCNevlRXT8tBOhb3n9kJnmqrXblbcdjw\nIQBtuX0ZDVNm/qVrTNiPn9COxwkHzc84lT+5ikfkzPkekjaB9Zz7ZAOT+koB\nr0kZ+4UAYSTZ8cEgiskxj0sqgFI1Jj8ERlCwJZodW7+0DWOoDWqiNcVdiIeg\nw5PZcCxOvhpXCEnTGgnzQeaR7Hv16x79KM5WX6P9XnRBS/spKlGpWCzTOFS+\nNe7VXpDpU/t02ii7SXvLhtCKfxx6ounlxtEH68M58U7DYKaYhQZdA16ge3Xa\n+4aGgD0XJAfcgHvTqVWUFC+FSXLw+7jWkqvD/h7P/aCCgk+O3W4I76VTtrno\n42CS1kyJAqTm2lZPAA2LF3ENfFCE+id9Bt+XPQVYZlw8d7FxWGt3WypPLSB6\nO3+e\r\n=8cVy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.b2fa996a1.0","@material/base":"11.0.0-canary.b2fa996a1.0","@material/shape":"11.0.0-canary.b2fa996a1.0","@material/theme":"11.0.0-canary.b2fa996a1.0","@material/animation":"11.0.0-canary.b2fa996a1.0","@material/elevation":"11.0.0-canary.b2fa996a1.0","@material/feature-targeting":"11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.b2fa996a1.0_1617981112612_0.5715178727588939","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/menu-surface","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.24255c408.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a234a4afb1fd3d31d5cca4081311b3aa4679f20c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.24255c408.0.tgz","fileCount":38,"integrity":"sha512-kLHHDRKSwfMlu/RlHPJsJXTaO5CPqM6PdWHF1TC1V/DFwBtPKxzDlvwVUIuP1m1j8Kw7w+HHWkZ6f/Q6G7Zayw==","signatures":[{"sig":"MEYCIQChctnElzu7wp1JfxBxLzoM/RqKilFVLRVCVE6wGrDLsgIhAOUFB41Z3SLkTHE1w46/lsg4dP6VhDk+KB6D7hKAjA12","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLVaCRA9TVsSAnZWagAAKLwQAJJxhkEdazxzFg+VA1W2\nxg5c/c2k2BBbQeYx+D2u3RCD+S7f6BwggCh2+EgnjC/E9kdFkm8IMorAq78X\nQkSft3sYlemoADaXoJOHarf+b1L+4i4wy/U8bQb3Kimive8kl28UC+CYzttP\nT5I6Otgh4tmz7T1OQ8y2bQAlcCk4YNRyN6pr25YGdA7glo1GF1E9RKHdVwnJ\nVHxyhZNIBzlAfOogu3fUTz7H5rDylWhiU+mM2nRVipbY1dsWGNL5qczgPiJn\naC1AEixMTDoBXTI2b2sRN2Ag7F9uDj+5md79lXRbqKBzU6eRSvuvTwuNlPaZ\nVucFa0gqAnxQO7kP/7++YX50BbayJ8LAUDmBo6KPvZcpOpthrWRO7Xj4Ix96\n36pcY8+iBnuGC7VCs3ZllSajRNTUhhHLnaPOggMVxTlMxo0zXLwY26cLvRHy\nXafiw20CPO/N4TvovvyTX0YVHAAUOwPUGfbYfvGjxBKFWxWzR5X+igeP6kc5\nKOFWEvm40miq2ejWbFQMqhGJ4Vgs8ytbawvV47aYvYeEo6DwaVCmAoOscXBk\nFcw+4Gv4noGCl0Rk2CtNoSd59avJ5p6JBCNiVL5885Jx0fA+sQoBc2BErw5g\n04ukTEaCk+r3WrWgI1tQLVNHoKHaPfYnPT/ml5TzqGDTwXwYeNHwQhpKudls\ncpkJ\r\n=nV/p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.24255c408.0","@material/base":"11.0.0-canary.24255c408.0","@material/shape":"11.0.0-canary.24255c408.0","@material/theme":"11.0.0-canary.24255c408.0","@material/animation":"11.0.0-canary.24255c408.0","@material/elevation":"11.0.0-canary.24255c408.0","@material/feature-targeting":"11.0.0-canary.24255c408.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.24255c408.0_1617999193259_0.5124020347320903","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/menu-surface","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.7d6a4bb72.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0450d8e0c5d74808a832e8b29db2e88406804bd7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":38,"integrity":"sha512-gvnjUIF9bjJlTwM41Pfstt5DzdtxG41cHXJtZuL/9jaYEvIvruIrjzkcyQnkQ1FGxo5+ALJNl1Uy4gW+dy+LNw==","signatures":[{"sig":"MEYCIQDR3y5zD8TPsJSTETqIkxHloJt+tYcYQvH2dYpXrW5sKwIhAJwtvZajbBt9poEL8BryEOM6QX5vKyO63DNdx18UIwE5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNsZCRA9TVsSAnZWagAAquwQAITy4N3Z+3YN+u7L7Prt\nXbNxyU4z6AXaE1di5dnPtU6qB932oohGk93r9j0sk0ce0o9oVsj51KMSUh3K\n54iC3rmhFXqhdJXwTZZcYYXKafqESP+b9BTKFib39LyH53gkmUcgY5TRkQAh\nGPxYxhy+G7HbdcLKhmmmeziNAjyk5O4Lj77PklWyPUU9fQ9MWQ0yAY+MGHw6\nMyupv9jw2HrQRnSdS4Cb/YVRWAsY1e+mYgHCH1oZqHLDc3DFH+1bPa7CLs8z\nC+1BxJgQxhB3om+uIhBaVWetp+FWlxCZsOyM2HfsvuWM3lnufHXQp79IBLx6\n/TsqurAnbMjcy9So+GdVv6aQ+3BUBeYx2dhlWB2YCiL2ovPdFXPugpn2Fv0/\nxMWoqJFEA9YFhASexS7lRjyGMi+RKWPSd5AR1FmIVC4Top/lx9gwViUMjyhm\nBGb//N/LVW++9CrIetCemHiIornvWSsvUVcEuczkC5bFgOCbvYGZSJZ2oJTl\nn7fYRbhXSSZBetTEZ8r+S3j71EF3BXnMzRcAQEWX2ELOyB98EEnu0LXX49wX\n6hZRCRvHkHip7AzhiJYZLY1zk+6x1COrk8VUgQ6ACg91jTFJDoiVgb7wLYUC\ny5x7DSEqkomU2jWcvB1TEqtN3c1crzy3oFh/ffP/c+DjNfT9hLZ/dEUCnF9z\npbem\r\n=RNBb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.7d6a4bb72.0","@material/base":"11.0.0-canary.7d6a4bb72.0","@material/shape":"11.0.0-canary.7d6a4bb72.0","@material/theme":"11.0.0-canary.7d6a4bb72.0","@material/animation":"11.0.0-canary.7d6a4bb72.0","@material/elevation":"11.0.0-canary.7d6a4bb72.0","@material/feature-targeting":"11.0.0-canary.7d6a4bb72.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.7d6a4bb72.0_1618008857407_0.9283511629736036","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/menu-surface","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.352b295c1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2cbd941b1674d0976dfe55a6a104b72cfe354c7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.352b295c1.0.tgz","fileCount":38,"integrity":"sha512-U2uBbZBmBjfORVcg1U+j+CcEbbHVp9z7l/gjvaHRNpyjF5Cu0c58DyMP9PBhEgH/AlLpD95eVspYnMHxKH8N8w==","signatures":[{"sig":"MEUCIQDBrwrei3OIn4nvjVgc2+YwAbfzjUtQHtxuNvPGpmqq1gIgFkbnqneaKyUyILw5mxsGjrjlaEpOK4O71rxXrjELJSY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI53CRA9TVsSAnZWagAAdiEP/iDphUiu+bmyYAmCFhRH\nyHQGqDldKrci2+koDZxjhp4M8zEkxSY+eZhX6cN47lrXf8ZY+XbUKoiaUyuF\nSnasbPix+oTpEaucJs8fDAAlc4qYH4NPfYDe91uxjphTuS3f6d1uc5gyaVBl\nFiw878afyxJZnireen8EiZywecug7JGqHE/OraUJ2Zhb/Vj3J5iVOuiCY0CN\nSpxUPwQkSk+2ZiI9QWmng+VigVtYThKvvc8ncPLUfsRIck8a+kxxHf6c0KxW\nWN/7p9UWFgdw+hvM9/E0E6sMkKGumKQ9ul8df5jrL4/vJHW1d0+wXxqPUfkM\n7HDEZjw78sPxV5/FdOAm9JD60ILHP+2+LW5l+WGqC3vttkk/PYJwJkPBgpCW\ntJrKQMupKqOP5HHfXPzBGOMH93EHbKB9yCyKl+rZsL0uUW8a9BS+WZ4BuycZ\nZQM2NMf0m/it91Om2XnvdT/4AmsXNcEjOp3k55I4E4K30rKzOmx4UGWTb/EI\n2Kxut/MuAYR+DJQFqGb7Lpkt3nKNLxdXszhuwZrm2exn/lHPhvDyhGXJaY+M\n9Cm5iwQavqIuPTwYJjwouwoVePI318MDRa8Myrxkqxtkxc7LA74sH+43Bgqk\nE5QWbS5w1yeMNvFd2cq8pDkkxn8aTLDjDvjKGrnlvjfPDbpB2Yj0uvIreH7w\nj0Xk\r\n=ioau\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.352b295c1.0","@material/base":"11.0.0-canary.352b295c1.0","@material/shape":"11.0.0-canary.352b295c1.0","@material/theme":"11.0.0-canary.352b295c1.0","@material/animation":"11.0.0-canary.352b295c1.0","@material/elevation":"11.0.0-canary.352b295c1.0","@material/feature-targeting":"11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.352b295c1.0_1618251382792_0.7836718568559695","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/menu-surface","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.ab99b8064.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1aef72b24852248b0e92bb53685acc82ccedeff0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.ab99b8064.0.tgz","fileCount":38,"integrity":"sha512-hArHZ9BfmgPsgerjnOluQnm1gxB/qCrvhjlFEArXCAFjw7Ybj0xLw6a7fB7uQDXDujNApgHeWiZJleyLb2fJaQ==","signatures":[{"sig":"MEUCIQDcJH1OKeDzmbXHHaN7ra/Ud9RU5Oz3Em/Gi7yrAw9liQIgBq+bbQrNzCUxIs2EkrDzxgxbIycWAQqhkQvOCeXgTKw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda48CRA9TVsSAnZWagAAN28QAIw0TZ9VP+pNg1f6/t2q\n5qGLWpCdlfTEJzZU8TNUuCHKSo0lyl0+6HZCwEeRVgtAeNFVzvgTkLpmAB06\n5xvhyZmQGxuE92XappWW9cLRXcExYLPbkFDvvOCcvrJjHbRSkeEQsyN3ivsF\nhCBQ65uMgauF2CGD0loPEpDQYAh6A5vofq8sjAj1zdGH/yO7Rou5VjQnSgQB\n2uar3Lizv3ins3V03yY7V3UOE78hGIYonQRAuPCVaY9YzgwlDVBmM9DoKaev\njHbCNyXqRFkFhQfMi1SYUYZ51EW5MF8ypyUl+goecpzSIxxUNlnu7IbKo9aV\ndeyEVdoU/AxVC77tqSIeUkEG1FF9eOL6kGttDZMKqIdTU59d3MEVIchTDQt+\n/a0XTVKFieHUwNsl/rlqhQT8YS0BxY6ZKFFpWCMPQ9Nnss8SX7qswPYoVzRZ\n1tlY+v7KhBQ67pUDNY+oo8ELb7ZX9A/xtVoHP8BM0T58tNg1I5Bs/J1dJkKI\n+G1zfRS5Zp3+ml/M3QXejxXNQxYzaoUWzE5buKMQwpynMG+XQufdvwkmwxuR\nqwvGzQwVvfKF4UR9LCnpMc+7mlcYPFtgXGDzXZ55NpYEp4IKfmlvYvy+24bu\nl+q6xOiO3uilYh5B5cQ22ac5LajmO45NyHn4OAfIG652Zkw3ig6LW/ygycRc\nCwkv\r\n=HBzw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.ab99b8064.0","@material/base":"11.0.0-canary.ab99b8064.0","@material/shape":"11.0.0-canary.ab99b8064.0","@material/theme":"11.0.0-canary.ab99b8064.0","@material/animation":"11.0.0-canary.ab99b8064.0","@material/elevation":"11.0.0-canary.ab99b8064.0","@material/feature-targeting":"11.0.0-canary.ab99b8064.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.ab99b8064.0_1618325052393_0.3579859738261193","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/menu-surface","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.8f0a11e32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fd590741aab0fe24d609af9ad7df22a39040755","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.8f0a11e32.0.tgz","fileCount":38,"integrity":"sha512-pr9Vsoxx4plab/RFohgoLgRCoLkWLDkc9ugL4LIpIdL+WxJe+Mk85nvHu27ED+lbqZxzyj8ho7EtRIAP4HEBHw==","signatures":[{"sig":"MEUCIF3Zdp99+WudVIvlDH8Cpsn30cx2muWr0ivhNk4LRA9pAiEAwDfCN5dhh7zS8+Doj4hCFW1JOnw/ywcUrn30i69dg9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0qiCRA9TVsSAnZWagAABOUP/izg+ONEsgmXLIF6Fc+0\ny53V+r9dCmOHYmFjUo7P83Q4z5JNlACRvGXR5yMKSdBlb2wJh/vv3af90AWf\n+pesszfSV6XRlv1V80VbUf46Hfb9aITQ6ML2PoBJtmfBpgPVsZEjcz2w2F+X\nZfjL2Oeic73TtHUaTK5pvS+DLj+Wk8SUIisJkEpqSro9Akcz1WhhKOZ6tro1\nBiDwUvOnWb+W+HCAs6oNrBlWaXyzr2G16A3rkNmnwNQdHNg0pHieC30+fvd/\nizGGjqCfxJeYEpPGUCZ850cNMOzEvy6KjyiioSSXGRpT9DOFrZCw6N34BIz/\nNLni/+vJoNqbJNTj23aI00owINFolMd7cQdEJIlBf/WE2KI+DIOD9PpVDgmF\nerBYqTp+lbNsPr1uOe1lYoGjkNgSLsZyguGbBkz1lldFRy8Sc7EwJ6eybOOk\nonrUDv8iJxDxqSInOICi1kD1wjHRPbqWOy00yqRC8fdAGHjja+zAF7wvbmIr\nftksplSozlGSDMGBcjlMc/QsqkPqb4jrfOJx9JEcYlHqVmNO1r5p36ILsieT\nTmnq4NLfbPj9A3AkVfv4UwXgwPaRJnAfKFfcx9KBk7WTDYyUXYavcOfBITDa\nw1t6UaZ+/SYhhq8eJ+zfSWlZxeVaK4UHw+5ZkgEAYJkahi1QhGXNdR5o3NEl\nxvsi\r\n=UP31\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.8f0a11e32.0","@material/base":"11.0.0-canary.8f0a11e32.0","@material/shape":"11.0.0-canary.8f0a11e32.0","@material/theme":"11.0.0-canary.8f0a11e32.0","@material/animation":"11.0.0-canary.8f0a11e32.0","@material/elevation":"11.0.0-canary.8f0a11e32.0","@material/feature-targeting":"11.0.0-canary.8f0a11e32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.8f0a11e32.0_1618430626196_0.6822760113049839","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/menu-surface","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.f5c6db8fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d020c0f03131b163df2e5746e0bcf0a7c89ab1b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":38,"integrity":"sha512-CMf44DoAfjU5aKQTvgU+l4PkoJUyoUe876czZ10aOCVfXTzOsnL0CbDfgaDeIttG/P+cBxqMnl9Od5kBqASvtA==","signatures":[{"sig":"MEUCIC7hAWis6wu1Ned/CVnvtQ0tZi0w3vZooP/6ySYcqtkdAiEAukKYJnywQbuQFL0wjrVK4CXWxopmRxhnvn4VqqI2JeM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIBFCRA9TVsSAnZWagAAr1sP/RflhjkyCyaonnpFZ+wZ\n9s0QnIAcK3k9sARUVLcFUN041C99HEVCYsKIht4BrSsWJ4L3+MDe+BEToiyC\ndk8UNNzRDQz4MCuha4q7b1Mi82nT45+UFq7stukLgfnMIaAn3R+TKk709Fxb\nXygZBntkg4pjHY0HPOcCBDSqzV07jYsjHfZd4n/dEtHBFapN00xlBN2H7AjZ\n8CMKeC3xbO95G5P+A42hV3yOatg50G3h4uU0PB7T0qs68ZuaNU64M+s3W60z\npHds9RtTxLlfbUjWBs1rPHplddYJ+CweQfsvOLLQKXw/JAobehHkLO1fRM3S\nE9VhyEY15w4ExJZaH1siJ9yexWPsbzonbKQtRBmDFq7EmCNbbXH9EktUHGN6\nTiuN4THHgaTtSVrx9ZZ9FvVTUuNQxOOVHgMekThAHMeUB9Isdj8+mZ6zPNQJ\nOb2bawW9rLT4ap6RDWbTvJx1m60VouKHluNLOAvGYGR+/CiTZ3z5wmFY0zZW\njNIfFDtTYZQPlf2PWKEXlwwnF+BUhZlqYqg/RlmakLqgYMrO3Uzr4mMqCimh\nKCAiEHB3H4+9WkD492HtA+jc9/8n31FaKH1BJut15ipqpuAjBzrLf/1LinfU\nkarkPKWVUL22NEAf6n354HMhgrmMNDWHUsaGvgj2W8nmqFcD/LpwhDZL1799\nhrNy\r\n=GJhf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f5c6db8fc.0","@material/base":"11.0.0-canary.f5c6db8fc.0","@material/shape":"11.0.0-canary.f5c6db8fc.0","@material/theme":"11.0.0-canary.f5c6db8fc.0","@material/animation":"11.0.0-canary.f5c6db8fc.0","@material/elevation":"11.0.0-canary.f5c6db8fc.0","@material/feature-targeting":"11.0.0-canary.f5c6db8fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.f5c6db8fc.0_1618509893337_0.39439095379791556","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/menu-surface","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.3793a3143.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"719f2206a377c85ed17b09fabf8d9c7c6aace35a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.3793a3143.0.tgz","fileCount":38,"integrity":"sha512-dxAV5cfapHHw7w/IN4gJhmqS0D/HGhqOpl3tOR1I+4Ufb6bLHca1FYyefP1KyXc6c4G81Jr1jxo2Nb3qwMQuiQ==","signatures":[{"sig":"MEUCIQDy6sAUpcW1MxlluCJNhb1haqjyVIxiFpT8OgpHFHsaugIgH6LIcGMDHlw9bmgXbktCgb7dCC9qxUq45AzM77iqrGU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIaqCRA9TVsSAnZWagAA6BcP/0uP5P1a5WVA+mWRFpUp\nLQd9tG+ZGy9GP3i3OzOoig99TG5BwAUTb9SCgAQzU4bJeG1ncLLauFG/ASDD\nnWgVQufQ4QvBm2NLpIwqsf6xrCHf0XrEo5WrstFCDArmR61qZle4UqSiIV6e\n1hEJ0SJc1o62ey3GwSO4v0zIZGELGvMKtQlXPLdQTfntvRdCrmExMUzlSWCM\nkgIfoUlyqiDAKkw0fkr4fzn7w76x/ODf+ah/e5L/og+Ou1yO3t4Mohf2PllY\nk3Ayx7gq+miyHli18RCyobu+qWE5SUk3IyqvlXywLqhxMsGx1/XmvtZqqlDp\nx/n99MmMVgx8eQcqY0fSAS2uhABMtjcdM+i8I9XOBPfSLjwAYPokHt48lOEe\nPRTYuVCWNH/0Q+aIjK5w9y7cWrnn1hTYJXThQ+66Qq6IJIZ6H5fId5bTNpIV\n2GkYH9Q8wOelrk60fbMM251Tgp8x24zfDQjiXmE+nD1bLz1otk+F6xFiKP0b\nJOKxSa5r7t0dqhU6DxQ6RLffbIIyQu+JZOmiZuR74k35aSz6KoNhgP5bvQgm\n1HSXkcVnQwXhhFbPuGPmD9mVuDkQEQ0ShPImYNMdefEfe6NufjyHZh8MNY4g\nWtzFuyvyFgn+7TfwKdVKhWTP84ehs6fg4fs8HiNOvexcVkNoMSF8jT713Cgh\nxBOB\r\n=jlJr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.3793a3143.0","@material/base":"11.0.0-canary.3793a3143.0","@material/shape":"11.0.0-canary.3793a3143.0","@material/theme":"11.0.0-canary.3793a3143.0","@material/animation":"11.0.0-canary.3793a3143.0","@material/elevation":"11.0.0-canary.3793a3143.0","@material/feature-targeting":"11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.3793a3143.0_1618511529554_0.6684666993446491","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/menu-surface","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0-canary.bc104bae7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc1fcccc642ceba1ed006f3f8915b3b686e2c63e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0-canary.bc104bae7.0.tgz","fileCount":38,"integrity":"sha512-D8ZFD9foJ+EoRGEOP4T9m8efLUKJY7VNcXJ60AQWFYsvsYpYg7v2JCVRctLZiuEhkTvsorzyMecuvtf7KcqdSw==","signatures":[{"sig":"MEQCIFXbFzpPBuvVLtHtesDLGkiXwqmToZ6DyBKuSl6ZPFw4AiA2ydTIwoG5dt3iINDsQYI5HTp3H5VKJewFJ19gMMC/0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJgzCRA9TVsSAnZWagAAZOYP/jdQX5dH2d+2enF2QKnw\n9NwXcq7P6t0GK463Yn94dbPB7nykwG7nN+a2RQoPSLG9mPEaEuDTdksFFV6v\noSnOyl5lwgcfU0XZGtpQh0XVhx9K6Pgm67+rsagG/v3OnmtHFxDJ9fDmfs17\nefXop9XMYaNioHGRP1n6r6qYSS/nxsJe2FR+w6AFNM5XsJA+5PuAfESYPXZH\nRFuE3RaZ70/sMXzcvTK8HKaHlt5p5hoARcmXBHqJlckQJGJ4DQFB/Dzl+nI2\nEeJjw395Z5XaO4Bjt2yJ9+zuVVNc+v6VLFNj4aYnHb4l4yV3OKqlLJni1awC\nP8Ip5PFn/SIPx8QEOgN/bnqt2pil7uU/h31cjmn6InXVdGJ4ilscKFOhCN+U\np9irZlzBXyYqzWFmF44f5ai1yzL04/zmrYpDZbPx4CgWm24UpopG9XH89C6o\nJVFy44J05MJ6Nwgq8fILxdD1fDdUnZblgajaFM2YnooqVLuCpJqaC4oP9Ktf\n3SQou3TR8KYwmVQH38AiUozd5Ta86RLPE+HcMt71Y27TVs52te56+xTN/WLt\nDtRiGXCZ17SabDjxEcKX2844VWL6r7paYMrs5sJB6725ZCGjxwEhorxayXTd\n6QpN9r9xin2HySrnl4b2dfvzqzt19HMZ76oDqIg1q2SFNuF6N2YsQUKyrWoP\n4aFz\r\n=4XyP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.bc104bae7.0","@material/base":"11.0.0-canary.bc104bae7.0","@material/shape":"11.0.0-canary.bc104bae7.0","@material/theme":"11.0.0-canary.bc104bae7.0","@material/animation":"11.0.0-canary.bc104bae7.0","@material/elevation":"11.0.0-canary.bc104bae7.0","@material/feature-targeting":"11.0.0-canary.bc104bae7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0-canary.bc104bae7.0_1618516019294_0.45243510869252823","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/menu-surface","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.3f342c3f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76a2d2ca4aa7558fbf248ec88650356b9a3c6f46","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.3f342c3f4.0.tgz","fileCount":38,"integrity":"sha512-4z4g2LXacOvX1In1lM0qZAe0PlFExnJQObLxiSyFygnW31pIKkTxtLfjgfADoYFRMozmNMpJU9sk7fheFZbbzw==","signatures":[{"sig":"MEUCIBM4nG5tAkJ7HiGQOgMuWGN0J14LhMRJPQrbwZA8CHzYAiEA1emyK5FGzohTPWeVfwN32ilTaMc7RSstnkEGyiZ/Ir0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMRBCRA9TVsSAnZWagAAcDwQAKE+bxLtVSSkIskuM652\n8xGclrnyFU5Ncm8aP1UOIDjRQ018WNU01EbxLSiwTLuj5bXs8SkU9imeN6sl\nRqlwhwRPf1h1bXCOHpeDXIo1j6EkBFTs+LiiKNbtvBsfmV9j9DxSM8iHKQ/L\npVif1u7+RyF6hfNwpzwNT7GajJH83vS5mg6K8H5wzKhCi4Y4mIpCbt5dhhRf\nnIaIk30uT/n1O4sLRIR0MYBZCaBUONJ+0hVAkfZ7/F6sgj2jMx5N9uqVpI3n\nSlcqmgyaRuiFLRXLX2w2TdTknUXDJzoolcTZ5wKJW5MvR/xRqR0MGGCeH3JK\n0CVVrsKlE5eonUydT8+MNSbMKQeonAHdFMB+EaLu/L8w7fMHuY2s6tutJVoK\neQmcBOVDbKLYhakLvaYToFl/84I6QgMgiGA5fthaDhK+nUjai4CjtPns3Fyo\nSGh0FJbG1IBG6SFyqF6M1biIUpMUYb7wWw6RyJx+rgyjSx6fkBbQeU9yRD5M\ncaRKf7fRlfUGy1LdvYl8e+lMAnTIbn+91Iz6+VY+rPBpJOXC5MOGinE/FFNY\n4ptBqx0RR3g/pAqs6YyRTLBoX6O0gIt1KaNQS5EZ5MStaQIV0vL6nTZCBTYa\nPcvolRb9L61pwOFeATrRcD9LqL2sVxnzZkTs2P1cXApw4iui5X5OGatuM/97\nYnO5\r\n=oFt/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.3f342c3f4.0","@material/base":"12.0.0-canary.3f342c3f4.0","@material/shape":"12.0.0-canary.3f342c3f4.0","@material/theme":"12.0.0-canary.3f342c3f4.0","@material/animation":"12.0.0-canary.3f342c3f4.0","@material/elevation":"12.0.0-canary.3f342c3f4.0","@material/feature-targeting":"12.0.0-canary.3f342c3f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.3f342c3f4.0_1618527297175_0.9045129725149572","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/menu-surface","version":"11.0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@11.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36fef741c33eac98ce98d8790a1ce17ad087daa9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0.tgz","fileCount":37,"integrity":"sha512-/dFaaxUR3PSlv+0aqMGx+8Dp8+D3ToEmtAhHWbCHXHf1wl5rvOIp1A8ByOtZ0mvOwUXB8B8yN+TVFlj6Ey0B3A==","signatures":[{"sig":"MEQCIE5mzY0z8PFBZItU67Kz70kJJdAoOL0sqBJgMyIM1i+KAiBgtvN8mwJUtbJY0+7gGAnZWKgD/3cIwL7pnz9zQZmLzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMU7CRA9TVsSAnZWagAAxoEP/0Wirl/AtbPXwUAv8NaI\nv8Pdtc4+tV4neivXGIGwoEm2I8kT3gIizJ7eukVZMEEv5+Aa1K3PbmciPnQ2\nR7YxvNt0cwIaJMdK0scPGTd26rvEABicoh3dZ6b6h0oFklAH2QuZjJwb9BC9\n6+gWbNG7nE71xudw9uwIhA+zxzLrzFpZIH42Abmir+Ik2S+TWQp4GnD9SE/y\nK4uN++PFAyenCwh9pb4ljLmDV+YcBuRyg48Hv7IXPht0RpuwcJXtvXMDgEBn\n5KE1S/OP+ylHBuoLLkOpZGM2jDWHQmMmYIPE6b9ISukC0QCnaW8VhNrqybaI\ntds41Cz4EXCTk6Iy1Sbtilr/4CHxI6v9SdpbHZ/tQgVTTvrXIm3eozK6IorA\nRbC1CvipzEHmkzF8P1cUmnrF3fZsaSJtq18/FeDD3IkNgN/a960+L3Yqhm/E\n/uXpKeeJX4e980+hut0soySOxcO48nHM/r1v1czy+BWIQ2PlOF2dvWvnL+18\nGMkSevVd/Wt1JxQ42BI5CUryLjm6PlfeZUWR8fQ4dFMeqdBe/FP0EOZrSZ7g\nKY8w2UbgvsUwl/7Y9ZsrO2wEb4qjISWU3ox5czfaRwniUMX8aFrSUCTYrdoa\n2eX0GfNp7ZcRt7/nXi6k/djKxMg1eueflTKc8ZmhNOzPho0wQ0wJMM0yDeDm\nE1u1\r\n=8srB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"^11.0.0","@material/base":"^11.0.0","@material/shape":"^11.0.0","@material/theme":"^11.0.0","@material/animation":"^11.0.0","@material/elevation":"^11.0.0","@material/feature-targeting":"^11.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_11.0.0_1618527546928_0.6792297949963724","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/menu-surface","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.2ebfc5374.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74d5a060b4b1873bca4094e6e9176832e05c326e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.2ebfc5374.0.tgz","fileCount":38,"integrity":"sha512-gDPu/4+wjeW+Nd/XbGseos2UnSHziPgp4Dbl1Jm1NtyiemKC7TnD8NP+GiJfzFnWLGo/+C4ViLT5HCAmOQcHgQ==","signatures":[{"sig":"MEYCIQDkrftVJpdaW9IG+H0nU1Ps8RMJVkCvbKlZDNv1X6LKAAIhAM6psFA08yZZ3jod0ex8WPcGKYO9kJtWO8phJvyy9uRC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefd+CRA9TVsSAnZWagAAoIMP/iJT5mhx/MAeIVXDMEHB\ndjp+rfj//bS/ttgBV8WtHQS5Hmn19bS0Ia0ZgTIV4Qg4pYsRFgCvfHYEp8K/\nvY2PxNeqCh3TVYt1EZHe+jyADczthevB0q533Z2kfystWdT9Z6S1wi/SK8kM\nJ57gNuTxwOWDDTXXTWjHhDEYazsVpYnN1LIhZrR2zHosol8OkFfmEO56AOeV\nIpF3+hJ26CSV7HmNJc9NqFvDnxalR0itC5sqmgLg8vxMt/uIL1Q/s6cDS9Oo\nvnzLea8HQLOb+Cs1PTj5lvodGXSZ7cX1Cp4aQ/l4pNJ2AZKln9+OchhzQqMX\nzjiwHjz0TysxNQcvSt7W/6Km74YJDitdB9t7c9w0IfZjRoJmUcgzq4XCZfjx\ndfUcH2C0n7XqP6E0gSFyGRhNWsnKIX74RpcCpmIQroaCzNLuTv6gPn5jyDkU\n2Gfg0sWlQ6/wYHSrKGajiTWxiM5OTCvuBZcqRS18Z3nQJuZSoSzXTyLZ+s44\nK8vKE5/Af5HK3yVEKOF3kyV4PfbmvvLwAdbqyADsU9LCXbkDKP6eUVpkMZ1T\njQl6uBuK8dK8mKz6z+DO2+j8kQBgAZ9eY5bKAjbtA97g7MzZPT9BBpWXk0dw\nFTcNUCOnei0yIETjPG4k3E9JoKKXtRFlx/KdbTJl3eb8vLRuzUOlBmPK6ivU\nmsgN\r\n=oZPV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.2ebfc5374.0","@material/base":"12.0.0-canary.2ebfc5374.0","@material/shape":"12.0.0-canary.2ebfc5374.0","@material/theme":"12.0.0-canary.2ebfc5374.0","@material/animation":"12.0.0-canary.2ebfc5374.0","@material/elevation":"12.0.0-canary.2ebfc5374.0","@material/feature-targeting":"12.0.0-canary.2ebfc5374.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.2ebfc5374.0_1618605950234_0.8207234185963823","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/menu-surface","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.5631828e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b39f7fdeac918c8304c1d96c292cd075bfde5455","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.5631828e1.0.tgz","fileCount":38,"integrity":"sha512-hDH8zVexi8cYaiBvS3eeaHrSfCnbHMHhJON8vhVnoeYp/j54pM4oZcuI8z74xrNkaTUtCXTDD4CExr5beWWdww==","signatures":[{"sig":"MEUCIQCFZShqQD++96xvZfQQ68j/F8KJ78ExygYHjkha0e24JQIgPxR7uYP0550/V8n9qbcNvP4xBY7YfFEF+a52kvYt74w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepKcCRA9TVsSAnZWagAArnUP/iCfqW8C2GVGSoPA6gdP\nZ4XViQ8H87CjHI6m2FOL4/I0HwfIlkua/KkdiQ26Ri6gu+AXnfpuRxt+gQbx\nrIo1NjXVTQzoM0lfuFtB7kokBGPlnjGc/VzCfZOlo2z1DG4y3R9U+KaJyvca\ndOZiHQnqQyM9lHeqeoYUioygQjKzAZCHiodWAWW7pIBh83uy5dB2rrh9Bmg6\na9SAP1ZXctnKc2OzzHLO0sPKQtwOG2XEcsQXukx3zNmqpjG52JZ/qzaIwkNc\nfOIHw5q1nFalCc/bKcZ8hw3tCrxVyQcR3yfISstM8KM70X5/gizP7pTJZzCp\nFAk2dMs8uwPF98qdAe5pSK3bQKDLazBAX4JHIYAFnOCkgFF87H9NvFoLQOQQ\nEI2Fbn10DGaJnaFASPOQEWtbCk2SYlJFmpr9o70U8kE/9grB43nYZRv/J6gU\n1iqOXYMLnzq/XQUFDPocB/hULI3xfQx1qVdfhuf5UjTirxhW26HS1iBk+v9d\n4yhoyw/4yvHhkS06XVQsO7buasEJ0ugzZBOBtkASt2eUuzR+AP0HbzWWPOEo\nj0b6XBkG3K5QctNMRVWnLSPc0m7CCA73DDyDDdJyU/9LzGfm3b18gYfUZqEr\nYTb0X3GwkQjJqFFAprWxRNOBq/H13BnJRN8xuGab8BcVRONFJihDoRp/mnPs\nCxfl\r\n=BNDW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5631828e1.0","@material/base":"12.0.0-canary.5631828e1.0","@material/shape":"12.0.0-canary.5631828e1.0","@material/theme":"12.0.0-canary.5631828e1.0","@material/animation":"12.0.0-canary.5631828e1.0","@material/elevation":"12.0.0-canary.5631828e1.0","@material/feature-targeting":"12.0.0-canary.5631828e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.5631828e1.0_1618645659792_0.29388456308556754","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/menu-surface","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.bd685395b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3931adbaac5db11ab5c653a542208774435078b1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.bd685395b.0.tgz","fileCount":38,"integrity":"sha512-IeOvCGSmXp8D2DMMflWUguH27OjReglm4JdyVN7RfRZkWQ97TsfvGyJoIHI+1qyhJqx+bXUU869EdvAxDBPxFA==","signatures":[{"sig":"MEQCIGrnVAlicMDf8NTNpunNXisysJ43IeP8AjTOE2YtSbOTAiA++UW81nTP+GO+7cPyZSGprMwWj5X/dVWJiVmzSawDCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc76CRA9TVsSAnZWagAA8VgP/AvoWrNFByEnGPEfc54p\nxhEu+lEF1URza30tGvUWIn0VNRY6kPz7SdYQ+YVezL0gIKWkQdvYQryHvgcl\nmD8+sTZ+EqLS5p0O3CAd/Wn2Hrb+ytRPLjAZ4Hpjb5pq+Toi2cmX/4BSezJm\ntCQ2jOE/WXFGcfPo0UCH/rRq4q3HT5D+7hVQ4qu4ksztoOLFnRpx4UgipiYm\nWAgTQ2LdZUT4FX8A9XXLGBAxtlv5DwxHipyHMevL/LKCP9Q7gFQuzN/wuJi/\nC/q5bcQQXOojpjEfgWcIpWt5+aLofzwQtRna8PuX3UlG1pH3e48TzxwK10lD\nQhRrm8B3lMGkDc9f79pTXREimSWt57BWz1pWMK0mkaml1xrrK7/9L9ZOxCS+\n7pMY0CWjqvV/mZ9hhbmef2t6QagWpuob0fExd8JK/kxBfCv9mT8IvwSCGx0k\n2wf7fMtGWNN4ScGbIBGlOtmaaZhT3pbUgERs3+0lyXv1xKaphVt8f3AHnvee\nc7R7a8YgA9r4LSQZSVNGHQ2a7Uf7GJEQADnIZ+qMpMnDTGZjYff8CCIpwXbI\n+lrIurAgoV1+CRPMLgAJF4L/DWcE1wsqypLvHHigTQqPyOObJQMyZEyHCc1z\nFc/DKW+QWAFPiuSuqEh+9ngkEe0ZVYlvLK43Huooqy0f7LKavmOrdjroy+5s\naQtA\r\n=et7R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.bd685395b.0","@material/base":"12.0.0-canary.bd685395b.0","@material/shape":"12.0.0-canary.bd685395b.0","@material/theme":"12.0.0-canary.bd685395b.0","@material/animation":"12.0.0-canary.bd685395b.0","@material/elevation":"12.0.0-canary.bd685395b.0","@material/feature-targeting":"12.0.0-canary.bd685395b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.bd685395b.0_1618857721671_0.3666559585336826","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/menu-surface","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.b52196498.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b0908a6ff102f56d0f072fe53235d9717cba8e3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.b52196498.0.tgz","fileCount":38,"integrity":"sha512-bvAJdc4ybdONTQfWUVLU6XT73gdtFGLuHmOvHVc7OQhyS5j7jbOyBSCPnht6Bk29olXLU+HRreO7+oUMxw3Www==","signatures":[{"sig":"MEUCIHhhNmZNlXtXFI7yE65ftByRsZYmUdyGFWbScXFpNfZxAiEA5EvXaa94APwHcviOO7YYTH8IGhA48DTReF6KZai335s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeDsCRA9TVsSAnZWagAAxPAP/32GXIj3+OaNjCqfmXTH\nVruBcC/+VXM9H7W7dTAgA3kLVvXuoIhl7aRYCLuOuNZEj4btNEIiDnxzDaCK\nYDQnylj/GszwJiSEY46wZgGMfba1+CPYZuJlHgTAHUHyapAAUsxPPgmuznp9\njE9FNcVLRlG949D3AmmdtHqTg+Q+njvjYiHr+rNMyc7+3+kyCMhoLC+F5syV\nKfNzg9W7SjnjxBxuyiTEYRtwR8xj6c8YekdmLqfInor3vhQzAyknqazxX2kx\nXJwfK0gKmpTX4ytb4QlejXVl7k09m+quGApubsqq8ZONRjNE96v63s/CRIv/\n5tb/nSCMj3DRHS3wGI6Aru8rJyUA2KAtLw5qQvhly2eXeP7CJa9a8cnT+UDe\nP5HXLc9xuMqqgZbc92GvPNW034cIulhGgPj6HRIEF653BZxHTe722050iA70\nKe9bjoNoczEu1O7Kik+hLup8kFUX9rUrAL5IpopVTORYKMyvzQRdgFBJtHHm\nXw/5vR/V3qP8AJAyaULZbkTDwDaqOP9yPRHYEBZwSMVhA1PwQ7DAWuaUvgm6\n9JgO9U7vOqLQfau1pDXO+Uy6KVXCXqtvs6GNj2/P5Fx+i0wUHodd2KKrKOI8\nnJPi1Slsos74iEmTCUkELUonlaFRF2q4/pHSoGOYuVEe/qqmQeB56h7rQS3w\nrAm6\r\n=kwFi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b52196498.0","@material/base":"12.0.0-canary.b52196498.0","@material/shape":"12.0.0-canary.b52196498.0","@material/theme":"12.0.0-canary.b52196498.0","@material/animation":"12.0.0-canary.b52196498.0","@material/elevation":"12.0.0-canary.b52196498.0","@material/feature-targeting":"12.0.0-canary.b52196498.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.b52196498.0_1618862315613_0.861778007729836","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/menu-surface","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.8ba3e298c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4c1ca3413f5800517b1b3172a7d3cbb8e5e7f72","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.8ba3e298c.0.tgz","fileCount":38,"integrity":"sha512-WNjIzde8A1klhj5NUlhQ5e96OWGft+sizhqyGgaholGymOMcgaQKtSDpljp33BiExvs/1R5IBf80zowIEKvqLg==","signatures":[{"sig":"MEUCIAQTdMHcdoKnftPlQUmJQQcibSMTLkY91VAdcNgTOlFAAiEAgmYhplPvzeWPs653cImze36T6tR7LcuToH2V0PxVaow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDIVCRA9TVsSAnZWagAACIEP/iLUA42ghXde6iXs4+Ot\n0KlxFnuM3mHx87FAblhQB6q5Eh+dj+Kiqw0E0f5Qhg9DEz4Bo+B+VcDiXL3A\niq6pn3v8CtumXgE4G+hmi+W+Zv7ZBBjd3THj+PrSgvte0ZOShFVvROVtNwx9\nyLQKJaSzjuRxjIje5GbqCQcHuQ6hfkOzuPtT7z2XI/ytNzpEQOAxW+j7xgRy\nlx6RebOdB7X9hPk1RmdQHpCKnQhGL6yTzKZTCkVA8pV/7fjCShFz/gJQ8x3W\nYCuKVqwFSBbZZDiEssebyusjJw+fnKplCI9EAIE+RaPDbwUA7XCgDwwWTRrK\ncV6VgjiQ9xvTFaFO+L0DZPbzacU56DpAzQd9SEyK+2YU4sc5lKSe1VQIJeIN\nUWeNOwwtBMs6uESvA1HRKcERRWYSkHtdg+0oxFeTIzoiPuSjJ6UIiw7cCVyj\ne1xPTA2mcpQfMwSuvx3XDu/1kLndNbZx+tOKurt8liXyL08PmtEyKdvjlVcf\nq6cnfj2Dhrt+b3AYiSsWf1po76iLShG0pgi+4+AkM7VKvaAkbTKrdz9JegF8\nfBTukHO+pXLN+76ypLFicQ89KCNKEXsZ+3y1xqzVyhRCHXiJr1y6MlKIb2If\nrS9cETuVZ3O1q4NnLd7YUVUsRVJSZM+WiBrBW/ZRALwKPPMKLfhlYZ2SVWSu\noUwl\r\n=0iWZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8ba3e298c.0","@material/base":"12.0.0-canary.8ba3e298c.0","@material/shape":"12.0.0-canary.8ba3e298c.0","@material/theme":"12.0.0-canary.8ba3e298c.0","@material/animation":"12.0.0-canary.8ba3e298c.0","@material/elevation":"12.0.0-canary.8ba3e298c.0","@material/feature-targeting":"12.0.0-canary.8ba3e298c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.8ba3e298c.0_1619014165465_0.6458247862978166","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/menu-surface","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.c629eab71.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d13d156965820f69363dbe75712a6964d033f70","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.c629eab71.0.tgz","fileCount":38,"integrity":"sha512-xG4/teF7RF2wTepRAJfLI3OygoXL904wfieAh3OrjRGQr0YludJR2Rw7nVzhCWyHx3GtafoprE2Mq3DV5rlxPA==","signatures":[{"sig":"MEQCIARfuBSolDKQ/tepsg8HSgLb3UuNRVzUjYbmSdBcoe5WAiBbquO0p4Tm0hRg1riZN77UCWsUJ5+tPiYBmC7eo+7kVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIPBCRA9TVsSAnZWagAAT3sP/1vurDjzxQt8E3SfA0Cc\nMaolIFEr6oB7S/6l/FBB2Uq6R83PmwPJs+34vAK1c57cfNB2LwvLdpYmH0Kb\nzh+uw2RnB3VQFoLtMeREX2QGheX+PIDTjyTK7NCwezIhH3SOVz5F64N2+q/n\nAePVORN0sbQSvqhsaa4g3XjJ0XzH0y3dN47DdSCaCtqKh+PS6pUZwDuPGxKw\nfyaNf5htmpWmI+lF+AQ1HCAyIsytCFLRmX4pKDtR5ppggJLql+NP719wskfj\nvs15C15pBdFmVqZUeAwTp3kBerRQExImSJW01mLoxvPG5zJbOkqrJzm+ONRY\nd+fvFWle7uD3PUpLpnv3nFI6E20idrZSb6H01RzRoNoX/4EvBsRJCKr08Joh\nFT2OiBmLSAS8mgTvuE3V9WHHoHLW2kMESLC7cj5LO5llnuBRHkRNMYZ2xFLR\ncm2lEw5GIrmhO5rHI8oKqgQ/S8MLMMsKL6tm76DFEqH6u9FXizIJsmlgkOzI\notbEixj0IQ2nSlnAZYTDLpS7Ce7gygxLN91ZtDzMtozrQqJ40Jq5Aw/3eN+e\n/JdwdKEVaiEwIU8AJ8d1aRgXPsBfc5C6LTlOTXfwspvJ0VcII59mfGF0dNng\nnf1+DgdOZhxOSeyxUBm+LUQD7lOyo+7zxzD2c/D3JRW7wCZxiTkI38HEu0ca\nnG9I\r\n=g2vo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c629eab71.0","@material/base":"12.0.0-canary.c629eab71.0","@material/shape":"12.0.0-canary.c629eab71.0","@material/theme":"12.0.0-canary.c629eab71.0","@material/animation":"12.0.0-canary.c629eab71.0","@material/elevation":"12.0.0-canary.c629eab71.0","@material/feature-targeting":"12.0.0-canary.c629eab71.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.c629eab71.0_1619035072675_0.7943826004135865","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/menu-surface","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.8ace3b810.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b561bccc2a17360483d017e7ef433eb54612122","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.8ace3b810.0.tgz","fileCount":38,"integrity":"sha512-kklpcXYfQ4mpgLKi3O8Tf7pE7I0Njq3EJNTnXmpQZkyXHSduZsewNpUjSB81wDr44nJyqn9emxl8i4cH7inzFw==","signatures":[{"sig":"MEYCIQCGQ1g5283GvDKC9K2ZuDjpn2MQrD6lr/YlZ+V9i5qXvQIhAIIj4Byg9tHrJfMDozzEctmIvW2VEP7d0YiJBDk17zDX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI1QCRA9TVsSAnZWagAAVekP/2n8f2YIVa5g/pGva+qu\nHFX50nPpEnn5HFUe365BimS7TXQQtIDz5WwIJdnvaIwrHPZbe/Kc8UjJm8Ty\n7wNWhp1dC33r0T/2Iz9UorQ8n/Rqtyw8kF/yYQDavyxhtSMPmXw4DB4DTMLN\nGxG2//oZTw8MNhbKiKde8dXTCZ+GV8Tk+Rvw861qKlkDzznG70fI22SqM+u+\nHpXYL09ytPIju5DIOCTajH10zxQGLSUY5HhlufivTn+CrLXhpk8CUk3MY06k\ngdfEZUp9u65qjBIcRJf6xuVQGQlC3oF3CcvVVZ3L6i/dC5mn98E+UMkVb1KH\nYkPax0ZC8yNY4UHMmPs2fTf+2bGK+g7qsub0Ip3jRInE78BGZUVsf8c+FYbf\nJnyeuSOAo95KEZXiRTZ+jmselubJ9m8AVgJdFH1MoWa93Fl6zVWtF+T95JQq\nDytDDUbRbJhJqRYV6h68y23xmfoSBH42DUTtsmH6rXh81gabjvLRBBhSHU09\nA4t2AD3MAPIre/+DwuQYmOQnkmojlAomm8z7MJXz/2UsE9ix5buycz5maPgh\nTooTyTq79RwsTNX1j2LRZOkSjxzaFi8L4bEq/3nxCj1+M3zdkNOJmiyvC5qa\nyJEnz6c0APpAVubOkyUog6O1Y1IIcCqTUPJY99n+mv6OHrx6pWYSS2cXtKQB\nhrQF\r\n=Qljj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8ace3b810.0","@material/base":"12.0.0-canary.8ace3b810.0","@material/shape":"12.0.0-canary.8ace3b810.0","@material/theme":"12.0.0-canary.8ace3b810.0","@material/animation":"12.0.0-canary.8ace3b810.0","@material/elevation":"12.0.0-canary.8ace3b810.0","@material/feature-targeting":"12.0.0-canary.8ace3b810.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.8ace3b810.0_1619037519643_0.7196416099798435","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/menu-surface","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.70beaf42d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b44edd482c74a537505165c12144af22e3569b8c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.70beaf42d.0.tgz","fileCount":38,"integrity":"sha512-63hJage3Dxte8bk8nVp/rg+R7N1x+aNZyQppfFtXotuYwoeuSHnV+ILnBnTbLZPzEH4gnKk0TxA+zW1CMpBfoQ==","signatures":[{"sig":"MEUCIQD88IrS1IfrEtKywbKYGGh5xy6GKRa9plxrNRDh1glwHQIgR4vtYRwyLmnS0qV2YT2kEYkaffFRdwPzAmraUoEkPaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggJADCRA9TVsSAnZWagAAaakP/j2egVlFlOyez6FfW5kB\n5m1DVw+OUJJtPEKo6YNI2sez76r7oo/evI33lo3c82S+Bz4D3YtejrvtArhs\n/U8TZmZH8OOXBdCKhf87XqfYoYYcX6eqWQkSZzNj+0HLbth/ct86sVF/PT43\nnR4m/2oDp0v3+w/EdCNYEyQiczCSJh55e51CK8BLNbCa/lpOkMCCeaq62dnb\n1WUGjtFLwodKq+eQNstOexoM20kxHgYbW31PlARAI3Pt3HfULrnOCsNM8djV\n4mNwSkxea6ZRFkJN+kzSlSIwMHnAruhV52jzJEHg+o6zw1Q++J6KR12ioTFd\nL5nUFYqCIQz8eAdsD1VTQUFRqBfWXZTF516CwiSYSdb9USEroio2DDtjbnJt\n5EqgLz5KZJ1PaC9blVXnd7Tz1SHtJzjwTww5Q/+dMNRD6a8wv1XVUWQJ+9fl\nTk9Rtj3Rs0y/yK92X2YJ5DB8ekaKb44l8TnXp24cGlPFSRFHaaG346OEmrPI\n/0TjN7APsOwj0/JORQqckWnpoGXW2Lnl5M90O+Cdo/3ceoQfdnAsHYizqNPd\nwLb9zw5R0r9SU58CKjJ/GR4pfDatT7oYeVR1F2jOkagDQt5S/YnfWVOOjNnL\nrxqg4QDPBZamAIzJYw+HXWtBdBIgfzM9dpPAEEy8+mmWy20C6+CGHPmlCn/J\nDE+a\r\n=Zfuz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.70beaf42d.0","@material/base":"12.0.0-canary.70beaf42d.0","@material/shape":"12.0.0-canary.70beaf42d.0","@material/theme":"12.0.0-canary.70beaf42d.0","@material/animation":"12.0.0-canary.70beaf42d.0","@material/elevation":"12.0.0-canary.70beaf42d.0","@material/feature-targeting":"12.0.0-canary.70beaf42d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.70beaf42d.0_1619038210534_0.08840797686896851","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/menu-surface","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.cad489689.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"451111fb47419f7c83dfde6d1b062d69004493cb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.cad489689.0.tgz","fileCount":38,"integrity":"sha512-u9791ggU7Cn6otAfVyLqHXIYRAKPiMnq94e69K7YYQsdODTl/2sLDRmLKjEBlMB8ckAugHtN3o414QrPDJCt/A==","signatures":[{"sig":"MEQCIF61WVUI2aMTHEwFVsalPPLFjeVuy9jUXQ184O3xewFwAiBnT54G0W1ydWLYrP3jp5xFpUdCGNud4juxQ2MpmZBW1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggalHCRA9TVsSAnZWagAAz6UP/j02TQKQR1YGjNVsmhWR\ntDKhhyuAghyRDVu1awYuvhyZhpUbgj83FcrFqFMMjHyK0cJ6nNdgRql3cFfK\nqYdb2lL46l0o+JL/PHSTYsY0RlVz4WqyHct/GlBilfnD5TFuftJs0r32ZYTC\n3cs7kvInAU55jDVHWAoscR7Q2d4wB2/S00itTRIvN0B/BmrmlXfzSJGLJsfg\nraTLJrPc6dp0vaMSDVI1fT/Wws22YQOeC66+6X+ylTFyundFDf3agW77NQSH\nP5z5JvVZxWK7D7fvgpzDYpZFN9wvAmSOicMA5W1fDez+ov3YYF/rsLsxq5Vo\nEUSnAX+XvDZyUQoEt7SHe22J2kZAZT5jIOxzM+eUDGxbtn25D5Ua2Z2x21X9\nI4vhojEqJMNPysHDaBVzXSHV1SC2OMqEMCf0eQeo/mKDZro1mzMYSXA7C7ni\nyNK8k3cS2/+h5pqmgH9h5hi7ysm8TEMCOHmBU+VXFrZvc2wxFpkpNY+uHANA\na0F7guUlWKJT0eVFEkYpOEkqwgeRsh0hjPs+KEl02gFdpWv5UGXUJbqdf/32\n8S0Y9k4ZjicQe4vymkJlsuGp9mBz0AZeFeHuxXzirPv/8/90uZMLjlPtUQ4i\nwzPq3IbfXdUAwaKt4AWiKhiPxcdaG34oKKVWqamG4bRKSMc3PytqmiuMCoWy\nYYbU\r\n=dNSn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.cad489689.0","@material/base":"12.0.0-canary.cad489689.0","@material/shape":"12.0.0-canary.cad489689.0","@material/theme":"12.0.0-canary.cad489689.0","@material/animation":"12.0.0-canary.cad489689.0","@material/elevation":"12.0.0-canary.cad489689.0","@material/feature-targeting":"12.0.0-canary.cad489689.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.cad489689.0_1619110214465_0.5419807177155165","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/menu-surface","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.d928692b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2080b89a3043740a24370086f2d90e19ba7a6304","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.d928692b5.0.tgz","fileCount":38,"integrity":"sha512-XrVbrZfTtbBa/rXImAfStjce4ymHhwdEAeMou6VjcYDZujZJZ1fzbP2b3YRLTxW9FtuTePJwVjpGLVsnVnrTjA==","signatures":[{"sig":"MEYCIQDGp6VxvwYGkZaPqAjO+RqXoMhump9ZA7JFdcFAdZlZiwIhALp75wZFyqjdcmYpSaWxmCzTSkn3dPQmeKZeZaO+JZvF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwVZCRA9TVsSAnZWagAApLwQAIJd6e2ZuYGchHhuCPmT\nRsHMOjxFvuEkIfM5iSodGVV1/owW+OLE1CVOOoWOgc3nQvBqhGgz14tn6nmi\n18J/4PBcuHcnNbZ0/bbp4I31HfvQ+XvbDE0QOJ/cbcxoKW+ktVYJwXgVQosn\nSWYL9yNIlpl5fFaFP1PbsFvkokev/fUQcPBwHlkF79RD7sM596FyYCL7hV9O\ne3A2fkPWmWvLoyzuVVo7lk3wwKCqinOHcIlETCg+1D+W4ldbb+5lSpR9I+Rq\nYfMQP8gH7WUEWT7bKG3AcyWhIp8m8aWL6li8PRSdWG7rLvDfpxlu6yMiAZ5n\nFKsFrylTfbgqV7ZtXCnA9CT9TKlrfcC0rbURpYVbvfbhqJNiAKfQLvHs98xG\nj+bbjzX4PcUUC5xQjqAP1TuXxctHZzHHgDZY2hNhE9l1HcOwg0H9/yY692mx\n/Mz88dPwI4C+OnykY/MtMBe6oi4DEo6CpycDwXdbCR7gOS9tddwn5L71GG/+\nnkZ/zt5p3x17dgMjDWLl9LTn48mO3RZwYIA1vSclrD1L5zaaHaGfw4yPbvTh\nGkY8dCv2JKPEmg0GZp8GOyH+h1fHzVbylx7AWm4ZInQ3pzXSjZJOSpMjieND\nH8QjLDH8nfrvoOh27pkWbwaaXpRmrmrKSedJQ42hTCCyNxqtDFF0TdKSsklD\nIqMT\r\n=evof\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d928692b5.0","@material/base":"12.0.0-canary.d928692b5.0","@material/shape":"12.0.0-canary.d928692b5.0","@material/theme":"12.0.0-canary.d928692b5.0","@material/animation":"12.0.0-canary.d928692b5.0","@material/elevation":"12.0.0-canary.d928692b5.0","@material/feature-targeting":"12.0.0-canary.d928692b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.d928692b5.0_1619199321318_0.8362069758194706","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/menu-surface","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.8f68de8f3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c48cc28ea035285265ba323ce904a82a04ad9760","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.8f68de8f3.0.tgz","fileCount":38,"integrity":"sha512-skvXnpINFN5w2C9s1DUjAxxlDDvGN/QiiI4L7npsFBtl9+f1JKF0xDUMRZw719VoelBC2lDwoPtQojUprPX1Rg==","signatures":[{"sig":"MEUCIG1GXm8yFtssn/DdHKIRaLiP3hG53D1JyXUSmOnIiTz4AiEAuznJq7SjVJk7x2p2JChCVJ1G8OMrtgmR7MpZXdOhNSs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw5pCRA9TVsSAnZWagAAHXMQAIp3ADQlEpraEsB+BDuM\nRAHVvqz61itYgHi9FU91MCJv0tfI5QnE8oWXxSG9eMxZXkN4gicv8U+7eM6S\n4lDs1NHzNFDrR4bHGTn++8lDL8pntUhK3+N148cq3k43cqgopgJTphtD6Fya\nfXVEIe94VZwDYdjglSss3TF6rE70PxkMUc2y0jr/ZZcuqUVZbsjNOA98wUUe\nM4nvznDMqOPFXX62h3TB/Flw/Ht67vnFMJSEQTI8R1cLSwQa7jsH0URkx2wd\nFmkpg1ODvl1oR8g6eA1XHA9IulsxN04ATXf4AtPP3oPH7gM8J32zU+lFhm0c\n+reQObXeQAH7GsMUU3ofOURzkVWTPYWFIcTZOIIhrgBuNV/eEegMNC98sgI0\nFwGrfE2liFYXaJo7uwCJQkoSGyg5UXaY3aSg96bJX7HqHTkbnrjXkwwnmkXr\nSG3OsZu5OWQfL6z+NOgOh6Yi2zs0EL8lv4monLAi+v/eU+z6FPsD4eLWhKdB\nxBZP238D+e0ALR2LN/TKQ6JpT9mDc9GRAoaBfMoyLCrvY1p3ryvSVQUO4fOd\n4EGVq+BaARmchuXoeeqhqNs9ePaFKmM5Fg3ZfxhfuI2x7/4A9DcEQq2dT9bx\nqOe4K3qNw1EnJMTKUIaBiv6rbzceJecv+fiQuLZA5rArfQwp+elJuh4WbZh5\npKRm\r\n=2zVM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8f68de8f3.0","@material/base":"12.0.0-canary.8f68de8f3.0","@material/shape":"12.0.0-canary.8f68de8f3.0","@material/theme":"12.0.0-canary.8f68de8f3.0","@material/animation":"12.0.0-canary.8f68de8f3.0","@material/elevation":"12.0.0-canary.8f68de8f3.0","@material/feature-targeting":"12.0.0-canary.8f68de8f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.8f68de8f3.0_1619201640954_0.4883564855193574","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/menu-surface","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.05753cf77.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fcad81318fd2f5d785c971b4f1ac7d1e6d56f7f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.05753cf77.0.tgz","fileCount":38,"integrity":"sha512-9BCACQllhzVqZDWhFMF/pzN7AtwTkubrLf733ZtPDrkQRTfnUDzb6xNQ3yemDjbTo/t0LbasLmgrgtMhgydKWA==","signatures":[{"sig":"MEUCIQCN388aob9R+S5dIYSWgZTI+zRA7+1EVIo5vrfvlPV8iAIgfvq4Iw+fIjQJoTOfxKvcjHGaG/FCYtDMlySrS5JfuH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1u6CRA9TVsSAnZWagAAJbUP/Ri2B6iYNHjyECaR0mbL\nGIzvNbZACudA2mLCdTPtXxQuHi3y/+93m1+VY8S2TcJO7+5uJq5ouOCLDLji\n/2C3bRiaiPi4Jcv4sMuZVqwvFvCy1aDHwZDIYMbWx2lYa6ZNduLDXs3UsiCn\nD1zbN/EEg7OfgWcZuIrwJGcyPNGuT5/ki6dXkKrqNsvVlOegmZMLZaPo4lSY\nnQROGbEamXNaMvreaqQ4FmYnuxJfj16VMgyi6eJPr4fCjJghOK3n6JI6Gk/z\nhBvvWSnGub2VTxNRRD2Cua1rgsAgNrKPIDxpxXP5hLEPNCmE2swSeQCqKcS8\n4JMbV98Uee5zq2b4mE9bxvtR4hTJmkybQFVFJwBR+P8Nxxs5+xFGQW3TNnzn\nT6J1JQ1ziUlSUKC7EZUP73wT58FZ9do7h8dIfmqZ5R4vCwfAEzkIZcQJZA8I\niOTIHVkGd+VJxDO9vwFN+xuu8AHCRxcBYJVuCIFXcjPzh7rcZOzozo/+zEBs\nm9M+bCru+Y0gdW/B7Y/Tyjp3xsiS5fmqrkNYa+uBYsBH4NaWDubNHxQSQmod\ncI+dEP1YxTyficWgimZ1zZyOE/kDJwpnPLiPtijOGuqno4SEF4JOIUzcPClB\nhfhOOgBRUwojjGBx4y9FU+tc1KkW762G6+agvcu74aEDrUklCf5vXA9ZO8go\nqb0d\r\n=uYcN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.05753cf77.0","@material/base":"12.0.0-canary.05753cf77.0","@material/shape":"12.0.0-canary.05753cf77.0","@material/theme":"12.0.0-canary.05753cf77.0","@material/animation":"12.0.0-canary.05753cf77.0","@material/elevation":"12.0.0-canary.05753cf77.0","@material/feature-targeting":"12.0.0-canary.05753cf77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.05753cf77.0_1619221433813_0.8896284798713017","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/menu-surface","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.ef43e6d96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d828c817eaf2f26d388df8dec07beb39ba9113c9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.ef43e6d96.0.tgz","fileCount":38,"integrity":"sha512-kc9wiIlp4e8PNA6fyaIPa3z0c9JZAqWHz44UlC03Mr2CCf3+Eeq26HvCu2Cuywte9+RvOOke8tqmzrOvqFI1RQ==","signatures":[{"sig":"MEQCIAuudSuAvW5FH144ZWWkSdVpRsKalgCSjTDiFkN2BjyjAiB5TvuI+oQgvxdAY+6ikwEp7Kd0+TOlgDDLI1Y2YzmZoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg102CRA9TVsSAnZWagAAclIP/AlYB4/tY10U2Ruqv20E\nxKnbpwbY7daCZYphcnbKIUSoOfgtsomSJpwT35sXsNfwdOeVp5sdTtLY6Xzp\nLxhSPuq/UoulVS92to5jIPj8tVdPBDbWZqfeyDHA3q/qM0WDXOoT/mSJ3kvd\nHJUcGwUmLiP+YRXS5mdkzyWleL1ooISPLaf5sql0Vc4O4Faihd/rLCkclR89\nJgnbM0ULucW3huMdJxc5L481S2+fAT9B/pt+1/IumdMuY2sQuODr0GfX0PDk\nZI9ofH+7dP/4W0zm+lUpBS7v0rjavBPdjpu/QSlVNiI7gPlTwXFXuMFaTqW6\nRZyfDIYuYlS2a2X0H63bY8f812GiAQfCqJJUth+ua2BHJj2q4X7Na/JUgnIB\nEx/D4c/fDBJ15zmE4xRniBcRakTDPDkShO54Uiw51w/HCcXSgKuyMFdFyNys\n94YCy9cTM922tR4hAqGKS8zkLCQGbos0mFTrpq4BD/iWfhdJ4g4OPrcp+m9s\niARDWuk3MhN0chHD8u6mAiN9/PD3ybB7vkCpJXLP00M44s+JK/Qq81BtmHpM\n9K7JTTdtWwb6u2K/Erizisi9GaX2WYBmuQrerII3Iof0JVAdZCYJVoh4bn5Q\nkvpX3C0W3zf+iXjjsd0WkuiujbCJe4nCYOesFY8f41FlwbMv1JW/GWqLiIGS\nmpXu\r\n=CyV3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ef43e6d96.0","@material/base":"12.0.0-canary.ef43e6d96.0","@material/shape":"12.0.0-canary.ef43e6d96.0","@material/theme":"12.0.0-canary.ef43e6d96.0","@material/animation":"12.0.0-canary.ef43e6d96.0","@material/elevation":"12.0.0-canary.ef43e6d96.0","@material/feature-targeting":"12.0.0-canary.ef43e6d96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.ef43e6d96.0_1619221814362_0.5036495964127163","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/menu-surface","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.197f64fa2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9a83f0fd5117425fa749d964462b7e1fef8cded","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.197f64fa2.0.tgz","fileCount":38,"integrity":"sha512-r6OQ85pHqLiECHdUdfpLcFKa6bsjxYGeM8EeuFHFceYMM2UtBP2ewB5gPJeaj2osHZiBBJXITW1I/fc4lSbuPw==","signatures":[{"sig":"MEUCIBTmXxAZfP5D2PbMkB7PyuWlMOkf+ic3I1OiC9y4nKs2AiEAqHjkggvQXAX9IwElqVi/0hP88igJTOMa+AifgEPapTA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvQSCRA9TVsSAnZWagAA3+YP/jk6/GxXi+ke/xBl5J0m\nfhYBAZCE3ZZdRiPnmdk/8eVB78kXoFV2xEMescQqI3BON24nORRAFiWeUXj8\nkagzpzaVP3bAH8aNw2D4LSPYJR4ZrPhq294F8RKL7XAaixyLm0yokO4ttoEL\nVARfRZ4o1F+J3UCmPiHcR+0aTy04dY3kbjtxAnLs78v2s1755KfXvU7FoDYG\nQB8LNbrjC5p58oD7zjxU+76+cZ4r7QLjCXJOLvS2wwQnIgRFbzOL+ddNk3FV\n3NP5AkR/6L7nsp1Frgdgy21eqH9bXS5FEMIPIyi8JSzy2dD+G05Oa2yEX8Qh\nEadQm8KaLfVa0ulkzv82tiHFqKHLJXjQzT4hq83pkOzHUbSlMgDpFDgqo0VC\n/jGXbowcT+dGSMvNQpWBn8MmH4W/7SxV9soWOM+1qEJnVbXTw2C+3b2XSxzp\n5JULjEIrNrXuGOyIA1ng471pUFREcSTnnqdmqtmuoKew8C+6izC296PBUoMK\nOH+DF4c9PiZaqTLcL0kOSKme/8Ir8KNSWVF+luHHnuoGuQW7/H4Svjz5T8NY\n0QmOO0Ew3mznc6F+UVayRf/+lPTCXuVUt6Qdv5F+WV+i+b5sm18EclbRQjbD\n6UfPMQrhP0IGpXxpxvK80lybsfSPMnZSrAU68mYTZ+BghYjtBNAe+y1AORuw\n45vL\r\n=akXu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.197f64fa2.0","@material/base":"12.0.0-canary.197f64fa2.0","@material/shape":"12.0.0-canary.197f64fa2.0","@material/theme":"12.0.0-canary.197f64fa2.0","@material/animation":"12.0.0-canary.197f64fa2.0","@material/elevation":"12.0.0-canary.197f64fa2.0","@material/feature-targeting":"12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.197f64fa2.0_1619457042430_0.5292563504623609","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/menu-surface","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.55ad2d7d8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c703bb37cb0af658b14414a6284df6d0090b113e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":38,"integrity":"sha512-7r/YuJSofj6CVLz1SqAIFaF10a20jIw4JT55t6rWtPz0OOpcI/xxTEeD5Gq9RfpGkUhkGVa/1F4HLLVzxIYkuw==","signatures":[{"sig":"MEUCIQCYwkxnJkdPCAi/A7j7mreT+XV4DYkd6gv4u9Gzktc1fgIgZa6GFN6S+Ua9n6HW4/ExP6DnPrLWZ9VzLnGralJJEPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2bmCRA9TVsSAnZWagAAIGAP/A3sti6Ejjij9DkdoqzY\n6mWxm21e61F2LzZHVwUBysoniuE9nfSjgfeCzlQFgpT6cTdTFj2YEhNaiyt7\nUyCOcezwALd7UoBlkH5lxJs7/2scsvGumCYhClZ4VddNOQmwECBc/qjOtqol\nqKzoR9usBwxEYdWxZaUKQJ4tSBZkdr9YQSB2qBil5S730EXjcKZ50ihC/a3x\nRmGG6zskeUEd6rgfFclBLK75UEI9VWgItC7ZDPmdZmxoqGn4ZXdaKTBy9do6\nzeniK0C7gSH32URgVGvkRggIQp8FM/twHJZ59h/PGqYy3Rk1yCA6N02H+EIq\nGpPjnyPSn8fiP8hlZd8Fs5xZMUZ3yoTJARyBMcij7L4mMrn9WXD1dKLY+2/Q\nB2X4vHCrOgF2kvAILoC+eAcUIDN+ID91KLJZqeOsOZH+girgNg8EoLs3BNFt\nNyW/o6brbT1BXw77oJ77lYmxOv+9/9uw1Ove8ZuGmE4pJnhgZQrgnxVSyZOD\nmwtPPQGf5Oh5s1DpHnUm9UVbowYwZCFXMFasyGcfo1jFEmbxAH4HokG5b862\nF8dI3PEJaNbZFy4BUWP6+Qnt2OJdbqEbBFMSUyCtm1pYGV0LPFVOQIrHQTjU\nExiEnGkxuoogvNQbxE1YO/EwsaDoW8zWS2J13vWqZkEOVIKfT65AkUzUozmO\n5dzK\r\n=XfA6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.55ad2d7d8.0","@material/base":"12.0.0-canary.55ad2d7d8.0","@material/shape":"12.0.0-canary.55ad2d7d8.0","@material/theme":"12.0.0-canary.55ad2d7d8.0","@material/animation":"12.0.0-canary.55ad2d7d8.0","@material/elevation":"12.0.0-canary.55ad2d7d8.0","@material/feature-targeting":"12.0.0-canary.55ad2d7d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.55ad2d7d8.0_1619486438181_0.5211238573920447","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/menu-surface","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.ec4ac5234.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a53e92aec3aa587996788437696a7a049bc5f155","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.ec4ac5234.0.tgz","fileCount":38,"integrity":"sha512-2+YcGF9dNLUOGfySCMys87vqMhp4j+JOGazY1vY1z+YXwOH3gPK4CC/rBJ8TV+W9DQdcGGVxzPuOir5NHBj8Ig==","signatures":[{"sig":"MEUCIQCixZHtV9EDNzjyIRhsLwD+X2CJAQPkTLHhrT5CRet8XAIgbCphY4DIGEIjKe5DaIxjE6sm8Vfoelc/EODOyJ1kVqs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8RfCRA9TVsSAnZWagAALSMP+wb1QlVBpskwxdpuLAi+\nl59bDQK2mSdeYNY9Y37+V/Uol3ej4myYpawBDZ0kBYux0qD//2nTvNyNmmJ4\nB/8aZAxD7LzXqkGwqyORk9+mLvneVEnvQL4E3Zm7yphUrhvgX+mZZxa43yeJ\n8GFTNHd4OWpDFMkfRgA9mmFbbVXZKE6hAoh3NDrEEr20n78Cu11ccDqYMq14\nzHQacC+WVqjvyWXvdc9cB1k48k5upDROpZO2VNwpyCLpTqORCMBdW496Yvir\nTEqM0hdmuj6FEG2igMMxnmKaUNSsrDGkr3Q4afuF6HJlRvRnnmul2Ti4IFIr\nn97NZ6g/ngHrQN0tClXWsdunT2ozHNE7kBzI4eVJTNyTBnVvU1epkCR/lux4\ns56E77QaFG86s9xOBouEVnCbleFqn/esi3E5YsIrplHcYP0zyHc9hKZEbFFN\n+spd+6aw0t+LqjxuOu1JGjDepwci7GpiePkaj/faCUUbItso03YXozLpIxrp\n6niRnCLXIZOzAsi58kHCKR+YaBe5bijTLt+peUB2zHoOzsK9g3uedJ3wthrW\n70r2BxaltCPRZ9qUjrfojgyv+LaxC/2Zm6SazcsZugIrB67goGrlA2LQZTL8\nfBK9CtcDA6RwCJncqdZtbVtZuPULiFsiMrJkFym0nxX7kDZclC+MiZAJLOn1\neASb\r\n=NNJd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ec4ac5234.0","@material/base":"12.0.0-canary.ec4ac5234.0","@material/shape":"12.0.0-canary.ec4ac5234.0","@material/theme":"12.0.0-canary.ec4ac5234.0","@material/animation":"12.0.0-canary.ec4ac5234.0","@material/elevation":"12.0.0-canary.ec4ac5234.0","@material/feature-targeting":"12.0.0-canary.ec4ac5234.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.ec4ac5234.0_1619510366494_0.8595320933526529","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/menu-surface","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.b0579acdb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05cd37ee3c5dcab182045bd5d7441c321f51dc15","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.b0579acdb.0.tgz","fileCount":38,"integrity":"sha512-n3zSvtz1L1InybuaAJYzP++Puq7+Z1OGu/moYIlq/BATioU/DsyyVo4NzhTtTn4/7pZLvQnrqkZP00uYcJ2ALA==","signatures":[{"sig":"MEYCIQD31MQmRiE+Pchm28OBk9xJ+TbdQg8sm/aZ18+a01D7EwIhANSdQ7fNVrbdFNFaH0y7zjvyeK6ntkfiIEPXxah7Fnzx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh807CRA9TVsSAnZWagAAIf4P/i2TDrTkeSaEFUy5LcjW\nwJbshV3eeXJFH/9I3jH6JIpXTV9kqGig3ZLxhn2Nr8DlbxvFNV+FLvKBvGkx\nvuSJZzoqT8xVpyRhH0HUXimxRxymtg4b0bklNSiyRCIGZGAbCjl3AgWxy/Y4\nrpoUXCO1zvBrqK/nBTBJNQ6HBDngrB1DrRrad0mbIickLqFR6b3qMWXKwTcr\nzDUs1j3mRS3zHVmWYCP6SW553a/J2d46PGoWvDrLY/qzzU0AlOFOlCphpiCE\nVTcljm6Je6QTJdYb/uA2gxzuuXB2vPmE45ADwRBawjE0NzqqaberTyUcN0y/\nX6qhrfozESnhWlss7DYcwBmgiKFNRtkPqDViBC3us64HmON+jPkmd2rj/ZJ3\noq95+qI5uMuUtHy+agMQk7v9SqQ+8VMvYmBtAAsk3fLBY4QwcqYKe1XE0OLQ\nEdJekWTdlqQ40Tk5OJkRAMAaDl9012iMLNnLQqiZozl/fPAeK+yH5jTKR1tN\nWpSDwtuQfZolhMVsBd5ccZrMmjJ76gQ+hIY3o1QIEDN41Xxhf3lpbMJB0p2D\n34Gc20ybkWMDNoImqXATk9LS+AviCxe5PnPA0m+yy282Uc/T3/OgboYk1PAv\ndN5Xq+xIZD7jCPY1msF6c3Dnz86z4qau9OiyVEcb6vklcrtUmRk5INb80OCi\nVZd7\r\n=m+LN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b0579acdb.0","@material/base":"12.0.0-canary.b0579acdb.0","@material/shape":"12.0.0-canary.b0579acdb.0","@material/theme":"12.0.0-canary.b0579acdb.0","@material/animation":"12.0.0-canary.b0579acdb.0","@material/elevation":"12.0.0-canary.b0579acdb.0","@material/feature-targeting":"12.0.0-canary.b0579acdb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.b0579acdb.0_1619512635333_0.9068801454846027","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/menu-surface","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.81e2d4ff3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ca1ef0d2b0bf821c04d13d23aff4a124879be11","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":38,"integrity":"sha512-Pl6O+uSbAE7+LfRf7LI81vHHjMACiJeNDhGURftb/q9QyP8oFCSjQafApXdSy/3qtCkwqlAVMfIvCg3N+WfvmQ==","signatures":[{"sig":"MEUCIQDjrKEgQXf6RUIz9s2BApkN+2fC3OaMuhMe70GB4/v/tQIgKc6JJ3PYjP89cyQ5TkOqO4MiCuBmo4nyAGSk6mxBR0s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHr/CRA9TVsSAnZWagAAYUYQAI8Gvk8gYT4UASq8sPU7\n52lcpfAvgKCJl8hx3vOs7C2e7T15lgVFHw48Cduz10F6sB4nAgCwlHn1xSKs\n44k/MaBYf/erAN1EhIGe0glMYd44IBsYEKMCdN339FMQiQQ/3nwU0yaNUFsz\nkHBeLqnAMHntUaL5QmHIgiXFoqWwnyUrSz45aobU1Y0FgUWEb7jcebQTZPDD\nv8slo21Q0OG5x/vFG+QFMxD6QTHDP4sKeoUZALs32CF6uOxy5bUVXZu7pPMF\nEFZEWK2y5ldROH0BKXsrgv/mZYmKfnl3WzB0GmRJKX/8BBOa39RxkoRcsvMW\nTVwzuK+VyU1UNcxrGp56wqnr6BhUzg1hJ6stv+nHK1ZnOxWlyLBnNZ1uDF93\nAW+mrZPBjWI47zbJfrfYK7qo2DUUVBDKUeVK68vodaCYuYDE8Y/8dTKvtwaV\n+UK9vr8MFTlIkHEMZr3h03eyaFU+VURTYsw9fxponXTlw2Y8cuMRrpg2xb43\nop0XNj9/PMsHKq0nPWYPO2rBodSEux2L4bVvx+tYA0g17J2duMNSqXn/0dx1\nGl7xx0y/5lojj+DorRuCf0yVjJ7mnL4BiF7oO8GTUdPmMvA2oj+vpK3dVZdJ\ngU+ElemqR6owCnuYpJDOnZJFu1DU0LntWzqiHYL/0Q4zCVz0LbV/d95tNCCv\n2/UY\r\n=Zs1G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.81e2d4ff3.0","@material/base":"12.0.0-canary.81e2d4ff3.0","@material/shape":"12.0.0-canary.81e2d4ff3.0","@material/theme":"12.0.0-canary.81e2d4ff3.0","@material/animation":"12.0.0-canary.81e2d4ff3.0","@material/elevation":"12.0.0-canary.81e2d4ff3.0","@material/feature-targeting":"12.0.0-canary.81e2d4ff3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.81e2d4ff3.0_1619557118954_0.15352312618604036","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/menu-surface","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.c8edee52c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4dd9ba5c604047933616ff8fb5b5190bab548bbf","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.c8edee52c.0.tgz","fileCount":38,"integrity":"sha512-kJBKyxYZo5IuPRCI/H2ujyhWQUc1xZujgBXRTZoLdI3POOjxHHnpw4pFaPTwYx+XReaH/FNFEH4Axhq4Amsglg==","signatures":[{"sig":"MEUCIQCLcA2hLOs7sK7E4JGD4X4MQCoOVtomwyqPIqCZFPFHpwIgGD+8R0EZYStY/IuvL3ws+TAs8dbWcNb11FgaR4OXBcc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIZTCRA9TVsSAnZWagAAM3UP/jjdRFgXU9ecc10oRnD3\njjQ2//0gAuBerTUCmAGvKpXbBor5EszPTb73GlNP1K/1WRLku1U1CQtFAufP\n5W61bI6mFIUNnA576aKdBdebGoCLyDMUrT1QJoGkGgrRbCNgt3Ss8/jqgkRK\nRP0h522iC0rCnfeWYkIbNTDlOaahlz60EpHXE+ncCs9nRos0ZuTAs2yGhn+C\nlTp+YE7QQHcJlsBq7ZkNYvWWPc5V6eYDqSupkp7s8V6kbKiq1spgq58jGKwT\nrXA6Bp6kK2NiFIGZiPkX8VCxauKx3aD9ludaMb6hOQ6Rf6QLKzLsRBaYti6c\nm8adob4AedN7gVzNSevBWkTuu1e3b6QRXtQwBPiMKo990e1j6m+wQPwwB/Sx\nWiJvGTTL01/PS/SC303zSdjGLmmzAt+F4s9vxeyfVJXBH0QGP0jnmZSwXjyx\n1lxEzd4FWbnvceLO4r2hnz7ZfpnIqVPpTkjgfstOezjl/M5JI4IJg4Xg5EZF\nsfXgmVD4WSp29aeO0Z6dkt7ItPfZ99VC9yXTn5E1wGJ1eQtX0MMxEfuOx0Zd\nuNdp50ZTR/M/VYC3P5a6Z8UWxi6eWlHEKss3+1eDRvyv+pfa0nWRx7Ag9hZk\nFQASc4tcjZPIOh8I7lQCzp7Npd0aqHalYWR12fSz+bmtlEo7s0gJPBSqbdES\nYpcJ\r\n=Wak6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c8edee52c.0","@material/base":"12.0.0-canary.c8edee52c.0","@material/shape":"12.0.0-canary.c8edee52c.0","@material/theme":"12.0.0-canary.c8edee52c.0","@material/animation":"12.0.0-canary.c8edee52c.0","@material/elevation":"12.0.0-canary.c8edee52c.0","@material/feature-targeting":"12.0.0-canary.c8edee52c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.c8edee52c.0_1619560019494_0.5382185714499736","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/menu-surface","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.f5b6110d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c5ebae8cc77c2238228673d3757181f11ddc919","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.f5b6110d6.0.tgz","fileCount":38,"integrity":"sha512-s2nfV0Humip+CBPJq/fzcRbZS6/XpHiTEwGJXl+uqEdMklQmKYOVY5fP9sVtmn/I9wqLhR1I3flDahwfHCfaOw==","signatures":[{"sig":"MEQCIDwHy5N0tRJvgFLxeS9YELzoemIT8AMS41tRl5TwCsUeAiBzCQjFeNU5YDQERlmJ1Bp4Az2KOK6n40oryc2SQkU3cw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiItLCRA9TVsSAnZWagAAkNoP/3diH/clNWYe/rybOSKE\nIo9W6GrgL2KyuU+nzLsJ/9m7DqEVBVEYT8zJk6nQADxKtGHMF1dfPSfWflDO\naQycsGYJZSTZNtE9ueGmHM7ifttRIGdpJVCzAXpFHrQ/nwineyP4NBp1hUrB\n8Pw8EDydC5egVhiVpGI437Mh3GZWoVtkKYTgj2NYSAckJMxnWdfHNe/EQYVM\nnh01yK3miFF39GKuwzwrNs7eNbHF28sXei9/IbgsdOma8P2nq5wmS2w3TKFU\nBP0cdrrEMbnC+Wl4Eh3jDpZnpRN0kCkrVQ9hMnvAj9AdpJJPyv7F47bW+cY+\nUiDXSnyC6XcExjOyX4nd6BIbtxwHaJxCV3B+Btzo3d+djtHV9il0VDD8ymOo\nYSJBB4NfxB4wbziph0SfeJibO7mHrSn2euROy2V48AWEhwMFtT8TFhdFRJau\nLOgsUGdMJ1+eb8kX2xNUz/lI3WuMgErgoC8Z+6iGDwRVYNmvC7Lin9pBl3tl\n6FLKZt1laOEIgNSl5hXSgJgMhD8whugv9KqQwdkIyiKUX1MCQWt5Ne9nmxhx\nwNlfKUH/sMu/6of10uGQm9amhgQefOmYMWh5x0Hb34Z/2JI8DVC7LHDJCISp\nslaH7zUY7RLPBhz1mAHlyJjy8tmjjzwrds/pnaLA9uSQg8lzHdTc0Rwn7uAr\npaEW\r\n=5LJA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f5b6110d6.0","@material/base":"12.0.0-canary.f5b6110d6.0","@material/shape":"12.0.0-canary.f5b6110d6.0","@material/theme":"12.0.0-canary.f5b6110d6.0","@material/animation":"12.0.0-canary.f5b6110d6.0","@material/elevation":"12.0.0-canary.f5b6110d6.0","@material/feature-targeting":"12.0.0-canary.f5b6110d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.f5b6110d6.0_1619561291192_0.11493871636580044","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/menu-surface","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.cee9b9e22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d98ff99855696b80f39dc88c32037cc1a5c545e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.cee9b9e22.0.tgz","fileCount":38,"integrity":"sha512-HCIFZFqDAvF5iUBviD4KEOzxsqkaRfVUymeLXoZCQZcNmbubvEmZR8VKdjJNBtgAF4mMQUex2SACDW/KpbjccA==","signatures":[{"sig":"MEYCIQC90OKfqm5QKoN5N4MrW7R46LQ/j5DMPbyK+Mspfl6GGwIhAI2Dhj7tZyZFcl6DlQ7rx3K7+SWD0bdXKrLeKwRQAhku","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKixCRA9TVsSAnZWagAA4OUP/3WV0R6GurDxs/Lx4oHU\neVzPX6U/W4EoXIJOaueUObA+vM8nfXfVh3iyHBJJkTy3AL929yEkeq4qnoVm\nKus3By1tsK2WLmB/s5MzrQO+8NosRjK0hMrPkCQAJbw45rW1wuMGgZJFE03i\nwb1IGlf28YXItQaRT1xn/bTch7OZ3jQ48yGRrABfBKFXaUkS94r6QQhkvcAi\nmW1BgV/LEuQjs4W3tRdPirqX6vWayecS4WcR7qRuhaSlzndyTHEhx2fJbDrM\nXif7JtuAHT/Td1DReoIQ1XrdZVIi7ZwussGXMvgYne2PfrguCHP++rZYcQKb\nUrISgJl/ZEM4qIHgKgvObXnDS3cRrvns7zabFP10kEzVn5CpIjY8tBLEgk4T\n4w25b7ZHLOhPfkaLq1xK6EcPKY/6sLu1ifWxLAQn+Y2nJGcfDO0KTou+3F7h\nPU3Bx8AkjtQnNs2Voz4D1IkoqOCaKbQQ71yKNDSSxwwb2Y3rMRHhqDhZpG5O\nrxf6pJIkz8IUm5SWFP5aSQmMK7wcz04zsJPmwulq/Mq0RPsfKhfnw/ARPwZ0\nh44E7PQ1Jg9ui/HJD4SgvvFnLFoDSLf2IJbLLvLMYyZMjFSZohXSZjMo5FnE\nJtwv+pH2JLN5AVEVsPIrb9rZQfbnp/1oNbDkumOxhWIK+ahL5pCjjb7XOkar\n6Kra\r\n=mDp9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.cee9b9e22.0","@material/base":"12.0.0-canary.cee9b9e22.0","@material/shape":"12.0.0-canary.cee9b9e22.0","@material/theme":"12.0.0-canary.cee9b9e22.0","@material/animation":"12.0.0-canary.cee9b9e22.0","@material/elevation":"12.0.0-canary.cee9b9e22.0","@material/feature-targeting":"12.0.0-canary.cee9b9e22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.cee9b9e22.0_1619568817385_0.1042422999829904","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/menu-surface","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.96e83fca7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e9331348dc14cf80b011ddd5a60afc26d216b20","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.96e83fca7.0.tgz","fileCount":38,"integrity":"sha512-6q23Yxg0yUjLydHl5+L4fv2RiV8GpAdCsYO+pCN/iBG6W7+t2gJHAVXnfL6SAuxZYcZToW9T6rM+eG3jL7dziA==","signatures":[{"sig":"MEQCIESunq5yMCn4X+C2V14pGJnnyt9m2P/7pSDNSdQRBiUIAiBXaRp+Gg9QGiPRduN5RNHo+YkFak2A+EXcw6y3awO9TA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiM0MCRA9TVsSAnZWagAAupsP+gOYVfBXoOkp3B8pEmiz\nqMjiGahxIy2uDiiUwnaB81YxVbEVXpAEofxv2x7I3hlPSKTmrnmPSJVxhRUm\nfAulJiYpGaOeNJ/r/RjTEDaMmRi0Qxf1fy6b7bDHH/wJoqvKzOgxnF+7ISVj\nCuzz9BAClRlPG+cPjRtdhaSFt7BeGG51oMDPUqB7uRTme1q21IMKdTBqbdid\nbriGX851n8dDxpn7unmWCYAQ4Z4yrBL2u0KhtD/Yy9mHLobiT7jNYr11vIXr\n4vgU+grQtIk5lWaDczZROGPhMmcKkJ5gnlmoNnpEKUwzXbdzx9tzMgGF1fkt\nzK8PCTA4FArQ2x7cZo0y6IX0HKEwLp+ktoKhaYFforWkr4fREWC6ZZDSzrIs\nLlZodfmtxBpCk5eJjqsWqajIpIJ63+JePg+v39AbRI0dHtiTL21ohs8Wlug/\nr4exj07tlH7qnQe+QV9Zp5Etdt6sYJulNxLBydkQKcCU3ozRp8u6fxascmBJ\nAVA8nAgfeK0DoWd+4r0Ai1JbkCZwcGq0KCAMDGtVJX2RG+3pQ+6kW3dZboI3\n9u/c08i3spBpKoE0u5poQh+UV+R46u8QnVqm6ITpFdN9N4MY+e+IAAzt3DBe\nXr4MzK1Vm5exZyhWpKIkB0Bc4yccEoIDgor6sXJ8nDcjlgAXbEe4JDzx3a6B\nm/ss\r\n=8iya\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.96e83fca7.0","@material/base":"12.0.0-canary.96e83fca7.0","@material/shape":"12.0.0-canary.96e83fca7.0","@material/theme":"12.0.0-canary.96e83fca7.0","@material/animation":"12.0.0-canary.96e83fca7.0","@material/elevation":"12.0.0-canary.96e83fca7.0","@material/feature-targeting":"12.0.0-canary.96e83fca7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.96e83fca7.0_1619578123917_0.8175263186316786","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/menu-surface","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.4c497bd19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7185ca38b3f130535ac49e8604411567f105118","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.4c497bd19.0.tgz","fileCount":38,"integrity":"sha512-EfEKwoo2ByXqMyCrj0j29RszoKh2AwJXAAeLkx1D0/4FvRm7qdHdOEhRif1z+L2ri1uUb1IWh/qwNrt9tWvzkw==","signatures":[{"sig":"MEUCIDvKRhjjokJu4/FY+90aDmY+Xs+85OBbnVLEr7/MNEQBAiEAoyRJm7Egaji9nduiigrBB23isMzz0s8ozrFdEoEXBsE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaFXCRA9TVsSAnZWagAA8tkQAJhHhjtmklfUYsoK+zIR\nHbQvzTE2g3ivF+1wT8O+JtZew3bKGwE63ORPDzPdtMMolYracMSLFPaqyEpw\n97WgQ8n4OrCy18d1zTKnEfnCt+3zpNY+anS4d4TjMs1oSIZdLnKGOsv1gMhw\nobMf02WvAy901t0hbgdhjsdtciijwnYli+mLXPWqJLO2haCuG2SmW1p6lw0C\nMkjpuenXliLUpIlj4ltHPLoXUt8TE+xXm420UIq+9jfB+Teyb1aBxhZv39zC\ncdlqcYu1n2FsnzeCcBJwlB5wBT79FO5Cf/2inK0ay4iySh0NsQFKRESTicYp\nJiqIKRYAoFLB/8LmTOi7KZNcyZ4c7TnHvoAcaqRFdCHfs2MoVVO/SCH9HDbS\n2ZAoxEe6qr+N/REbtsNUaWRUAQcvOIl7OilkRmrImqg8TygnAoCAh8mnBQcB\n3inwjoRKHUJ1FMyRi60AJo7qOrBP+fDSZX4gx4SIdtRVuWnNVJgQb3eHvm9p\n7eHkzna2xu3aggMzyxzuqaF7zAO2kIFBQnsPq0oClyHbjVVsZQ7SRjV6+QEK\nAijOwFlSoJ+LPUOjxEMMHty1W8/zBehurtx+kAXR+Xsuxm9M5H8BjkEmBRV7\nac6IREIFIFOPqDVx0Zsh00jSsRCJoXzvOKtrRBQesKDFtSj+zlIZ40YiDqeu\na39H\r\n=+FxY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4c497bd19.0","@material/base":"12.0.0-canary.4c497bd19.0","@material/shape":"12.0.0-canary.4c497bd19.0","@material/theme":"12.0.0-canary.4c497bd19.0","@material/animation":"12.0.0-canary.4c497bd19.0","@material/elevation":"12.0.0-canary.4c497bd19.0","@material/feature-targeting":"12.0.0-canary.4c497bd19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.4c497bd19.0_1619632470658_0.579599752687086","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/menu-surface","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.105b15b96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c84f05d541156c57ccc4b67cc2734ab1f856047","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.105b15b96.0.tgz","fileCount":38,"integrity":"sha512-K+uSnbUghjypgwDL9re97uVEjnA2e0hm6hs1Znjqgel2h6O2F+hms0TEbzZ6nqzd2zxUG6jIlpiF9MwcgKEabA==","signatures":[{"sig":"MEUCIQCsHJ6GYw+fpu4MaxyslAQRNBFOMZfrXZrzQruKo/EeYQIgWVoplXGgT+kx+Rwxr/9cqqjHGrvRtJwDMYTdCsbeGKY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgideCCRA9TVsSAnZWagAAZcEP/i75w9EsZhLw05LtqTwX\nmzVNAESO3Yk/2qVwe5dsLPZ+kecoD6Qx77valZDDnoRIWfjlWv+QYpEz3ghG\nH9Z/AqtMmZ4ciI2FuoREHZ/IBazWAGlvGXLMkd0XqqJ66b+V9uWy1BPV2sWU\n/lY9C2Ch0bumhR3kotAOvC6B7PYGwA9YU4X5fCYu0+707egpYL3m+BIIAD+r\nINA+C3Lbz45C3t0b+W4QEfWLbVj578MnsQShIznAH2oOWFikVz0nG8qN8fgL\nyFX4hLB9UH0a2ZlIHUs+ZT7ip2EM8qg4UbkRYOEKNWIIa3o9q1cJzzztewnD\nFTubpUoCVip0gvg4wKg61Q6feJ1UCCrbhmJw+A9cf/ucQ6rJbyXLz3G8ZKUJ\n9E0Jtjxz1GYebrx14jOfhj9k8A+r7Vks9abKkJzhqOwuzMSnZm5Vm4sUN+Ls\nApNwmG25LM+AVEtjvx2MjMu0f2+SwaIkYLsWBJ8qjDB9dKxEn8MD4Ug25GIk\n8nr/dkSaprJ/cxIPaioGEjBkDx+CjUCP6oeouA+n+HF8eu7RsDSm/M3y8iqc\nf5r7wZdw8lRy66/s8YlVN5R9NKwvWvSC/dyweXn+Oj9nTjL7mf5UCBMIcEsW\ns6HIpCm4jvh/dkXqu+xCk/2k8P+Vl1nRO15TNdBT+dWS9MKyUmmLTp2seaEc\nSCLQ\r\n=VNNe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.105b15b96.0","@material/base":"12.0.0-canary.105b15b96.0","@material/shape":"12.0.0-canary.105b15b96.0","@material/theme":"12.0.0-canary.105b15b96.0","@material/animation":"12.0.0-canary.105b15b96.0","@material/elevation":"12.0.0-canary.105b15b96.0","@material/feature-targeting":"12.0.0-canary.105b15b96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.105b15b96.0_1619646338298_0.9532623423529709","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/menu-surface","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.6e20259e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e44e301e2fa016af7fa4348999498dbcdc01d20","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.6e20259e3.0.tgz","fileCount":38,"integrity":"sha512-VdZWz5oXYXhrFyO9Qr5Snqafv3MLTjJCAS1JbLgjzadO6WrXIQa9c41JwFuC5sqAnbQ+ZiVbhPSukPaaFuUjPw==","signatures":[{"sig":"MEYCIQDq4D7QCrHNX5lkAq/W1uZNfp8pX/gQ8OoLk/xO0+I1bgIhAI3QWrLLCXSPZh1b+TTCkZ6R9OCMkpy9OYJpykV0TjRY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidiMCRA9TVsSAnZWagAAJM8P/1WHR3cHseR9STgmqYCR\n+ye5d6XVu7m9J/CR30EIx+F/N7boGFPLgXtaWLeo/B1eyEPbOk1G/MvhPzew\n2GmsTtgmZkdUCMuhqaqGR/2F1XlgiR/Oso9cYz05T12OMhW3ffzXClE3h97d\n7rfGaBYyurju+Qb+O/k6irE8GPwiKr9bNvBwPpmU5Znjx2a3GYI0n9rXqFPx\nDVPEJIqNO6CNRMVhr4ePL5rGgHkZcZcjXGI+yI9YBchOzhJ2qCjtN54Pe9d7\n3kk6CPlF0btWbmP05w8zMB/s+1S87aKYT9Q4pdeNOD/T0dRJ7MM0Bcx1JKKP\nmCV+gNswSjbeCWiEMVb/JNQbLI2VA0nkP0O9vCdKvPDUmxKkexz1exhQMoES\noNoQz6KvVnYjcZXfLvlxApKoFI4Zth7RPaINZzXC2yurA05705g7NqbY7Z+M\nyCpu+EdTKMsTuOO9saO0Ir6Rjqf4aWKPFD8bsKYoxsj27ydTRfN5fYPKrclg\nEogOpCSS4QPpAeAYL9enlssmsb2nwSlrtDchAUTa2OITxwmDJWgMGo+PyBDY\nWKe6YhjiLFU1KMZpEl+lZ1X2IQ6+0ZCq6ZFHKakrD5HQgtpgkwin82NpGQHV\nsYgwx+LSM21jgY3EFPc+UO57EFFCgdnZlIjjGMhRBubBvikbQKsAFoTkuswP\nFG/B\r\n=0iD1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.6e20259e3.0","@material/base":"12.0.0-canary.6e20259e3.0","@material/shape":"12.0.0-canary.6e20259e3.0","@material/theme":"12.0.0-canary.6e20259e3.0","@material/animation":"12.0.0-canary.6e20259e3.0","@material/elevation":"12.0.0-canary.6e20259e3.0","@material/feature-targeting":"12.0.0-canary.6e20259e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.6e20259e3.0_1619646604319_0.23827405860175022","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/menu-surface","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.0f79a5d74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"332adf90614d01074fc348ff4d4112497a9ba676","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.0f79a5d74.0.tgz","fileCount":38,"integrity":"sha512-g+AHdibO1QvDXtRDxeLGUq6KFLk9eBIbqJE2E/MoazRCCeZc8OlY+CYb4LMulzPbeoyUDpBWZJGepjE53fl2Qg==","signatures":[{"sig":"MEYCIQD0i6alHI7r8YwyatiGVHYUSH4/ckb8nN0TZte+SAvsBAIhAJJsERclv2azwG6Y16d0X/DICeKqPGw19kkmGERzCVJK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieUpCRA9TVsSAnZWagAABvsP/2L/4Mdl8mpC3C+7CLQh\nwcsV5eC2+FiID871Qt+nLG9//xxNPLWk058CgnGlEzY4gO/z9F1q7Ynl0cQ0\nv+vqQIGU2Sd68121BjDmHeInMjfXjkxynpir0P1nbBGqktIw5x/bazxwYrxV\ncaXC1kTVmuO28CS1JvbJM7ihbIw1xg6VQ1eR1hdBxyuculnPXpX9xKqzHJr0\nUXtfQiOpJPQjdtY9Jnb9dRRr8tIhXx72MTHOezFYnnfLEHR0TtjvvkD9Ai0B\n62A7Qkcj8CfG+6jwgtKMq08cj26asFgx7Sc3J2ok25Nf2iJ8YwG/RwIgLH8b\n2kMaGxKON+KFD+huaAOvirTlbt0B6KuAlxHIvJFSB1h8iy73wnoi8xoHpDXt\nh0Pccn77yUV+8joKp4aVIcG8jZsmQEKoeA1NuRl+SfZrRwNHd+vG80Bw41gs\nKFQAOzF543zLunsu4+W165g+g3uLhcxLRn2r6ujSA0OVAWIhq98MbGPT61Jj\n/B8nQbtw70+3GAR0nCXjxQxqGgHMpiGyZBpcF6qDj3hW9zpKV8n3yr3tQb8y\nvn3hdZf0KJ4BJo6mUjdaNjHSVB9OoWK3R/PjAQs6sN3b4BTiYmZNm7XEpIDm\nATKEpOEifAlBmLRnyU5NAXoH90ilefIWNEUsq6SHW5A4wcKRWhrdA5P5rK6c\nPfC+\r\n=H9gD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.0f79a5d74.0","@material/base":"12.0.0-canary.0f79a5d74.0","@material/shape":"12.0.0-canary.0f79a5d74.0","@material/theme":"12.0.0-canary.0f79a5d74.0","@material/animation":"12.0.0-canary.0f79a5d74.0","@material/elevation":"12.0.0-canary.0f79a5d74.0","@material/feature-targeting":"12.0.0-canary.0f79a5d74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.0f79a5d74.0_1619649832612_0.38954653107481185","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/menu-surface","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.84f3db9ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb4f1ed716da38162d3d6f03f2525dcba610d648","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.84f3db9ed.0.tgz","fileCount":38,"integrity":"sha512-a9+Lt7nabbnV6zVPnLKkfDLFIJdoua4cBR1KPUlQGSWjY+8JGUiK1eIxBFSjoIys8OefdPcPnq/XFHwjyago7A==","signatures":[{"sig":"MEQCIHKxS/Wu3zZ8fVEtQCRvUTW0brD3x7ML3V2jmQxxJlixAiAgn1ujSQLR+8/VGePHqVjhSO0fsknREPS9o3fHuy46GA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgisBMCRA9TVsSAnZWagAAmlEP/1bt62xHGNhZQk3qG7i2\n7xip7YFyXwnqfvuo7PLd+ZathRBZB2viy2PebSXQ9rzBaLrXbbeNhWh2lCPO\nHy8YrG8G9U8G33Xj1yafDH+5U48uX63dGza79AE3+9JlK2nBPFTSenGJQc+e\nK+hGJCbzbIVwFPH82+PxK5hmxhJsF93SsauEaz83bMq38dd2sE3Oml5nozRn\n38BU8+b7ymHGPn5ksFH2Lu4mH8AHozHInk03tCssJyTx5O2VkdoYHbQuryhJ\nE0MBJI6raCZCM04HT7d69FlTgqFzpQOTwY3VYqLe7ZV9KAFT8Zv8z8wTUH75\nr59GcZ1hHvL4UaCIqpC0WeChtt7SbEIZjV7I0/tCnYgluhPTNavlRNQV/C0y\ndaz0SLpu7m0/pe9VBF4BeaITlcYHI9t185dUwYI71mjSz8IHZj+KGVa6klLG\nIrEQ/nUhAQG/sIAuGDZn6/wnadIepdmk8iZIFWIamARJf6NFGhhqB2Xd9f6p\n55YBaI5jE8rEZl+xTrMMaZXlU5Pu+BXD5agC1FD8tbPdnPZrOkQMY59oIyxq\n0QJ4whvu7SzHUE4GohkFagukaPBaPOLjLUk9i9azkOLHqPAYolTfRPi5OQtO\nhzModW2KsdGT8AOAI3td0kzpR9baRjHuO8ofsDldAhJaHu70Cb3jt9w9wtYY\nnr2C\r\n=8TFO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.84f3db9ed.0","@material/base":"12.0.0-canary.84f3db9ed.0","@material/shape":"12.0.0-canary.84f3db9ed.0","@material/theme":"12.0.0-canary.84f3db9ed.0","@material/animation":"12.0.0-canary.84f3db9ed.0","@material/elevation":"12.0.0-canary.84f3db9ed.0","@material/feature-targeting":"12.0.0-canary.84f3db9ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.84f3db9ed.0_1619705932472_0.5536292311085105","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/menu-surface","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.8fc29273c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45b9d7967f734b66428eeaeec4fad612f4309b2d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.8fc29273c.0.tgz","fileCount":38,"integrity":"sha512-cHS8iomwCG5+ttQgxn+/cJXN5uBEvweWNmX2nZDzp2ek8JG/wuPAZsfTnQgNDuRxQhDWobnEnD9FDEYWY2WGHg==","signatures":[{"sig":"MEQCIE0O9EGCHvJ993zY+sKptyzdIot0nryqGiUlW7qQGpd9AiA2mg2I7NfE0ROTqbPBHDpF3p7iR0iF0war+QuFquE4Mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyQbCRA9TVsSAnZWagAAHZYP/3PoIvhHm9EtRHW05KNJ\njnWBXGJ3rQi5zdp7F7GfOpxCWLEjzKSbZ5OGYKIN2uzdx4MobwFJenRwi+Qz\n0MFSVmWoq28xNzHV0iObUXP8xsjNfd6OjSFFzdQcuPoqycsNyeam7wKCLLK/\nsjHSnMO+1V5YppcGTnAsCv8t+wVdUpxzFl1pD9tL5Ua0HoF5GOeAEUO/7iMG\nQsDuw85g/H1sA22DX08nO6Y44GN+ynetIoXQnh5ddVkXiXFyWAOzdr8tXuIu\n0Fgqq6hNREwiETdxCB7oPdroTZt1F8+xQHA/JjU5W66QLcUmCchZtasDQOVl\nTDgHVBssg7AIGVNyn5pEb+MlpqsDLXeWo6sNlteBAGM7LkM7y/j4Nx0rt0Zu\nJJQahNvkLVAFMrVJtsAuKOewErio47etAZkPJQQ5Cl/ylcVLVRG4dbaU8pAY\nYXxCTSjyQ0//yfsV53xN1C33AEJH/tyNBIhY/de/BA2jsqGOIROzKbBEq1LB\nfp75QQGBBdoTcl46wXei0YbfnSVU4lXVCidwhISme7ax6UxXx9vrl3dYj2od\n5CHBhEvCscAvm6O13QqTbKrYCzBlVzD7J3SIugPUVy3Lmy2X8hduv+QDoyt5\n5w+mvjZumbgquheFpUT9GC32ctcKflyW48dkv8PoWmGNx1SwrcD1cmQys4Dc\nOJAx\r\n=gpyD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8fc29273c.0","@material/base":"12.0.0-canary.8fc29273c.0","@material/shape":"12.0.0-canary.8fc29273c.0","@material/theme":"12.0.0-canary.8fc29273c.0","@material/animation":"12.0.0-canary.8fc29273c.0","@material/elevation":"12.0.0-canary.8fc29273c.0","@material/feature-targeting":"12.0.0-canary.8fc29273c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.8fc29273c.0_1619731482839_0.08784542816554652","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/menu-surface","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.c50d20bab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1e63d51ac55ad51de6c5715a1d27ca182174339","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.c50d20bab.0.tgz","fileCount":38,"integrity":"sha512-icUv58TMiCe0lsMF4H9IVJaS8TzgN9WmLLYenScBbgHrp+ASarng+gScCrlxYRtzBSGhAEBLPu6zFd+jxfmp4w==","signatures":[{"sig":"MEUCIHUlz49WrMtuQLlIZAQifPbLVOqD1f8tzAp17gDiIGljAiEAh1stNXM3WJP5rdFU03wlk5chUt+4P9STDeUuZAHF7b0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgizsWCRA9TVsSAnZWagAAPl0P/3gzl+G9z1qGa5JZmnID\nilH6HxAuZbwkTYMTlmsBPb9ebHaBIbMP7Qm4XoxZBUIPtKC3NG60Hod8vrUK\noO0jQ0nG6yP4xXSJmq/3fIl4FroGfaMaLmw4PyfAYbSHeX9Mlp5p+xg8zZFT\n+fqtiWqTXpEtihzdqsvBq/MTQLpWwVh0iavuS9BhyC1IknUq2LyKGq7D3UXU\nlZfgQQIMCkQADpoLlCBZ3usThCLSrpernijB7x5OtDid2Vjh6i5q47APMNTI\ngU01orM6PmmXrcQG6JjpzAtB5B8qp2JDO+1+qmHkloM0Inh4x3PmQUiZ47w+\nIp/OpvQIVUH2kawiMp0LDtoS404koziHL/W3toQLQIDQohV6wo7CaPvKV4lp\ntR1RCb1SZ3FBO7cI9A9jA+eKIeVcauaEq/NG9eG8DUJbyWZL7Sq7epP578yo\ny2cxL5e3hg4bZiUHiHq+kaB0cYdh0jHp1Az/cbQiW07kG0p9xj20Q70KzEUX\n6OgKb5EGcyXC4Ts7QYOk3/6Z6xVd5+OKLTfFIAoZuEwVieQz3eqrZ7H0XmRX\nJ3drYEeYUz7SoSDa7SzGNSHqL7Iml08/F/rvFoPTrAdVy56SxhrU7gzeu/6i\n3MZL8C6+etKw8t/eCyGCk5hJBvpDeN/8zR6O3wu24YFugOtrAqttEo7/O6gJ\nSzK7\r\n=XT84\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c50d20bab.0","@material/base":"12.0.0-canary.c50d20bab.0","@material/shape":"12.0.0-canary.c50d20bab.0","@material/theme":"12.0.0-canary.c50d20bab.0","@material/animation":"12.0.0-canary.c50d20bab.0","@material/elevation":"12.0.0-canary.c50d20bab.0","@material/feature-targeting":"12.0.0-canary.c50d20bab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.c50d20bab.0_1619737366089_0.7054935805920959","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/menu-surface","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.474836ad0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c610e84db352479842406a9c42f52635386120b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.474836ad0.0.tgz","fileCount":38,"integrity":"sha512-jOQGvvEvuil8f5m5KH+eMT679vsSA15b1FtqouYHi3fbVuTn1ClMZzUC4EL5MRrrZHoIVGFHQ7jq+4FxEjssgQ==","signatures":[{"sig":"MEUCIDv+0ySw/vRxGLAbhPBfLXHKfQeP7Spa2CFASLb9nbXWAiEAm6C3FS/9N5WeSGRqBzdPzbVGHln0ab7FyxGV33j1XbI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjM05CRA9TVsSAnZWagAAAFwP/0/oVufiSMA6wsd0GAv2\nbJ4l3PszZKmwfmnxjeJ3HjeXdPD7HUBy70T7v4CLhli0EUjYtJyTLJL6HtOx\nMxI0+AP/cW9I6YToOA/uRiKXrdKu3nAa9BON6D9Xlmbo1n524yHjRPuUZ3M9\nx04vIhRHyALt7HXHKvRcAonSAQKzzfk0G7Aqq8o6s75RDX7wgScNrICeiOqB\nrCH8hsA32rAV43jmSxlzeQS7mMkBiwjYOsJrmsxt26RfwFzDy+f54FxDt7sD\nt/lvP81o9VUqCikvJyp4aBawmYgBZ5yUboG4365IoozdBUM4NNVUbmUdkqKs\ny2DkTk+TBlDex8DMTys1szIl/Z60gfMmSu5E6rK7u9iAW/wr9uy5WgZ2OO7R\n5U4Z4jAZ3BgseL9aEzL4X/6Kj38hZUplYgN6OFpa2fogKJKVAI+rooKXpJO6\n7tlu1M5VRXib8/D7vvGHC+OI6fFYHhbiTYCsqZiSWSsRJZ39GOVSexE5dtBu\n2zTLXV0I+TRmWudvp5ED7I9wiWsThGqPYcaIHfvIeq3eBXGeHYTblhKEeH+N\nOvMraMSAbJZ4Rzx7mNzIGOoOoJoX6smXKPojNX1rEnRUxt1/UpLJ5iiB/OH+\npuZN6JLEJPCUsCZDAEgjKy0AxJIW9TO15MyD+ZLolCMSr554xuEMI2XjZZtO\nVumk\r\n=dtIb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.474836ad0.0","@material/base":"12.0.0-canary.474836ad0.0","@material/shape":"12.0.0-canary.474836ad0.0","@material/theme":"12.0.0-canary.474836ad0.0","@material/animation":"12.0.0-canary.474836ad0.0","@material/elevation":"12.0.0-canary.474836ad0.0","@material/feature-targeting":"12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.474836ad0.0_1619840312573_0.3332745572697555","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/menu-surface","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.f5ad92287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c126175fd225f034f1b6990186ecc3de16e69fee","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.f5ad92287.0.tgz","fileCount":38,"integrity":"sha512-FYrst7QPKdU3PlOmfSyAr0o60SuarVyZT2FqbQMnCjwa6YyFN5I0TW1WfxBAzWNk3MbzMnwDdUB0l+OB7R5QKA==","signatures":[{"sig":"MEQCIEhsKlpqeQs5QoXdj5uUww4jnr1ZdspEBzVCebpEwqZVAiBdO7m8Om2LrPlFLELq+spkCNFpmMvMMZ989kxb2IKMyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD+OCRA9TVsSAnZWagAAiFwP/iyL+d09SETHi8Se72I2\nmf/Q2E4/uvbxlVhs8WouyZKVguUP81/PG2BLoTDkL2h3VrtnlEgXOGRomiCU\nESHMm3ORyNf/dZ4J1NYMytX8qdg9ipj8LItx+vqmuWD5OC2uQ+O429gLqm5U\npiIg/DVU3vdF8mE5KgTCR2u8YuB0rYGoAFRS9Fg30KLjc6mk2LBo05donpPl\nfqSovlZFjB1feBvbcnP1mBV9zWcjXNENXren4t+EBXGvxFqpXu47bhJxzqGJ\nKarOp80si12/0PEg0mAqe0P7O/Xj5kJqelPU5gOxTf3ZkhBZf3CwAATFwHUq\nzZAmpMy9eP3n7c9CxPH5wDVLxQul29Jo7muVJAHFU8sxXtrdotNGJI/2Y67Y\nPMy0wNm7gcCH4l7Tv3uRScZ7nukPpgyl3jDYmp5L292IQIc/N57BZ5qUq3cv\nJ9DvJRfU3dHEpNKjsNTv1xiI74gGgqD+zDOGtk78gdpTVeul6TaMyC9wZ5nT\nfruG61iy6nL0f7Xo85Fd9ZnNUDCcQC/d8WLNgWH5PBHMx/ZPPECjD8bsB4xe\n3HY5V+EB5ln5Ur4Q8NYFiaa4maGpKmLeZC817pWdXZIkQSeErJf6/bm5zZad\n5koAuDu6Lew2Ou0OlEaZ92QAPmB7AGSuqyGk6ORj6YIgGwjRUHF7g46or+g7\nnqHu\r\n=eCZ8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f5ad92287.0","@material/base":"12.0.0-canary.f5ad92287.0","@material/shape":"12.0.0-canary.f5ad92287.0","@material/theme":"12.0.0-canary.f5ad92287.0","@material/animation":"12.0.0-canary.f5ad92287.0","@material/elevation":"12.0.0-canary.f5ad92287.0","@material/feature-targeting":"12.0.0-canary.f5ad92287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.f5ad92287.0_1620066190144_0.25354542221069054","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/menu-surface","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.af453daf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5be11b75bc45b86dd8305a3de301adf4e91db3b2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.af453daf8.0.tgz","fileCount":38,"integrity":"sha512-UuFvW47wAJSzmc8VD517hq647dMZZ99Z/BxDtnAR1u3cinR9lB9TWT8F0eTfNOwAnCFbtTFnK/5hOiLnnqAKZA==","signatures":[{"sig":"MEYCIQC9GNZnu6kUcQsiAgMmasCzaJGGxe9tZoDdJqlYohV1PAIhAOuRIL5dfIaLBgxkOK81ZvqahRZVi56M5iGkbGERtel6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEbjCRA9TVsSAnZWagAAVVgP/0zY12xjx9uX0BtLrtkr\nOXJ+WphNhWO/4DZqF0L36Q4qKWhuD0oORvVXdXtq/HLuIQuErMMCTMaXeGIj\nuG34q4SFrTN9V2kpv06kcX6cUTytZS6IcNcPpgHKSEnUsbjjKryxdzmexKaB\n/RZCB69w7AN/aorHxY47nr7ZXtlEpd0BkO+gXgd+XBtCgqgDaFNVWrUzqDhB\nu4iEpG61DtPdbQFTeI+i4B88dmZENtyBV8uOIEbEkdseJRL5wZXHCPvyjhf7\nszy7saHZQa1HyQFVibVgZzJEgHC+JOBbfOdsVYxNyHBxoe3QR8PyCSm8vyT0\nai34XI+SKHHnE6vKjd1tdrGefs0bd1/0N9FlDx24qMAS7JO9S63/P8GYJQr+\n2FudWST5/s/85d0rukku+/rCLYjTdnf3r0kAZD20B0JNu4sWwIJ1G11bayuy\nW9ckXS7YxD3XdtKrF8p+hhuBwF71vE/UdvG3PPpt1UeEEry9OETNkWIsqi/1\nrkCq6RHLMA871XMzL2Lo2/1lxHS1zQCu91SYiXllCUW6FrrwqWWwv69/E0pJ\nKgfty7AAhdOTC8sSxZ7R0QDQPXkXjKfopoR67NU2SLtC0SSYcBUF4YiYMss2\nD4K51paSH8ls4tRfMqtmvHPhY6hKcOvB3gMMNL3shD913kh6foI0IAuk/R0K\nxONT\r\n=yNNS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.af453daf8.0","@material/base":"12.0.0-canary.af453daf8.0","@material/shape":"12.0.0-canary.af453daf8.0","@material/theme":"12.0.0-canary.af453daf8.0","@material/animation":"12.0.0-canary.af453daf8.0","@material/elevation":"12.0.0-canary.af453daf8.0","@material/feature-targeting":"12.0.0-canary.af453daf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.af453daf8.0_1620068066679_0.656692879205687","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/menu-surface","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.1f1918c24.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71dc476403f43edb8ac0683f6d3e3d217a53532b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.1f1918c24.0.tgz","fileCount":38,"integrity":"sha512-OzfetoVbNQdblU4hy48m0THLnjsw3xE3ATa1X9LRg1O4vlmTrJQP0rM47fCn7daILsQK6vEFITIZnJYealScMA==","signatures":[{"sig":"MEQCIEAu5AmN7nxSNbWBj9oMJMEQRh/5FGuE9x6Z9Ulkc2YaAiAwywNeRXnSAolSo6RwBeutTNo27RY4CsEv0mIKk924ag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE27CRA9TVsSAnZWagAAg1IP/3p0h5hW0kULYwP4t5qT\npCAzlZFRpUARvFHCUCtqqOxdD1MraD2ppUzSKPW7zFaRbS2GqNUQw8M6lDgN\nmASL6XSgCNOTgFdTjHD0R2osSAb9TDywlD+p+WECVRuO2ENoaxLmCqFlwiad\nZQgNQ6FlsfvaImKlTzY5q1c4yOBSOYCgHlpjDAOg64+MeEozxlhSjgw+yeo6\n807bDy8qpRijlgWdOOCwUD06Gp8rdTmx9pUtEDJmT+MOoROEWlyvdw9lk4VO\nqydYVYVKhe5vobq4RKvBXcLkXHC207WkFgIJYesOr7aDaK23iGkTN6FW1SnM\nCc+zbyzAqQZ8hfhtcDqmaoLA7doGT8W5cnZKs4zKrp3unK0AJbT0rUItGs3N\nDqSHzg6U89I58MylLDnc2DRFsNQ+7Y2xxlXaWCS7m4i6WVUiq5Kouipxdv+I\n0YK871ERocVNZkvfhBWQXjUaDx6uifAF3jcjFtRj0n2y6yntI6IXiT0mNjXP\nSpxSHr4k++tPrkYObb5EIFvfmehGsAzlb+N34463oH4SklgA7XuUyPxzUg7E\nMdDR9gGwePHXRRfwpmCBY9ynwUKnOgg2WaHZezwcZjuy8D3hb63nHfkoUWMZ\nTmO89HWuEYtxUyvE3MBUniLmd9xRfQCy/cZo8QJOk+ThxpPhYK3jwwdLAB//\nJWyc\r\n=suGp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.1f1918c24.0","@material/base":"12.0.0-canary.1f1918c24.0","@material/shape":"12.0.0-canary.1f1918c24.0","@material/theme":"12.0.0-canary.1f1918c24.0","@material/animation":"12.0.0-canary.1f1918c24.0","@material/elevation":"12.0.0-canary.1f1918c24.0","@material/feature-targeting":"12.0.0-canary.1f1918c24.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.1f1918c24.0_1620069818785_0.313882424969512","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/menu-surface","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.33148231f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdaebaa61746dc18698f299a3de00176a4073f85","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.33148231f.0.tgz","fileCount":38,"integrity":"sha512-rilLShtm1kCRTyQB76O9ry08l9/UcCqKonOfy5RbBOjlXu10jc/BACQdRgi7Lah7b88aMekuMY8Vx2N/FddLUw==","signatures":[{"sig":"MEQCIFD+7aU4BKbvxQECXGgAc4sFQfgXV238bISLhD9U9iIpAiBJqOIub6E/5vkAZA8F17FnMQs8QGD6ZaL8/NUxCiad3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFF5CRA9TVsSAnZWagAAbm8QAILQ5/+jv06NulTngq0/\nTtMpBN4Xr9wrkJ3kBirEovAjshSxVWiFpNZKzZ60nlh+ZAKplzqvj31Xb8Rh\nlBPYZoEotCh21IBqhW6OeUqIDTUd1tmqG40GyGWMYP/WD2ktPRPbFP0kzY0q\nTNbUlQ96Kq77ANBmr6REShVF2zdfTS1QOntk7xus0297DF38yyVhjfjuDtw/\nDJJK1oIQiOJVZZKU11Y1dxdqid7Vn6Wu2Bof3AvJjfZrgvqxylxMJ+zzYpJA\nG5Cngp9vBw1f+gyk2ngT5eKbQNhYbtsREEIVwLhvOMan35RDqJcexaEDmp9W\nZ4K3DwEhl0+lzkKdg1QQCmBrdgu1qFIBnWrH75MlUkuo5IKebkmjtjbg2OA0\nXLQ7j9RxjX+dKPmMCgHIGo28RwGZGywqSRfCIyI5Q9JGkk2K7yb0u4IGR868\npP8M/iTzq6a++E86cFZysQImkRw/RXJTJqaEDfZqupGt8MH4D+HPgK1U+lKz\nmDMUL/UO/IbPS8bchl/h8nJAYK0YhW8bo30QkzqDuJatpCVdJchexEj+oGyD\nADhMNj9QWQlMgY/HQnZPoHUHQsufcerSw2vmdmcJRhRbSJ1JLVLNEKF64N0n\nIlrPC9Qsb6c/ojRna6qCDv7ANun2nItTFVE90YFXvKtqeujN3HnDbuN1s+3B\nkT5R\r\n=M7Ko\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33148231f.0","@material/base":"12.0.0-canary.33148231f.0","@material/shape":"12.0.0-canary.33148231f.0","@material/theme":"12.0.0-canary.33148231f.0","@material/animation":"12.0.0-canary.33148231f.0","@material/elevation":"12.0.0-canary.33148231f.0","@material/feature-targeting":"12.0.0-canary.33148231f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.33148231f.0_1620070777387_0.6667610765067085","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/menu-surface","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.06b76fa74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63ddf2afe0f186a843ba2fffc841f03a337c2bd0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.06b76fa74.0.tgz","fileCount":38,"integrity":"sha512-t7ceGwBS6pgxJIWdAdG6OHPZ7q4FhxDBxa4W1oMRmilwanw4ChdgqHAmdmgDLVJDaHc+PA+Q+bw2lDl5dl9RBQ==","signatures":[{"sig":"MEUCICBu9CP/E9Jr0fK8afztPIKLEbF2k0Jvlgi/Dt4OfuHfAiEAoFdmiQnyln06SpqeB40NH+Ic0Ikb9QGz+xqkal0lgLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFMfCRA9TVsSAnZWagAA6vgQAKTr53Y+Lqv6wPmWSL8d\nl23CAlrhyX+/4mmHfyu80eCaWmjxdlaIg6ECUrFUsx1JDxtZFd8VoACxonQf\nN/YxD5VhdrIh8ftDH9M+L9hXHBfXXdt+uUc4/ZQliPqAiY3B5Y1lLISCjqKi\nbAzzexEue6duRpiHecHsB+aq0wpJnaq7ozCatQZXjEjTf5qZu64j01J/2vWh\n9cO2ieUQ1jpHXQutoE9SIOIQXx+GpvXABNMo5xECPkaFOxCBw2zpxARUWNzG\nMPC4JKz4AmxcKIPNfAj4LbzhpPiWVK+2ELYC4mF/NKuNPYZU3G7fgHuKXyN3\nNomK21OYvresQ5WqDAQzzQAUxhun4terWQPSCy+7Ys8aRmVOKP1aQXCK0XvZ\nbKX19Th302K07DwGWc76bf50Orv/8aNSx6du8z8whAmpn9XpdwRFhFw/YixU\n+KceYZSGQimFZbAHHi7lW+5F9IwPeVvgHn77KsE1/pH6j25tWAKhIxYheNxg\nY4znq+fNW7yOXz0CvXOCMhjyaZw7v/AJojse6E3Sd3Z6PFWbLvV7L9vB8zhz\nQneccRE1wsc3xo+38Mfr3/uJJIJ6xIJibnCQPRVEHfn+PNyBNT46fVx61AYz\nhSYVOd1obLRNdMZl5qzAarm6ask6B9e01/O27wI2/YLfcYZPZLNKPOljEjAP\nOf7i\r\n=iFlR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.06b76fa74.0","@material/base":"12.0.0-canary.06b76fa74.0","@material/shape":"12.0.0-canary.06b76fa74.0","@material/theme":"12.0.0-canary.06b76fa74.0","@material/animation":"12.0.0-canary.06b76fa74.0","@material/elevation":"12.0.0-canary.06b76fa74.0","@material/feature-targeting":"12.0.0-canary.06b76fa74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.06b76fa74.0_1620071198767_0.4778124631267475","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/menu-surface","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.7c5000473.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31802b033002644a3c4b0e5cf1e1ffcd61620293","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.7c5000473.0.tgz","fileCount":38,"integrity":"sha512-rd543ip1WtJ+jC83IL8kcf2inRZABpvsT4p5LK76hY98gAeGhVC3K2IqdzEMzv7DzKfPM+I09gaDKjZwDEv9IQ==","signatures":[{"sig":"MEUCIQDtPG+sWdUmzNDavQVg6i7A27Tp1A+3nhYkWkGSZULaSAIgJcja35c2ra2pl2VawCYQeAB6yjNXc653afWoZXP8GiY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHxVCRA9TVsSAnZWagAAmoQP/1una5VPSQvcVhl5IxSs\nWiBM7Av29ySvGgPyQh/7md/pA7O9qlFmSYvCd0Bu0HSXwWN9MDFja97i41NV\nPWPfwn5VyZ7kNbX3CuHHHebGkFsBUJ33sZoRuyQKFuOyHyc4Mao+SziatbIo\n7vmmmJQCjnYAQDxlqwdkTXBxgt+ogUgy47ul+FgKU+5ka5sIHvkU25KyTlzU\no7Mx8Qz9RbfHm11R8KeW88iWu0Yg49GpGsq6+cs5t/KDRK6oQFcG3IKfrsOK\nPbMd1GsgmlC3/tqbISrzeMAGWMehDpph/vYQ3yEVaIXlYlP6mhgT4QAfNIIJ\nNEo5M0H6TQxhRDpn7gd672mAMnId5lHctp1kw6KTIlOg9yHvzqowI1gvzrfE\ne4nxsY+uDmKXFV0eIc3x/2ccu/djitphu1RGZlw3hEG64138U1NHNGizqPRJ\nT8dC1aT5RRJk1kNcj/gDw2f4bPXDbYFP6WbxexOnBKEazX317+umsF/tSTop\noGy/ZsqRqH37bcM89PCNMJPEjoYOMUF/Joc3xGDvbse4WsYrdUjvXWCoGpk/\nepSJACkf51qdY/74a7cjVgP+mM45wkxAmns/Q9N73o2lvErrJ/PV0rdiy76f\nTFdrheLMibP23p5ZwAvrg/MGoLSLTRmUam39dM5QRM/gbhNZwiWhrE+svjw8\n36R2\r\n=B249\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.7c5000473.0","@material/base":"12.0.0-canary.7c5000473.0","@material/shape":"12.0.0-canary.7c5000473.0","@material/theme":"12.0.0-canary.7c5000473.0","@material/animation":"12.0.0-canary.7c5000473.0","@material/elevation":"12.0.0-canary.7c5000473.0","@material/feature-targeting":"12.0.0-canary.7c5000473.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.7c5000473.0_1620081749467_0.4306426973224886","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/menu-surface","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.de997644b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63152598a958623faf67cd6148850a54b2f790f5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.de997644b.0.tgz","fileCount":38,"integrity":"sha512-GHwlh/NrjcsJHUS87bkUvVVGQKw/LTQp/hPBr0wIwn/lzKVS7v9LtQO1+WrZCWr1MiELxhvWCSryN/hxxOWUPQ==","signatures":[{"sig":"MEUCIHbmJOyGc1dJwc7DwN0XZnUoMhvwuxEaHHU3pjTqgEArAiEA9/xxx/zMoHQl4U47HleHJEerLghqQikwRiUncoYOmrA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYRjCRA9TVsSAnZWagAA4fYQAJ3k+Iq6lUr+HVOmn4bc\nibctcWy5rDK1YgUkK8xAHPh6C9IlzOkDfaSdtE87fo6JWO2iLg2KNyStmxT+\ngZncRu9Rp2C8DU9c3m8QtHhqosMsJBaSMAX7n4YKL74LmyAUNSCuBQ/blTgA\ng8zomuFzwWs/RyGWiiq0VWp6f94Nrp9WXyNh7R5+7CUCmc0g2sD3z0Jmo+2/\npUTIkhZW1MRUuBmkkRSVHGqZWvchEQ3mS4MMdHn7nXYYT+49KAOpy89Lizcq\ndN/p+e7cWkh7SAtqRa3oBt71IYosn/35PV4Qm5+ivCMFrVbWp4rbGIVb3kNm\ndWl/E0VB6QQcE3Gj8DVFr1/ogITdi4TOeWHzVy71QByOicHVi6cPYVuoFFy9\n9AUemH52PTbvjCqEETmegogYdPDtS3/ng1CQtDSWY/mg8cF+BtNGcGEZw3Nf\njT9yGahFj7OuvdLkmrGZTprqZ5x4WZ2PWHRmgf4MHO8HxUB2p9Nd9s/qEDQx\nNf61zC3gzP6z3RzzAunONivko8Nj6d6Clj+sxQOfNfw+kSQb4zQfIGM61jgB\nJ0rn3jQV0shYF7qhMLCjdrrsr/cynpuYI1ofrn9MtjFxCeth6hGpgF6gusK2\n7F8lpplUV69mp/0q6ARJ5Mdz4y6yEtiQA28HgUtrW1DTNjlZ8q9mHHsKRpFA\n4Ykd\r\n=aH9V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.de997644b.0","@material/base":"12.0.0-canary.de997644b.0","@material/shape":"12.0.0-canary.de997644b.0","@material/theme":"12.0.0-canary.de997644b.0","@material/animation":"12.0.0-canary.de997644b.0","@material/elevation":"12.0.0-canary.de997644b.0","@material/feature-targeting":"12.0.0-canary.de997644b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.de997644b.0_1620149347151_0.449936902236316","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/menu-surface","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.d4d7f1cc2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c634d348948a097f1d6ae12a79300d4a835d9b5e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":38,"integrity":"sha512-v6NcV0ujf4sTZ2ec7H6HKAjrGtNY1A+0SteeOor0BwN/d6DfpIxsa9bePnYy4jZ8/h5Mnh1o/wL+xEUoqYYWQw==","signatures":[{"sig":"MEYCIQDbGT4DCwk0T37x63Mx6yyQmGimKUbQQrVhTc1vr3m31wIhANnekUD0eB7DAdaAkvyH5pb6m4OVkMIXJgMsbnIsNEnn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYqxCRA9TVsSAnZWagAALo8P/1qfr0iI+rvHUGISvdoy\nMaCAssN8DMbnjgGD9rBKa/hAIm7m/N4Fixq4fP4wTMwzcnkir56xlDMMSq/4\nOx/MolPv6X8d95DMSUh4oYSTlkMcReLQySI1BGxzK6WbV1P37RNzBhOpklbW\npnyyDivCYzkpVltUyyIrQab+Zp3VXlD1GJ5HJWjR+OQ6O7ut0FbfQZq4Iaj4\nG047VJT827x/UxWxbhlrkOrFXmOuzLigMdBPFw95Ee+63hsnMMAzK4oW7K7W\nMMTWKRZPoNaQAxBC7Q7U+TxGrVH2o2AgLvXT8b9glSEodh0Hcj63bPk/V2CF\nwx4mCUURWXbHtq+MnWS0z66FB688G+aJlKbofch1e1eNuGMeLM/RxGpvpbrJ\nr6IPWWsl+sXVR/BQICFVxH26ZyuolzaAyu8MH4ovxxEmTcNcKJRrUkyVdBeX\nSbBclNyhZmuFFXZTnD/SEJEU4O6nBVU3T/my1yMlA20bewOsrfgxWes8IkGX\nMtrDwvFTHIM83j9yVzFkLxiTh4rhaR0rAiI8nVBb7M07YXCThqAxQBH7cxdu\nXwzm7bWctSEnFBxcJLdhsZN4vIoex/k9gAWA1DZ7uhSY6yCyHKQLpm2ZwHVw\nLVZVDe4jKqSFRJNX2LCPmjGXwWxsiR8WaHXWEzbYoLsgFgD1LQ86s1IGeMQ0\nKy/O\r\n=eRi+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d4d7f1cc2.0","@material/base":"12.0.0-canary.d4d7f1cc2.0","@material/shape":"12.0.0-canary.d4d7f1cc2.0","@material/theme":"12.0.0-canary.d4d7f1cc2.0","@material/animation":"12.0.0-canary.d4d7f1cc2.0","@material/elevation":"12.0.0-canary.d4d7f1cc2.0","@material/feature-targeting":"12.0.0-canary.d4d7f1cc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.d4d7f1cc2.0_1620150961333_0.8152211815055486","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/menu-surface","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.be999eb08.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93b48270373de4b98535726b43fd9049005e7e41","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.be999eb08.0.tgz","fileCount":38,"integrity":"sha512-QG1UFL8Kt7WuhD3FIFQi4qPIPY3CfCZSwxvqw7BYHiI29FsUzv6ejymV+alEdTjZ0Z2KJadmGlAPCS1r1qRJsw==","signatures":[{"sig":"MEUCIQDCVa+mvxLzxGmsrhd4BTjaBiubD32ivFQ9DfBCmJ4cYAIgC+ox6uhggGyGOBZSplCiPwcdyGkIGiG2sEiGSNe90U0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYvmCRA9TVsSAnZWagAAnDcP/jJEISkqBonfYB+OBWLK\ngoWv4LBw7pv/6CL6yofKNRipE6HIACvOqQT7Vqj2x2lrSRXOwLcEml6ICvIG\nPWLEBYgIB8WLUvoGOwX0jZ/3UI3cbjZFaXO9VuY1cdGObvNicMzYe61EiQ0I\nb66wAWw+ygCxJven27mH0RASvF74b2NS5n5risSe/zkBe2c+FJUkozJg0kk9\nC7DIiW6tpR4eHoTkUfwu7uXivmn5SNaTN1kDnI9O6QnOB1DczuXgEKGXK/Ar\n/iy/PV7JQF5QieGc/sTN/b+JGx6GKs/cd3TLQP4R3jxpNwmhWZzhm+x/OVkr\nCi/BYzdR/aai2+p60BtxoEm6zoUlLPVYzOxx8R7dZUVmZ4/EcF8b/AAM1nCx\nQWLOXg8We05zA2j/1Mm3FjHIWgm7N+xOv9dmYFA8BhLYYN4Ri4dpK4yY/lrb\nDwiFjBZOdfvY3/3f5bnbs5CgB+vgmSnurr4sfWbSb2ZQZyiJe8ysUaXQx7oe\nfjWwup1sAHqp0nNx0AeUdXxWsfJNdwOTTkVmRRtMWQBBZhMa1RMhUTpjntNu\n4nTbRB346HWCDz2TQrrsxz8YUckwQPjGqKI8xGKgytG24e6mey4Qkx9oMD+z\nf1tnUPHeAU/n93NGc0bnQ3gujDQDu6x0nCDBI4KaTRX8OqSXYEfm8GUwrlot\n2biM\r\n=/IxX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.be999eb08.0","@material/base":"12.0.0-canary.be999eb08.0","@material/shape":"12.0.0-canary.be999eb08.0","@material/theme":"12.0.0-canary.be999eb08.0","@material/animation":"12.0.0-canary.be999eb08.0","@material/elevation":"12.0.0-canary.be999eb08.0","@material/feature-targeting":"12.0.0-canary.be999eb08.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.be999eb08.0_1620151270426_0.21901549621622052","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/menu-surface","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.eda1705fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86b0faef6f203d5a66138374a03ccff901276b24","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.eda1705fc.0.tgz","fileCount":38,"integrity":"sha512-iV3OE2evCYZZxwy1qKw1rlwy/HliQcLBW3dxPvEL4TyzgUmoL6Gdk9oIvXQOC+RPDNY6HpjAOqeuvjEqEQDrdA==","signatures":[{"sig":"MEUCIQD6hJI3PRJrA4ReLy/c55ppfIdq2sn/No4XYeJG+jxefgIgW72W4ATnpHpVuhQJ1POFzQJUvEbB32F0SepMPc64DNU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZxYCRA9TVsSAnZWagAAOkIP/jaV57HDT3XVJJCSerdL\no8xFi6oqe3cqi4A96lezc659UazRTo5aSuRlUMl+0zhm9/DhsrObtZGyZlx4\nZqM5bOz5Q38aF0fPqnw7vM4iqT8fH7BWtrTbuJLofVKBxfqi7+Ifi1uM4Tw4\ndBUj8rQ7xpOog8zrpQA2YLtmR7XCp0TRTKHc2xDgeipwvEezOoFXv0B12WYt\nrjfPknqTy/UEJGq+5dLXKBxWXWmyAKcFA2m6RMFyQtvfnYwBx7+rYstM68PP\nErwlyWDmO7HLmbBEWLZWw0xuPdNERRhYKHYuIxyPig1i/LR2VjN1gfJ2gOru\nScRecJA4iwB/Q4K3A3172z3pQ0LmwRaTHiCBnW2e8FaZvYSXsfm/bxIFSPXg\ndKFEzm08z7xc4wH2fBVfpSAIz4GsPVnwzjStA6h43Xun1IzQgSWn24LlDjoD\nG33B+J/8R0ChcVKTeGoRC6X/7Np2c72ovcrHrPkYM9W3sniPptJrGNaGLMtz\nrc2W6Cc5/jD8AhQqMlaPfjZnhAhHP6EE4grxFkDIv0703mjZAgcrUMV82S1Y\nbxzYO42EKyrpos3oTySgsSE9FRd6wZsAiXzrVEeUylVsN/nMaBS8029Ilg5X\nAhPmdUWWDegIjCc+BngaYJP7e+tIv5IJDWhDK8JPF29O4Dn48CKR8NVxfDj/\nUtoD\r\n=tBcc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.eda1705fc.0","@material/base":"12.0.0-canary.eda1705fc.0","@material/shape":"12.0.0-canary.eda1705fc.0","@material/theme":"12.0.0-canary.eda1705fc.0","@material/animation":"12.0.0-canary.eda1705fc.0","@material/elevation":"12.0.0-canary.eda1705fc.0","@material/feature-targeting":"12.0.0-canary.eda1705fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.eda1705fc.0_1620155479625_0.5399243680839088","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/menu-surface","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.718c90178.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd217f24aad551c414d0f0a45a292f3d2e0ccae7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.718c90178.0.tgz","fileCount":38,"integrity":"sha512-GIUUZpszesC1kAaGih+2WVCqHZlddILeSXYzuhI/YXru8TxZB/60ediN11GuyB59Xxa8DYHaIdek8J/nzIS3dQ==","signatures":[{"sig":"MEUCIDbWZqBs/PYbroNYi/e64pBb0DxCaBU3fnR0+wXQ5SRsAiEAx1SK87fw4zllGwiuikjp+NJ2g23XnLGgvNxho6fnojQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaBmCRA9TVsSAnZWagAA1zsQAJ/FIJ0hTjybYCXEwJzQ\nH7Byne5CgRXxoRI12OVq2h+fh5vJmKpLmozdmWIlWTt/l1BjJW32OkANy4i/\noWywA8L4fNHORy3qM/+lSXvzQ7Bi80HZN6xTdya93U9TQMkl4duNRYLdugxR\ni9GFUr/59GRLOd7QQaD2bZ49T0astcdcZVmcVMM6apr6KhxU/7C1PTDvIM/W\nvt289mzSF/bwGUvZaIvMWzU3PsMrk4kb57aHdcrzS22t3w2ENwYYbKo/Ban7\nW00YwqoKy6xsH1o0dZfP3gqFXuEL28BRNjyaoHmwxt9eJtSt+hizEoyhYj2n\nO10MfDed0/tbcnuvmV7ifeVkHaDUN3B9o/BRlCBYRtuc8Mo53Oi87shjYjgt\n6T4lbI2fs9+mxea3ENeIlor3JZMTU1LBUybsHj1CdBMHjr9edqrA88/Pmk/x\nfOHsWe4Nfvo1FOAddgFghvWbE7uq9REQuitU3Ui75smbtsp/3QWLQB95nsKB\nY/sBR1EKARjBPwzhdp+rgllCUa4btIw8CMuqhAVRkwX4hMUAyRjfFhKpJg8c\n0ZPnj8xVnTa6b4DF9t3aVdcxczbuMRDUNrXZ0ExXBFqYy9Ud4a2JS64gO3jO\nZW66NmEwS6qIWBNSHzBTDp+raFZDV34JFCjifufIcfbpKiZ9Xuw97wDELRIf\n3ees\r\n=HriO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.718c90178.0","@material/base":"12.0.0-canary.718c90178.0","@material/shape":"12.0.0-canary.718c90178.0","@material/theme":"12.0.0-canary.718c90178.0","@material/animation":"12.0.0-canary.718c90178.0","@material/elevation":"12.0.0-canary.718c90178.0","@material/feature-targeting":"12.0.0-canary.718c90178.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.718c90178.0_1620156518212_0.06349586347644265","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/menu-surface","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.0e3917299.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb5d00d0bda3cc696373e422a6698e43bcf7e294","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.0e3917299.0.tgz","fileCount":38,"integrity":"sha512-w33l9DZDtBOm3w2spxnJPZXxQCURb0/lhxvQo5kxturksRs0x/YsKe+OTHN1/QdG+TqXID7ffCqitEYc3VZJqg==","signatures":[{"sig":"MEQCIEln7iiFLJm7zxN+TRbF7b+VrWPDdZwsoVH6iGzgqmIdAiA/0cYD7UISX6vgWZtdFZbIvr1/J+jQ7GIIUuI5/wudsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaEJCRA9TVsSAnZWagAANEgQAIXuaY0TV+TgPph1zv/M\nJCLIbez1+LRialT/m5d9sbBlqItMrT3vEAE7kMyVnvTc8lIk9yQgL2Uxd2NN\nBMvUr3rMmlqxNYCWh8hANTOf5a5PxI5WRHPqemVE7CRJqlZr1iAPf1930V7B\nKaTCbqj9jp1xuUU+ZbMRulE0cZVA+RRoUIavJ8gA4FM/P6vHynocPNPEcnGY\nBzuVr0k35hEw8ZdqrS36FuwIEHkqT0mtkyacWpbHU/aGq/AWCIhN/oVsxaU4\n0oC66lZdik+0aF4XtPA2L5/meYEGJaHSZghZwqPaCBFjvDVfHJuL3NYw7kW3\nEzTZZRCiG9BN7K/ayFfCtrhc7QoZhuKMmsF6CzKlwcWhMZX4fFtBfQs0622v\n17am7hF+tz160kZmlD2T58YcBiGWcCjcwSNEAIxsaxJUIYSzB99vObxtGdN5\nx+2TxBSKcImT+Ux31vbeu9rrtOHHGYnuY1SyNQDmv5w65mCpmCiywvEzTg1i\nuLLv6J7y60+W2sYoCN7a8J+BOTY3yi5ewFAJUHXv8n9MQ1HBbbgzKcNsxvCu\n8NRBYNN/e+KkkTK202p1jd+RdMeHGublUWgxo3wCssE2kbF6XxOx18GtMI/f\nvSasnYVR2+0h8wmv294vj+V/Vf3BIkaKtrG8Upz2CXY0REerkdDygGahPiWz\n0Cuk\r\n=igAg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.0e3917299.0","@material/base":"12.0.0-canary.0e3917299.0","@material/shape":"12.0.0-canary.0e3917299.0","@material/theme":"12.0.0-canary.0e3917299.0","@material/animation":"12.0.0-canary.0e3917299.0","@material/elevation":"12.0.0-canary.0e3917299.0","@material/feature-targeting":"12.0.0-canary.0e3917299.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.0e3917299.0_1620156680890_0.29701972801967513","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/menu-surface","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.836b3c7db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30188eec19e3be64d7991b633490e1e445393053","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.836b3c7db.0.tgz","fileCount":38,"integrity":"sha512-ALrKGfc/9Z1AEisGrvXCmGslVGL9bluKSVy7rIeqjNwSZ+FBAHa44asEaVOyYyTik9RRYZETwMeEWcNUkBOUrg==","signatures":[{"sig":"MEUCICKmynGGc1GA4r934203st9PVZrK6d+zsNfNt/gvA2KXAiEA+dv+z87t+iverwlNV7wAjKo/nOhixXLhHK2BobDjh9s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgka/oCRA9TVsSAnZWagAAAL8P/1bG0bpbzQ2HReRbhhdA\nP1WWJUGeL8sRs6SGSr5pTIYRu09gysRtkvGaFmvwDzmKye7F5Qng1UHwIGSj\nv2NNCW3UGIFeYI1+z3DmJvqgpiZu5QM7RhOryH2XeHbflhGHkQOogjf+jOpZ\nUmNeEQxbN/7aOj9/SXegxoVfAAcmRJqiChaFpZjzHbHNEPGMMXI5lZ/6dhIi\nSKzOCVLH1z/htXlCeNI+fVQ2jNI+4gyduc8439eOXVpD5IHG8K3S875sVLU9\nZH8POP1TBd9MyCb7BKgDSW2aExDmjNeCuF+sJpIRoeNCfiHE9ea9OnkWf1OS\na+xJBrhvjxpE5gak9cMCCHNWT80/aNQJVTLO2rAaNBJPhjDhtkpYRSY3rCr4\np/Z8Dq5DpIjtVtnYdGhja5y48piGdZiQknCxFzvoZDlkSYgjSE0Oht8FWU4C\nyKSfizHEZgX5TbGLybTvh5ytjV57l1icZA34lNfs8wPqDDoxtPMt0kDpIU0e\ne+eaHherUwGi9cQrNsWt7cpK6j92KeVcRGyMl5oN4rLIubHMeN9cM5eHeW3T\nF0sui7FyHL4NUf7hXFzr/S06zxQTGwCB1ZCcGOyxtXNTBry+fK8j9kyT2qyz\n5BqNKg+A5q2XmskgGbTlr+YT199KOG4fxdGrYgjoqHN5SFgwPBr5/qXwml8t\n13Qr\r\n=Ai02\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.836b3c7db.0","@material/base":"12.0.0-canary.836b3c7db.0","@material/shape":"12.0.0-canary.836b3c7db.0","@material/theme":"12.0.0-canary.836b3c7db.0","@material/animation":"12.0.0-canary.836b3c7db.0","@material/elevation":"12.0.0-canary.836b3c7db.0","@material/feature-targeting":"12.0.0-canary.836b3c7db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.836b3c7db.0_1620160487672_0.25313883196968745","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/menu-surface","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.53d4e6d59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3797ad5188d700df61722076afee1da9e92645d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.53d4e6d59.0.tgz","fileCount":38,"integrity":"sha512-VHrt/0xZoPAp+vkEndh/odv4cZ4hdbb/pwy/W2q5Eu9LaP/EugCQjwx86Fuj4vvGyee0ZyA5pbK71V52ITOy7A==","signatures":[{"sig":"MEYCIQDJO5cXc1M/op1mzc3OOT0A9MbZGdx3lYNiE6PI+Zb65gIhAIwCqBihOZh+sxyW8tvorQMlkhbCM20fOJnz+sAXnpvM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbOVCRA9TVsSAnZWagAAYaQQAIWAfgLcjCOgA9WhmU4H\njwRIejT6+O85Ci718S8CqIcp7M3/vXC5zR1Ys1aVYmzl1HAJyV16BH/BmCWx\n0vt86bmTANpq1xulEgUxNIbwt3RMTxICXMtLJ8WqV+zUceW5hAtg5GRIZDWk\nmDg/dBng0GzaxOZzXe1gyhxmqZqQDZzi6YjLiO65AkJTT179SgDhtoTXDGm7\nPIg/U62Llv1IvRS2k/SNuOZK5T1u8XYl3kkEhyyaBZToupMJAUK4sasSubME\nbdu0OCtdEoEUIchzXFDfzaz/mg4mRL9F/PYb061DR4UN+V/0KXx7LZuLAs3i\nI4OQbCF55w4zOOCwnQSHdDhpLTj05YGj24XKh4kVdvHDxW0x7lzbIe9osKy+\nbMaeG+xmkmymMGefziAnzQck5004Efv5RLPfq0KE2fhuu/FqlL38P808tRsw\ncbK0ZafoVL2S3gvl0o3eWU3Lr+7ePvRVDZQfBlpfVUwxHiEOllxxHu4ewvWS\nyB6V4zimEGu4QuSdKMeH2haOOsw5yeMS9EQmfimEtcWS73/1HG1QNGmIyesm\nyyvOVyFOX4C53wyFoBrxVNK5ZBgjRC5YC4DvZe855TpKdSAct9BJ8/fwtO4T\nRo6j09+r0tHZL4WdphWGoUucbSB4nw74OW+ywmd9uwfEUk4S+ota5Zqz4WWC\nF1+J\r\n=6uQ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.53d4e6d59.0","@material/base":"12.0.0-canary.53d4e6d59.0","@material/shape":"12.0.0-canary.53d4e6d59.0","@material/theme":"12.0.0-canary.53d4e6d59.0","@material/animation":"12.0.0-canary.53d4e6d59.0","@material/elevation":"12.0.0-canary.53d4e6d59.0","@material/feature-targeting":"12.0.0-canary.53d4e6d59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.53d4e6d59.0_1620161428709_0.026152727506925544","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/menu-surface","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.18d147e27.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2543c75fe2587fcf2ccfae5e30c7063e3501368","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.18d147e27.0.tgz","fileCount":38,"integrity":"sha512-6ZE0MeybQZ42rnJEeKW2hnVo5i15x+JyG4/9amU4qohozv5lrCQgNIzzA1yu5gr2Kg9W9VfYL6cF2cfl/l0o8w==","signatures":[{"sig":"MEUCIQDHTUQD8F8MZ6pKUV0VEe+yF8rhsuyHIb+/kk+wxXKaNwIgM2/HgWQYGeGLgX2QIc5H1dH3bif4DCTPcnOV3vQo1HY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbWQCRA9TVsSAnZWagAA7t0P/j9t8kwbSw/V6NAxs+w1\nhUP74rV/KZYmWCxH8Nj5gQzzg9K97kMwT7lCLGucJsFD+5I9+9K3OdDvtDbM\n50BZBqSMHTtNdsS1BITyGEvT5GX7VnRHDu17t/FblXaUVBVu0R6Kfh6zIBb7\nj5FWToth98VpMDsQ01HcDIJ6mcpfX1qNxCffm1qyc6fTaM8BChF338uWH1dS\n5FAepqIi+eiYS9I/p0NMwFKofL7iQkteFjZcGb9HrvqAI87NAV6Y5vk1yRze\nGb65i6aVsctmh2ZpFHA2lfsMvm1sbsLcGc32+6dsV+JUm7nowI9WYE3d0H6F\nVrNUnGSUIGntUevlos2ddugMqyAPAt0fgcTsXfqzL/u83ERXGMHkaVXNi8vO\nrKsJSCa3Ii+fZiQ5zbqGH/w599WGGn7w5TY/XwItwRWUlXTqxTVDeOBpnEe/\njxo1INOLUHodRzrkZPwtx8lhZiQM2PfFjk/3KLGHXK+DXp4j1zC/6bxPh+La\nVKr1UvV2J32e8V5HOGpA0h9e690csFvHkoHcoz6QSdjpsvEkdsxfGWmseYwB\noVhDcGDiY9ZvvOWH60eri3eAoGg4vKy1Ci86yPqdxPUctrHgp2SMB2bWsrMK\njh2l/SNuclmAHt5qBmvCVhFN2WSUw48tQStQ4APVo3wPZQH9p7eNKjW18mie\nQX2L\r\n=HG65\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.18d147e27.0","@material/base":"12.0.0-canary.18d147e27.0","@material/shape":"12.0.0-canary.18d147e27.0","@material/theme":"12.0.0-canary.18d147e27.0","@material/animation":"12.0.0-canary.18d147e27.0","@material/elevation":"12.0.0-canary.18d147e27.0","@material/feature-targeting":"12.0.0-canary.18d147e27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.18d147e27.0_1620161935768_0.5220831177409866","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/menu-surface","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.b9984794e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57d72144df1a5ef109d26d9b7785cdf385ac3252","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.b9984794e.0.tgz","fileCount":38,"integrity":"sha512-wf9nE/3Lv2r+IDPCUPwXi35llBhYMYeJthWU1aIitrUcMFZ/kL2iy1rGK3s4rnWvU0WsoLrEz3EzglwP0WegXg==","signatures":[{"sig":"MEYCIQCpC1VwegZIDpU+2jAl9MXcPCEYw+GhG9IaBRnHMU2vxgIhAOxEKNB501cuD6AjDebPoOKlOdRKjFcgMI9c9g84y7VQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdLbCRA9TVsSAnZWagAAfCcP/iM8mxNf/ZiFnqFp0yEJ\n2O60kgf/zH+XPtfqhTZRp5xu8y61GeyWAyRo65w34sNiCMlxAje0tJkG9PP7\nrlyRu1A9CFj2qSkJSxqoR/QXa03oWs8hQI8z9XeEtxFqT5Ku1SMF07UXrzQr\nJV3KZ7qoSfsN9OsZ0WnQEUarOh2rUSTgccYkzYtBh6QGCLl9E+miRaMqWV0L\nhl+ou3OGZAkKqoPJvPT4B+X1EV/qy/S0PzmldCcbgvOuutWEsEFZtLHI2tQQ\nt5EDS8OGZ1+gEL582iKH5uXA/ywx9iM0Du1fdEHInJyzppIBvtxrery8sdNE\npPEL2Z/qX17CW3hj3/6uEZjdd+4SqQXaiK3V5RhZjj/DchWAGWnoGb5m3j+u\niQwm4qAGraRrGVyWmXEgyTfad65bUsvFX+/5fjS68YNqGV2Q8qpSXfChFbbY\njn0gE0MgixOD/mPd+E9f+CFYo8cPTsYfFeHGr6n1ar9Ke9MdBEH+5w6Y10lW\na8HLM3QvjAyz1t86Vc9bm0P4MwLYYIrJgEbnr1iw9pKRAp8whQg9zYFCBPc7\nKf4imJWo8SAMx1yN+ByEuUDZrzoHfUQiYWHxV4kieVCU6X+361UOFqDI3oMW\nh8DI9CjyE/0FApykwOHMfxCUTpYgwgjsMCJyeE2h1MgW9urw2PIabAkCMVTG\nvNsN\r\n=rkkn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b9984794e.0","@material/base":"12.0.0-canary.b9984794e.0","@material/shape":"12.0.0-canary.b9984794e.0","@material/theme":"12.0.0-canary.b9984794e.0","@material/animation":"12.0.0-canary.b9984794e.0","@material/elevation":"12.0.0-canary.b9984794e.0","@material/feature-targeting":"12.0.0-canary.b9984794e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.b9984794e.0_1620169434830_0.7221907384485333","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/menu-surface","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.b76f5fc9d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e4ac974625cbc61a890f1e6067d09f3153720b0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":38,"integrity":"sha512-Ee6pfoMUQFpcJotQ+zSnXvWQ4wVQyBBeBr1WVBGhpLYwnV/++VHcsKUf+L633VayjVwlWrmLWTuN+GW4QjlfUQ==","signatures":[{"sig":"MEQCICJ/xoIQVpCF3kMf3YjYAS2amECCpPVcbDbMWZZuc2toAiB90Xex01VeOVmpVic1vtucT5Iyecdx/FjFuhk/wLTu0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdOuCRA9TVsSAnZWagAAgzwP/0cArinU32sd0dcd+n4L\niwcolLtIfdVFfPPauC/MefLTDlVng1xw3upsQk5S0epL/QwY163BW/8/wLue\nsk46lpj0ymQqad8Au4IzHAtMKk57EjUSHFfgDbe7cLj1MNwze+xHtWB6SHTv\nyId3G6umL605UL8YyEJoeezm38gCkGest5ZIR3O8Djn3yBXxOoMb8G7j4Pe9\nCyWboP0KlHf+TVUV5D9avjDpAdEHkPwOVJ5IVrJHqBRqFiQiypj/H8PsPYzp\ni5mLlJICSGR/IcJvUdnEEfCSbMiIloA/ia2OnOa09j2/tiDBMuvTe9UYlEOM\nyYmy2SbKTCyWUCZVjEP2IYRTTzHyQO/WYbLHTiVwxnMUcWNjVd2TKRuE0RE+\n0hZp7ZXW4vyGKz6Zh4ySOyRReU9IJ4M/oD0lLBhITCw4scDZdNwNjoLY9w6g\nBzu7Qm88xSf2waNHhx/iYrL+2GaTpUJHfk20E+6tSwR09wweNCy0xamRcHK0\nqJf1yTDuNbIbkbxO/Fe0uj/WPSR4RN8nIuN+D1AGC3kwLvRvdEfLYlc+JjAa\nIw1hzBCrKQqIC5k7JULZIK6nVH20LB52E3WUfk1NahxlwnNagA9Uz5Eul9tD\nw34fbvvMnquT10pltsU//W6fbFZ/Q0ux1sbz0qokA2A9n+XjxwUwzdMHJ11T\nBUCD\r\n=QFJn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b76f5fc9d.0","@material/base":"12.0.0-canary.b76f5fc9d.0","@material/shape":"12.0.0-canary.b76f5fc9d.0","@material/theme":"12.0.0-canary.b76f5fc9d.0","@material/animation":"12.0.0-canary.b76f5fc9d.0","@material/elevation":"12.0.0-canary.b76f5fc9d.0","@material/feature-targeting":"12.0.0-canary.b76f5fc9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.b76f5fc9d.0_1620169645912_0.16740305895851826","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/menu-surface","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.055d4f10a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0d935c0d7fbdd40429c81f630adb715f8c1d02e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.055d4f10a.0.tgz","fileCount":38,"integrity":"sha512-l5WpuNEbUqSVhTT3gEjkhUpnfEVDuUvA/9mH2RRnQXne6VH83whp/kaGm3qcVE5/2wITZG53UnFabazub9MmlA==","signatures":[{"sig":"MEYCIQDYs/BElvA9ljNg4/0/CLbPjx8wRJlqZisRlKAUkQ33eQIhAP3uefHG6f/gISuzA1pg1BoZ05XPapSzZffoFOh+j0GA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdc/CRA9TVsSAnZWagAARAgP/jIvouQ/xUYdocn5C75l\n3iAYTvQNeTq1K2RomOxc06AhcFvp4svnjbtPRpit80jQfw/GZ2hG42zCqeGN\nKfNrMA1gsnqW1RztFnoQRVPPZK6ma1JDWsJHWjRuwgcOQau95bDc3Y+OEVc2\n9eHtPlfU1/cBsp+5f4KhtcW8XaXPPKE4Gq0gkfjV+6uZbuOe7MlOV+KlDJ44\nqWwWQFH1FW166QaMvs3t0hWLICb0Qnld+RF9kDVkA2YqkkcUVU1VitscF7jE\nwz+/athuWEcRfqyImHvNFseeIyNzgV65W85wqmJizhrjMUUo6ipT/2ZtWTC0\nyrxmvlaSwepQEUz89mLaJMR6fBxqlDo0b+xQWlXDveKfcIfNkvPvG6v8ywka\n/OkTLnmElvo2iEvdnOguzmaOibenSH5PGZj83K2GJc9m46+QuJL3usMizpek\naNGlyPk08rhVVFcu0LHSvUGF0AL221aKoGXjDBSQXEU3CwqZ6ZybXgTJAiNv\nzf1/rN/uMLe5yNNDFzbAA02hJsec36kFnuq+DvQbTWlqdwCwiINwoiYULXKo\njOBQuMRIMQkx5p7HfXs5u2rdIzD3HDUqPOxU9ZsEL6Gl0Oj9enSUJxzpMxmx\nzlhGd4pR9V4Kqq7/EKvsyX4JpvuS5kq7ZkRakNmLL/qGiC0mlCc0FXoUvGa5\n+b0r\r\n=nCQI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.055d4f10a.0","@material/base":"12.0.0-canary.055d4f10a.0","@material/shape":"12.0.0-canary.055d4f10a.0","@material/theme":"12.0.0-canary.055d4f10a.0","@material/animation":"12.0.0-canary.055d4f10a.0","@material/elevation":"12.0.0-canary.055d4f10a.0","@material/feature-targeting":"12.0.0-canary.055d4f10a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.055d4f10a.0_1620170558745_0.41168270324746503","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/menu-surface","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.5b6a46016.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"007488bdd6ff3fa1a383ca4ae9966429cc68c7f0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.5b6a46016.0.tgz","fileCount":38,"integrity":"sha512-zNgweVFejnvXnsB3F8e13vgtW69+1Q4crcxMeN19n9jNn6zh+P7iXNOH8raIOXzv1pgs5riP/VVdRZEEZDrIDA==","signatures":[{"sig":"MEQCIFpNDnzMuSyumJjOSIBC0I6Ye8kP5WnmkwmR9UZMp+4FAiAmEml9xH0iM8Ex9ToSxTUJMboja4AxBsTPbla6Rcf6zA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksUKCRA9TVsSAnZWagAA/MQQAKNCmzugM96nd+ssQUsx\nQuqNJWaesSIZ/1YgBN0tKUzioDEo7DCVroJ1WtQOh8rZj1VwiOCFOq77UEOD\nExuGCRV8Np9i9UEvjqeNFti0HqTDJnLKZyT3Ift+e9naaQCrwZHWM2vBEMCz\nEbVf4I5DfQG/B3g34HXfhb4py7A7dN3QHCoFSHwsu4ehc5Syn0CQ/0AhPOOf\n7F15eNilDaotEq/a8xFPo9dKERxwH0p+N2N8GNJ2XyiP0I0Et5raC3PxsNZR\nzmrDZ9RJAGuCTrEdqimy2FNPk89Io226BjiUJYnNvUxeyDpp5fGA51n9AkYl\nc9oOlcCIOu3sNeXoMNJZMecu9Ur5EWjQgw4tovOOb+5yKEN2VRk9hmbzyJmk\nNGsESQjHD49Y1a5WvyOC1r7i7avxMA4rpNTbz3WMOD6DVJBOboU3bPfMC+nW\nsPFFTOjkrPE3b9lVEZsntWEOF60KMm5b0x9fkTfjBahjTlAJkh1BE9ycezGt\nm+PaX2NZd8Lw9I7EPR87+qqqB5/6Hgma1kw9qtEAUAsgjkjL/Noqrw4GBZiw\nAv5T2xDCOFHpxp1l1XjqBuMniEQCsXvaIwxaMm6EReGnU2CClCICcqlUKGM/\nlHdbtXJNdC/5diy9/VJ56sJptnpIqss+jkx1f216PiGmLYbjS5OpsveYzjPC\nXO65\r\n=usts\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5b6a46016.0","@material/base":"12.0.0-canary.5b6a46016.0","@material/shape":"12.0.0-canary.5b6a46016.0","@material/theme":"12.0.0-canary.5b6a46016.0","@material/animation":"12.0.0-canary.5b6a46016.0","@material/elevation":"12.0.0-canary.5b6a46016.0","@material/feature-targeting":"12.0.0-canary.5b6a46016.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.5b6a46016.0_1620231433420_0.2061584486340693","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/menu-surface","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.33c9a737a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d25e17156ea676c6f44dbbefbdd5ba1f267add1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.33c9a737a.0.tgz","fileCount":38,"integrity":"sha512-LkAl4kDpoToIzlPSM03z2Nj3zIEElMNR7R3Jmt8tjUJ22Y54TpQ3SE9yxkwHfv2wwCfnVyGv8iDVldRbO5Oq8w==","signatures":[{"sig":"MEQCIHkpxyg/3q6HBxphaQR16ABOI3Jxd2mUGFKqD7Dm+EvfAiB107xlqS7xsNiaLkPACPrdox2EkG0hzFxFAkoqyRBavQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktWoCRA9TVsSAnZWagAAfFgP/1qvf5HNy9AxuDI5QOL/\nvV32fQYeNed6V8PKQ8GRx0ajihfPn/jzWEFuCVbBXh8d5BQU8uD3dWgUZI4x\nuoSZxobZ6oe3tXeqf2twY0KoS15jQRMuEovY2E8a6Ori7M3Vu3M/ElSNzivC\nA0dJGrqDuGXAUH4jstLrmmEx1ZRIwVlHEbUnmsvsfWXfleS0va0n3CkkbCyG\nxabz8LWVf4GPvXOeoYlx3jTgDWa5zjV1U29lsayaiOcsw5B4EtSuvTxO2Fpa\nQbmWYXovT8GKC23ROapos38+FarI/5EMz0NkmmABGFDwbDotlKyu6dJ78uzN\n0duuG9pk2FZBtx//rRTPJ7NxDOk0Vm84du+CKSKqJGgenhRiCkuvBC2P5+wC\na6l4zMl5ReoufLSiE2oq5VCqf6sg9hwODPbcYzhB6chP9eYU2bJn0KnkewAP\n1a7uapqDN/r73AwrkjHvyvwMV1mmwvLj3puX8lpGEMsNHfChs7WwkGEMvnao\nKLnWmnoqrkR7M2IojPJSVOlatQ1Shai1xq20CTLguqoQ5TySIYGjy8/wRgCr\n3/tAYLoJ/nj44GYDZvlqq6KzLfhWj6Vf0AhAtJQDbGsE/rSELjbPDtrPPyNk\nHx1r7vpRHC3bXGpwlRej2b0jlMcoOnbkaQrrfaAmuUZ5d1TUOXhKw0BO8/a5\nc4rk\r\n=zXec\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33c9a737a.0","@material/base":"12.0.0-canary.33c9a737a.0","@material/shape":"12.0.0-canary.33c9a737a.0","@material/theme":"12.0.0-canary.33c9a737a.0","@material/animation":"12.0.0-canary.33c9a737a.0","@material/elevation":"12.0.0-canary.33c9a737a.0","@material/feature-targeting":"12.0.0-canary.33c9a737a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.33c9a737a.0_1620235687865_0.8515661452977628","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/menu-surface","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.9bc0effaf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0b92f455f322a7121673a582092c48eb1f35631","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.9bc0effaf.0.tgz","fileCount":38,"integrity":"sha512-TiCESylSr+BZbamq5HgOQptHlF9//d4Hk35DWtUZ5Oip5bmyn0Y6sfgk4qRt4MHDe1w7cRtcOukV9AO5HL5rcA==","signatures":[{"sig":"MEUCIQCFIt/6ew/OhS5V69VVjzBtQv8q/F35HcZZNItkTfCH8wIgMXDrurdeBLQPcKxNcDtqZJd0aYK3YN1nh747GSjVhCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkweFCRA9TVsSAnZWagAAes0P/16JKRM1OSH6kd3VdPbI\nr4pCYuFaBvjmx9nTvLnYIJsg4NdANmBadebERG6D7ODzO4QaEsoDjBuOxICq\nzXrOHmpmWGsFWiFpBmdH5Pb5un6A7tazmyhArRK0exH+Tmcvzg5FJxvGHVQf\nnG+WuteqbyTQ63cZy2QM0dhl0FxwzQGpKGChkqcG1j1svfp1sFbARBpol4uf\nzY7aNK1WPqeSXpcaUQ1KIPU5poiA003zlkk3TZPo9mly5ks2PexQlEOzaRaf\nTl8/7SbadlThdWpJxCwv7JPB8KcovMYakKVvssbNYPSArAOtfF9FVVL8/eNq\n80O5dexuEHaJ5wwrHitdHwHyO8OwEBdj8qScjxWNz6kUIs25AVIZUO56BB7w\nqNvH7eLV1p8PppWaKNL0uY9tEv4IlwRDqdDe0T2wjc5uLXU+zGx1JiK8a2Wr\nUJXpNTF41Sd04ne723xcKCOoeK2eaRpR/MazymgorSYYGB38UcWRFRgHk0Yj\ncXzb++eCVL2XgP8r1DopasKKabALrFlduFANxGKHLSgBPjLkzs8F3tBoutqj\n8qU/NWHT1ZzsyFom6QZQzlc2i/u96X1MfvWH2tt6lFAnZO1NrgpZqPylskTN\nnuQh2e3qu+Xn4scnVwp67e348687gs7d3j6RUZyGL2kAkVAoj52rv9mdwV6t\nXAGa\r\n=jlHU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.9bc0effaf.0","@material/base":"12.0.0-canary.9bc0effaf.0","@material/shape":"12.0.0-canary.9bc0effaf.0","@material/theme":"12.0.0-canary.9bc0effaf.0","@material/animation":"12.0.0-canary.9bc0effaf.0","@material/elevation":"12.0.0-canary.9bc0effaf.0","@material/feature-targeting":"12.0.0-canary.9bc0effaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.9bc0effaf.0_1620248452847_0.2209209308328146","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/menu-surface","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.a1e0f2af5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"594bbb0acfd8428791643de90b5e8b4ac2a98ae3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":38,"integrity":"sha512-STwtDbX5jA349MMYAfSBTrik5LAXuy+/Piqgct400pbcjY3ZQnzwuMyKm23JbZKj2hKsW/0U/5iBwW5VRJ6adg==","signatures":[{"sig":"MEQCIBcshr6/0Al0xdCKBOUAN+sgCMkmjLI9yhZLlzVbfyNWAiAC92nynu+i6mnUN9Rbced+6oUL7HLEGObkCC/Q7bVgqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxEkCRA9TVsSAnZWagAARoEP/RoZVOquMj7GChQKlNCP\nDcRe2eOJgMU/Q5eiUb3CxuU7rIWQnRw5dee7KkOCFFOvZXbpMy61DPe2uhKM\nVWjDtdazyOjRYY4wzkb+V932sPNn2VhCvGNcZuJb9t2MdB2WrmBr2XscYDme\nQm1sSXH4MGZwg54GKM1zNLpqOtBYSBdW2dUG2ks8tvB3X3YTy8JYUDxv+x/p\n/ap+EQSOH/wkgpAqqEDt83/E77cevWlDBEAeJ+PJWKfDtmVTwfJ36jjIzQUL\nfOIpt+ijBWI+CCD9BuDNJzUmzgLFmglPwFvoFW/JDioK3OBOWXI61iWYjn62\nzupgLRb7xD0K+1lac5I3Zh6VahWTSH+LRPLmOrk9haxN8TIUrUCMCZ1dE4Xo\nSQeOE+ZGcVzXsYW/mYkkrBS+AqTUz8k15kzkuQQF6ev2rg+xmcrDwi91r0F/\n6PiOZK9/B4nCxiY1iOV6Kb12yBl4S2HERu9qCGV4sWdlKsA+9VVFfCaSprBk\nQNsAGKr5+uo4tFDw0Pho5GH4wG0ptroktvYH2QtgCVrq4t4Ai7l973P1oUPB\n9Zpo5ojvoIhjdL7e1fhNMI+QxzwfN1UoyyEj2njLuJ7Kzr8rUTst+ZdKynHp\nbIvauHQ8bCNvI/NPr3nx4xmZBcfHXdVSsK8NuIiFg4vx8X7inYvBRKhFI8+1\nNhO/\r\n=ITUi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a1e0f2af5.0","@material/base":"12.0.0-canary.a1e0f2af5.0","@material/shape":"12.0.0-canary.a1e0f2af5.0","@material/theme":"12.0.0-canary.a1e0f2af5.0","@material/animation":"12.0.0-canary.a1e0f2af5.0","@material/elevation":"12.0.0-canary.a1e0f2af5.0","@material/feature-targeting":"12.0.0-canary.a1e0f2af5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.a1e0f2af5.0_1620250915840_0.6198869288468329","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/menu-surface","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.06930c96b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa0a73e3ba47605b567a7bf5bc4deefcb8cdd4c5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.06930c96b.0.tgz","fileCount":38,"integrity":"sha512-P+7WyEbBFKC6DgG/qW0PFfdkxEXvTN9Mi0PQCScVPGA3u8EubtnyYUBe37AK8/h/AV4C3HkwRqZqtojnV8DPeA==","signatures":[{"sig":"MEQCIEjgoE4zu5Xilu808/oG5xMP5G6X4y9EqV3fIu8YiBFYAiBC3oAQTdTOz47n3IvJ8G157HAE2+KXSe/zxdfu5brmGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyzTCRA9TVsSAnZWagAA/YgP/0vopttTZkt3y6zBujy8\nREQ/Br9cxgygs1Yd0PdfjMCNatlCx1yjhfQY35UJr5BwRC//ujg4AzSSduiB\nZXPV263OiPY/4fiHohLRtOJYGEfrlxO4XKE5kQ54meZkppwlP0uN9q3nVyA0\nTrvCWcqK43m943sBCI+gFCltoI9xP6hgza9/8xLCOtkDJlMFayz1U6buYqcI\np2YTktHbDY0iklNtswE2X+FkQ7NBfW4W6Ovb9WGBPbKLz+phEfgB4JiOb2CI\nvbTrtdzkDfnmXIEw77QycJ7lQb3zFeNNxBiZaGTTQZBmlZ9g3I7A+S/PSuBr\nL5uhKx/KDtd1uX+nagaWektio7UXeWjTx52cfNtZHthyZHQhCS8Pq2y6LDb4\newmiTURCuDKrWGWy4XsaMaKnfSeH+Q+eq6badCwp3uMZu7Z3+idVp0PSZhmz\ntJGFsT7rCYq0m7BzaezdIbAXtYBOBi0L3lm0hLE7bhh9M7qwZe2FAZkgKN7q\nRyYAcmDvU2qm6cTwtdb/MSEjDRf2PStkeLPi08+JHinhfsH1R7l5vth9BXfm\n2rO456jALjvjrZlIMMQkwDwg+Dmbi7HxEoBmj1um+AcOtpiJSP5a0Z70C8hS\nJw4VEEBHq3XIGxuJNVJPOsNij+lblMNSf+B/FzX+dkIPoJPztQVtWgIPNoQ9\nVZno\r\n=n2Ke\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.06930c96b.0","@material/base":"12.0.0-canary.06930c96b.0","@material/shape":"12.0.0-canary.06930c96b.0","@material/theme":"12.0.0-canary.06930c96b.0","@material/animation":"12.0.0-canary.06930c96b.0","@material/elevation":"12.0.0-canary.06930c96b.0","@material/feature-targeting":"12.0.0-canary.06930c96b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.06930c96b.0_1620258003184_0.5026525492389049","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/menu-surface","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.03f525f9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b243ecf6c74253a97eca4e0160b37d0143b125b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.03f525f9f.0.tgz","fileCount":38,"integrity":"sha512-Py7Cy60HcBq5ZhMU/tFdN9v7oIDbPzCIpmtwS68jJ5oimTOGT5XztJW1P/9kexhSkhWy+KMaTyBvaFNV2XY+1g==","signatures":[{"sig":"MEQCICb+iejS19Tks3mGsQDFyV/nd0mVehSc2/tzHCrKgfa+AiBix3suWzCQj0wPAUggRz6mcMgiP3Afjm9/1eQoMDj7JA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkzjDCRA9TVsSAnZWagAAa2IP/iM442slNkESkCB/uCh8\nbTDwB8xT7Mmjig1MSdkwrF4WMSyPcusbAX7WJT5gfPesXlm+B1hj4/zvCWbK\nK0nR80BVFRUKYXxbT6LdoXFV5aYec80SY1Gw9RA7ARKE98pmf5OCCW9AYJ9/\nGvr3JoV7KiOWFmgRcz7np6RUi5IPq7DgrRiMS8Pqtzhr5XquRhEekJEi3VLH\ndz9mtTLws2RknaY8BWIdUxcnrNIo1wlGBePrwGSoFTIsXG4TKMeB6pOaAVkd\nMMsbnqLHTdqdz0cScFtI+3gJ4X7Q+4vFsJpwG//hok7Lj6B/gjoNsGQ6sfVO\ntdcjnwtKXa8LaWH3xzgqfhrsBCSJqFfmXrIPotqYj2uQuYqmUMW2iyEPCTgg\nbDfv7Ddnbn9hKe2qHTiWQq4X8jyKnt7vvbbUpri86mqHycKqDsGIJKu3QVlE\nB3P4lYdmGq3tTrUc9k+fqCBg+b+cK7252aDpZ2jQhCi//Q+tSmWuj9tiwA7P\nW1741GSe/SIPsFPon4muwPWhTscLxSjLV6xYfu4EZFibKZ1uVrxJUbk3kcMS\ntHS4r+BnXYCQOSWmve9cZjJZy4kjl4p+QiFgJu9/vitt/07IR2Hz1eX170aC\nL7ptoeNT2ukjeh9X2u4FPGBFZ4afSIMkL01lAxKpcAkAgfanUKMJ/V+x3QZK\nJ2GK\r\n=Cyko\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.03f525f9f.0","@material/base":"12.0.0-canary.03f525f9f.0","@material/shape":"12.0.0-canary.03f525f9f.0","@material/theme":"12.0.0-canary.03f525f9f.0","@material/animation":"12.0.0-canary.03f525f9f.0","@material/elevation":"12.0.0-canary.03f525f9f.0","@material/feature-targeting":"12.0.0-canary.03f525f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.03f525f9f.0_1620261059335_0.5379006111357092","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/menu-surface","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.e82ba2a26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1400e74fd78ced2365abb052e9caf443249f7bc6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.e82ba2a26.0.tgz","fileCount":38,"integrity":"sha512-CiDUJ2H3t52TA6I4Ziw/l0m1ZhVQIkv/Hd6zTdSY8mW8f0uLgCnNnU4E1n4m6ckFwQn9dDrx67B/3ovZzFWPSQ==","signatures":[{"sig":"MEUCIQCJXjFRwPOW6MjAsCz7XWJJfM+KGX+/GRe0b28i1n3peQIgPJDgGxxD+Adq+8MDrvpELCn+0hVatoccNOeWjiUbKKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBHoCRA9TVsSAnZWagAAS9AQAJiKpPBrDv/pnzTC1Vw1\nWGJ7YzKW9FyjMQj+E4Jr3uI1kE6Z6STURY/8ZKsHLfZH7X/ZvJx9mQbZN6xz\nD2hWothBD6cxaeiCNkBT8yF/u5hNzOYz//Pb61rvAuaSBNSPawXENk/bq8U4\nXwk7OCjMs+voPOiUBBv+HQC4mo/CQI/piuWFS88WL81CRcMQXqxN8Df6zhDY\nGzQrZ6LNBjYSlvLz+nB5R+fZB8hQrO9YeWpM0oIRr31M0FwrKPPCG4NCbH5V\n0EMJWcFQn1nABxnu3gAuge5ILQqBoddUtrGX3yGbAGhCeBbFXVCfCFWLoAqO\nFkLEjRJznxZDePwn1JclaxMPWDgGOyLtYEDdaRKCUklR67P66l56BDHLaPPO\nVwflOUHpWE1BOBxVchtMBHI0GAwZVtXyKG1atgd2nVqcwUqI5JZBbhx7bF8d\n8ddpfipRv1WvpHMaNAsDCGRgavaeqDi6yi+4DDzRmajVQAuykWzI9msDdbzu\nymsn7ReR+RzDBjUrCZgBYzU5w3UBE37TUpAUZ4x6WF2Idft0Pya4/vG/3T89\nHRy3RbeeAAZ9uEh1dStL9cWmWwhxAGihqXIStbpO5ccZQpX6dxClVehKkC7b\nR9GAInFIDz0mi6jsklM0WtoAJhpVENVEl/Hu53/UOelnBc3WI77L3Fj2toup\nmM4S\r\n=HIPm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e82ba2a26.0","@material/base":"12.0.0-canary.e82ba2a26.0","@material/shape":"12.0.0-canary.e82ba2a26.0","@material/theme":"12.0.0-canary.e82ba2a26.0","@material/animation":"12.0.0-canary.e82ba2a26.0","@material/elevation":"12.0.0-canary.e82ba2a26.0","@material/feature-targeting":"12.0.0-canary.e82ba2a26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.e82ba2a26.0_1620316647590_0.9291807343692604","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/menu-surface","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.fc7c4e5ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28a4d661a7cc7cf7224af66b79bf18b11eb398f3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":38,"integrity":"sha512-cxjB/CGYVMfW32VJMOKfrmNIS8gGtbbt4P26p8vLmO2V8u0G83zq3P6KAr0Ldrwi7d8PmX7apojJj6DOCm4y5w==","signatures":[{"sig":"MEQCIDjjjnn4L5NjwOMQjCWDg652vKj76ymc9eBEZXZd9R0aAiB3hgpM7+pOGM+AbKkY27vpjvTo9Ma+6h9GOUbh4UyVcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCerCRA9TVsSAnZWagAAM9YP/27gLQNvNpDnadRY9yyX\nfqb6LbWpzN+xWGoo246/uCqYoGkAfnMPHm3fthN0s4IaSGOIwKZ3bBrEU2Q0\ndPTT60IYkenG7l8Y8byORnt6JCwHHqUtoOO9oxDm7X8juG3mm+uaUPYIJltK\ntNtRsL7ZYLlg0/gT7hMsSOOtBjVoOUvWdCVVciS1E1sAEoFzR8Tvv3AFVqCJ\nToX/B6yBRaLXnVquG22ot+SVeOm004zoL9CdP4HJrnA9ElBwcK7aKUtb0wds\nWurZ284CD/qZzul4fDp1Lm4lGWKH5VPsqjS/VGQrWi5Lmxa6yxRUQoMcqY+K\npEXafiuiSkVWUilNm/EwnulrwV1zRJmkZm0UKCrNL1ouTRvpmql44bkHxC47\ncLEruvrTMqET8tVQxpgbNA6JgK7jmTG9/86xoCziM9isqOCS9z6q2I+Yjwyx\nRCsaHZMo+11BmgGHmPuqEUIYtnlk+Bsben+EyMvpkbmVETFF5KqRBEC5ny7b\nn05xAUZh092pTP/XWymPVwnwdggmQlE7P3vHwRMfTFM1SuydnZCHvxSgAk2i\nDko7SMin8BVw1ugmA6+QGDKX1g8McXg6jJwTrQi98/TY7XAUIx5EYJdEzSul\nEqD4DhUga/jXexGnA81tBNlMHXLB8wbgrsCkenF1VoC1kvkT/gbEi13jTozz\nm2JS\r\n=kF9L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.fc7c4e5ce.0","@material/base":"12.0.0-canary.fc7c4e5ce.0","@material/shape":"12.0.0-canary.fc7c4e5ce.0","@material/theme":"12.0.0-canary.fc7c4e5ce.0","@material/animation":"12.0.0-canary.fc7c4e5ce.0","@material/elevation":"12.0.0-canary.fc7c4e5ce.0","@material/feature-targeting":"12.0.0-canary.fc7c4e5ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.fc7c4e5ce.0_1620322219236_0.20275340911981332","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/menu-surface","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.65c04514d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44ca736ba5a2c46c42ae0fbfcdba43751be428ef","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.65c04514d.0.tgz","fileCount":38,"integrity":"sha512-epNvU1zrjvC5phHPkxDfCElovG9rrU0fKjBvvwydlQEfd2CGxNNidcCB+XwyZuHV5Ngkb3clWE+qBfYgVT+EuQ==","signatures":[{"sig":"MEQCIHyCiJWyCpgCbVcjvYo36oBcDaLsEK7V/ieaE7uJEU6KAiB/gn1VIo0xtj7xyloAug9wNh4SpG2/IORuPs992BN2gQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDkOCRA9TVsSAnZWagAAnioP/1vaW11xaJeHH++xnRHW\nYbZ3o7yjXDYx+LPpCnCcjqvbNWAZor/c09v5gGrPwe7TDv1lo+x4NUoN0Fcj\n5pRDsk1JRc2q6sBipNk8XKfeQN32XbVmWA2E/giH2OswTf4kvEAN/GbGzz7q\nMVCRHlgh6PL5h2pm6aYsjfzeIfCFuU5i7+UBEpObibRlanyYRsLejJ4P6g71\nd3D7u1dg2pTDkrfuVkNxaMX0rk/dPhtgqaJkBcN9npyQpogiyJAHyA3DgvzM\ncZtiOW/6PX4Dt7q96BYp0x6MVK1mDK2En6YHWgn3LIHdCaoSE5mEkVF3/2Hc\nTN6G1FFQkyzRk77rV3xf05R2pP5mcKW+FTebSf/VN5uhiNnQ2NWxM4l5ZO/B\n7KjD9cFtBlWgMlDHYrRKN18AgBZ8dBucEZMmWo3kC+hR2PXxQuujJ9VqcDBe\n383p833FyVufAiYHUhLeHZmRV9NQ+EG6A0voLMbavAtBMK/7sQvWmAQK6IAf\nFN4QHVUxOzudX8bSM8Cy0BcHeXi0rONGbNNByW+TeHcKwx39iWiLIOB6b8PO\nrHy8TspSbyEWwuebjpAgPdcFnwO5v1UsMCI34qQnNQ+ye8BRHlJqgJMXx96l\nMrij35zSF/L/gOSc/z3Pm5NazJhJ6ccmGsE1jYd1iytGwnvmyUuJzgeh5KZd\nY6ki\r\n=MowY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.65c04514d.0","@material/base":"12.0.0-canary.65c04514d.0","@material/shape":"12.0.0-canary.65c04514d.0","@material/theme":"12.0.0-canary.65c04514d.0","@material/animation":"12.0.0-canary.65c04514d.0","@material/elevation":"12.0.0-canary.65c04514d.0","@material/feature-targeting":"12.0.0-canary.65c04514d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.65c04514d.0_1620326669355_0.9333491815441324","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/menu-surface","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.c97779ca6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3331d7eaca78ecc1374b1a1e894f80a72803a0d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.c97779ca6.0.tgz","fileCount":38,"integrity":"sha512-AnDCsaO8s0cnVM5Hu2P5NDSRFmwhyf6J77g2KN9ppbRuB7gJRdyXzWhUVlCW8moO0Kz9hIyryJV4EblKVuH2tw==","signatures":[{"sig":"MEYCIQC/3cdPnY9KG5ihl5ekkUDSCz/d49J41cSOdZym3/h5uAIhAPhZw+jygSxfYia10uUB2EmUgxQBPV+ElNxCs0Oa43Ne","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGMnCRA9TVsSAnZWagAAh2AQAJa2+F1rvtNeKmioECsV\ne7l4OjlFWyb41zZvz6iAaSR5bgWT9YRH2DY+b++hWpo30A3DH2rvKRsyZBLs\n3GTrwCSMGMPgPxzAXG5f5OOyr8RTS5Ynicuqu75OntLHFSht3Y3AmM85Ze6A\n2RnMCIzC9nax6Ik3P3rUCb2C+YeSG3Fy48jcwv92yTLJfXEhxKqFqKIBoAE9\niLph/bsCFZcL4LjL5LKtF0792QwISjOfIFjetxK1qTqAmn4Ug8LJvWTdQYtG\niPVi3KX5mq7QB5RXlaj3ea1u+cwwaLCgEAKRs9K8BMDXZkkinLVtH6jInXQ1\nT16CL7lFBYBCXZv8IIino39xHiTXtEtry/5NepG4nhjNUCf/Q49HVRKNFJ2S\nXBfDeISjjqHbbbtNY2l6+z3hf826VN3ZgqYdU7f6d7H+vZKPxZbG/CO4EVpL\n1+T89o+TTz8w1PHbn7dH1pxgLgX7dRQimnX2c7lZa3aDQv1rOmNpSlXIcLIw\nvxoc77zBxvjKqp2ltXgrU1FT6hTzK5Yflp07BAzFpJdrSE+OcVXaE4UvgqEy\nD8JEFpyY4TTlwQKe6Vf4zwDGBXNRodG4jkOSXRq7D6nBeyLsVhW+BvQi+hdb\n7cj8htO0DBOD12wvbCT4qjBpYPYdXp6PQ7aYv6N9Z+A0/CTDgbzxfvsQQnR7\n+DXp\r\n=nHDM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c97779ca6.0","@material/base":"12.0.0-canary.c97779ca6.0","@material/shape":"12.0.0-canary.c97779ca6.0","@material/theme":"12.0.0-canary.c97779ca6.0","@material/animation":"12.0.0-canary.c97779ca6.0","@material/elevation":"12.0.0-canary.c97779ca6.0","@material/feature-targeting":"12.0.0-canary.c97779ca6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.c97779ca6.0_1620337447276_0.02501133966840774","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/menu-surface","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.869d890d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee468ce83896316836ce9a7612d0a3fe2a26ef02","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.869d890d4.0.tgz","fileCount":38,"integrity":"sha512-1wucQt13wkBLHfbpRmv9TP4VRgbnzbrwGj0rDuO6QlJSBNQtWOroAKhSY3U4fcuhDS8aH33i0KDxCUofmMtFgg==","signatures":[{"sig":"MEUCIA95L++P3GOnb2E+nQs8oaegqnuH2Al4f/oAopFYLb1pAiEA/FMt6UPyCpFWC4fHt99LZWNveJEVrPOUyj7B0IV3XZw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVqLCRA9TVsSAnZWagAAKE0QAJmTRl4NxNJ/I8izXBi8\nu9U/hs3GtpQARdmtU9YS66bK229GgNRVIP35jcHFRUphJBiutQ9G+swE45Qi\nABHu6mkEOxCnVKmCutu2mI3QiYTqoWKYYxUelrFD57DuqzOCNo1SMurbCbui\n5DlFyhp0YWuqoOVz4K8y84JWf8BUfcMSu3Iodko4ZU3qoNJJ4Hkaq6NZ6oci\nQ/d3rKyMr1z+VOmiPtdXK/0zaMGPPa9cvHNtr31djGvY2P11Iuuy95VBVMBi\njpqxA/ByJoNEUyFe66xtPdZLjUaRowXX76eLJaUTDaWvcaR1/1KcZ7oBQL99\nx9dMYEL7syuqrfQSXEJtao73cDd1l4i/4IWaLLx6bXcmjJL0SPoqPlCwupDb\nF9J7UCQaAAEi9Fdz/Q5EBKUPq56dA7C1CbZ8N8S1+xLFLtmDGSbqBVd9uA3i\nbEGFRVEj1E1y2maTpJxdZuBMaoGuV1VYRxO0lzdv0pmCRqnbugt1BbMEJZvl\n2Zw2/hCN/KK9OPBpFecFoCQpk8H5kgpdtgK4B2hzhnmQFlMXR+W/Ki6ECPte\n+19Ld32VKTWz9RabXBVG1/vUzFV7RcxmYRorahrNzhP9WLQg9dg50awt7PNy\nlHbM7Lb97Rv7UWuRQAYHR/pyWnfWBFwVDxeogCW0hTHpngoYB/y+47FULvy5\nD6NK\r\n=6FTb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.869d890d4.0","@material/base":"12.0.0-canary.869d890d4.0","@material/shape":"12.0.0-canary.869d890d4.0","@material/theme":"12.0.0-canary.869d890d4.0","@material/animation":"12.0.0-canary.869d890d4.0","@material/elevation":"12.0.0-canary.869d890d4.0","@material/feature-targeting":"12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.869d890d4.0_1620400779492_0.06879129048046018","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/menu-surface","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.ec22e1da9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb0d8a20efc4b0ec308cac99badccf9727738cb5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.ec22e1da9.0.tgz","fileCount":38,"integrity":"sha512-83FfRdbw82HtOTi5TBZscUvjdLf6k7AES969vlW9cxtHNum39TAK3tMt2hLxp26U4tIaJEBOPjKE7JM6rkw7mA==","signatures":[{"sig":"MEQCIH+7EIRYkurydSc7sxo2Nn4p24mhQbOvza55ratldrGpAiAHVWHqPvl1y6fcNaNdG5vdgI2OwJ+bdNf0iQjH52PdqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXpUCRA9TVsSAnZWagAA2uIP/RsIIIxMNPhNunVpLWG0\n1bnQNo0i+SXo/PmrW5rlU7smDr3bh3yddnQmaGxZ8BSMNb0MOTtIwan1kYnu\nbjz9pyTX/p4Er8nWmPET+FQr8ep3zPftwgLY/+n0yWvtLXdPWZvwbGg4DZor\nZoSpu/807R1F846f6hbM3td88ZYGFp0vkFUa9Rdqm5btl7D0aXSusRuD9y4U\nvCxCdbqeroSVM8cQv6G/cLWMD9sfGZ7cSIRC8eO9YFGbVO+K9JvIiKanw/FC\nR5E/ZaIGMXCNb/22MydHTOtZS26KdPgRFNCo/tn5WfLp28ImDJn/hM0TZ/aO\nxMiMWbrWnwvZejtftnuyvIrwGmCBpyekxK5QA0cUhsYechFyPs0r3BV4ZGYw\nrwklBja2e7KvpeFzzJDacXS/lpqD8Y4y6DBeCvYKs1swubSsYzbv+kIxfd/p\nTDHIPiKlxwQ9oYQqh3nBT3UKg3FeInPOn4qwAz/ce1VvrX6bHWiNcCojn2TQ\nChXnVMdLUc3+hswx9Kjv6+osCYrA29T+WIrihPDzVHE3/SXOMb+RrZDeSVwU\niDsJt1sE+ldIa0P+7RdNQCd2VR6YwyqshYcYCZJp5XP6Zmgp0Rx25ArAZLEV\noVwMgRhH5VscZoosY6S2j4Wfg9gQtaLjEH6jZqdIDklZsPinc6Wsfvcq8qhf\nMQr4\r\n=6TSc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ec22e1da9.0","@material/base":"12.0.0-canary.ec22e1da9.0","@material/shape":"12.0.0-canary.ec22e1da9.0","@material/theme":"12.0.0-canary.ec22e1da9.0","@material/animation":"12.0.0-canary.ec22e1da9.0","@material/elevation":"12.0.0-canary.ec22e1da9.0","@material/feature-targeting":"12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.ec22e1da9.0_1620671060238_0.6479361306173923","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/menu-surface","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-nightly.7427449f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"883469820c89ed71283f3251c5960a5a40d74146","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-nightly.7427449f0.0.tgz","fileCount":38,"integrity":"sha512-yAPH8yBxsMtV353tILcBiWXt1F2NLNZbixq3isP8ncoVoe1VZIOQ2+0igNzq9wmCxlmMeWARDWG9A8F18a794g==","signatures":[{"sig":"MEUCIHROBhMxwqvqXWZgjW9d1QlmiCiQ3VdWHlZHqeCdMQitAiEA7Iy6hEAFiIy3OmU9DSZouydTZBP0UEbGjaW1NqQgL5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX85CRA9TVsSAnZWagAAcHgP/RbE36brv0tfyGNPoIOE\nOePojw8T5QdyAUlF6RIZUylHe4nnjdSdiWNQz6cSmHBb/oBepTPf7AYQktic\nN60L3vpXS2eybzxE5KndjPo8hZXIGB2U6O/PvVMyDJoJ6uoiIWHcDFECr2HN\nB5tP7Za+/ilzHJBocDU1yvzbmGucfiK97fwmNanRnimyklxbpj/unBgKJjdW\nNYLfxH7QMgUVwSDwObBEXyn3pcqDS+lKe/kM1TOn2NdDTFiFzhy9tiZoP6Sl\niO6U5Q4k9avcCa0PDfIBFIjKcHkfoxYMYgPFqGZ6ODGtHDSVGsSbx+ecY+et\nG5OPB+w16+q9OSwmzOGEzti//ygecKuL6qP1O0gZwLi3K4XPUwom1Ojr/cy3\nAhtyw8hHg0iXWrEbNlfFBG6LwrypckPsm/4hpdOckcHiXFoyP3b0so9Xc7YF\nUFUs43TPM915ebKrulEW8Z271If6bYw/wsh9IUDX9qehx2QjTP0eXSyfW9ks\ndvhJjGTAtCqZzprRRw42Pldu+1CYJQVh4fFkkqArrueiuQZPniiLwS7luL5w\ng5zIhg/Czl7R+WRxDc5UouIQKDwlAIcdegpajKbXBmg7SjFdhmBDNEPGJ3Qu\nrS6LG0HjBTo4iyZpTDGBtrSsnqn3wsmCwrJIgcogt1FDR/ROW+leuYp6X25u\nuKmI\r\n=c0ai\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-nightly.7427449f0.0","@material/base":"12.0.0-nightly.7427449f0.0","@material/shape":"12.0.0-nightly.7427449f0.0","@material/theme":"12.0.0-nightly.7427449f0.0","@material/animation":"12.0.0-nightly.7427449f0.0","@material/elevation":"12.0.0-nightly.7427449f0.0","@material/feature-targeting":"12.0.0-nightly.7427449f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-nightly.7427449f0.0_1620672313095_0.8858661049751932","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/menu-surface","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.957cc3bf5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e381682dc7d68e80a264fe6c54a108db0b4527df","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.957cc3bf5.0.tgz","fileCount":38,"integrity":"sha512-nAN/nQ2iRFt+nUEP5PO07vm4EPIJOR5dv1Dxl4TecbbvgHswXHSMtrIDOIOqvv4tTOSRyoiu43QQh5qXfcRfVA==","signatures":[{"sig":"MEUCIGvwj7Na6eibB2C3/j1fpyf6s/NTI964XEoZQkeikARyAiEA9NmqmMemq8NshoZNHuZNdDdE2CyHkJNJATVCvWmuNRM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmaxXCRA9TVsSAnZWagAAAQYQAI2N3dxLr21zALVxA+mr\nqfyX5ZK3OWwANLWfS0E1WBdSnIzbjDaJo90029OQS00MyAYN2b3sbZKpoAIA\nA4gjwhtESA5TIoUHoZq7mis2J2xbFiq8Yxq1hf5YuqGz9Xl6bpni+72E42ud\n96Eu+I6XSYZ4f63Ldn5XhyBHDd7F0x5oJqVYnRVSradrU1N1L3hYkIe9vpas\nwk9Y3s+bWwg+1dcZsWfkD7DUm6DJ3wscPbE579RjKsmd2rB5Q5enCgBqtvi4\n3YkmgyBPwb0ObxGEb/9ePX67VUM0SaGuvbJ9/KI6CxgZ4wLKClBt3gz/dGyE\njzAtJ/KHHrqXfgC/PvDzlnh+SaI2NipzTWO1+o2hPJYvcsfpi1IKDqZM0PqK\nOE6UqMeU+COGmjFyoMu56QBlwHI3rrcw+qUn5py86TE5w4ka7xpBigWT3ekt\nRD9IdIizCHaTJKtR6Uu+3bHgv6w4lQwctIZBeYp8wHVIm//TdeIRPbt49PyT\nnUDyJ111eb4xns5RtZ77dsq/xaXMKVg6xL05mGXNvVK8xyLrZa+p+8vRqIV9\n3ezeaV9jf8WsUBmI3c3WMK7sWn2v4RSJCRARu1tgnui3/fkWIYeF3XXOwAnq\neDti96Kbrbh1ZVH/0nixdVyqD1C6FslSNKzImjKSEVA/aZNSzkVS+dJkDO/1\nvNlC\r\n=Ejrf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.957cc3bf5.0","@material/base":"12.0.0-canary.957cc3bf5.0","@material/shape":"12.0.0-canary.957cc3bf5.0","@material/theme":"12.0.0-canary.957cc3bf5.0","@material/animation":"12.0.0-canary.957cc3bf5.0","@material/elevation":"12.0.0-canary.957cc3bf5.0","@material/feature-targeting":"12.0.0-canary.957cc3bf5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.957cc3bf5.0_1620683862889_0.15154275479587676","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/menu-surface","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.88a33cd70.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfb29ee77d7ee53a8c60c642689b8cf1a98a9046","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.88a33cd70.0.tgz","fileCount":38,"integrity":"sha512-InH2PzfqMYMNL0wZD+aGHbVYESFjMLpBLfq3G3OGRCyaXw284NYySAoQhvJN8ouRh6KnAPEgOZkppYdtxwPfeg==","signatures":[{"sig":"MEUCIQDbpIpcBMH8kMmfqQKDI7q76RCPb5utvSFkJqj/7HRXZwIgd+gYaWDGpTK70ix5qzfwIFId2tQnEzKyO7qAfo69XP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmctPCRA9TVsSAnZWagAA5V0QAIx3yFBFu/xaWnOCPm8r\ni0Z6fQVczPi5P+8VmMaN+n6NrCQQJfK5TI4PDfIGF+bM5TrvPVdVfdjlbl0Q\nFBTEFfWTzZJLcPXeXhd5eae4HG+aKsd7Rihcn1VdaB797r9Cnir8eoFFx35w\nqpW8ufmex1eutvq1f2VMJitj0SiFKTb9p/qHrvIYnC37d9W07bq7ZyIEV150\nTc+AnvOFkF+4j65y/nweHEJ28OGlrrnrcbHsnqpgR4FHxxGWpFMV9ujuSili\nBu2Zw19RYgx33foZI5xpdta+24iwjaBiHTWIdtMVIQjJ+7AUDyOZX6HEmYBu\nDd7/zHm3UUossh5DL3Z1R3FAvJRwf8FkgWHp9tsonCY1v5AvX3r+tR/15chv\n1CzN2LHP6w/mRVzsgy8iomOHl2c/LTLqg6ThgrrAXI25UfM6zLufHWhNLzrv\nwKcIhleI25NF3WUo+YRLNTOQvdErWYtAChTkBRbC8eMtziHSOp5RK7R77Msm\nCUI2XV0YV+OYp/B14WK9EMLqDiXmdbL4z6MnTGiPAGki436oP3Ir5stp7voF\nEgPqkuIDSf6n5O/Gw1luj0kGR6qHQ4+EWIgEPhdDgGV1XHxkOFCaC03y7YUs\nBuI6oyxv9539BTa+gnsOSsDNLfZSAn3s3maCZWu9TTJwTDg2Ldu+oNQuebkl\nbut8\r\n=d6C2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.88a33cd70.0","@material/base":"12.0.0-canary.88a33cd70.0","@material/shape":"12.0.0-canary.88a33cd70.0","@material/theme":"12.0.0-canary.88a33cd70.0","@material/animation":"12.0.0-canary.88a33cd70.0","@material/elevation":"12.0.0-canary.88a33cd70.0","@material/feature-targeting":"12.0.0-canary.88a33cd70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.88a33cd70.0_1620691790507_0.9899301390219066","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/menu-surface","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.d20dc6dba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16c7bb6bb00b975c02daa93472b2804607d57699","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.d20dc6dba.0.tgz","fileCount":38,"integrity":"sha512-Ez9gVUcRDiTCS8DqjjTgfsaBqDvZwYH1EcilOa5hhAEwFp5Qg/NUGPZmrn9ju4GGBzaW8wv6ZFOYN23mw5rISQ==","signatures":[{"sig":"MEUCIDrFu0NmY1696rTzfh6AUJbRoB6zFYFJdailRCnl86pnAiEAyx7JT5q9+HeHMX/qZQfn5YLH4XIHnq1uS7BG6wkZxwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc7+CRA9TVsSAnZWagAAAoMQAIEHuWQFZVLpahQRSQhd\nPwQTpKx06GRMqCJfVFlJcPP9HE4l3YjHjSlY2cPDPS9j2/09Kob9FkankW58\nVT9tYovAXE1kVeJlV5cHRf1cNptbMpxKLu62hKmxCVg6vVzv3ZCs4v6jkQwg\n/qVdvDwsmchsdsb3sgrsN+MfNlA1bk7nt17ev+vqVwCqdXGppuahk8glkeTa\n8xqw8S70ZoZP5A3g2c+A8noDsMd0XrzvgPUFZTUSbFHf2XX2ddyXRzk0HYLE\n3KMucsx4kgOjg+A0NUFHYvQgK/b9WqBcMfoFjmm5Wpo6e4vgfhaihkLH04tO\nsbO4a0DNEd9LkMoTKYDk//caDqG8FDD97VopQcpcb2eL0AU1WSOEA9rIWM+C\ndw2DuAmJoR3zJCKPe3qp2M8ZmdOUwB32YO54UkzlcgOHfrTqf9GmDhWcOVA/\ntOAD/wzGXg9oMeJWBYSnvlG8dq4Mp+8da9WmswPUBdRYBSC70PIoXK00VrhR\nTcJe1nmpGKctZ6BxADJnWWemTJCgfFs26f06lE/BVgmQ29NO5TVVIgEkbJGI\n6d0OPXx3/10XifAHjBYb+p0zdox+lK/GvBklPiRRzvcmV22tk+HjenIm5o28\ny6XJuLKo5L/wkXhwT4VY2cZgfY7JZaTvxAgtt28vtXfsdSsj5yXk7afgAcw6\nAu+g\r\n=MB3i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d20dc6dba.0","@material/base":"12.0.0-canary.d20dc6dba.0","@material/shape":"12.0.0-canary.d20dc6dba.0","@material/theme":"12.0.0-canary.d20dc6dba.0","@material/animation":"12.0.0-canary.d20dc6dba.0","@material/elevation":"12.0.0-canary.d20dc6dba.0","@material/feature-targeting":"12.0.0-canary.d20dc6dba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.d20dc6dba.0_1620692733953_0.6076295638189408","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/menu-surface","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.0ce2fdb02.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71bc212cb55c6f0b91deba86c830f0491ec795df","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":38,"integrity":"sha512-o41gjZZNKNiJ+f5KJzPW2LF/gOI6JZ7BngQ+9bfUzuQJAsiDMhFWQb9gFBzE7G/KPoMN7ry898LXNbGFFuu0TQ==","signatures":[{"sig":"MEYCIQDCHqlvddhZFnTiqkZ641riBrPNc4mc04jVVxdTmaBVXQIhAKC5wwlkI77/dMwhXOfcNNLcPVjpOFuBoCVnKaYCTG+u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdbyCRA9TVsSAnZWagAAIR0P/0sHUig6EhFeqLzfrv60\naUfrRlsosxkUVzmACI/BeevsZ6MemuosZDimm2PlshcKr7FklSU1Q+2dMwRY\nw3BmQ1JUWJxfERgzmee612aIeqd+bmQQZKgwnwo2CrHhYqYlWXbjJIffNTVK\nlJW4Y3Iclzh2jfrSr6PmO4M0Iy4vC6/p58etpn0nxDjQdGRLKrbqoRBUXvBL\nIsnv+1EH6nUHmi1rCot62K/SrbDbKqOwyksAJASzwjfxfSxu7xFHuT2Xnjid\nQkzs3vNeP/qvBhdx5758kKOTLwmiT/jYJSDsm45pgNmgHzQGHWApMFhm7RWG\nUr9COIId6jli0r7i5MVX94C7qcSPgKB8TcbHSWKE3ucz5/Go9v9R46teng36\nFxaQfISCLn3AJlBDaTby11sNdzWtp1ekxywsBIVYLKCpYyYkrt1WvVjjSIiB\nG45uVlE2vqYeX/fw3xxq1DOusEBw2wIKjkAY8AXrE7d77ieT4s/RXa8n5ZcI\nhgnS0u/BGrCRLyKEq+24RxN/KbpW0lN+2JPaRnIsAhl6ArCmRwRz5h7p8FrL\ncmqsZxOxT5eQAd6EAWn2KxH7l3H0rvqSwgrw+q22qgeuRVyiH58HDc8RjkwZ\n3C5Cpx7pKQeJkXdah5IKazQDDfD0hAh5CDmOXMjLdN4rGhJsAYy/h/lROMVv\nfue+\r\n=J5mr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.0ce2fdb02.0","@material/base":"12.0.0-canary.0ce2fdb02.0","@material/shape":"12.0.0-canary.0ce2fdb02.0","@material/theme":"12.0.0-canary.0ce2fdb02.0","@material/animation":"12.0.0-canary.0ce2fdb02.0","@material/elevation":"12.0.0-canary.0ce2fdb02.0","@material/feature-targeting":"12.0.0-canary.0ce2fdb02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.0ce2fdb02.0_1620694769617_0.3307654479757589","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/menu-surface","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.cb162da37.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a01cc48e296d51184e69ab0ce4553fce24246ce","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.cb162da37.0.tgz","fileCount":38,"integrity":"sha512-F7JeIxS1XkFWjtpA7G9ld8lkxa8yvwI0DjVudQsO8hXTM6TOkrBtdCzubRyxbC0SGUYs14C+SETz5UfabYjWGg==","signatures":[{"sig":"MEQCIA2lfi8Y7kgAiOn0NUdq96MFVfjpBtBvuKChCNqJwTdqAiBQPx5IseRO9kVK3LCtAgX5VjMfd8i5zAsk/QrpSjUe1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeT1CRA9TVsSAnZWagAA9ewQAIYb64s+RYW+xPUxc7Z9\nPy1ZA5eG3R/2nk7pNNpDZfeiUp1L/BAVBBGf8ynyYM7MBE8hzhbosfrbdN5z\n4CUv7QHTeweR80L3M91Y0mYn3Ah1/7my03kQWhQeZ5QgGWa4c/BcNGBTmFcb\nR6ZCz2tUddmZoaSWczFBDb3ZkzOprIUho3S6icgR4pq4G5JIiod/WsLawxuD\nCxya094C13xRZEcIxrsjyhERVB1dlRyEUrWUrL3NDkpKWaoOezeGIzjXeHip\n3Riic+0h8L9vVotC2fOP9cmf5Ok7WGlEbjauSiCk02yhTj+NCjX+XzAMWcSQ\nWuEld1qXdjhNveafIGF4/UeKRxoSXPJ4EHhHIsEpIsvpCmUKauNukVnZP3q5\nsWXs9uPqQIrIF8st49/8N+5x2sEjezWcgc1QJTzyymPz91nOLlsGg9chGi+S\nyOe7ZBmywq2TsR/m8PJukdwNwzg19kjMf+LoHlN2XDjsp4OLLLhsp9krvra6\nUd/0JQ0P+uINrEzhmgEc59VIQv04TS4Xj4f7eZwCHk90N7GSGyjS3QrKz9E6\ngXYW1NRnZIknmVzf9SWLRKltYxuWTqoWWFUhmdEY/hdxkr0xHqnbevhN6lod\nSsbTI7OLDiRO8AqfFlkB4udZfzUKiqaN1jVPBpBVjdQW5YzpeojrviaV7hkB\nvjQ8\r\n=dOQE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.cb162da37.0","@material/base":"12.0.0-canary.cb162da37.0","@material/shape":"12.0.0-canary.cb162da37.0","@material/theme":"12.0.0-canary.cb162da37.0","@material/animation":"12.0.0-canary.cb162da37.0","@material/elevation":"12.0.0-canary.cb162da37.0","@material/feature-targeting":"12.0.0-canary.cb162da37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.cb162da37.0_1620698356633_0.05709043203771591","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/menu-surface","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.573dc7ffd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c104bcfbdb0c4dbe9660eda2932a18b1dd4e76b5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.573dc7ffd.0.tgz","fileCount":38,"integrity":"sha512-5YM1Z2pamxCdNOE5g1vryLNF1kyktmAZ/lENb6G5iuLQE0e1fDYrvcAvjilZyHYnSZiju/WmTJ2iI3rJ8NBNNg==","signatures":[{"sig":"MEUCIGCMVjoqilf/Sc5oT5XHOFYZTGkSMu+hCMDqCLyZQck8AiEA+VC5bgCpgEpMjxTBGI0OatyQM2tSBDP1QUs9puq0Orc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmellCRA9TVsSAnZWagAAUjQP/3JFYDvK11h4uiA/196j\n739P9Ri0BiiL3wzzr0iDItiHazPqAjeEAiZxoB/KLCV8IIinc74jpuR/A1B7\nYcxf+fRrh0Mp06waquW+BamDw2YF4kqmDuxThTn9c/ldfZg+LEZdSrtgAuDl\noOThezVkBmiUquiBJLuOOaWnQzIXN9Uddf2KDC+QMW84Pq5oGMCo3YQdnV8z\ngc346oBSABrvgxmE78hJ1yBX2+tYCn3O1a99dJnF4wLzOMc/9pyj9uNbnJzu\nY+/VopYmosMgq97oTxi2cE38ZJzBllTVzgfJWZcvcVKba171v+TgrAbbDwux\nEhB3LRtKxsSmLMz61nDmyx5aGvfM++u3dnzTn1/JTFveLgytUjgNGtYmG4wl\nHGZDY5Upau+jCe5+1euPZDuiQgEgrUkzR7LnG4diqinfgGpUQCZTy0bUAu3C\nYBl7eVMNMNyoFBLU7li6AYNUz6O2q6L0KxXbZEkRSI8Oih+qxkpNxQl0aWIl\nLyJf8JScvSR1xXrMI/CuxsiurdI9jVneKOzwFqFZPZXEku0/DJvWjtdmxIiD\nGOxK8QlfcvJ0m6VmbgFdUl0GMPtNiK2HFRg9zp6KIg6LcJyqzIdL05TlSgKy\nxqme8W1B80Dhi0kLsZAePGp+fVZT5xTB0MedSHdlFJG3Uw0Lw71sMgOahxB0\nw5VB\r\n=vol9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.573dc7ffd.0","@material/base":"12.0.0-canary.573dc7ffd.0","@material/shape":"12.0.0-canary.573dc7ffd.0","@material/theme":"12.0.0-canary.573dc7ffd.0","@material/animation":"12.0.0-canary.573dc7ffd.0","@material/elevation":"12.0.0-canary.573dc7ffd.0","@material/feature-targeting":"12.0.0-canary.573dc7ffd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.573dc7ffd.0_1620699493512_0.4986518918467062","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/menu-surface","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.d5f6ad3fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"388f02d5184345e95445bda8ba541f80ab14d276","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":38,"integrity":"sha512-zBXAeVS3WboO0JRlNVO20ROfp4KJvzwXAb4PJ0CPU1IHw28fcD762H90qYM5mPp1ytAxX6xGmjNeJozEit+kZw==","signatures":[{"sig":"MEYCIQDbeyluAc73M4UyBXRl0/01zyYB+BqHM4DXb0hapH6K6wIhANajNlqbEbPEB4pLuTxtV7MtQR1zzQgKnP0zUmGefYit","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxHqCRA9TVsSAnZWagAABtAP/j0fJ03VVTIemFCR/Qzx\nfhx1n7KD0WDjtNsctInTaup8+7BIbdJyKx/6p7fET8McfgRBksvgt1GNrELx\necEnUfLAzBjg+WVhLulzaay7+goztqUhL0+WHNSXBjtvtIWFwPFoW1KLmWoJ\nDB+kryaCji7jEGAewtLI/kNNdxv3fhzvGT6ie1LviWx+5z1bOE7+qWZf9wYo\nPkh2e28P//3nc4EV989Nw1s5W0or2z6szHhCKQ8Il4DeZIHxrtWJQiqw8NaK\nsQddnU+iOqJIN/rLm4hs2Es8W+HqG4pSsPDDyaQId6htuj++hJZyVpFJm1ca\ntEh9Yj54LFoxny7W1sG11GDj9l6nXCT7KzjeHcKjm52cwXxkpLDUWevFgnO0\noC9EH+zRvv2SwkwfDKMnSIGXVe84qvRt5kNXYM/gzXuCm8XOaGEjObdMBfV+\nw4sxcij1EpLiv3GcX94+8AUqGI39AF0L1UMq+6FK4Gjxw8hOhDdsN0srpZNE\nUzWbPuJULUYpQwQApOwEsP86lATOkaOgTsTaJ+drox/yNYxkaK+1/7DBQQmF\nq09tbalFQdTGd8q7tn+v/q0wjehgH5T91LtyxktFTxqjXzQBWrtZmUPmP0KV\n5F8f8Ntru1SKzpbTyQ76Y/Pp0bGtDBuWZ3V2zXdSny9v3YKLueGyi3BbUpdG\nBTye\r\n=1q+G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d5f6ad3fe.0","@material/base":"12.0.0-canary.d5f6ad3fe.0","@material/shape":"12.0.0-canary.d5f6ad3fe.0","@material/theme":"12.0.0-canary.d5f6ad3fe.0","@material/animation":"12.0.0-canary.d5f6ad3fe.0","@material/elevation":"12.0.0-canary.d5f6ad3fe.0","@material/feature-targeting":"12.0.0-canary.d5f6ad3fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.d5f6ad3fe.0_1620775402046_0.666052242990077","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/menu-surface","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.25751d2ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aaffb417671764c0b6770c2c8716338d0bf9e2f0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.25751d2ed.0.tgz","fileCount":38,"integrity":"sha512-dZC81VGxviVh2G1xkj2WOPhbFi2jpx+HB4+sZqqtFdbLyYwnT+Ot8fJ9s4VcnuD6rM4Dirqp2sDZOY+KgmHvow==","signatures":[{"sig":"MEUCIQD8XNDD2ZSZVwdMspXdPV4XkTuSby8COVMKWzAndG47BQIgf2z83YWIqTmlMIoI9StBBVvUyCZZHyJJbYBeY2fS/Sk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnABYCRA9TVsSAnZWagAAjbsP/RFeidx/8c1W7jn/qnny\nnLvbgm6Vl7nIDM+s5qCiwWgmkkvUTBFwZdq5lLb0gqHMQ3qJrZlQCKT7lxLE\n8za+57U6Q7A0h4R8X1xzTBmWuq2PyBVSdR0QJRC8PAiqmUS5upKquI2t89eb\nO0JDQw5Y/p00XinSRZuocLV9krqgLjVKLC5MGlBiAs0TPsPigG6OgipVgx1d\nJoKUwxtUDniO3MuI3oU2Yg5XlbFqSWLurwEB2gMwgNAWN2sRSjNGh3oqQF9S\n+0phecLuMdLus9W4Pf/ObSGcioNoh0gsSmAxNn4aua1pipR1dW4kWoyu6B+p\n26/+Erad1K2fSiaYyH4gcViX8iZk2pBziHf0HTCYQ8JWHufFi2XOh8SCvPkh\nuNlSa0nsbxodufKzZ0yYon1gK9jYdnyPFo/YEk8XI1Hy0deTZYQW3jO99r3v\nANpEpzTF1edhWX/C5uTfcL605iLi+U4M0N+ESKlrD2EwCSgfXhjKFJDdfR+i\nOpmI3/eAvmiYgqFNZF01TnD73jGkdhju3w64Cv2TW5ihr10eIQZkDYWlbIuY\nyWcsvHK5oG6bTq2OHawak9rjMfiVrjxHrD1KKVwnmGLmGJwmYF+SZxXjpWSf\nBKeg9TtW0crOei3Ypct3LfAn2dqarZoDK0HVxtznWwf2jnsCCF7/tfrUeUcw\nK084\r\n=sDgj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.25751d2ed.0","@material/base":"12.0.0-canary.25751d2ed.0","@material/shape":"12.0.0-canary.25751d2ed.0","@material/theme":"12.0.0-canary.25751d2ed.0","@material/animation":"12.0.0-canary.25751d2ed.0","@material/elevation":"12.0.0-canary.25751d2ed.0","@material/feature-targeting":"12.0.0-canary.25751d2ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.25751d2ed.0_1620836439895_0.4523590318056827","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/menu-surface","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.a23ecb682.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e52b51f57ccb6b0b7fbe2d323944cbdab718806","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.a23ecb682.0.tgz","fileCount":38,"integrity":"sha512-kqGDtektkW6xsgOQb34CgsIDq9whZ+zGF8/X8CqqS0uuzRGDKovIyiyVFXumg6v1cHmzODRd9Vc4kS59mdrDDQ==","signatures":[{"sig":"MEUCIGx846c4FY+y0bV/uaR8+NNQy1tY6EMBuRzAeA8Lo2ATAiEA8UqGb34OM2r3lwgnXXltV8F2nXCdbIWgYKEuoElKs3g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnB1HCRA9TVsSAnZWagAA4fAP+gKGSJLU3OYDBNEix24s\nnWqBc2QRtHg39+eTZqakl1pFRQlUq9yG+5PuiW/5cel+2Wheyt9d+ZnAAWfo\ng4IfGCQiI4p+YKaxopwfSJ+WoB5NT2lPMw7W10zp4VPsYxCq10ePiJVyIFXt\n0ZfZ8N1opvD2ef1jVuOTQOihiFcgMo9wTABSeILKll1VMHy3qk3zcn7H8b0M\nG1qL/FMNk7rqdkfeUor+Ump44ZZgqE4JM2nlSygKUUELOLketRnxzbNGwwh8\n24rlmFM7W5Sp12CcEOFMvGDXYtHV1Q88MXIVWFTh9e3wlYW6GjzcO+GKmIVp\n2/2nkAQazWCo4nSt4mhe/wQ/dYKtllSNCS6abwBIvR1LMtEN8d54ppwC3tOs\nAf3hFiTavBcLkfsMVJud/HwUoKgbpwARx+pk75Q4cydH/4bR7lXnjyjyZwdv\n+AFod6Eb+fNlook6kiFy4/UQwFOVT/rGFg6rz/+uGEQ2GrORoeqk2e7DWFRO\nc9Ei+FN7frhneP/1f+pRnPuPl49fPlp10bnqqnTuHCT+K7BZ9sE9zw+vcOLH\nwn7vuXOGSd412ubw3yBgOmQzFIVkplbsIG2GgmVHyySXaxkddfXn8PeWtLiG\nnEXJnU3hVOkeBTxT53MvwssFWtsPEkhrb1vuZqodpXInm8sqm+NTjpn0l5Rz\n5Wie\r\n=CbQu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a23ecb682.0","@material/base":"12.0.0-canary.a23ecb682.0","@material/shape":"12.0.0-canary.a23ecb682.0","@material/theme":"12.0.0-canary.a23ecb682.0","@material/animation":"12.0.0-canary.a23ecb682.0","@material/elevation":"12.0.0-canary.a23ecb682.0","@material/feature-targeting":"12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.a23ecb682.0_1620843846579_0.41875279990187564","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/menu-surface","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.33a954852.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05421eaccd3688f0958d2a9eea7cf491fe5d1b18","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.33a954852.0.tgz","fileCount":38,"integrity":"sha512-NAQqCduF17by+B863Mu08JC9B+AYlTuZHNJvJoIa//dY1mWTLkHbCfExMfBa6hNpk25KmIt4fCYdvc54pOOtCg==","signatures":[{"sig":"MEUCIQDMX77PcZWtPGL+AEyGkPZO9bebIw4jjoil/nlLiQNZPgIgA3a1q4ThZMFSXpbLL0VCOGExC5LRsBG8AaZi1mQInE8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUDxCRA9TVsSAnZWagAACT8QAI4trF2wjFv+lUCQAqND\nu+pSyRvS7EOqioHguVcynJdPtEf8MVcDr3UwX707yLOJq1DcRptXzTnOtAAW\niaHIFsMTHXklK+jL8S9QBtdQ9cqV2EvhkdJg9RxpVvkG+2TWIJHuLhREhoxJ\ng8bfnn0TJE3Zo0u4leEQPm/8BAx04dUeKKIzwZL3Hv5N3Ux4SuOypgxkip46\n+Q8V07rOBh4e/px/2OyXuOt3KySEdV/KZ65rg1Zf4a5jHcWLe66VFR9YwC6o\nMVprCFgiSnkpzKThXQhauio5+wYQp6ZQdgBhp3QgumDNciD0Iojqyrzrt/yz\nTpPtgmGGDVEp3STYHaLlr7ml1I4u3LDCnTZ+pEKSQMWp0tdLlLdTH2OqglPt\nr90GHgxqwb0xIQIQevaCYP854O5PdfGxRVUDYuuSOFNSzDkOE+b1oOh4lzxC\nUfkbfjiNkm17MgDLPDZa+9iQz7CQjwzpU2Bb5PtSaDFNpvkolJhcUUs5JknJ\nlC3mc7LnWyDsXj1mL9opXK63z20o9oNzsFB0/DoikfB8WRecQOdDpyZzQ0Rc\nD137HrdL1oKQvMZ3Qa2XJ0TUqXmVdVtEX5aDFNflZPeZAbRSzPQYYO7U6F/P\n7VfT3EbungA61z6fXuvocuXthchLB6glWTQ1SPW/OIShhmwDPlKUEZhWlAgt\nt1Ep\r\n=/bQ/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33a954852.0","@material/base":"12.0.0-canary.33a954852.0","@material/shape":"12.0.0-canary.33a954852.0","@material/theme":"12.0.0-canary.33a954852.0","@material/animation":"12.0.0-canary.33a954852.0","@material/elevation":"12.0.0-canary.33a954852.0","@material/feature-targeting":"12.0.0-canary.33a954852.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.33a954852.0_1620918512794_0.09293335552154414","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/menu-surface","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.a4484849b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dc96daed21a79bc95e1b7464a42e2c9862f0fa2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.a4484849b.0.tgz","fileCount":38,"integrity":"sha512-f0hPTLrHgZy9uNExbLx40rLOQuHTyxsHd9KK4ZauZKebsjpjpcQgcmwcifP6DcWUMMXKrYS1jfIDIWAsHtcPpw==","signatures":[{"sig":"MEQCIGo0ybSveYvvS0XW0aiIWaqLfxuFWa7FV+hO2AKlBK+pAiB57m95UrhuN7SVQXZIX2IMufSILjE/WHHmH7Rv0CXDjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUZqCRA9TVsSAnZWagAA9YkP/RKXM70HqnhdPfeDwOlk\nbC3Tk7Wn6HC/HkeesQGRkJzpPdA3Lz92gYkwO5Er0UfOA6loM95eSuZ+5yy7\n/snXK6ifpF3QuixsCjmGqnUspxhwW4pjVTpoUh9gjM7CCqp+Z6pafCf2kFKG\nJvnb+s5ridvr8UHqmVk1xqLNtDXzX+qFGCrhDoZvPTndTq/u3u1ZnPFggH5V\niLMGDKgfNr4vq9P9PHzbWHW5M6wTeivMe9EOnfQimyKAEhNl7Ov8HsFGBkKs\n+haprPhVT2CLNwcQBPDUg1F8jAXkYOu7iu0k2xNhtFzumKnVABb2+NDRO0CS\nrfpnJdW5W8OxLHxBn6Jn1ygTPoQgTfYaBKeqUWNBYl11usPyuz9e0KApXbh1\nqeb1KFTklr2ehaLmzvtK73aJYbV+QpIDAZWHZdTB5V9Z0+6KKhM1czWhJRMK\n0nmgmisA7ccXEqzGjBt91xJVjMIDIl67Kv/o/61CzXe92gHoe/ubZK7VnXac\nc4ouHXHeHhUYeOwAQ65H9w8stOR0p5urp9nSIeOPa8u9Hdjfv4wvBFbyGyqI\nHghUJCboAGL6OhHTElZd7L4P84RGIWxHKFwX92AZlcnsUh1aVODVbX476X5S\niOSSxW9FXYVeuQwhNz8cImL0pPV/FerpNa9G9/RNZUuM2J3EIHevecLb520Z\nqB2O\r\n=fW3U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a4484849b.0","@material/base":"12.0.0-canary.a4484849b.0","@material/shape":"12.0.0-canary.a4484849b.0","@material/theme":"12.0.0-canary.a4484849b.0","@material/animation":"12.0.0-canary.a4484849b.0","@material/elevation":"12.0.0-canary.a4484849b.0","@material/feature-targeting":"12.0.0-canary.a4484849b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.a4484849b.0_1620919913401_0.11099974135418478","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/menu-surface","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.b4c3f513e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"336e8b6d0a1e589b6e99317f2b70b17fe964b9b0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.b4c3f513e.0.tgz","fileCount":38,"integrity":"sha512-vcPAFBlTDdHND06jC3n6Mi6tWwm7X+NjjLhZfXHDX2LN6hujOhzk4EBzNJC7kTFl7t2jLTTdBzBxluZZeaFo/Q==","signatures":[{"sig":"MEUCIQCAz0BOe+xC4Qs6E1iy7CABYj749yvtU0mA8bd5qKtISgIgREk8XKY8gn2AmcsvC+z4hCy4nPoZ8rf2hcaAG9Uz3M4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU8RCRA9TVsSAnZWagAA98YP/2zd+uemcd1naZi0Ctmo\nuLF4hAmhic8mNWljsf6psyZuJrUeB+FtiD8oFpq7ALFox14YaMRwrQ4Ci6fY\nGv3oc0FYhsld4FWFb0lJNEXr/bg+tUV23izmjNkH2GC6RtiNNK7Plz0KUNLW\n2tbhk9oTGC2KqLeqGb16OeuF1aRSpvR24dZO2O7JdO0pVkjO0CB7RlxGNQ9a\neEc7Fmsvz9OTfdTN2uZhGuykBOw9X4ewyeWxuDKhQBINQwFifFerqO7k37pH\nHBE4sUIYBGBJ/MqupjTdmShkZawf7ScVRzvPagPzx7VbkBIbEVMEy6wHecpv\nSWKkyST3fTob/lmD4ekaY7CgIMGsNMX2+t6yrxk6THyYJCXBFQk6FDwpjB/m\n5KTp4Umfb0lizOofodbLq5MzfCJ27nF+REzbVV+/FrBcpi2sv5ptvZGCG6yu\nlzbEHk6ElW+BNRcmkegPU9TFPAIEeh147eaivsENFsWERiNgOYW2mZ3r4CE/\ntZ/G8L7ptJz829h2xCWZdj+6HVZikvvwVGHUXD3qhd0Xm4qQbYhikXW/WQ8b\ndzfQpvon48NtEiO5eBOWRjBBU4BvBQx1zwjqr/Tvw2J6qHafdgJzpdKlblJu\nQmdz51VEo7d1dMSiyGgmLo6JfbpaerOgBlKcaDkbgdpLxIjXPuC730y4GO7j\nJ4Lt\r\n=IePs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b4c3f513e.0","@material/base":"12.0.0-canary.b4c3f513e.0","@material/shape":"12.0.0-canary.b4c3f513e.0","@material/theme":"12.0.0-canary.b4c3f513e.0","@material/animation":"12.0.0-canary.b4c3f513e.0","@material/elevation":"12.0.0-canary.b4c3f513e.0","@material/feature-targeting":"12.0.0-canary.b4c3f513e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.b4c3f513e.0_1620922129327_0.6939899964324645","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/menu-surface","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.1a8d06483.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd940d4f1007ceff5b829c1f2fbdf21f8c88de43","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.1a8d06483.0.tgz","fileCount":38,"integrity":"sha512-vWCkbuNRjNE8FfK8wdFUW61PnURCtEnpceMd+XiAKorUJaqaPSG2uU9Uu6Y823dVEotxmhZaW25oFIPGobM4Cw==","signatures":[{"sig":"MEQCICHgrdjKNWh5+lsk8RxmBEOvZoYg+G3k0sNTxL5Hjn6HAiAF9/AJIzc3pU17bOLyXjSCJnIj8MLpfbRHCfP9jCxaqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVBxCRA9TVsSAnZWagAAUHkP+gOMmOjZYeOAtp8v0pdT\nloFgswcXE30WJCJhjTGvHxRt2T10UkrQ15b489FC0y9Tx08Sp806lpDvBzD7\nyaq2/nbZ/NKHdlXODpeYxmltiZcHzoEsTHJQfSelLN9vhvdYp000FpqpxdMr\n5G0q+7nexAGYNU+cnK85gZmSyCHb7KkFfixrU03LcSgINWA9z6OvyNDRiQ/m\nPdO1e8dITB4nB9bAcPSbU7/jAclOlYQ4JsKugfJrCKNW30vb9UeGedE4+lHe\nzkNJVD7etMBqIRQ8fpDTyEwvH2ZWoViv+a8ymdSheAMWNa9cXdGt173mVIR4\nUTvX+pXBwE7whfom3/V3fdurxPnKjGZ63NQp6yXml9//FLZA5IJA/7Ugjlc9\nlSiNK/Z7wLS3OXa9T6fnEgguH8Gt9cj1FM3WQz442pqNbHzXiqqhzznU6xP3\nkUtbxxK1zDOnzy0ePOPynJTuWSu4kCHkrNAmBHgerLtmyZ43YoubWKLZpzE3\nb2vrtXGF5oK/1KBMgGKYndwzDUjVDecXmrbichvmqIKbYHTajNOZn9oIVioW\niXLJDQheSlw47mhMxjzV/ZAawNkLaSrOPE4NxKkYJaYiq000JWMEhdttQhze\nHH/dCzSqabmzPu+Ti/mEofuOPmHHPDQK0OTaj1XPGlWbjZZsdn48kbv41Nso\nyJK7\r\n=JxyQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.1a8d06483.0","@material/base":"12.0.0-canary.1a8d06483.0","@material/shape":"12.0.0-canary.1a8d06483.0","@material/theme":"12.0.0-canary.1a8d06483.0","@material/animation":"12.0.0-canary.1a8d06483.0","@material/elevation":"12.0.0-canary.1a8d06483.0","@material/feature-targeting":"12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.1a8d06483.0_1620922480545_0.5445649230617431","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/menu-surface","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.8e6081836.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"420d02be302a341f6e6fee8fbee4a6cf14eb4de6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.8e6081836.0.tgz","fileCount":38,"integrity":"sha512-5D0OEQPlbolVAfnpmk0nXfYV6/Mpv9as3DNsBa0losjd7F9fYsifp228AtaQtZs0VrA++NDg1GwSVf3sgQKVlA==","signatures":[{"sig":"MEUCIQDx0nFje5NzHaprAspw0W55sfMqbG4UyUcbi948zFcxZAIgTcHYLFaiATYlfpL6VJxlWqy17JMz6LEdlxu9VbBkgSA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu6JCRA9TVsSAnZWagAAQrQP/R/EAApOW8C0yLmn5xhB\nm9Qugf8VS0J+0TtF3tL8kJfRVZsnGqEMRTK+tsuIwMn7VsGqVYece5pNaq30\nte5U+QolzAm8VFiaRzyTVN7562BQwQTVjeq2dDHuHbXqMDYU2a82Ngk8AqTm\ngF4lXXCnFEc8oY8XJ6/D2oJDK8M8ruaDxcSAab9gINvPqDaO07ilwq/ewHOm\nDKN21WXyzm8sfaS3j7PW0p2+az8UqmhyGGdevLUgYz1XAo3ZUO3P54SFM/mr\n82gqRkx1VsIhLGEgqLn+Yx1q9SGXdkCp1vVS1pLDNq30uW377do6j2caLNpY\njQJ/2kraCpXZZNj7dhO3g3bfMqurDfD2NXZ9Lo5/gN+mUU7833kbqA6OgAp3\nvI9TFK1Ek3a7Y/MGn5pNhrTGfRlI84hkUW9sRGZ4eSTXToAVe3ftxp2caBlU\nG5f69KYEwvxvn6HaVDwRB+yIZqSpuYj+j/51dc5JPTsB0VqQIcDt4U+LB937\nam8PL2m5bKZMOXgLVw4Z3Cuqoc2ERy61Qc2238emYjTev5+9UL1ZmToC2Rx7\n5hmAjt/FB9PCbH/I+HTqY0NVnDmTU/L5RhVNIx1Qt1P2WG/XA5S3rEMeF1o5\nrNOjIYlVVPB1uFK49utqE2lcCs4pwpqAv+jhlK0Ku668ISMZ7uG15f7Xqowj\nKoqV\r\n=ZXZS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8e6081836.0","@material/base":"12.0.0-canary.8e6081836.0","@material/shape":"12.0.0-canary.8e6081836.0","@material/theme":"12.0.0-canary.8e6081836.0","@material/animation":"12.0.0-canary.8e6081836.0","@material/elevation":"12.0.0-canary.8e6081836.0","@material/feature-targeting":"12.0.0-canary.8e6081836.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.8e6081836.0_1621028489159_0.8407359127476302","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/menu-surface","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.a2b0f4cee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a87b70183ffdb652d761f50ff4752c8cf6553fe","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":38,"integrity":"sha512-DOtsvQKhBY7Tg+Sd9x34QDOZ0whflskYEE40K7JZ56vOh+krZ18LMyOn1RI2Dkg+iMAujuJCmsC50M6jXMunzQ==","signatures":[{"sig":"MEUCIGyvRllKKDkEacw4yCVLa7qPRFSKXx9Ex7COMnkqCyK4AiEAu3oLM/CdCb4tF0G225tvbFvogcRV1uD94zROSrpdpLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvGkCRA9TVsSAnZWagAAfj4P/i/7n0nCeoqeSd0TG1Rr\nTuOEpc37MSomYqRm4BKHXrJ4iSC3oqVLmf4JSPKGvPhrHbZp7qrPmFEBChvW\nnZ4RocN/3RLlZDIzWMtDX5J/nx6JaJMZ3bGQbsZyanqPUEniRVjN6Ixcpt56\nAENYZPcBNWfP4TaIobNROHrxLpdWD5cDij5M7ES2+sS8Wo9G4DzzMhtoUKe/\nI/QPnsdM685mv121JhwAFGyDyCv5s5ST3nTXFcJykqFlxGLhHjTioGXeJCKW\nBV//zr+hb9qjM5lxc5qOpI3VKsIczy9AK9uTnalg/oNxr/6ZEKwbTIhRpJee\nCBIdNlUlzG0/Ql5K8F+b9npo3AVfyN06XFCYP0O+LXu/z8hL5HY+cMZR8YGn\ndGQPgbBLFoI4Av/4mgr67nXnJPZwxecNhOpTRe/COvr9CPC2s4ObLgBnnCbS\nOHhS1OaudTk7kjjyhLGdzg3aBck5scbqmpMnTCsoRcrihCZ81DsSeX3mjWs1\nWPPglvkSF5325mTdMiJwbrEDVMmXjFpaz8SJQ9E0CMNHP9tt7pUs+GVH+j/w\nEsyp6e4saiIguAPR9Iy+i0GB8b6KhjqXw6Avz/KJJSnoyzqyRJicqNsBN+Ts\nYQQgKgecKNR3Hg3Is5TkEW0BRJRWDskWcQ/6NDjLD2oTzPk3WLR5HclVzf35\nlLV+\r\n=UG3O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a2b0f4cee.0","@material/base":"12.0.0-canary.a2b0f4cee.0","@material/shape":"12.0.0-canary.a2b0f4cee.0","@material/theme":"12.0.0-canary.a2b0f4cee.0","@material/animation":"12.0.0-canary.a2b0f4cee.0","@material/elevation":"12.0.0-canary.a2b0f4cee.0","@material/feature-targeting":"12.0.0-canary.a2b0f4cee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.a2b0f4cee.0_1621029283754_0.37261000367209496","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/menu-surface","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.e8e39ad19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b90e1440d0d5399868e4c67baae24fb1c6fe44c0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.e8e39ad19.0.tgz","fileCount":38,"integrity":"sha512-f1tngreZDL+BhYmG9/pjXj1ZwRDVSAHGe18GdpLMO2luGvaa9Ewe+K3biPK2o6WcDedD1nPhspZX6zFjjfeOtg==","signatures":[{"sig":"MEQCIGg1EnupWEth+xsTd7biDareDhqeZtPwiMg0ljFnqAkBAiBjD3twBD5WGL4Uqxx5rp53rg8L5FIwlyXqUAxer+53cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpCAHCRA9TVsSAnZWagAAkmAP/1Gda5GKh1uqbHNjCmNX\ngCISgduLMouYBt1rz8Fi7+iMUxS+EFmwMI6s+rAMb5pOK2OBXpO84/rWkT2M\nocoTETZ3Z+DIOKQZoPoMvonMrb4ZMyDNQ8Tw+rDC2OL4u6WKtPASErvC0koZ\n8A24aNJ0xNmsXFiU9NeW6uWfZmL8x3tulkehPuJD8/55EFFYVEcF8V5NQ3DX\nqkWKIBdeT0tNQb5WhTQWZidyXaS8HWpHXGL6WJvDQ0ej5/+tAJ1I6C2QOfun\nGJoBv+wZ3APYH8ebIUFPXYk4gMueR5wAENeT9XwLTqT16IUZBifNxoekDNeA\nF1V5OOo6h01kdco8Q3olwg/pSuDOPUcRL7DCfM5+d28a0UF8iGJwixdxgLdY\n/243LWQlmM8EBoyePPa19TarZ7DheCXaJIgROV5YJjc6Ui1HqLcnsFd5tf+V\ncG8sOaoVDOwdwxYBpP6n0Zy2LExvPSsU7D6hNBQKJRs5g/viDbZfJhWmfHA9\nNR72hFOiE6zPmyLuzfmBBB73YYJnDYCYHMRuBfA0P9huYj/6YEqIy8UGSpvw\ngvGsWhtl4BvyZMQTdo7dopPM4LPqynlxqN1oM5QF6OKpcZ8uSOquDGBcduhb\nMbdD9tOuPgW18OCTpnNdMxnJnPVmA/HFEbHx/uDwzObOPReU+3a904ef6TMO\nPa6A\r\n=lv2p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e8e39ad19.0","@material/base":"12.0.0-canary.e8e39ad19.0","@material/shape":"12.0.0-canary.e8e39ad19.0","@material/theme":"12.0.0-canary.e8e39ad19.0","@material/animation":"12.0.0-canary.e8e39ad19.0","@material/elevation":"12.0.0-canary.e8e39ad19.0","@material/feature-targeting":"12.0.0-canary.e8e39ad19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.e8e39ad19.0_1621368839163_0.7042189130810543","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/menu-surface","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.4bb5eea2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f568129366c250f8f5842ffdb590a226a8b6540","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":38,"integrity":"sha512-+TETlZFuErCuVPVPekFYURBj1RfCcIn5Fm1X29fFoDNVkF8tWEub8tH1JnRyuV80gAmHu0PJVbyBB3kaJri4GQ==","signatures":[{"sig":"MEUCIQCHICJrh5CEwtIJ7KO9lnb4w5h/8CPjqnas9gKs6xSqTAIgJo9GsSA9RQHvR/ZzYZ5kIpoc6CY+Dm1x0yhXF4/7SYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS7ICRA9TVsSAnZWagAALr0P+gPkLWPDyMCVctVQ/UQ+\nR0/6um2mya5lhVLMtJvQRnV6mnp31jP9ovSeUtK5NN5PlCiEzNRU58mncNkZ\nCf7osARb+7h6dEgpYIQ0Hb8EDvqSX2xoYhJA6tXrPAhnWdDksTgKwiwGsi/8\nDw+tjtE4Rcvm+qwmMIg99atCqwG4ME4KAc3MtqC8rQRwy4QdZlmPHh+olak2\nmM6uloLhF33ZF4gUskd+9i0s7F6rtIoBgYCwrbY/8YjRooW7SKyt9Sy7fKTo\njEfJXb0BK8xNoiXa8k6t5EFziFbmTjr9WjAuZJCrWEPVulAHrDkjWiEZ0Z+R\ng1emhX77qZsuXWuDwQT0qapG51MZ+8Da4NsoGGsHIPYmuW4qi1UqatnAq4ut\nDoBvREo/iz9aEpk6sRlwoBXnR1tICAIprkXwuelyhsjjhJhQPUQjTnY1veLv\nLs7rjJHqeMB6zCDdkYDeKrK9JMpWIHT9WQP5/Zgm1c9s4bdROpp+tQy2ACrj\nvOKJ74Ww1JfMWaEWFCaRC7L12Fs9/Lsdleb1m36zyiyAWiu+gizN33KsjDeN\nYkLpJwBMh6o7cesYVckraTpQbHT1UrtXShSPZixzsOXilfWbx4gk+FCBxkCt\n1pTn3Kci4EYg2ff0aReCDmd+gEXTYou8OecgRgrU09I1qTXMBpr8Rbmfkq15\nnMYk\r\n=iVp2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4bb5eea2b.0","@material/base":"12.0.0-canary.4bb5eea2b.0","@material/shape":"12.0.0-canary.4bb5eea2b.0","@material/theme":"12.0.0-canary.4bb5eea2b.0","@material/animation":"12.0.0-canary.4bb5eea2b.0","@material/elevation":"12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.4bb5eea2b.0_1621438152302_0.42231108598318046","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/menu-surface","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.ccce99cd6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b571af81545628e2e756f29994347827b6758a6c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.ccce99cd6.0.tgz","fileCount":38,"integrity":"sha512-+kqkz1sr9kqRrxTre3bqLPzAnd5D1mZggFDWHAgDTf8oZAhHt/ndt13NigA7yABA8UseU2gaDT3NWzaU5LVkJw==","signatures":[{"sig":"MEQCIEZQ4PGPrCa7xxTrp+M42luJKNj4CagCw4T+Psz0k7p6AiAgtn0vnabfmgnrvEZy/VPNfvR0HvOUx/8EM1fLKDm2hg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbQDCRA9TVsSAnZWagAAlugP/ifktZk+DWmwnM+ogJ/K\nrykQlTcGE4B6oU2NMZj7PXJ7/4OrsMz8DVTvn9rDOqRST6z7lMrvhhXJdC+p\nuCoo+3YVzXDhL3GaELBkvfMV0CpGm2E6SPMzYIOhfSE1aG5kwWmALKjoZ534\nqOnFfJAeg4dPHbgj4qJxwMI7e1S6om79AV4zfCdfmtn116smfjYH6ton7Nn4\nLdqw8KfknELhVig8FvQkUtJ08NclT2bEEH6Wt2oytB+wKpA1setz+V7rGsRj\nztnSVQsMqRYtvdLBMACwK74uK6O0zd5z60DRInxPCiFVGV/6ac6L3Op9iKii\nBvDH2a8Yub+vr2EIfU+PAb4WruUO6QGOgYR5CctFQoUivh7ogiMYBHhklDiT\nmujU1W0KR9Ul8vofntftNMzqLtggQ/lCuYWyP3k+m3OF6je3WhfcYzylvVbW\netmoa0SwstP59ARAYgGeFW6BSNV0NQU2oF6/lv46KbWlK53fnwn0V5zrgo1C\nnKpTSG8rSrRz1HHoy97NGDmW147SjhywrKjIwAHZTcmuTu1wNeQkZ61+xLBe\nkpyf/D8nVmAN1lom0Jj5ySRxq2tbSKrGrLbwyMwGJZ2LocjJD87CUX/IKtn2\nXBBfwP6lLMIXRe2t5Ffb7TXoxoEmhMll0P8inN2zu9Zg10xLr0EOLs5a0RR2\n+FM1\r\n=kIoG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ccce99cd6.0","@material/base":"12.0.0-canary.ccce99cd6.0","@material/shape":"12.0.0-canary.ccce99cd6.0","@material/theme":"12.0.0-canary.ccce99cd6.0","@material/animation":"12.0.0-canary.ccce99cd6.0","@material/elevation":"12.0.0-canary.ccce99cd6.0","@material/feature-targeting":"12.0.0-canary.ccce99cd6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.ccce99cd6.0_1621472259170_0.46426211122987837","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/menu-surface","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.14767a8db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bce50a756738e32006d026a8ab9d8749683a9a20","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.14767a8db.0.tgz","fileCount":38,"integrity":"sha512-Rba+gdwoItBljTnSWPcGH+9tRJ6RHeu4T5nRvFBlNjENTCxNIT475hRmqtek+GUUlYECMGopflCt6Dixh5anzQ==","signatures":[{"sig":"MEUCIG0KqlOf7Z+QKuKvm0u2+FKUF3OKvyJlf82HCN/BYMarAiEAz/SNa4Ng4bC5QXRBEuGwxQNRZz9JVq+22KGx8NLCvoc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":349628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpsvmCRA9TVsSAnZWagAA0KsP/1XbwDzJnDMZ+yiE5Fu7\n0xilIf/hPtXIsBawjNByqnyT6QtygTfrcNwMwoGV8kUGqNnEJCr23oFdfZzE\n4MfB6EMWjdhikecXGx1DtloN3t1I9CjyKS5zio9/j0oUUqPczze24aLZkU3l\ntT7UZXgUYyfgG5eIopUJSsT/UPhvqX9j4R0Drb5IWsV6q0Cb63kKS2bmf5+5\ntA4ogXa82SgQjdrU3s4nlAKWpDCfgML15xBs8PgRIcp/JPDf77cZzmXxdfy0\nN9aKrjD0UuFNlisMycDmFANm8LprRiUi2S68hM99srdK/Pp5bgVWPXt7SxMG\nXt3Cm3c9QUquoP0uUg/9ixX14XjV+crnpVe3KN85H7Xt7Ku172lCFrRenneF\nyUxsV/A7Tzc/rAbr189pcsjXOvZ2HQs9AIDjwS/5jzrDCNX/oZnLYqnoBHbP\nwNX2Ip/Kd/PK4qfi3+kURnijuWqtqlwpSs1xQ8Fqte+DknZzhJjXtnut36zR\nz6rA+jnH9Oul75mL80rLBeXabbPDPymSD39rWRl/SFXR4ZkDHrESJ2T4fYnf\njvITIvXGodZXwHzW9bQVBkSFnwSkR5CarMwXdpNGSEVFnijrhefLzjd4uvWm\nE7HqP9RU5J9E+GoI7+A5e6GNdocKnGBKt3tTF8AkeVGHZh5AZxp2Sek8Yc4Y\nN2F/\r\n=b2OP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.14767a8db.0","@material/base":"12.0.0-canary.14767a8db.0","@material/shape":"12.0.0-canary.14767a8db.0","@material/theme":"12.0.0-canary.14767a8db.0","@material/animation":"12.0.0-canary.14767a8db.0","@material/elevation":"12.0.0-canary.14767a8db.0","@material/feature-targeting":"12.0.0-canary.14767a8db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.14767a8db.0_1621543909965_0.6260216346947751","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/menu-surface","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.22c6dcff9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8d9e7cc18b2a3e77dd1f965f06724451f215948","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.22c6dcff9.0.tgz","fileCount":38,"integrity":"sha512-ih7+bKhPLS1QXhmPcVPhW0PnCigtn8HHJzi2KhXROy7/pyhU36seXsadxT71LfE7NAmlJb7kxdMJCi1WlA6S1g==","signatures":[{"sig":"MEUCIQCcRxMvGbv30IvtFUJu4QB11Kzm5Fe2CKJcYJdxfdUsgwIgVRvRQg4EEOwVRBtF2Prh1svRXI5exc8GhGSTSFDGW0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":349628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8QCCRA9TVsSAnZWagAANu4P/1Gof3qXIYO7hS2rcww/\ntY9ybJOJJCI/cxQMiPrm7moHLCnhL97KnC5JNtEoce/pvoBCXI74iOsD0OwE\nK1BPJqUFCVNZVNiRrKPeJHNFp2ktcYT9TXXDHCRMM+qwVWOtsIlRG4ljaSyJ\naZ+8Vipsx29rqvugvlF3CTiiWjdqk8OF4vr7gTP5+Chy9PwA0vRrwok2U+48\n/ywOVd+McdwQLS4HCy/BXyG38iVsQLJ5JBhUvfbDZEtMa6kpwLXaqGMxom1N\nSAVhGAL91nZLOPo4gZIzGaVk0uGeLyHHxPdTgwIyWKjBg5Yazfkoo7JcCiI2\n7LFqpkudGPeYRkZsJoQFCdRIrf/X/dnD2sgGTtqRRpGp8xdgUkrfk2eIw98M\ngMLbIGnlZB9v0HAqalfeUuKhewLAZ5J2xVp+XreCrOhDuvr0G9Fg31M7UyTr\nFxFS/ABFRs8SeWeTMkWr2h+Toy6r19tr3CmU3hvOp7JaNe+i1kSALN3VGH4J\nXlvYh/mdMHjRbiXODskzVMSMUp27HsNocE8b3LH49014mEKTt7cZuUG+Ah5J\n2obiySIlHOnBjDru8ce+vh85h/pb+e+EF0Nd8exQad7PKlMqDhmKS4brSr6M\njHSw2QdsFeHeLVpn1EqZ/uMyMvw2NucZNQKnnRoZBrKD7dVXPfwgqg5vs+94\n6nJE\r\n=oe1g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.22c6dcff9.0","@material/base":"12.0.0-canary.22c6dcff9.0","@material/shape":"12.0.0-canary.22c6dcff9.0","@material/theme":"12.0.0-canary.22c6dcff9.0","@material/animation":"12.0.0-canary.22c6dcff9.0","@material/elevation":"12.0.0-canary.22c6dcff9.0","@material/feature-targeting":"12.0.0-canary.22c6dcff9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.22c6dcff9.0_1621869569844_0.5001012055928311","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/menu-surface","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.fadab3372.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c1a849b3ff7662e5e49fb5da6983d95bbc4451d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.fadab3372.0.tgz","fileCount":38,"integrity":"sha512-Rwnjmu+uld8dy+qn+dM5CPkZ1XA6DWeWLFdjbP/ogiNwg1G9v4tTcitxW/xSAEZSWJ6xHySjMps/qJ7xZV1pdQ==","signatures":[{"sig":"MEQCIFkf/JFcUxY8jlm98RX6Eci1erGD+chZmck4cwKaW51iAiArOCwMgORM5sP6wpeJLMnUY3vGTMverSu+DKRQvciLKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":349628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq88WCRA9TVsSAnZWagAAcPwP/1/HCS1DhQdWh3I0zw46\nyK1EcG54Q9NanwSgJ3tfF8zJzRrab/a0tXVkThTaiNVYM7SJJbNlFViPYKnl\nGPghlbTg26uGEgdIOXdQ6yNakfK59u/c6XAFLW9+tILvqDGepI9derzGuXDn\ngf9TGm0EUbCqb9dXjjQoIRcdHUuCsPrlebejFC/fGfSOfAm8rnRyaokENB1P\nn5H8i1v+d7YgeLbK3P+TkZ2WSyYAC3k49DlKXA5pzHxjhJPMxx8y2bpwtEIR\nfGtfjPAne1ypep1AEDm+tFEmnSalJH/S89Qg4oDOWXdBFNZujJOFi2qverQ4\nmvfsbD+q07+EicnVMVNEO6Q2nnP91q3Phx2QHEO3N4wbMw4sNPHLdthDwBf2\nDb+EKu+Fv0k9Hw7KLvDcAF526vO2SeC741mRhOI8PI4RlJbR8wdXQ2zbd7lX\nMoE/lN+nBLn3c4xuRA64ywhXvQuZiEt3nWCs5xM5TnvvJVgsSMTCg04wMLE+\nHedxPgwz1j5mlTdJXa6RzooMPw5oOTsPfqqNXIcq/9Rxryn+U0f8JQV+iZ9H\n/D+Nb4328CgoGokC5RWNyPLmKNNepQagZKe/4NoeY/O60Ro4GZeTBjgIQguL\nIUg2gcAwgTc9p5KMlz/3xNsCPiwcD/evb+pRp/Ioazf8nu986AEVbp0RtO9y\nTqBt\r\n=8jge\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.fadab3372.0","@material/base":"12.0.0-canary.fadab3372.0","@material/shape":"12.0.0-canary.fadab3372.0","@material/theme":"12.0.0-canary.fadab3372.0","@material/animation":"12.0.0-canary.fadab3372.0","@material/elevation":"12.0.0-canary.fadab3372.0","@material/feature-targeting":"12.0.0-canary.fadab3372.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.fadab3372.0_1621872406279_0.321407050310774","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/menu-surface","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.caa73aeee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98669a2603387f3ce8e0285a38016c3c166045b0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.caa73aeee.0.tgz","fileCount":38,"integrity":"sha512-HXC9n5FyeK3u31XYx6Jrgmvpji8CmERi25fFJouGN7IUoAUEHkznzfvVkt0aZqhBaqRUvT3HLcuVtVl8w9+tGA==","signatures":[{"sig":"MEUCIQC2RBvIBTVsdhtBOlpZJCoZVDonSvx0I0+kL8tg52FuVgIgUYV4LoQFAgY8P/Xq9aaf5DZT9p7pMjD7tT0HsbR08ok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":349628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQZzCRA9TVsSAnZWagAA7mYQAJ5a+g0jlW79Wt/aIIES\nHM8gV7YY8HID3/qqpCp9b9nUzihorN9zVRB1nxg8iu8cDbk9Pr2fsgY8IwC5\n1ncd5+Cj5bY8vatQfyrhoUlYMFMi0psbWJBJ2Aq24ZPV9jsJTVZcrC44nwM6\nNe6pE1vjVZuhKJ2ScDvTEyzA8Y0LZtDpgOGrOED+iWgXyJCbC+GoucttpYgB\nA7D13Y1K6N8xZv928b8328Idg2hz05dEOnc+j34yw4I2fHwJMWpnOrq4zDCT\nkG5TwsJfJe3DZtUWRxXCjgE+uk3LyWiwukrVbXkosrY0exsyixANhRb3E46w\nEIrv/GjKJ/tEzJyG65XXMdUK6m1Z3koDncKknHU4tIo2bUrxRbsR3yzUtp6C\nXhllkAEkxzsZ1AN4izQHC+Yy8K9RKfqgl0pP3rQ82nKfppXn5KWe+FgJhboC\nDm5qLEcGIZFAH4lb/hVx4FuD7y96I+3Cacrol2WyTSzTN/YDVMI54I7vbeH2\nwWMMfILwvoipXOD7Z2XgPU4eOao6F0rEYLK4TEbFjzyisHsnx+ImmsPigUIq\nXbSyr+PrCLy3apdmoF6ml7faH/t22wWIfcv+6mL8ZfnSfQhuibnXxDwXqM1T\nz6mOrVT/Wqy1px3HNDJ/9mKOwmsvtLElskCQZ1E8e/xfrpIfFh2zOqUwA7zb\nJ8Ec\r\n=v3Ny\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.caa73aeee.0","@material/base":"12.0.0-canary.caa73aeee.0","@material/shape":"12.0.0-canary.caa73aeee.0","@material/theme":"12.0.0-canary.caa73aeee.0","@material/animation":"12.0.0-canary.caa73aeee.0","@material/elevation":"12.0.0-canary.caa73aeee.0","@material/feature-targeting":"12.0.0-canary.caa73aeee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.caa73aeee.0_1621952115230_0.8972868123160962","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/menu-surface","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.ec31ae1ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abbf5d10c9f21a524b57478097acdf10bbd26a84","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":38,"integrity":"sha512-O2V8NkofKds41wi0EAPTa93qSkSoU24zBTld4MsrckfaUEEq6foIR5cSL5etSlXYn92a38AJSVbJ9DGq4TUaAA==","signatures":[{"sig":"MEUCIQC+HCCLUpGZ65th7UzaqHMGsFL7y9r9cfCXat3fBw8NOQIgUi36FvGVKwUwu5wpf4PopbXyM0pR8KLase2yDU2ZpUQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":349628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV/ACRA9TVsSAnZWagAAHTIP/jhLiS7uzlOAiHoZMfBz\nUMSJDOQaOFoPRcwdwjBHTLA2Prk7mUDLv5k0OJsmq5uL5gKUXFTR11PdnhIE\n2wtL0431FhrwclH/V+CTxjsJxrfd+BJp0MxXQqSQVieuSYYDchHe1fn6E8Br\nP5fgSt1q1ite3+hg3sDF0ue48GTQr6KFFWyHqJDOsMwJUfZBHcIcn0hzFq08\nwu2ZuYu83X83w2VPVe4h4JqcQt3znGPkbiq2StVanUc3yk3lxHo+iYAFhtzG\nTdtnIWVU3JjWKoPaisIXYuDLbNoIK5DNLUWeu9xhx2scg58Hv5icUDBxnnig\nySVE+GKquZx2HtGa/ZAlXN2Hy6izE/2MOaUOllGlkCFvxmrYlt0ARIAM4nUd\nJeAG5DDOTH7ExKIZUG9W3QmPApV1KReTggSGZCXIvZRv0jK3OTaxyDcSzNi+\n0219kAUJ2k438MmltAgbwBDXv/Wg5h8T/dG75zYoXvfdEDneDgoOUB89TSNa\nlYjdEOT7nQxjoPsyl108K/zAdqfAiJH5ELNcyLENx51TQkQD8aBhIqXWnHYc\no7lFcQtb+DK+0uUDfm9unC7PTFF6AoV9CSOX/OdxdtKY2sjaR9L6IX/5KSBR\nqKuXPt8mEbTJll2dBfrJuYBMCBTaDvnwC2hx68MYFQHhYI3+AhtgQPEsX28Q\ndtv7\r\n=2Z6x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ec31ae1ed.0","@material/base":"12.0.0-canary.ec31ae1ed.0","@material/shape":"12.0.0-canary.ec31ae1ed.0","@material/theme":"12.0.0-canary.ec31ae1ed.0","@material/animation":"12.0.0-canary.ec31ae1ed.0","@material/elevation":"12.0.0-canary.ec31ae1ed.0","@material/feature-targeting":"12.0.0-canary.ec31ae1ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.ec31ae1ed.0_1621974976124_0.8353530518628745","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/menu-surface","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.8530d3514.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27fba6afbd63c8c8fcc52573be2a2ca6939de6a7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.8530d3514.0.tgz","fileCount":38,"integrity":"sha512-w7t40bP6D/9P/X6DUs7hlBxUVExFTSNbcwrToOUqf7zND8inLzycF/EpZkrgCDVRHdJ+IjYIplDoaTyX/fgX8w==","signatures":[{"sig":"MEQCIFwwktjB0YRR+lRKoger7mvXSEpghmVm9kKNnP3z7uEwAiBvP0Mz4AsHHy/hI9TWXJGe9ZUdqJivUNgR5fH2zi/fWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8NWCRA9TVsSAnZWagAAupQP/3GrpPfeSXzLfNEBMi29\ndNIdafzv/YRL7EOJ5yKRwYh1YML0eMGAG/50LOTy3kgIk9Lnru+xEaP1k1LP\nAXCrQCfZIKii6vbJOa7KNd5Q1h8SeWYO64LotZpBUK0pGNj0+jcvMmoTaty2\na2Hntp9RbsseM25vTO0IVK6JHo7pySF2oG1Cv5G37OwbLa2E1OshuMujzwZI\n0ixgRGnJ+40IiSVgwhcmsCk55CZiI6sTyT1sjC2WJIZQQoOCUkPimxzk6LUm\n9nJ+dfcy8MpQAJpFBwftt3OgMi1lJqacDSuerYBzZMghbRMgCvxepbIvSfSz\nrpbC13kReUo3R2ggbfSYHmycUw3GA59icuF3mtOcidOdDhZcMsOtnooJhP1D\nUhi6ZkjeoAVt+RmCU4bWFmTKWQ8Yt7dzUPIyma+EkLkRnAzHdiiADkibQWKc\noudBwrzCgIpcv5Kh0nkcvl/TveEFlhWMMeWi9fTdr3/j0dRyBkWAXogtKKo4\nYx1kEbVy4uyPBjfzz6bgYhINAqMHd8tlqS95I7IJT3hCIHEDf35uMmRROhT6\ny5mJX8l1KNcNJQ5rulZYMk1TDNKTvYx96p4Al2d98yxB1SifW0ay60JMbe3U\n8eIaji1/Qs7gsQQQml/8GTFfak/2QSccyAa/JDZ5boddYtwJDQHxCPlEh2x7\nOldr\r\n=tlrY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8530d3514.0","@material/base":"12.0.0-canary.8530d3514.0","@material/shape":"12.0.0-canary.8530d3514.0","@material/theme":"12.0.0-canary.8530d3514.0","@material/animation":"12.0.0-canary.8530d3514.0","@material/elevation":"12.0.0-canary.8530d3514.0","@material/feature-targeting":"12.0.0-canary.8530d3514.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.8530d3514.0_1622131541687_0.529839068306259","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/menu-surface","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.00b5899dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d67622521c41be74960091b6cbef3e553bb8c8d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.00b5899dc.0.tgz","fileCount":38,"integrity":"sha512-SVlkg2BrFmlA/eGhfa8unLOYSZ5b7B0wruvMwq42mVHu0a/78v6uXX+K3QY9QJg55m17IZ5f/N+pITZr0AmZrw==","signatures":[{"sig":"MEYCIQCaqFFTeUHaJs4EKWO59v3zPK6szhEEXF8TRjKn93Ua1wIhAMZUQXwPTOs9n1tH+I4i0Mk4U4D1NB5vFdzoXfacJrlI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtrjBCRA9TVsSAnZWagAAsoAP/j59Jw/6lxBhkRCqRZ8j\noiglqR6XE/ylc1xALNOLEzGpb7p3+Mhmr/F5m/sGbaXy58W36kVgwfht60R9\n+8BTuzWN+X7zqCqJQzpw0r+tUEwJaKKPzKisA5HDBvcEL/KmiA6BbWrwo0Eo\nyf7934WM2GAwEghZ36lP2KFCLLwm2yZunyx6jg9abiBSek/Cb+VZv4xutlFa\nDLkC8xJ8iH4+lECk/nCqVW6Xm/jtLZi1heeGUP2jWJqrDTl/JhffCZK4GpIP\n6wPvv8vXPqcuqJSH7vaNbwLgiHNj3bmTD+2CHvPpFNoibTve21d3wvAbqG4J\nbmLCFQ/0xxnhI8MNPeN5lyeeJ/V9z7aRYoqIYpVyK6Neo+cEhx+6awhD9peI\n05narHga6QqOSON6eRthDmWvPIhsGm9/v6QsW6N7wp5GbRt3nBWigfnoZr6h\n4OzStu0MVIpSuXh92N+lc4VMifWMDNHjU0fKcQ/te0Psfk3bf3YuVrmvWEwX\ne10N7Y62wnimMV3HaXmMUI+WWacNhziUIBxa5IUZ8ZeDyyQbVaA8HCocDMM4\nkFsQEKKD8UPPqOQGdbE7sBtFY0MH/42q7yLKUUhCoo8sjOpEPWPq4k6rOMQN\nQaYRNtF1YWgUdCcs5snp+ORnqqSj+jySpClAM58kzIHgUEHLuGUL1frv5kbM\nEqq9\r\n=O0/h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.00b5899dc.0","@material/base":"12.0.0-canary.00b5899dc.0","@material/shape":"12.0.0-canary.00b5899dc.0","@material/theme":"12.0.0-canary.00b5899dc.0","@material/animation":"12.0.0-canary.00b5899dc.0","@material/elevation":"12.0.0-canary.00b5899dc.0","@material/feature-targeting":"12.0.0-canary.00b5899dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.00b5899dc.0_1622587585044_0.6324228251830537","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/menu-surface","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.f1525ea3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f22b8ac6e107e36f35b9bbb6081ccc756fe9163","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.f1525ea3e.0.tgz","fileCount":38,"integrity":"sha512-ur2FAbBtw+fNqZAGWZvyhysKIiwsm5bGE+Bz8QEEqzTbmUvl/sO75u8KGibkk1QTEsBISI8W+bL9y9dlfmtD6g==","signatures":[{"sig":"MEQCIFm7Y8zUpF2xKf0dUjmx9UjJYQFx85F3irtd8Lm8rhQaAiAFu6UYfI43DR0/YuwNbp77UFRio65fDavXRM1lk36BCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN9FCRA9TVsSAnZWagAAb7IP/1gyzd9DAzghAGQp0ZyN\nn0KjdwaDpaqHMRAfcH0BKACLE+GZqylaEDrszeKFWNaBDENXK1nAeklb6KDT\n+Y21jzRj7usrDVLKQuKUs0odS/ZWeycuiTy7LvpvyorlfQplwPEHcO/Vq5Gc\nlvbFH8v9YhdYUS1Qt8xHVjG04xfrhgZU63xCq5V88z2lI0V2T8tiZovlaABQ\nC8Lfh7lCfUH0r9LiJ/BqUOg5QirTtRs9gFmLeNIb9wx5wab6t3/ookD9Dwp6\nnaHNlEflCti6bP85cTOJ5tvT6uqubvUeI3TEAZvhp77BSYO5hjtbfB9yfltL\nXdeZaaNiyjr4ylFlPbAgP7WpoW9GyOxgISGY5sWh30nfBUr5p2JxqyZ9Ce4a\nbu4xw1qRFo8yglbQYykLJ337qtLk/APbCN9RkawjbMMpBBETRBVpAPugZX3E\nZGFoaPTT2DLUDzzDBPhyublG7KpeME3SeoUt8alZ+Xqs9rDupSwsnV4oaorQ\nX6p6QBzbd+NZ/jvWpgZQOzOkiUEPewwEprQm0zdDflWXEVH1VqcMfRvCN34O\neLNjaKZdDd0gGNXMhmUf8OGLEtIROe8WTbFWXiKDNhxmC8ouJAf2Q0xDXo6v\n2oYzDpNxUEyvIK0JYCy7XRhRYLYNWFkoo9dx7GPA9ZwPkTkT4PtekAPJTbLj\nAUjW\r\n=qczx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f1525ea3e.0","@material/base":"12.0.0-canary.f1525ea3e.0","@material/shape":"12.0.0-canary.f1525ea3e.0","@material/theme":"12.0.0-canary.f1525ea3e.0","@material/animation":"12.0.0-canary.f1525ea3e.0","@material/elevation":"12.0.0-canary.f1525ea3e.0","@material/feature-targeting":"12.0.0-canary.f1525ea3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.f1525ea3e.0_1622728516840_0.3887838847557832","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/menu-surface","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.464a00286.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dad6043c2f2453edfed7b70615f5201ee9537542","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.464a00286.0.tgz","fileCount":38,"integrity":"sha512-tRK+cvJGqsw5JNuUTmKaFGPoae31bz80/tHuuHG26Q49/CCQcbu+/l6bSL2gisec2n0qoUmMrCwoCF8vN3iG3A==","signatures":[{"sig":"MEUCIQDxuJXexj68EI0tspB66GBk2uYQZn4/dRJwlnF0LRBAUwIgAOj+3SjFD0Mw+zbPkhkcvEQUnEwbtqq6pD87ERobxzE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOtpCRA9TVsSAnZWagAA0FkP/RDv8o1Gp/O0KonzU+HZ\nIMGJwsKdoxl4jQ2RtD3uepV/P/OxhmV0JwbhJn9mZSDvQUTcpu91Chr7KsnW\nuYH1kxSLkSG9+GclyjTym3bCIo3ji9u3Dr6vFif+WXdYyreEpMNem4soR6tB\nQQ0cdNXO//nozdevteHthJIi/x1qSK+8UPYGbsAhsLy8tBvJnFqwZt0KM5LK\nHWkahwF+XEuvPY/On9KcV0hjaUFieKrNGiENkYOI7zcva+sqhhlmENhLTTMb\ngbRed7ZIrRJY+IoqeMIUvGNM07DIuJBpBOFrNoAOOtJo8d10DfpGEqnIjXRH\nXvxmGkHbFoELnqDIYGKOHDsbFR7Zim+CEv8/o7G+Vl3lS8+89hbU0wZjRCvd\nemaYwuqGjqqBezBSbBNsPeBJTs5jwAjOIvMW/FSpxF8vb3vcOcuN/6oGKty1\n63m/Fd5FdZkzkYFmCL49iLqRB3yriALBrHZt9CmCJ2EGDyFwpozyPX50ZqyN\njVASjq7CmVh028gz5yMvZ2DBV/NGyKqwLIA0q3AWTM/l+ktojoBummoB8G2z\nkE4LP3p/vBIKGXXXAHmoKeX6zEwUCJLVvjyKXyDOPy5OVDYDOEZi5z6MNwt8\n/3dI6OCLN/oB6uYj+WCtRr8usOhzT75fWcEZlKSPkVCUrRgU2WyPza+kJKrJ\nszZq\r\n=e85G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.464a00286.0","@material/base":"12.0.0-canary.464a00286.0","@material/shape":"12.0.0-canary.464a00286.0","@material/theme":"12.0.0-canary.464a00286.0","@material/animation":"12.0.0-canary.464a00286.0","@material/elevation":"12.0.0-canary.464a00286.0","@material/feature-targeting":"12.0.0-canary.464a00286.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.464a00286.0_1622731625565_0.7183089944953613","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/menu-surface","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.474de7878.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f3dcb17102cb8af10ee0386856bdd0928965a99","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.474de7878.0.tgz","fileCount":38,"integrity":"sha512-WPUDNc1jV3Y2pBadUvE3hwQaVBtnzuwAvt2F8wgpfA5img6dZU0NYznQYiVGhCPimuPkmGWx25OWJ9/32YFPWg==","signatures":[{"sig":"MEYCIQCUN3PvRpTUYrWVvegnOxMNxeaIQgEAAkjR1zjfvy3N4gIhAOUWfjfQm/RVuDxe3znSCRtT4OOJbVzu/Qocay4sJjdJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPH5CRA9TVsSAnZWagAAyesP/icrFgtiXpQOTTJ5GeFx\nC/PKc361+U8Rsy7D5rBbl+6jaXY0nzeolRg+iNtAOIsjZZL0OagGWmNpW34j\nE42qBr5jgbgfIuli6GSKE2HilwoOL//UufRQD8GKG86Ju4M5G6aAZERLvzQo\nSFx1SP9R2KHumc1C9gR9e9Ff8yAitDDHvCa+FF/jQPK9mMSbkuwucJQr3WVi\n4+kpCr+oWwZj/o9ZmbHFDRnUBd0uB07KPXQuNYhGv0OoO24WLnFLZRgaDexv\nCHE2OC+yn+OmHejHC3BUvs4klqR993QmSzX95K3aE1WmAM7S96hZNlLPMkT4\nAX/lxVPJqhr7OydW/3NV9+oSqY45lk57wZpyaZIVDgmX9MimN2LmEXMxbTym\nhB0sQhFKmHYBD9G8eRQAr2vx1MNabeHBpAfyF33T6HVVxgKLeD72hFOpuaqH\nQWCP3ad8Q3PRfrff7azMhpFCaBc9FnwyYdT5Euoo5UAnTyeRFXSInb182bBb\nZaKWmxsadI4rF3bju5no93wsu5TCdICfmHQc2smNl2kxBMZeBJnxEd+McjRa\nbW9PJFncHXvKx7cDzZ21W4DSoxHuLXVGmLlA4nqUbmkPQBKs9CRvSLRUDKGI\nlu7YbY7tz3smDn7e+d04zm0/NJp93CRxbh/rF1xwwsb1vG7cD/7wWN17ccr6\nNeYN\r\n=8+kd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.474de7878.0","@material/base":"12.0.0-canary.474de7878.0","@material/shape":"12.0.0-canary.474de7878.0","@material/theme":"12.0.0-canary.474de7878.0","@material/animation":"12.0.0-canary.474de7878.0","@material/elevation":"12.0.0-canary.474de7878.0","@material/feature-targeting":"12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.474de7878.0_1622733305056_0.9728784850292589","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/menu-surface","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.b87ebf74d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8fa79e2a1cc55787e8128843bf47130b059631e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.b87ebf74d.0.tgz","fileCount":38,"integrity":"sha512-ISQR1puSU93Hzeh2J0zHsnqnOt7m3vk59YxLub8HeWbnKH7ayWOeJlZhK6llQ9iPoGuHt4gge2IZKLUMYMwu8A==","signatures":[{"sig":"MEYCIQDJ0UOh123hy57rKNBVagT6qWmJy++GR8dT/iBLYJRYbAIhALAAUwrTrwr2ngfdqH/trSRhzeU/1flv0Ro5RlJd+F2H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRWaCRA9TVsSAnZWagAAhZEP/jFqXhHGejD4u6s55AKu\nG6kmwOc9qDjJ6+3DAsyiD8kZn/JEl9OXD4G1hVz2BMhaFepwQNZ5Kv1lPrIT\noBVFRrKaPh8o87zwmCsFHceudGtrhWKr5xf9im0e9cx/L84h1uBhIC/YdFJ0\n8zgjgtV0GPb5DQj37GEYPrbG3BY783zYLMeV23EVH4swu3QFhh1Sxte4xZUF\nQyhAo1rIhgf0OBPyTzkiUBtxO0m4gmLKmn2YbC9ltydkeT7mTQnC1UJYU3j3\nsrQvCvz9sAxrXtA1AH0ugW+ryh/kmiIJCYyNGAtNhEifZ77yL/5Jp02ley5D\nQw80XlZpVOdITXvZ+5LtAQtxUMFXLG7PoRHy+7K0oktjFzAxiZAkwQX1Oka5\nMI33R8WMXzranbxga5mvIapQ+/gXm03t1CMR81EFYab/GcegCfPUmbHOQrg0\n6h819rqpF14I4GhBNl32x22HXQ9Jvykme6tW5vQ8ypcm4G0lxqUIS3OOH3iG\nPx2ehElXBBmm4hhenQFnlrzNaBCUPEfALanXxmk2ynlwf2lCMVgWpzTDrh8U\nK98Md/W1goGULBrEJnGM9PRfjkEt9tb9fmqJcbaTWBH04TsXU+sQBuw0lOcs\nsw1iM+dp7ZsjgJJL3yyCs9ojqFQLki0IidNSzL6xGhF/kYq1hOkTq9LUmjKo\n5hVU\r\n=vOxl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b87ebf74d.0","@material/base":"12.0.0-canary.b87ebf74d.0","@material/shape":"12.0.0-canary.b87ebf74d.0","@material/theme":"12.0.0-canary.b87ebf74d.0","@material/animation":"12.0.0-canary.b87ebf74d.0","@material/elevation":"12.0.0-canary.b87ebf74d.0","@material/feature-targeting":"12.0.0-canary.b87ebf74d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.b87ebf74d.0_1622742426816_0.11973123051410361","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/menu-surface","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.2daa49b35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17d86e7e290736891d50a556eefb270b2621af0a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.2daa49b35.0.tgz","fileCount":38,"integrity":"sha512-jgHLDxNEYYTPb83tfvePLBqPUsJg7hTpAw0nlwoPbItyArZFmbjmV4ShtUor3gg1WkuBxlyPswr3wUcwe+cDCA==","signatures":[{"sig":"MEQCIDKGZdwZIeQLn6VOCGoNp4Q4WSujOawMwU+76Y488k+SAiBmsJeAcueUxQPlXRj50xIaw1N/kjBif94QY7kSAOSn+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulGGCRA9TVsSAnZWagAAUZIQAImcmPa1Z8RFWt8jgUcO\nnHGlr5fyutaYHnFHA1irAo5L3xe+uHoB0Ks+dDFDUqQnPfF4QTAG6lDZGTv+\n+jyUfvKd1jvfLkzoH7fr8O+Vl5CzMPQTcbWO+gJBfuQsh6si781YGhCf5yMs\nfIWP+Ncgp/DZbsw3L2V+Nf9pHwb1ESFRQsE3k7Iepwj0UxQb+kigF6n7zkP1\nWldIWYmt5l6FRrfR1ou4BPUZlLv/yvqrL97reyHkafmEEcYyPEqWICG/4jzb\nJ8HjuPTKnXVuKNfd6UTS223AFiBGwJjiQwVApkmRn/JPHaftPQ9XLl4BLl5x\nRrw8arTqsw28GenrWwgXI3QbwLpByGfMKy+yLu0Ye8YdVXYXVkSK/qUjLEDJ\nTAsJ6pr44sn+z1/2NsmLsWXKNI+UF1yA+0ElFs5bKjWdiGclSfZweaR/OCVS\nXe/nG1GmRz8K4Yw89Wuvj6IUOMx4+arHg32aVCu3q5A4iivh1Bl2WlGf5piT\ngG6JozS1nxc+iC6aJqSDcsxcwv1FW+DXKSosddUhkjL2qgFoaZ+rKA4QA0rZ\nZb9s//G0DmQzq/+dEm1xsJPnWGh5Vd/JAiEmW9Vf6Po4zKuwy7JdzglGkfDu\neFP8Qtj8Rs9encyNUyhggVv+ONxNbZGDkv1L6hAJ9mH2ZLsV1hnC+TSi4iGB\nftKp\r\n=RtJ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.2daa49b35.0","@material/base":"12.0.0-canary.2daa49b35.0","@material/shape":"12.0.0-canary.2daa49b35.0","@material/theme":"12.0.0-canary.2daa49b35.0","@material/animation":"12.0.0-canary.2daa49b35.0","@material/elevation":"12.0.0-canary.2daa49b35.0","@material/feature-targeting":"12.0.0-canary.2daa49b35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.2daa49b35.0_1622823301818_0.7868636182098965","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/menu-surface","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.08db3d737.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"831857d85e89c1e4d0298a84bcd1a6f8d3268639","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.08db3d737.0.tgz","fileCount":38,"integrity":"sha512-nDvQg32cbkqjOlXgOw+bO75J66rG6todAGCIhR4QiKdQ4kF+W8zuQmz3JdNW/X6I3onUAyHD5ool8u5wLwiX5w==","signatures":[{"sig":"MEUCIQDWmMDB4UlhJFGIxaAQqDK3s/hAzLDT2YkyA0aK9FSESgIgNgDyFNzk6DiFO2hCXBvbNQGJiZ3fJnCsUSk7IYuDxq4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoIgCRA9TVsSAnZWagAAysMP/3Cv6TlZEIzCzBHJWQvy\nHds08lOD4fdXkRBQzN2SQQQSpJOQEgK4mRSbr7xL/3SBUuiHiiHen4GPicxa\nJjRbh2sQu/8skKFNWEN40HT6o0eIkSmlnxkNsAjChgCE5b35AdYW3eVRU+o3\nvm2dh0NIhKMMRCeBrWQVjLNaeQl4FLvya4Rf2r3uXtf6OPzyoI7vKNjjqfu4\nh4zz+gQbUPh777CYycB7A2tzHoSMGgHAu2cvoTGgAPwQXMiaD75nInqGECBE\n2PtYWmTOOZW/GDBHUWGUoXNzUoj62pkYZHRvBwCuZrP9jvG5518dkBOkn4pe\nzs5igJVOfr18Jr1dBmHtXojMUJIp3h4PvFc0VGpPKwAFRfX+DflGjjGMuOT8\nQ29s50QJr7lOt+JpQC5VL3eT8ZIY3stOdQLZDQFSquHS2xBGAWowm//7GxqU\nxBYJgQo4b5m3y/7TSZS7dtd+KEH8ncMYO+ovaauI7AfFiO+Wm4nhAs45VEn+\nvav8KuTETnpk1Wj0LB7QAcStYe/D0m9iG1t3CM2ilKyFSHfIsNaqvMiD9LhG\nHHpo6Txo33Z7xYZZqWTjNpfjduKSBdKjsqErsezorv6hxJFG83Ikk1XNqjma\nqVDBaVqXRLbWKLqyDzQ+FBfI57cpDVArQ7LQ8J0Wk/+I+K4CXSVY4vVvrYIU\neT55\r\n=mZ6D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.08db3d737.0","@material/base":"12.0.0-canary.08db3d737.0","@material/shape":"12.0.0-canary.08db3d737.0","@material/theme":"12.0.0-canary.08db3d737.0","@material/animation":"12.0.0-canary.08db3d737.0","@material/elevation":"12.0.0-canary.08db3d737.0","@material/feature-targeting":"12.0.0-canary.08db3d737.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.08db3d737.0_1622835744440_0.14468587862685522","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/menu-surface","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.5823407a7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d7e9eb338abca7cd728185c235cd62d9d9a174d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.5823407a7.0.tgz","fileCount":38,"integrity":"sha512-vY3+QsNANB5cm7yIwVim4MYlk6PlmM5xvRceEv3fOrD3fWVWmplWMxobA1xe0/KVeGCegt9xRTJGZD3HVPizlw==","signatures":[{"sig":"MEQCIDqLJc1ejF+2CoFpvcz8AHW0344jfXkFibcHlWJkJ9KBAiAuoE+brJrx1PYTgOXVsPgjpH/VfIWZRHvh4g9ukJwmyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr6KCRA9TVsSAnZWagAA/OAP/2O26TNc7J+YCYRwFQtx\nkc0fNveYT4OCuIhSchDZmzky7YjRjjN23VAVCV0zSx34D0LNECcktJrGmJXF\nsQJI/W3bzMthv2mcBo3+xlkC2SO5YjXrAoKv1nNThGxO2cHEKqGhdqVi0nM+\nR5kqAwNBHvRsOIoeMDFM80weqEzB7wyzJma0lPEVIiH2g7Jvo4vjvdeYkQ7f\n7Ga/uVpQScSkfUy8q7DGxFMOD+8Y5b+Vd4Qbo2X9tNepwyryWDJiqgRn+iPK\nprvKN0rYOuXBHZ/Hyy5KTMFY52jz320d0XF4vDiai6YE9svm/1XVyDqygNpv\nunc+VyP9q6G1nd8TnTE4nFAnxNAqVQktSO1JuIUaX+BcRrU+lLyso8f4cY+k\n672KwjzDDLIOvpLdoUY/zQG2lMSGI8R4QFAEJDAUd6K7XRiUkOLef83eBvqi\nDGfh9/PqmrUpLq0vvMA6Rlc3cSNOUFZ7dIYmNS9T2dLdVdMpKPtb2pgY/dlw\nSgJm1LhYJFzTChAgwf8fNwBoaCUE2W6+cZT3ML24KCI5cWTjOkYeKCyOdpSZ\nNTaeDCC3ioMmYCzMdWW/IyfAI26/FLG8F7Qq070fDQRGRjiPzdEs35dN83TM\nWgTLT71fgOjoZYb08Jhn5d5KKu4QoKtkNNcl/qTdE+XQNuzWZpdhnQdU+oxN\naySa\r\n=2P8/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5823407a7.0","@material/base":"12.0.0-canary.5823407a7.0","@material/shape":"12.0.0-canary.5823407a7.0","@material/theme":"12.0.0-canary.5823407a7.0","@material/animation":"12.0.0-canary.5823407a7.0","@material/elevation":"12.0.0-canary.5823407a7.0","@material/feature-targeting":"12.0.0-canary.5823407a7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.5823407a7.0_1623113354758_0.6453700535294751","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/menu-surface","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.23b0c5e22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f4be78cbbdb49f58a950c3d560b0bcc4a609ef8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.23b0c5e22.0.tgz","fileCount":38,"integrity":"sha512-rqOI6LkvUtkxDkXFDwYLkGuQrFH+htIZ6VXE/HrOASzn0q0mpJno0f5CfQkscriR3nSOG9D9WiEyn+SJ7t3vPQ==","signatures":[{"sig":"MEUCIQCKq27PLJn75Vs2cE9ITEa38/XlFeXU/9jKwjMe+3gYTwIgQsVC4TrYJs7Viz3BDXGdZKrlkwTIgZQI/i5AYOFmRik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5lnCRA9TVsSAnZWagAATkgP+QHfcXEMTTKrIJhX7Cki\nwCrPHzm4iW4rvrWapZxe5WKljU0qoEbpuh5C/HPpGhVDoU/JU7c4COBUpMFs\nYcBuALchBXd1JeNm2ARxC2Tn+9wGneL973zJr8//zfqRxALoeX1wmybDLxYg\nx2WYwzrELulaxhFD3oR07o46guh0QMiyJpJMf8C/+psudrUQLrGeCRNKEcKc\nhgw2pe18b1RrsQuKXhFtg48bTd/JVbLgmbN8WQbpOqpHW3Pm1iky9vMAob+o\ng5bED8vRZ+tR7gCm1ynNUWrNBZqPNsQaxqxvbFUcExMbtBqG8B4AR6AgnZ2D\nhKL7aCbytFFp8rBA+Hng1SF2ALGyHx9D8QqwiRhOWUOwF6fbTPCSj1J9VHMq\nBlb8jAITnCR14W9gWdNvMK5140+JAdE8JkpHFNnYfX0pOBKhvbpxezasjyPI\n4Qft+Mf3SaCPsYW1z0ydqEBcl3DzPxfjI+9VxNModtYQyU8wnfs0I/xkEB1e\nLOsMaOFRPS+hb2Xncf89PtwIm1lcI605iUNr6QBJPdXIcR54CzWztMsY/LMq\nptbpsdrQxJrUEGDgrOUQQove76SmhmnMWObmeUz0MjA15cH3fNBMXlOzDM+8\nEvQh6exwA8Zk6Bq1q+WVqJjw0UYd51TbhLJ4aN46M3U2NcUrQqHkZAIPDZvS\nWpgo\r\n=EvST\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.23b0c5e22.0","@material/base":"12.0.0-canary.23b0c5e22.0","@material/shape":"12.0.0-canary.23b0c5e22.0","@material/theme":"12.0.0-canary.23b0c5e22.0","@material/animation":"12.0.0-canary.23b0c5e22.0","@material/elevation":"12.0.0-canary.23b0c5e22.0","@material/feature-targeting":"12.0.0-canary.23b0c5e22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.23b0c5e22.0_1623169383362_0.7881266322304179","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/menu-surface","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.2952c6a76.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a76caefbd5b6af14ec72420a336caacf24c71541","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.2952c6a76.0.tgz","fileCount":38,"integrity":"sha512-SBJItWhjnjsh5Q1lIZUOdt0ZvF4b4Rt0+anbAU2N3kEi0aP3Vd3tzPxpum2enHw7fWqR8FwsURlIevU0702GlQ==","signatures":[{"sig":"MEQCIEObF7T5x6HLdsveYS63cQOOqBliegGkDg4hcZOB8bcXAiBswaR5taexFjqcNxHgf7buSV7xnuBziFVeA4VJQL+FJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6vVCRA9TVsSAnZWagAAfo4P/R5xwR/lbtUs/sBRGdmM\nXuu9HU7N3ER+Mj26Gt47UY6gTA085SpLM7f5lZ/5UYwV45GoYTpLRzY09jpd\nykMOADEPC0cWE/YdLCALla1CaKqZPdbXhLz8dSFO2lsqMwOvKOf+T+Eqbwuz\nt2VK8zjHmTrlY/7CkMNwfd8AusP1ndcX4FtMBYLUqx6U9/vqKH3UzFickjfr\nveSdcqwdtRiIPcCdHKTdeppwFoJg8R9m8bX4UuFYrFBKp9U+pF0qWlJsC0VY\n+mc3GdRSnPr7eD/ws7DPaQmDdt6SXvDEToMm4VLsEtEuvX5j1SZ57CSTpDBc\nH7G4ftOl9g349LkiDzk/Jp2rb5gsrS4jdJPpbAW/nVkovpmJu+kQJAQyhkyS\nHv5WitkQIQuVHNmdiFWzr1y8gzo6axFEt+9Qm1vJyYLdChq3oqAXDGAnI2IQ\nVe3x2KI/6p9n6aydvWifFfipaLzav0lZku4MMwa03h2DYVG3eYyXL7151vsY\ngYHsgUMvpX7yDb0BDwCQjtcJz09JwcIgpsTJ0XLJ0f6I29y1N6U/Bv9iU1CU\nvMBiwz9ebyndENoZSnsP+5moGO5kYKn9Oo+N+tO7IhpNn47VFMcZ/Wd0U0QN\naFB13qNvvK8hXBdscdnsc8UOGcbDmS052dkxaVaRM8HPlPN92FcCESuiaPFq\nB0Am\r\n=7P7k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.2952c6a76.0","@material/base":"12.0.0-canary.2952c6a76.0","@material/shape":"12.0.0-canary.2952c6a76.0","@material/theme":"12.0.0-canary.2952c6a76.0","@material/animation":"12.0.0-canary.2952c6a76.0","@material/elevation":"12.0.0-canary.2952c6a76.0","@material/feature-targeting":"12.0.0-canary.2952c6a76.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.2952c6a76.0_1623174101384_0.08880333987153266","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/menu-surface","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.f12425f88.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5f2878bbfa70b6d391d8715ab653a37bf010537","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.f12425f88.0.tgz","fileCount":38,"integrity":"sha512-ByvQ1YQ3qsJKrJbXQDifQ39Gmfd1PjXzX9dmPfOLArqeZFtid/OVYWcqjjjKEWfxkCvINpbKFW42+BO8moZbnQ==","signatures":[{"sig":"MEUCIBrtN8JirqP71yu2Seu+Q3Y2vBy3a91ws3MqlYP/RYjsAiEAuI2HXqYIoScrM672HDzychvc5uFDsw+bp8TrO8hc2G8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWW8CRA9TVsSAnZWagAAzl4P/iKR2iyX6bYD6ktykmWJ\noDkbtMVCypHaQXaW/kQSVNeQj1Mi/ghcaCCSeXAirdOaNozpeIknQHha9nLd\nTPrSAhCq/xqdMsb6Jyej/M40Tdnu6T8G0f2CtP1n3c64jBgE06ovi+2/t43B\ne5yK8oDe7kiNYsqrz3qYxadQeUaIKKMLi1eH7Ub1g33e5x6BNUi3f8mHEeoG\n94GRmfnLDXbUv8S6TprXEwUP0uelEcpMu1zy3b16YuscjHaXnTHY4F3eIzq7\nViB/Xti81X45KoU+k6pD3X+rNF8fj7WdQWYYG6Bfcl0dXiOpgSfaNlHEThPP\nYnCaaDSMEYXSzuY91GIe9JYIQ3JPHeS6EoXBRUazZsSEPwfocJGRoxa0dvRT\nWAasb4lPK/uV7BpE5EHGvCbHgjYHNQi6kGJoLhETCs8ytW4Jy36nTMKQPxDf\nKE1+PXXf78G27o/ihe1Uas74mNL6a0vf8PL4C2U0q80Bpgwu7u87QQQpyC1G\nl9TbuoX7825RQ8ccVNE0jcRCQIiL3ekAj8xivIzKMVLJGk7kbxE/TTz+omNC\nXswyQcvhNIwuaqGWLDLtOPgty1Q1AXXllI5qIIo9+SwicKORmXhLkEDLOaSW\nDWQyPZXolgMAmlLufPyTcOiQZwkc1WySGxj74LGD0MZLOHcp4DBdL0dyVi90\nMVan\r\n=TsvR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f12425f88.0","@material/base":"12.0.0-canary.f12425f88.0","@material/shape":"12.0.0-canary.f12425f88.0","@material/theme":"12.0.0-canary.f12425f88.0","@material/animation":"12.0.0-canary.f12425f88.0","@material/elevation":"12.0.0-canary.f12425f88.0","@material/feature-targeting":"12.0.0-canary.f12425f88.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.f12425f88.0_1623287228244_0.9620284987138703","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/menu-surface","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.e543628c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6a504725d1609037bf2dd601f436352d9ff2f26","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.e543628c3.0.tgz","fileCount":38,"integrity":"sha512-kIVebNKwf6nfAJPZHh5Ga7RR9vroZ4cT5tTiW+AoinDiaMt9RklU65DwK3hr32JaF9p3FKm4f0NwTp+zAsttPg==","signatures":[{"sig":"MEUCIG3GpIHNGA0TSgdlZLxXWkji4OPYTg5oAmOyUW7ak6NUAiEAm6JdCif9NyoQkfbP0zN97m1jrk7dksCHUTf0xb6aDyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWX4CRA9TVsSAnZWagAAFDUP/Ri4g1oO4wXuG60LC+Jb\nd5sWOFlR5T45MtBcZcAGVv3yXHp4pojjvKUDej+HuCz+A+VOadTMLYbJLxsL\nzxgp6OOGf6WpaZL7zmMgBjsVxmO0F1PvPcqfh0jwtwe4GmQ4+W5czbOXuCxf\nzpm8HD+EaD8n+YCotITAd2DlvyMgPhD2pK/omvhSFZXNjmp5gwb09DMhJ2zv\nYIXmFIs7ZBoE4cPOd5+eOWMd9afFQmY0b0Gr5VsYtI8Pbx3w1wVzaSy0kG9c\nTcO9kY6XH0jefSHR+SPBntI40PE3jAN1wS0d2Z03YY7KJ/tVPhp+0ei5OVVr\n1+DmZTD3+4uMf+8cKg3kYPj9Pyk9m7Rj2WVjCI6oAWXAP4D85ne55BNvG/UD\n7ug+MTBygJIFngDaIxh9DMIBl+ng82OWiviPQq1a2Vrsgxupuz1iNJkDB+ob\nZTwBlzZtHRmqg3y7zofaJJBsIC8L76e5D6N3zJNsLQqyyQnZJUCFrYs2BOX3\n1mgZukFyCjvpIQ81NdbUlJcPwLYFaWTAG+qNdw3lM+V1/e2yKvZqko/u19CV\niDwYjUYG7sOkdcSlIeWXvbIVWFu+N6xDVQUDb5hEXyHM26ojtprF3ihkDKe/\ndaocyrlSGoFsbZTZQIioHmTXNR7Z82qeQgnlOQ3FulkTfw8cypfM+XKtWEmk\niHIA\r\n=0iXu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e543628c3.0","@material/base":"12.0.0-canary.e543628c3.0","@material/shape":"12.0.0-canary.e543628c3.0","@material/theme":"12.0.0-canary.e543628c3.0","@material/animation":"12.0.0-canary.e543628c3.0","@material/elevation":"12.0.0-canary.e543628c3.0","@material/feature-targeting":"12.0.0-canary.e543628c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.e543628c3.0_1623287288054_0.8082762652145865","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/menu-surface","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.e0c346286.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22f5d193ee0f4c58415e4e09331a879af1a9840f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.e0c346286.0.tgz","fileCount":38,"integrity":"sha512-QwbWWbZNEZjEPKBpSQaLAlOBPeW55tYorRjrGiu0pHAWwry9hzk/lE8PrPNXr//caFH86mrywQ/5shxLhfK2/Q==","signatures":[{"sig":"MEUCIQCyClcKRt20VjP24gguAWZxTBqCwQfXYAtofveqqgYzIgIgaQ0vOuaTcaFd0kX3yNkixSBiBzZbBXp9J6jAK7pbiNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj+TCRA9TVsSAnZWagAAFSwP/jiR3Q6tckuyw/xqW4P0\nBsfP6RDs8dAJ2+9pL2w+0z8iUG4nLRALpDp+xPyY/gdwldMm3gkgvAc+CY0x\nxxxjEqr9vI4fhkuMUgqo8ny50OGEsZpy8uppdcovDs35LA/DwcZ3C3Xz/EeY\n4LIviBUgRPsdFIM5GGeLXj1DqkGC4gAEYhb16FPLzTXL6dE+86bpfQRpkwGB\ngybGEHP8i2D41nrP8aYpbbNgDI/gVDhqACwK7mMmj8aIGzl4GEraT6VCCoib\nr0Y46iMkAjGqIHzmO1XHGbkipEDkkIlFUrwX7HKeCOyoNHMyxkXBY0+ypkBo\nUtRJAxqUHBvKLPTg96DWTurKmw0S54daSXCaLG8rO09HdYEkt8voAvWEPdnO\nZwdBQaBE0CTD/OG9AM2p5iV1dKcfvDLd7MK80o8ZKXG+yfSX2dpSNEPZQ6ei\nhfuL9ThWzxjOVqYuyl5Wpx17U0Dln6vaC6X1hZPTCBr5ck54ZZ1Cd0L+wuTs\nEHe1m2FfJZibq0mpDwSDrVwJs7UZ/Sk2AK/HYYXHXAZOmM/ik7RhFPHisOC3\niWTyE+qEjScvuHwNXnfHaMN/3KxesgJncrxgeyYRheBghmo2lwUklM2KYw66\nQ/SqlxykN1m7VBbLXJx0M7B5CdxlZ+GFJh9xDPG+72Z6dQvf+uddIkPb+Q1s\nj+TW\r\n=3ECB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e0c346286.0","@material/base":"12.0.0-canary.e0c346286.0","@material/shape":"12.0.0-canary.e0c346286.0","@material/theme":"12.0.0-canary.e0c346286.0","@material/animation":"12.0.0-canary.e0c346286.0","@material/elevation":"12.0.0-canary.e0c346286.0","@material/feature-targeting":"12.0.0-canary.e0c346286.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.e0c346286.0_1623342995810_0.586573226688542","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/menu-surface","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.f43af5633.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f67764e65ff6d7de7e6b55e34c8b72506704523","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.f43af5633.0.tgz","fileCount":38,"integrity":"sha512-DBU5tzWNaFFSbGsp9Q+9Mjnbe45J465s6TbipEnvx6S0NQNunR5ew/ales8yOy38iPHhe9WBPuSk20LVNdycOg==","signatures":[{"sig":"MEQCIHR2uMtN7q+dyYfGNhGJduoPPEg67L4PyFuGW2C6yrb9AiBQPF4DO72wiPYGD3uc7gf6Vmayw3602mB3RI97RbpWbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwnfTCRA9TVsSAnZWagAAKW8P+QC+R1OibT/ADX79/YLU\nAePPp1eTI34FdD8eyfh477WMY2C55KCD8SweuEJDtT7Hj9flAXLEJdL4P6GR\nEbnbaRCRgCb7ejhDebJti+t+f49Chpto0+lGcOV8kgs+kKvxAFtEz2k/Sr2G\nXyVUVrSqvh/AmFc4dGLEcgBOhSpN0PbsXn/dUfrF6PbaDmdR2p8C3irQMWKm\nnhaknOI6UuFDTJmaML2C5wSjoj4XMW63feGhrR/5iIqxyJETyu4sty/8nMvD\nllTUCVW9LvJPB+5eKI2jOnLbM4EreYbdawN1FAVI3UdR8JStsxnJNVcuEdO0\n6xxJYdsRfxpBwPkNEfnsG2vc1qmOQ4EOiWolgbRYOcZWCWqLsHb2wDtFdtq9\nNDOb+l5Vt6H5X6uStDarW6wGNNxwjGQALqL4nBYu3Sb29gh6jMZDz833+rn7\nqIsJUfaJndy+Zxg3ZxgV76pTNE1dBeUq0QwAROqRI8fMAB/4MoKhVhjfZwtT\n4o1pE9mjHevOQLS56bDJ/EP+QCEn7DYhcZY5tHDBiTeeTke22J/GrswHXCWp\nTfHQqjQIM+eteauxyhWsh56pK60wzRuoSrEARByp7QNP79Bce/qSjnE9mrVa\nRego/24WmD7cOPIlp1kwZBd3TjaKwwoC33F1jH4L6jU9GIpF5w6OMiWE1JZN\nkOR2\r\n=EzPs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f43af5633.0","@material/base":"12.0.0-canary.f43af5633.0","@material/shape":"12.0.0-canary.f43af5633.0","@material/theme":"12.0.0-canary.f43af5633.0","@material/animation":"12.0.0-canary.f43af5633.0","@material/elevation":"12.0.0-canary.f43af5633.0","@material/feature-targeting":"12.0.0-canary.f43af5633.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.f43af5633.0_1623357395585_0.06153456389769918","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/menu-surface","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.8415ae585.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60ce77ac8194a412b56e9feae3d86c29ac25f8d5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.8415ae585.0.tgz","fileCount":38,"integrity":"sha512-BcDNqOH51K47XLWrQZQlX3E0Gfb6E3SDVfUtVxENMsrU+liflQiM18RBLIHFO18XXbEg6mbVnSk6Xa7ERbY+6Q==","signatures":[{"sig":"MEUCIQDQcDkhddRAquiJJfY4JoirXcxoFG/juxWUsaWvWMQrRAIgSdbPTEuN+6lqMB5Tc5IRznpVQRa8hoW3PwlwQDV+Mtc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4oPCRA9TVsSAnZWagAA/VQP/jA/lVtOfeahTwRsdKL6\nSS0UmvQC+KYY2AIeMK8Oxhl93zBkBtYdZdreIgtck2I8h/Q+KNSwIkH9vJHA\nWohPuEtYo8yQcBEIQ+T86Wcdt5/bE8FGytnb9sDN/nwzW3XMKMimTJ6/BUk8\n+QKl4Kr9pjngoMP6SQDOR2DY0iKnGXhxNtYKTfAofhZw+SJ+DsDWNaSSDknC\nAvrxMnH4yw5UQoogTW3cRP0QD2mlcBbXR12U6+2MOQ3ftjfQd59IX1jx5qbh\nVrBPxBPiyxQhXKDewfx+I2KjKTsYT/qvmY+583Ex/gFHRIkgtQR6m592NkQC\nSOC6KgPCqfvjugFc7OFFqgV97FWPNWKxTofx/bmihTGvjyXTUBN9QuK2pGRA\nPhxxFmoMSQh09DrA2U4yq/QrEmSVFogKO8Q9FEzZCiUZegPXJGVVmqR8SUWg\nt/+VezcBti5XuBEgDVnxpP2FbhSdBWoU6y6JwouOtbLXgqg7YHmL2l6fJPMN\nuMrnzTCOvj2fnl8jmVgxz0Z2IDTPkSrnq31DeOUmg9k+jHmptm9MxZavM8Y7\nWpgi/OsyTkeC9SgSGpx2aohRsy1LWL40byP9RvDib4Da89X+Ux32chiSJf0q\ne8a9NGLvSiRZFbT2SC1TDBfzLoiSWleKWJp4+M1ye2PJVF+GKPTPZZpLlT6X\nPva2\r\n=5j+S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8415ae585.0","@material/base":"12.0.0-canary.8415ae585.0","@material/shape":"12.0.0-canary.8415ae585.0","@material/theme":"12.0.0-canary.8415ae585.0","@material/animation":"12.0.0-canary.8415ae585.0","@material/elevation":"12.0.0-canary.8415ae585.0","@material/feature-targeting":"12.0.0-canary.8415ae585.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.8415ae585.0_1623427599386_0.7577204253981489","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/menu-surface","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.598fcccc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e2d5e4e766a3e9745806a0d7b996f92162bf5dd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.598fcccc8.0.tgz","fileCount":38,"integrity":"sha512-1AV5GnxAjdCsZhnutOeolqts54LwojK4i+Am+xtABY6fm4kQu7hdJs8baCShThJ818tRBCegDcd+1+EAEA1H9A==","signatures":[{"sig":"MEQCIFmcX+xFhGFDjmaK2q2yiJzChtPvq8WDG+3fHBWe9FQKAiAOMEE0pDdJWEIzV0rNQ7PZ9lq9czkSfYPpEVbyIkhRuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9nZCRA9TVsSAnZWagAAhsMP+wc/EUoAqmSuNRv/rWbN\nKrobid1GMEqVDAxgOL/Noe81ubu2fFOuX8awxwTz645fTmvbv0r+ulNd+x2K\nXuG/4CWO47wyLSh7vGKkFhzWTWz1HkK99qJPMYYnAxV8pML6wPWYMjA2HGaG\nIcKTLwV6XmCYbN8wz04FE1YhsoHFUXR9q18ZPev+SA8TBRmgIH7XnZmGeuSw\nPoc4jd1drqFk8GGEM4M/l++VCLQYDOGXW2HJzG++RVg76i6/P1i4dz1Paz0O\nOf7RbU4MICZ7vxHewECK5y6G6yFXL2ESzLkvjH6T1U9UZ44+rcTvtt9uh2SZ\nqrobtjh1kCQtX8IdrYp/UwyWC1PiuIMNY0cmGShSl7OXTwz/SVtJTw8LGhDa\nv40CCJRofKMtHNO04FMaLZt65wI1tSTjdlYYMSs/Fx+M11dPlRfBKpRFWBnD\ngsWAyCSnHyC897aCk+W+6xMdPaDT9yUvkxTUZQ2949OqGlZO0kGV8zJIbqsy\nogCatAUXeJK5QULeP2MKXDPzljCayzQArh7meW0MvtKsD2CFVB12+lb5U4Tc\nbKDqW1dZxwQy+0ojBJ1j/FOg8mkPrVHErm5wtvM/anWPqqtI8LIJ2EZBVNWF\nV7wxBLLDTwYRulXnX8ncqp72rk4IurwyELx2p6+KUAo7qI+nJ86C1L8rms/g\nFkOA\r\n=b6OH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.598fcccc8.0","@material/base":"12.0.0-canary.598fcccc8.0","@material/shape":"12.0.0-canary.598fcccc8.0","@material/theme":"12.0.0-canary.598fcccc8.0","@material/animation":"12.0.0-canary.598fcccc8.0","@material/elevation":"12.0.0-canary.598fcccc8.0","@material/feature-targeting":"12.0.0-canary.598fcccc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.598fcccc8.0_1623448025740_0.14088687684479972","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/menu-surface","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.5d0605188.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d44b8858f09aa2cc0c75890a3dd721dfec05ffb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.5d0605188.0.tgz","fileCount":38,"integrity":"sha512-EL+W61QykJn/mmipztePMnw7DBrUMuQDSJgjlYgBY0vntUIQfMYv/Bn4xMi4IOVcv2tkvA7rSW72VBZO0PCEpQ==","signatures":[{"sig":"MEQCIGP1lYtQnmoiyUzC9vcdiHsTqGHXyepMMPb95gt3RkOUAiBhzjA6lsRP73Tfsnx73hm23PsuVKXHch3li2AAiMI2uw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5RyCRA9TVsSAnZWagAAc2IP/10Blc0gECOmULw298Yd\nD44emDMsx+mKXmZgNr9xG3y8SCPs2G4VicC0WUxE8c1F2oPg4XsShtRrcW33\nuyC8R+38dB8NW43fQm9y8xbAzCj6IjtMDC6WicGSXNQzQE/1CY/mMzSeCB2l\nERJ4TDGJtgk3CguWqTHYa1YN4fRSmif7TOJZuPQaIEJR3gUmHAc5yzCsw3gb\nJsrSApPf8gZc+2lMHaJXQe2jv3Z0SZni3tvblcS9QS1H4+jxZYIOQLLP0O0d\nMT6IwNH/My5SuASj/4VEp52q/5HH86Jplyjn3kizNpq4MuQ7ZJHqCnGi+6i1\nJ8tAv2b5jkzXGiqTEKieRbsjyW2L46NMKswVXV+v8/TzonKCglOvhg5EX8Nt\nYvUS6Vsv/Z5pmmhFYFOYD9yJIeKrOyM7bPHT4DsCnP8498hiEJJuCv3UomuD\nRTXyX+tMiWNRUZGDKC5kN5gS8fUNMN4hJ3PUcM7PJtSlUrf/1vSMAcPLFVwH\ns8AWwHkcY5wWGXdq+7u1ik00Z3I4pi1JWvv53BhsLTsfvP8uO0yvnht44Hg3\n30X9KwGElXRlF8j4vlZ0BqgzDERr2FbBmQcubdjWvSvQziwhu2+NvVy4z3Ni\n/9JU8dMH7jVYo4A9GH+DZmKIrKgsC4dG73LNj3cHhQkAYGtwiJ9U7/qLPt1i\nbeY2\r\n=1fgO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5d0605188.0","@material/base":"12.0.0-canary.5d0605188.0","@material/shape":"12.0.0-canary.5d0605188.0","@material/theme":"12.0.0-canary.5d0605188.0","@material/animation":"12.0.0-canary.5d0605188.0","@material/elevation":"12.0.0-canary.5d0605188.0","@material/feature-targeting":"12.0.0-canary.5d0605188.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.5d0605188.0_1623692402698_0.3048879668998259","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/menu-surface","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.f147a2271.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c43c3bc2e16381098aa4a12bb53da89d2cbf7ac2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.f147a2271.0.tgz","fileCount":38,"integrity":"sha512-qdLxril7PKjm9GtqAXrsDUDJvdP0tVXNAmihNcaszueWl4luFLaGLM64pyBzBFzpNLmyskk93L2hrIw5w0gtYA==","signatures":[{"sig":"MEUCIQC3M26gDNGiBQ1E0GB5SXSyz/NjuYFarAPTPl//CA2MswIgEDR5L7XcKc9/fS5lPfb5EHRunzssgYAnIj/+/U96t1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6uhCRA9TVsSAnZWagAAOwcP/3P6HL05+yD8uCPUJ0D5\ndLgWfhQxwdqY8i2270c7bbk9/7ujpqEGKUmj2uSAMmLjrzzEubOlzdiOV8I3\nE7510MPFX+fGdpiPduWE8+pIdG7Y7EFLA/sQsQYzFkxfJ+4Kpf4iEnQw0ah+\nJIn4ruJFT+4pakhUfwqy/ahzcPipxl2DXNb3mIgUQxN3Vi3EkFb784lhTJg0\nElqPlTrbDeZvwG9wwBAvyVV3+MbcVBHGdNTY3i6MLGzyWOQs290XbHGZ0EP1\nXnU0oEgRU7jEsRfwbJARjvvFwIZ9mizBeA78RrGOPL4Fzf4HmfMSEsYDBLc5\nIfpFmggN/agoAOUy7hMYtBQY0kGX2FzwVRn9aJ3h+bqQhOeeExwBYPuzZrNd\n5thIU/cd3BUt3LaDyMy6VcJ38+A9F5E/TbAEIqsVVLoMx4oOySdwj9p+BC6y\ngicPWQ9gAjfklX6QQDoJIazW+VjyVr2uzLjCDma47k04kBxdAwIfpT7tB06t\nDzr7TVFAD/bMnux4tEU/j+WRrC6SGnrjxHsUqFYWImykUQ2Wdb0f25/JHm7K\nWg6epEYYS3NqhleanmTwXui0YLtY5ig25FQAOoo/67JWPVczVFH3uKxw4v/r\n4ejLUrAR9K7QfhDGx6R6rxCVKt6L3RxhhRWhbNEoAO0z4MT4fb2Vv3VtFC3+\nua8T\r\n=Qw24\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f147a2271.0","@material/base":"12.0.0-canary.f147a2271.0","@material/shape":"12.0.0-canary.f147a2271.0","@material/theme":"12.0.0-canary.f147a2271.0","@material/animation":"12.0.0-canary.f147a2271.0","@material/elevation":"12.0.0-canary.f147a2271.0","@material/feature-targeting":"12.0.0-canary.f147a2271.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.f147a2271.0_1623698337395_0.524244696377238","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/menu-surface","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.33579e00b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f80760e6a8b51716c5962e4c842127ef7208a0ee","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.33579e00b.0.tgz","fileCount":38,"integrity":"sha512-kuU+IiW6t7L0fsR/8D50Yus6LdhzzEjamA68BuDnXrvpiIucFXC0z6Q4BCPWib7Ls7p1Mkpc7aBvK+2cr8SmaQ==","signatures":[{"sig":"MEQCIGykqyswg5r6LGL5ecPmZTHXnSApPgWNR8lOa5+FU0jEAiAGal7RyJAXXeJ8yrV0z3nkXOW2bPSwLa95gtAT0a7n2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/LaCRA9TVsSAnZWagAA4mAP/3GHWNZyDyULgAkIV6QA\nW1MsBrGDtHl3ILsVKdQ5r/lghVdt3Eac5DwYQUsKkhSUCnY3BhDgrbjXlndg\n0dym4Ki1vsxEaunxYgyYgr8cs3p0Pp5uiSeP2Zjm/UPjtm5KnjxCjCdmOeJ5\nP4stFl/RR3NVTYbU0kxAazKk05y16XT4C5Ese5rlUeieU3KO/x+nRzOIGWSE\nSaG2gBfIZWBmlrsj2ZLg5iD0wAr83wK/fqEHQYJor290t9PTgbfAhhSnupUi\nMWMn/V2IlxpbFktswmib6xaR7CKKZnFYy2P+brGv9H+FM6Z4CIlahof1uWt/\nxfDq0xqVJb0Fq3ebXt/lrT0sFuH9KVqSJvIhiXaKmhV22m8bR+lodWL2650V\nbp7k9ULtmKOGVUwiWrZ9TTpHzoif43/0emswpuu7aE8woC1lIHWYmqsK2xDY\n/LCGi+Uhq6mjQ5nxQ2Kmv9ckwr4rdp+PJiq8HES8+qmRfDJPFxnJ6fik7j2e\nyGnL9OMb1BCHwwRivuTPQRbe/cEg2f/kWzUPYpNVwwd+wv0U5+wI5h3BH5yw\nCddvK+ozwIUysPNsSwz+ygUoAhIMQ76DCx0c75QUXZzfWKP3UqfOGlYtMHhC\njdfWZEN/WQKEss55cCay3RnBp50++bXD7NhzIlCcChBbh+opr9vHmZsY+92a\nxSby\r\n=yBNt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33579e00b.0","@material/base":"12.0.0-canary.33579e00b.0","@material/shape":"12.0.0-canary.33579e00b.0","@material/theme":"12.0.0-canary.33579e00b.0","@material/animation":"12.0.0-canary.33579e00b.0","@material/elevation":"12.0.0-canary.33579e00b.0","@material/feature-targeting":"12.0.0-canary.33579e00b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.33579e00b.0_1623716569965_0.9184201434719024","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/menu-surface","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.a6909c0e6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa8005f48670f4603e07c2f5af09b2e02f1daa70","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.a6909c0e6.0.tgz","fileCount":38,"integrity":"sha512-RdrJdh3f/u7RblEJFyq4JwVQ79qkzgd5MDltOmRLwWqUVvD14FJUr4Zv66t03W2BFctEQ58wN0Zy+e0zTSQdIA==","signatures":[{"sig":"MEUCIBSF4O400m7ba7vOTYNEUHHGC9W4X6nqQ9RUoLXiJWfCAiEA6CtJV6n1bv5RuJ+6iO5YVFykurRSvHmpPginNYsMW5I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPHZCRA9TVsSAnZWagAAQXUP/1+B/iQbKFkIqf68d82w\ny6PVbHdosrI3CstSvRskGF5jDGKQfugs2UporSTsq32cnXk2nOdHdas92TOG\n0Ay5sMYAJqrx9JnDB1xmBEaVWIyjOcgI4A52kEy2eXrHj7Tv71iGK1FkzqaA\n4iaHf7l/OdxYzu933KJln4xt1T33NRAkNKuD2zJ5srxTGP86ujDJ/3Xck4Dy\n2Fd44TGWhmnw7gh/tl4zpAEXYNpf6UA1hEvgI5gYSd6WygFwnLLd31vGTk2K\n6yXIRcG4i2ExF2YFA8WesQHL93JEX0qFyKluCfKnAAf25wn9N2eh6QIa2XFp\n/0qOgXWdH/VKHJxpECIIqjTvLasEIvQlYet4KsHrbP9KX5RrBVxcxr97WmSh\npKSFy9q6VVek+U/Yuyt4xE8XZvj7Q8if5YMliwvXheiqvslTkybQmLXhf2YZ\nAngWAcv9olCAGi98GmjhZQ9LjGpGvEFCSCPq1e2V97viz59ht2f6Yre/MXPi\nzUBwKRxj07/gpWbo8qEE7pdAavmKf8eEJ1sZqiZo5QISdPLKIayQU+VLLHs5\nKjCN22rpjNoYiURcyMJIstr1jsA26iJ2f56czyNIPZqFv7GOyt8xPZYYix7X\nGvv40Cg4ZMMOgOXZCydRL8z0JcpVqHZuuBcA1WlHyeIzqh/idGpycjmM+zQv\n2Tke\r\n=KVUe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a6909c0e6.0","@material/base":"12.0.0-canary.a6909c0e6.0","@material/shape":"12.0.0-canary.a6909c0e6.0","@material/theme":"12.0.0-canary.a6909c0e6.0","@material/animation":"12.0.0-canary.a6909c0e6.0","@material/elevation":"12.0.0-canary.a6909c0e6.0","@material/feature-targeting":"12.0.0-canary.a6909c0e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.a6909c0e6.0_1623781849742_0.8607275803001779","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/menu-surface","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.c18b5925b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"032fbff99ad96239259188c6fe0b8fdba6a86cc9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.c18b5925b.0.tgz","fileCount":38,"integrity":"sha512-s50yOYD4xjYIDgzdw8OYXDakFP2YOaJNAi93STmrHCJ/nnvSTXRY34WXCU25085GCzB6UZsJ+o7tYEU3xE9Lbw==","signatures":[{"sig":"MEYCIQDXhHN5wfxQTOaiB5rwcgD7dQXbrVskhExM8gvoGQAihwIhAOtXz8CK0/cE/8FYqWcFEfYOHDE209r2JMFh7MgFJ6x0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRXWCRA9TVsSAnZWagAA9U4P/3LCVrPRjUfii/R+jMhQ\nCmGdNjW4pghCOcHlmtnmPVIHa+2Q9lFtIX0HUkKtGvPYrL/1a4OUnnH3MYha\n+C0mVOyltPMPZ0d9TETnZWPGuHZgNjc4uGsU203LNZ0FNIBn6kZBPwHHlgmt\n8Cs24WDg3OjpyjVwaBGMBnE+ofPvVGXbyvyNB59iuDTDpoLhP4oEB/hOeDju\n/EhQAGwoFdX/utJamKbtTBLw0iQyhQhDkcCVoc+6LdyOseXAJ/PIljqjHwmR\n59cKP9e7bbxE++NBooAjzrZp2hfTgXa9pQisTczSnswNow6kxPZc19aET3gK\nlAmYJmDIOTpZXN7uuOaurDt4EWsAhyUhaCms3PSnhYWthbzaH4QOvo0FBYkA\nEbv5NstHmRmvEo6QJnRBcv0cPfKFmXfYBj8JrkJf5yI76sQ5iHkDOp0FaZsJ\nh0NSgc/c/mTl6svC0TykZPsGBHSYD4BLiPmIxkSqMsZOFqZyWuEh6lVEz5a8\nA6MGGHg2ZDQ0ykIsnPLPjuyHkIsMOZybGqCeMVN63Vx4hQANWxqzP7zzT2kg\nDpo+NBziRatoKsYKi8nYc4FXDtLX62vpEJxywBe9DGvj4j6T4RkL9Fw5/ynC\n96ZrYGHJQ2yucPcDHShRX9XXl30M0W4CXNAk5brNkwEdR/L3xbrng0abY+Sg\n9gGv\r\n=UsJR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c18b5925b.0","@material/base":"12.0.0-canary.c18b5925b.0","@material/shape":"12.0.0-canary.c18b5925b.0","@material/theme":"12.0.0-canary.c18b5925b.0","@material/animation":"12.0.0-canary.c18b5925b.0","@material/elevation":"12.0.0-canary.c18b5925b.0","@material/feature-targeting":"12.0.0-canary.c18b5925b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.c18b5925b.0_1623791062795_0.3167670195841916","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/menu-surface","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.7ea2e830d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1f2ec841f00d7ec5f0cd85c9b01c8d36a8120ae","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.7ea2e830d.0.tgz","fileCount":38,"integrity":"sha512-wBiynIrWFxJZTqn8WmPdhAamKuqyNUKUMv5t8YxFYi2Xeo3CThLe/yiVX2DLhRw0YvNa+rCUDi6GOgrHkAddZA==","signatures":[{"sig":"MEYCIQCPHvmWdJvMCySo20V1hLotYMrZVbCIT2XA/oKEvO9J6QIhAKTd2JnAg+tWpgMymZyJW3lH2ACzIFVaNeSSEAe5Wsg4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS7iCRA9TVsSAnZWagAAhNEP+wXatsHEMcFrIIXTIAG3\nNgs1b+8ttTaO/2gNYLLBkb3Xcit9qiWqyBqFmOyNMYSo2zjlrDtmtEhAFxCP\n9gZyS+YH0O4Uc4p3IZABrB4YU8FpWeFflCs1QzsSvXwCdR88JBClZUQITV85\nxhiem+bttA14B6v+fW6ZZSF0bpzkwM4sh0i+u2+1R0+wvtzO5BlbnrO6kGC6\npggN4Tz5E1rA1QCltle9yuVL5LVrDmfT8neXQa2zEv7SyrR3qsOZno4Rwwtd\nrxW1lW1FHclRymDqucdCcphj3DhvOJsayFjOSAL9n13TIYYXS91p9B1nmy7o\nOnA6L74OUZ6HKJAfXKTIro5zEpTD7MSAlch1alp1OyHJ8QuOAjQd9FULksC+\n6JXU30SwZvLnngZfy9wRtabwBuA7aKP1xXiUKEghycmNcRuqmLFo2aKDXUAP\nB5TQ6op1u9GNjEV5pG6/0uhqi61Asw+JIm/ElCkHlCWl81Bl1rNnKslIJ5wt\naAWI3m4s2wVYvNNsygSCfj5/Q65fhDK1gqT1L+WjnsnQFBW5mbB6uPsMwBPo\nSdjR2K3ljue/B3aw93bl18M8gjHZ3/4gUlp12qOr0mDHNUVvEwfYCr0xpvGX\nbLD/fknhFY+Qa0f3rdDYK4h8ZWkJUSjFRjnctSOcyceS1t8vCi3Wsy5RRzHP\nssR8\r\n=XCfb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.7ea2e830d.0","@material/base":"12.0.0-canary.7ea2e830d.0","@material/shape":"12.0.0-canary.7ea2e830d.0","@material/theme":"12.0.0-canary.7ea2e830d.0","@material/animation":"12.0.0-canary.7ea2e830d.0","@material/elevation":"12.0.0-canary.7ea2e830d.0","@material/feature-targeting":"12.0.0-canary.7ea2e830d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.7ea2e830d.0_1623797473882_0.09017881324913413","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/menu-surface","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.271fff902.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73ea4421c127825e3284b780cc3b6fd24360334b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.271fff902.0.tgz","fileCount":38,"integrity":"sha512-IfU7YiblUdydvh+6qs8iAqsqR2+J8BiiI+1X49jqpGicKzl/L8dg849T6t8QyeMnSehP+I7l/zLifG6mNvl28g==","signatures":[{"sig":"MEQCIAorWDyAptZXPaaQisDXSvFpVpiE23TZiy11wCNePHPqAiAn33k7+qZWb3MVZ8IRFIsp++pQ29KCJ7x2aCovYGkeag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS8ICRA9TVsSAnZWagAAHgoP/jJg4ML6HgUh5CC+hi9z\n8tNPenL3MGYu3INeQZHERHnwf7bmMTKRwD+wAJwtk32qiwy9E48PPvmZVJnF\n22PlRA5ds7EE/1YXYY54/N2Rc3z7gLqtVFCh+5O9jbJPrbYW97NZMko2PgA3\nPU8HBlRvC0cgA6/r9bMD4sDvXbj9j3AUTMsyKJYENKtnxIL3aBYcR+m6Ocr1\nVO410lEFnKuJ7TFJXTFV2rnwmPWaxwMZp00DcWnzX1bo/CA0QK5qt0NuBk8T\nykNqVp4DZ7zbLsz571cF6/MLnX6EVtT0BWzezWGk5CFppsdb48p3HQr2OUHM\nW01MI7quGQbfaoCXYcSh+lSx8ZqQQ5BolZz2+JhoilFi04doaW3SDtPnlVKn\nRv8NAkQnz1sArnYnAwaB9WUVYYkxDoN626k+z88C8euvVXvWCOy2LsrTbSc9\nCY07YeBs6TSAFYgjZWr6siAHKslkF9UZDEIsqofM0rSDK/B/dTk48EBpCpiz\nByyT3ZxxqMeGnACxE20kRpdIn4BvooY9L/DAxj/nDYbhbzFyf1SlYGO8MjqB\n+bBiNpn8SAGDNG1gm7pmff2eiPQ5KlRv3YvdhilRunkxFaTa77sTLQkKLcOP\nx8Gr7EaZJaEG+pPvons+stsRTSl2Mc0+ejudlhJZtg3yOraYNTnQ47gi22tt\ntkvN\r\n=iqpv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.271fff902.0","@material/base":"12.0.0-canary.271fff902.0","@material/shape":"12.0.0-canary.271fff902.0","@material/theme":"12.0.0-canary.271fff902.0","@material/animation":"12.0.0-canary.271fff902.0","@material/elevation":"12.0.0-canary.271fff902.0","@material/feature-targeting":"12.0.0-canary.271fff902.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.271fff902.0_1623797512055_0.619968888856903","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/menu-surface","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.d96f0a1e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d87258a3812371a10caaa9e7735826596faf7cb3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":38,"integrity":"sha512-M/bJKEivLuaoWdmugj/5ImzItNni1rxv1Bd39DBQStsiCxixklH/aabx0QMOloCeYNqSAepr6ZsP1LEcFacKig==","signatures":[{"sig":"MEYCIQCrlA+CeoMpvnOqwnJIggHJlWdwrIPV3PPD9RqiKS5DMQIhAJGEaBNJEvIVFnsRRRTU3r3z8qxVJA49WEaaNU4Br1X3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymf/CRA9TVsSAnZWagAAdgoP/Rbm8ZajbDgUOl2tO4yP\npPrC/GIB2RMCfUqlafrgWUML/m93TpQ9Grc5+dUMeMdVhxRRkH8cuC+X2KLz\nJ4OV1SaTCKYNWgTCXLeDzFvMdBbAeKQGZNeAAWKsyE+knXru+NBLq+LBH/do\nz8ViIJUlIulzDYMFBeR8LlyBG5YKbTaBDHSIQML5NvTq0bnbGdyZIVZGBdaT\nfJf5Uo60BM+vUEujEdfIyGeSCWOuBL/0CtfCEIxpoD8dTrrZn9OTlbvX73yg\nBJ7JfNxjDKzVjrY1x35FplJ3Lw10lGSCVhw0IF3HECE7vzzBIxmQR28WasnJ\nCyfoRyifmGzKaespmJ7GwFFkXUhZJcggo+qqNelK+oLTnHoMDnEkpdbSNE8e\ndjiLZAuQNueUcZwKhc6e8DMmoKaoPJhuaiW9i/6HKLD0XWHAUZxRL+vH4PRs\nHQcKE/Zh2sq5NkO0A+uPudp3WBFvIZg1+6p2II/GZ0qGty7FwOkkMzDyS6mw\n7RlyWDfZOODSY6vIQ/jqwQw+NDPT/DHVQDu2AarRZgf0y8nIXudJfjnvKW86\n3PNXctO9+J6wFNaXaOLCvkTTTgQVn668/PlLr+XkaTMoD1NR3xWYt0tmBgPW\nMy1xpKwgOttgjLUlRnxFfyg+il5J8hEB5qlTRRRH1LmQKLlgiT/DAzZqfeyH\nu+Zm\r\n=S9w5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d96f0a1e0.0","@material/base":"12.0.0-canary.d96f0a1e0.0","@material/shape":"12.0.0-canary.d96f0a1e0.0","@material/theme":"12.0.0-canary.d96f0a1e0.0","@material/animation":"12.0.0-canary.d96f0a1e0.0","@material/elevation":"12.0.0-canary.d96f0a1e0.0","@material/feature-targeting":"12.0.0-canary.d96f0a1e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.d96f0a1e0.0_1623877631461_0.31880034222212084","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/menu-surface","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.a6183801a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e6c61749815201c85aaf94383a046fab3a3e8b2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.a6183801a.0.tgz","fileCount":38,"integrity":"sha512-RmDYIDkJjE2GjWsXDM/sZAFJrZ7kgv2pNt+q3G2fRRUIPL3jJISzUWhw/pjZnL55hPKG6sS46kT2J6ihZ8Bl/Q==","signatures":[{"sig":"MEUCIQCS5xj8B7Y+AgUc3kW4hXM1jPaW2fKbM4Zx7DS0sPpvVgIgbQkEGx9dZPTylcHLVmTepH5hSt2dmEhLo109h+fBVO0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynXZCRA9TVsSAnZWagAAmJIP/i7H0srxcHUe8wY/360Q\n7ZjKfnMFUA5zUIDwsO+/2EjFrqxfMjzj7+I5WC3syBtAVy7SxsamBNdlGqDX\newqGbGEYEB5eNUhwRkQHUz3JsRdTva7wQtWwfAowBtLTPxFJjIH4MNPE5Lp5\nIqxWaXLR6ciR+1f21DCrNqxPpgU+x40E3ZdEWe8+PFhxRy6C6emTeJ3oyUF4\nkx+0puCY4krSqkv2LLz1Rsxtj/VrYslH/khCKsDza4/w1h5puDCIvuR84O/o\nOQHSBhN/Bhj4JSf8HojTKnCcUp1cvrc1H7UkpLkenQDXB11kPPxht521tKBI\nncgq3TdPmlOrEcA88fNPMXuxcPeH6PrfpLJUoMYrtSOLWYLQtwxWneTTsc/F\nMqMf4EqtLDv61HT8y5khYg39+kyzbtjCNdpZZl5smCvLgZ9lfWtqfUFdphZK\nKMqWC5W8UXm5gCOmXeyrjSLYEokKpevhpd+jakcfs9SjPlGA5+isFP2GqkMs\nnyfuv5afyCquWcpjORN1hlLpDcYspaj435MJmZCNZFYBi4PGLSyj3aXjmMYy\nS5wqSkyBq/3AWWYSyqYlTnNVFyZGDx8GIcR0BQsG6kYowsfyd0kiDHICzGuu\n+ZAt92HVN98klF2dsHXM81khL0eTYEMaCf7DSEHe+zZXXJyq45g17N1zwjmy\nVS2P\r\n=StUe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a6183801a.0","@material/base":"12.0.0-canary.a6183801a.0","@material/shape":"12.0.0-canary.a6183801a.0","@material/theme":"12.0.0-canary.a6183801a.0","@material/animation":"12.0.0-canary.a6183801a.0","@material/elevation":"12.0.0-canary.a6183801a.0","@material/feature-targeting":"12.0.0-canary.a6183801a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.a6183801a.0_1623881176951_0.5170361970650867","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/menu-surface","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.940550232.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"526c1a8b0aaa9f896fef055741cc4598687c5375","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.940550232.0.tgz","fileCount":38,"integrity":"sha512-xPneWBNcdaoGZVjxeXOkVVDqqqAKcfyVqUJFnfYWABh1QwXkSNmibul8CvSOokhOrYmIfb0XiRcBuAecYrxqvw==","signatures":[{"sig":"MEYCIQC3K8+w68bpUZZTKnTuD2dn3RaEsWdD3O7+G6pnY0wWrwIhANnJNrWSnRy/9oXZKwvLVbOSAmb/pZOJ7vV0oELAZG60","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6VQCRA9TVsSAnZWagAAMUIP/RHA5Jkp3LiL5g4CODNB\ngJn9Q8msIwmu7kKXm39x5oTwDRQUSOt5t/djUcCFGRf06d5mBLuNBYbQUHh7\ntjb+D4OEVXTCGiMfO65aCD+9htElXRr+b3+Epb2OMV/g7nZUzTer8BqgMPPv\nlVWXtd99sMyL0a4R4JHZugF2+8etmvw2cDm4dQILwVzYBJAcbcX4+Drd81uH\nQC7fVyR+ZO1729CoD25NDJ1/1gr/+rfwKAGhue02wHbp2rTfwSC/kDLU0t8r\ntespT0Ck40+H1zgArJtNu/5PKt7RBQcOM2UC4/Prc8bZef2DjaXE9S+buvo2\ninP8vx5uh4OE3PKQHinqfHYistOx+832MaaYSDSjA7O1PcOqOF3rLTZ9R8Ep\nEzjoXBBc9GiVo5wUDYJfKOjZlVBbVKXpC8u6D5UFxPZg4aw3YldqFXUJAaGw\nzB9Ta5B5eyKnZazPzYnwd5o2uEwNJQMHLwo6kxGXF/zRD4pt0kwizk7OexX4\nZoomPvfO4ciQYsoW7zJMqCclpAG/2mY5JzB6PaVXiXsR5yqvoE0qn0Vn+W36\n8rXv6fFgMTnnP+1HoffNEPelO3IyH2LcnYXN/R2pZX8GsGUkSkwGa7Omfl8i\n9cDgUlR6DF/2eAqVEkRrwMLMvmVoAvYmLrNrYxHurgMgac5JjDGoLMQ2qf3v\n++Fj\r\n=hGhH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.940550232.0","@material/base":"12.0.0-canary.940550232.0","@material/shape":"12.0.0-canary.940550232.0","@material/theme":"12.0.0-canary.940550232.0","@material/animation":"12.0.0-canary.940550232.0","@material/elevation":"12.0.0-canary.940550232.0","@material/feature-targeting":"12.0.0-canary.940550232.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.940550232.0_1623958864402_0.5722724981595728","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/menu-surface","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.f705e8048.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d83748033de64a3aa1ad010cb085a4511d4e4ca2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.f705e8048.0.tgz","fileCount":38,"integrity":"sha512-2OMI0ZHy4Z8iPuvRsPyMDuXUHkpulKz/MQwhPxc5RCtL2IRPqE9u1j/8Bl1HzdFGGnAMterDRVM8FrrI0SYctg==","signatures":[{"sig":"MEUCIQClnnhF4ssks+kYfZI5vNodoIe/d2QMgfQmqtCNbBT8lAIgJLKfvAA4Ze/zL3m0hjUdzw7CCSeF+7rudzRdI9n1fB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLrhCRA9TVsSAnZWagAAEWcP/1WTdNSv141uC9XCDa61\njb379PeRuisS6ka3rchqqvB2ZGZLLIJo/crXvi5i3+PmMxG2CfbfbD1ABcP5\nwgvutJV9JCdEYeG3Ay/hPHM4d6CAcm2NteZa9nQewmxKZ8bRlEmt6GE2HmR4\n/nwOC1APB3Ybd9FQZcKavwRFRH4t3lU5DAK3yurFvaA2z+2K3DlQRFgQ5PTv\nN6LKy9a/C5LYkuPmFhQCngFw8uoE6+yjPuZTTOTuOtN+F1mxQywAeZitdoey\nO+0zriixaJcpjBKSp5Ha7ovf+peS5KdulYx3/y7GTud9d9wv8tGxQFgAi/Wx\n2H65hnGJFjA0dx8MUkoni4IEtLAQXk1n8IzxVrkKTy++qSY9fk2CPpvvIBGZ\nxbCapeq+2HJBnUl2+TqvGDd+xTcvh8S99vL7BII4cMuxB1e/xQhqSdUWsIQS\ntrxE57Qd1beNz23tcVyyldSAxeAcni+OOB08l0sKIVdxXg1mywrzZx6n35/L\nE3848ioEMEE0CcLwzWZLrzRrhpQCtrxtilZf9E3AqugIiMmb+v7VlajcXfQV\nInya7cO43jzu9jl5wg6n+cLiSlpwt9MxpFw8/CZsA9Yifps1CshMCUkNPjVR\nlPIo20q+IRONgSEfTqHQZmUc84caRTylwl9ndP10nZh6WyJ7lUYOY0u7/3VF\ny+4j\r\n=V+fo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f705e8048.0","@material/base":"12.0.0-canary.f705e8048.0","@material/shape":"12.0.0-canary.f705e8048.0","@material/theme":"12.0.0-canary.f705e8048.0","@material/animation":"12.0.0-canary.f705e8048.0","@material/elevation":"12.0.0-canary.f705e8048.0","@material/feature-targeting":"12.0.0-canary.f705e8048.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.f705e8048.0_1624029920809_0.5226382229359563","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/menu-surface","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.08d791f37.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4294635a4b0709b240ede39acad5669f06ee5dc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.08d791f37.0.tgz","fileCount":38,"integrity":"sha512-5T9vcfLD6/88hI0DmcAtBTe/Gc3FNm60daOZDyUpFf1QD8HybJ6qply5eA0eXY7rnnQZ9WoAgVGtUjAGfcm7Ew==","signatures":[{"sig":"MEUCIDOiMZK0rx5/Uoxieuc/eWh0MCpWZ5DVOdQQjCeTWE0PAiEAzuCviQLQlFFzcJlNhLMca9HchRX6HahKD691yuGWVeo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQxBCRA9TVsSAnZWagAATKUP/ApNiZeZDGEpVlBA+Y0H\n/OBM+BfQPCefHWmyyS+3HNinAT7CrBphg7ON9u8XnClDmwqet1bPTv8xT4jL\nH2bPH/QQPbFnI5mWbM94yvYg0NruMDRlYaF7a0qfneDL1sW8G9uRps95rn3R\nOywJuyB+OWI3Nf9ofTdQf4MtKTIw2vtMztbvxFWqoDmhQiv/kDgDJ/vBqhJS\nneM7awnUVUgC9hvwCIl6T++qytwZo3MIFQB++60rhb81/VlJI6uqsOsaQSOk\nv4X9dP5YMbfUj47Fp0jrsmC26KVuh0Wy18DXE1mG3i1g+rJxey9ACNWzAzWQ\nX3cHgoo6Ns+GmGGnu1A27AeIQDtQ8nPyx8wOYnWoyMTQPVrA3jZEXjM4dl/b\n0eN1FSY/8h1nozQ2zJPEP5UspyqT+Cb6wMkSlhoHWzkSZ0n4zmxmiMbkhII6\nE1yEStLm9M/hwB1qQwA/5DOklDUaEj1QfFCEl9afcRfxklqd15ULtZUri5N3\nk+IPglmlfMCzu5Z1RpN1WxXXABgvNTi79zwZCF9ZGNxM5zjTlSrUWyDcuyC6\nE7Ia8QpHeikOFvnjb3Rs0ridgNrp17T1S8e6nBnE1Lb+CkKRR9n72LKywa6E\nk98AU5tU3XWG/vC9ARtUrT8dAOrBZ5Krvb7nqiIYTyqew92MFTPZN2M1XNoL\nAcyE\r\n=gujg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.08d791f37.0","@material/base":"12.0.0-canary.08d791f37.0","@material/shape":"12.0.0-canary.08d791f37.0","@material/theme":"12.0.0-canary.08d791f37.0","@material/animation":"12.0.0-canary.08d791f37.0","@material/elevation":"12.0.0-canary.08d791f37.0","@material/feature-targeting":"12.0.0-canary.08d791f37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.08d791f37.0_1624050752855_0.40435070991475186","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/menu-surface","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.e38d7440f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ccd2e1edfc264b1a8b2d977da911bbf561362b8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.e38d7440f.0.tgz","fileCount":38,"integrity":"sha512-x2OUwjrz05TnPbxD30oEkx4lP6g5JPx1RBLffR3fJEcEJ8dBbeWyrWtRSBaeFHwvI1JpSIMFsfkUR2ZXXSpfmg==","signatures":[{"sig":"MEUCIQDJRVtDdQI2u97tbmKQoXncCmlBwSlnMwEkUuSSw22V1gIgYl9v8WnhAhy2qS2/6/4/Fg2Bt9ZQEMqUcdn4yavkSOY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M9DCRA9TVsSAnZWagAA2QMP/RQIh5CKWyCN3ITa0JcQ\nq/AHKSxCNXwby3MCAkc9UPRYf3OTUMRsjwkysKYfoa0wc73emfMd9DafpRBb\nPH3nX5QmgCKO9vM37G/TDyZfwJapgupSRpHdPxtVRDGgxh3udqN8uzU+HZ57\n/2XUi/yYDvhBqdLHJj1qsHxQd6Xth08wivvm5Tkn7CAjF4+DM39DxlqGl78G\n4Os6wHEiWt6ouHbMQDMFhkndfonJ1AlpCytfPK1FDqhrFglQCDKaYU+ORcdB\n3FMg8xnUp/gyQMoxxZCGVRnV7+wztb6Plnr751FR356DY2bmBwsjUfrfcx7q\n4yaEYx0JjNv2RE6htTrM3oKfHojhOoH9/eSGlzS8bdMpU9Qp1OKiiBMddn8b\nnfaNZhnsj7YjzriObVe6Wq5wQ8QTeCiXRZff/2otl9FuSj5Q/4Pg2JKh45hv\nzkzgtGtePovpNNVnaKeuWZkc0h60NVdSWCxX67U8NZVXjfciAboK7KZotAlL\nmt8XIV9XHTuzX99acAzG+XVKJBqLaYF7dV1U6GNMEmM06gCeUUSek7Lx8jhP\nNG/MvsrkgU6bBLIHfoafXcEW2qMVOPydKoy/tERAeKogBjqJ05d/Z73gXQMC\nYufcAQ50ZD+7ig/7dZ0EfZBMyG/TQVFOouNpJurRg1iSVVHOdbg6VTdIlytf\nPCnt\r\n=S3b3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e38d7440f.0","@material/base":"12.0.0-canary.e38d7440f.0","@material/shape":"12.0.0-canary.e38d7440f.0","@material/theme":"12.0.0-canary.e38d7440f.0","@material/animation":"12.0.0-canary.e38d7440f.0","@material/elevation":"12.0.0-canary.e38d7440f.0","@material/feature-targeting":"12.0.0-canary.e38d7440f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.e38d7440f.0_1624297283273_0.4546113186197658","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/menu-surface","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.75900a5a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc8ea2b43042f28fc22b0e9314f7afd8e27753da","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.75900a5a9.0.tgz","fileCount":38,"integrity":"sha512-iMLXT/Fq2cW8/vBeMP6trj1nCVdKkOuWxsQwGsb/jUe8NiEmHfD5YjsJ9lAhbELHq1nPjOGPqnU7GX6f5HQOwA==","signatures":[{"sig":"MEQCIDraxoxbN7BmNSfeWeij6iK0DUcxvKw+tr2SB6IuC7BQAiBC5rTWEt6DArgj7ZqB5Y9tqjN2noc248yc7iHa1a+Kmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0NyECRA9TVsSAnZWagAAzJAP/3e/0GEbj6u4nMsPYpUz\nNSU28fe4pi90ONL5IHcFz1bMv3EQjXovugP0EyRhqs9Kh+1DKWM7d9oRfXir\nQVqNjWnmH5pept4WzbmnS9sPqHAHjqzHaN2JFbpG+v9i/6Q7agidU2bEWYuW\nX2MfqMsa5GtGVrVaaNdZ80uKQENXdolD1eVLUPvYrw6HoZmVgijKxY+ug1qi\nfb4nRmNWkxqOTCyeipYnOLn9cy7M1InNngMgTEtomWiDeOItLnLMG5gtNwZc\nyHNHCK7L0RMb9uGNlkx3DSxpqDY1Z1nsQDLwu5iJokeUN/GkW2YG1GuCCI6/\nr4+iQ9lVmJls8c1w8hrYnCxG7/CSnA+0X0JzPqnxoMBV8WbOehx7Q8oO262G\nKYxXO1NY5r5W7MKum0xZipfnHnmVWPfbTh0QfWtZvwZ62d0rAWeXZGiWLGFW\n8ciX4RTjjAIoYsPpqDwc2k+2ZIFuZ14zQjp52JYYH1EsLWwQU4dvJ+haMI5U\nFIQQNMhxZURIpiNWGxJ+j8pvV4SVyUgHqww9KdCMLtKnSUulOwXGICR8/lLX\nzvfI5Tj30c8n2hfmu/oTcD4XfDjbT6ojW+kmOFmHvq0cfk5ojbT+UUVLn7eb\nRIFMbs4qkFwSZQ099GmngH5P5++MKEe7/HJrFls7UBireO7PLPRhFPtovDLM\nKQJI\r\n=fCJr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.75900a5a9.0","@material/base":"12.0.0-canary.75900a5a9.0","@material/shape":"12.0.0-canary.75900a5a9.0","@material/theme":"12.0.0-canary.75900a5a9.0","@material/animation":"12.0.0-canary.75900a5a9.0","@material/elevation":"12.0.0-canary.75900a5a9.0","@material/feature-targeting":"12.0.0-canary.75900a5a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.75900a5a9.0_1624300675717_0.7687347922336853","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/menu-surface","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.33e6f50e9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc10b04f4043df02214714527d8691cbfca9830b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.33e6f50e9.0.tgz","fileCount":38,"integrity":"sha512-RXRR3nis6NZsChEOiyqP9OlsKf23MqFYPzXnu99ATJ1aLgmj14RsRhvvHW6pOGGpKg41WI3ZLzYgOd1UoeUjqw==","signatures":[{"sig":"MEQCIAQV8khPmw1feIEdD3Tn6NG6hLXwIL9Tyvd26y3OV/8uAiBtGTmggE7Kz0itG0VnUTdD59pUhaA1jXC2TV7JAka28g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nyECRA9TVsSAnZWagAAh78QAIZcKbetqyarysMQ6W8/\nKWXMuef30SSJIWiAxFYnMaNN1g+UbgkENq561GE1OiwEpUBYtB56J7+YQpBG\nwFow7V0ThZCzbzyhFVLIg+xQJBQtudXyawpVQ56jWuJhz2I92KUF+rihosp/\nHGbG6nokjdNEwkjNOvslkkP3RUM0gl2mawmE+axLH4YW/EbqEMBe04eHZ1vu\nVQtxHBDkzi/eFiaKR1OciIpVLMg+b5ZmXZhckM+tuMZ32A2H6cBS/XO9AL0V\nYAPmsW3GRoAqldez6fIpa+IDtB7StXvFj5X9UmdJKOPOPkG/MYEvuOJ0MDiT\nnpoMJoveBR2PjkOXwFXXYOpmozy8i3CGZUOiI0wlvyAy5sSTgk9ABGnKSe9m\nIC3KVc4QN5qnb2n3wPxuOQghUXsQdh4AP/5BXbIK3YhJY45AUaG8LELsJHXP\nDT36MczGFkdn54vqYal/R/5kU3YV2a/Qkfwm3pHZuyDtUOV266Bq10x+9ej7\nHmroBuVCs5Ub/lowJim0Qndcp9EmD9j35barkzhU0kL3YBJfWt2HvY222y9J\nNlzWAsLDYPMwbXFn9TEuCziPXC/zW/St900XClAQo6U6RTzRD26gUHAOaQeR\n0F6I1AyYJsKnm4xgopQecUwdMLOVlO1MSUaAjJMQzCm/6v8EGtGoXlVkjzvo\ngamv\r\n=j+Gb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33e6f50e9.0","@material/base":"12.0.0-canary.33e6f50e9.0","@material/shape":"12.0.0-canary.33e6f50e9.0","@material/theme":"12.0.0-canary.33e6f50e9.0","@material/animation":"12.0.0-canary.33e6f50e9.0","@material/elevation":"12.0.0-canary.33e6f50e9.0","@material/feature-targeting":"12.0.0-canary.33e6f50e9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.33e6f50e9.0_1624407172335_0.23663874351334835","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/menu-surface","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.8c685301d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"615a959216f52cd47763b55331273ba729c11dae","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.8c685301d.0.tgz","fileCount":38,"integrity":"sha512-YszT2USt+AnLTOj5wna0bV1gDXOE85bOtXpNjKOaNOmPDD+uiYWeHD58hisXSrdqRT26Ai5zqmHWS2xp/izUqQ==","signatures":[{"sig":"MEQCIAaTShkWcDA2Coo5VHAOUG+fINPqwcPggYgyfAAx8g/fAiAcFhggYrGob83xWnpcVDEYE+wF5Ya07fbpU7uLnAAkNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03yUCRA9TVsSAnZWagAAEPkP/itFQiVscmaWGdaZ+DO/\nS55nTc/mqs1IVx+kAnsR3Iri/vEkgKoS0arC2jRrWWgu7a3j9Yhu7fUVeH/F\nBINGDYGT3gyQiMkrJL5YkzF3IGhdxXvk92YH+LAQowi5Teaf9ru6sQ9HxJoO\nbik9smNhyQ2iPMiFyoxFehsuMuJghY9w+K8le1WoHY6zC2vOmPjr2bwSwz2k\nKPOxQzfRaBYMQdXrHkL9434VBkxXx7xoU94tLrJZaxcVwKDE39WqVD4mGZP7\nL8iNRq77ex4tB+ojIRGChYbsFjepbcVn36X3EVpSTgDI78g2O6DSii7fPIil\nA1LU9TalpR0/jxpVfvnbr24gs/qdp88DuNWNPtHf9U7ZBNbgy5g8G5Nw6Gd/\nVKU9hZB0BKwPLY5OECoacnLU90bCfal2Kmcv1U80OyWJFjVobb5JwNIsO171\njo9NSq77u5y6RnobLSVjEAqTlZOxJk0kCpuJrVkykYSbIRH+2+sukLYRdJqK\nx0gGkBPlIODoHzD0txGoIV8sXcy30ga1pMtc2ksVnHWqS75bmblqIQjEBn6+\nSaq+QywFa46wwg3B3ykT0xwzwkO627ZP5vmR3QK9XsIhe6HBcRaiut82a2ya\nCM4zTT1ep+OGXPXtDEVmNdgwmvICVPQc4BTTIR+6Z0IOU64yzsEoB3fjC9Yf\nqv+g\r\n=PCn3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8c685301d.0","@material/base":"12.0.0-canary.8c685301d.0","@material/shape":"12.0.0-canary.8c685301d.0","@material/theme":"12.0.0-canary.8c685301d.0","@material/animation":"12.0.0-canary.8c685301d.0","@material/elevation":"12.0.0-canary.8c685301d.0","@material/feature-targeting":"12.0.0-canary.8c685301d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.8c685301d.0_1624472724266_0.8308228002236768","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/menu-surface","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.8c7d994ae.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4651eb909df488a4cca3700a5730373fe97b0d43","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.8c7d994ae.0.tgz","fileCount":38,"integrity":"sha512-4h+S57xiotJ/QIw4+P5YvXMl/iw/2WNwHwXnG3FVJTZQzWZnSXCtjyeooDZq1gbTDjO5hwcgh9iONb5XtwTI1w==","signatures":[{"sig":"MEUCIQDJ+e96yAnAM1gOBzL81gyJATazZH3XDCAhUo5A5RXQTwIgZLut+BwwfAmwEu8QNnR7P/Qf+3tduZ7aBH4Fbse7Q3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04tRCRA9TVsSAnZWagAA3E4P+QEvOnSUGF56jl2WKL0l\nycRDt3e8hB+1i6jsREsbwUBZMN8L320wDp4ZBxx5Yz4HauROEHHToCBk6GDG\nipuK0/UMu3T/x1t2uaPHtpbohGbtPCVXSd8M9D2wBPwbEIP05DiVtmgp/CtP\nDacsJnNIHGtEv5IXyZeJwFFYKkqgfbYlJkj1AqjdEaqQZd5uTuZ2rgsY5xiT\njNGjJtPkPg1AU7qAksNH58Uwy6JHJFBupwPowZ4r562UySrIt4cG2tBxryq+\nN330sZKJOYiewRimtI2/INewwPqNIuKQV383wLGjdOVYDI65O6P7gBhs8xfG\nCoJjpYUgqjbUNNc4QE+q5tbbpYQ5/zbvcC9punD+EFdozTE4mlv83XkgvNQn\ng6q4wPEHx4wUyT+ngqF3fmBptrxLzoZklpQyiqSo23V8YurMq8EuZS38q+Zl\nejkAErojvgrJQ8sEi40k4KdQnlQLF3v1TE9iaauU1iJYLQrncUrvdOOUyVn1\nhdgFtqZVZo0FDHY/ODIXftlG8otwt64jq9YuoihmeqMM1Z+r0gYBZ6cVYyr1\nXS36vLL51V2pE4FH4qkpFezn1Qqu2Kn/GDbbMdPIvRkYmhv4vv3htuFHIo0F\nf1lsQvr+LbEa14V4rQ6Kra4F/pc1w1Otr3aW71LPq+wdvDnkUDKC6vtJIQCU\nJ5P6\r\n=X9ZF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8c7d994ae.0","@material/base":"12.0.0-canary.8c7d994ae.0","@material/shape":"12.0.0-canary.8c7d994ae.0","@material/theme":"12.0.0-canary.8c7d994ae.0","@material/animation":"12.0.0-canary.8c7d994ae.0","@material/elevation":"12.0.0-canary.8c7d994ae.0","@material/feature-targeting":"12.0.0-canary.8c7d994ae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.8c7d994ae.0_1624476496677_0.16325550486779195","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/menu-surface","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.4ccd39bdd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"888ad932e9c06d50454c265a575df9ae6c2132b0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":38,"integrity":"sha512-R/RUUKIj3CxsXemY6AJuP8tZ1g9uFImTWBngGjUSPMRQIFiWuvnKqY1swKddwcWI2oJ0F6lL1gDUfFwDo3mTtQ==","signatures":[{"sig":"MEQCICY5AlkHO43f39aLAj4MUwi96tFMCsRqyBkZ5tH1GFt8AiBlCWJ/HdlbWWJX/TmAIBmYt6EoqZHywqNDnrqnazdVYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K+yCRA9TVsSAnZWagAAs6kP/iwSEOY4GA7FxozILLCF\nlRyhErXmtyY7+2GrttIlqu8BdzDfM39YwYKHgkwKgl8wmps/ALIVql6v6E0j\n8xX5RtBFgkrqhd4hxKeihu97Ye7SeBCVWV6FX41LfdbKa0WBI12kZ28Jzkrs\neVyla8ndtIP9X3jM29uaC6mxPF7vhZXl8XV1NRTniPZA05U5dEwYdbCF7Cig\nNdWUyk+HgrejtP0OlIP1mSyehZ+UlEh4V/YQPVfZpmuLew1ar95r7Dx8C11E\nPrYlBTANdJ2D670Oz2lGR07zrM02pSZN53oaa/afqIbL+EptEYxdU7ULEcKS\nayf5mmNE7V5H29Zo5UOVGj+H5UO9hk/2+zHuDNqQHWQX1suVccA91BgbwI0H\nRI7PtnT9L/2ss9qn9k9oFiL+rcO+k+KdE3X+IlJnkmn5q976lrAIsgtprn59\nkzFKWInCf6w8Y99OWvl4vnIBVacpfW/M0fWGBcr2b7Isee2F9uHBGaXpbyS1\nF7RpIh9J1kiQefzaEKJEldSfBcrf8qSQCFxs20YFW5WShvEjscKbZBJ0a288\nXt0Cif17X2Khf8ggPPc9P4tgDYQkTl70fGaur/PlbKHUCr8+WcVimxNWcEM8\nqmRVMJ5mo2r1KVTqF74QGoie36mybusQdl6ybJBixNyzkLDiH7bWKlLUysuP\nvFsV\r\n=nt9l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4ccd39bdd.0","@material/base":"12.0.0-canary.4ccd39bdd.0","@material/shape":"12.0.0-canary.4ccd39bdd.0","@material/theme":"12.0.0-canary.4ccd39bdd.0","@material/animation":"12.0.0-canary.4ccd39bdd.0","@material/elevation":"12.0.0-canary.4ccd39bdd.0","@material/feature-targeting":"12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.4ccd39bdd.0_1624551346486_0.3131271569373921","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/menu-surface","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.17553e9f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cda8810fa38ae3f97e4666681d8991c177b11e7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.17553e9f8.0.tgz","fileCount":38,"integrity":"sha512-XL0jWAuk8D+LW5MFvp1QNfb28FU+/bQYySA32Q/CH1US92wCgoH7pNoX3Xry1uVTgL0sdrZg10eZkUhiqJrz6w==","signatures":[{"sig":"MEUCIQCGmzuTJVv2E79bZEzG+fHVTZF+c0jVL/ciilCkw6KR5AIgDRIemIl+uGJyWGTiQ/F1YYHRfMtPnwMXVzuyp0HSDUQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lLiCRA9TVsSAnZWagAA9i4P+wZTFIPGkTxA3s/XyvCl\nSd24gZzvAvvfYgT44SjBEcgo97yT37fna4M5bS+DjnLfbQyzhHkK0cl6C0oG\nV/sbPKJx2ar9bvPeTbc9qvEd23AqnQPGEs2oN7tZfvYayW1qDLdqU1yehdps\nsWqN2uk+cX6cjmEPUGwI5aL8TuNMSMKeSTuFDOoG/KnYjMWqAEce21MpBzi9\ncFP9aQCsxPUPD3m6trwyaTwicTwmlFrave3zQEge26rNSrJd24apfqqMNzK7\nj2uQ9k01/T3WJAUSQPtYMxhIGbdVCAaUmkKcbOC74pOYtrWQe286qM+XiyTn\n7LG/z4sP57rww5vsaRy1wL6lXAnAVKN5L4yX8uu6uItmyn7AvHEFSUzRbzKy\nOwXgSWyuixTBz/rN5YNXpPS/QJ8uapDTPpzcqmvzNiO9F7qAzxPfYe1UINIu\nSGdCYFauLLG6NiHE2O7I5a+Gpi8ldfLuN3e6e6DNes+Asa9fN3RMYBFa7yRr\n8XlPPLujvwgUmJC/PmHT6Q4VEUQFAbGqEj/eGkAzwHmg2anbSw3ePR1XJjY9\nsqzD/FbXJ+B4mm2LJ0nVpBxZCZ0zdczPJwUBcL9Di1JTTEqX1BNxdZlf1EOo\nZosh9IU/oybc7Rskedlk3mTP5/bVKPgKet1ew6+/FYuRGcN7wO43LBjkVice\naiRw\r\n=Xuav\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.17553e9f8.0","@material/base":"12.0.0-canary.17553e9f8.0","@material/shape":"12.0.0-canary.17553e9f8.0","@material/theme":"12.0.0-canary.17553e9f8.0","@material/animation":"12.0.0-canary.17553e9f8.0","@material/elevation":"12.0.0-canary.17553e9f8.0","@material/feature-targeting":"12.0.0-canary.17553e9f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.17553e9f8.0_1624920801574_0.5464141067483688","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/menu-surface","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.4c80072fd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ea2323743d14515ee917d61fb7a0ee82615f808","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.4c80072fd.0.tgz","fileCount":38,"integrity":"sha512-qcU0UJ22CqFGhHFIphYazm01PwJ8Ne4Ur/qpY5hdfUTTPA8kuissboVFX9sq9HnEd2LuMzVjuG6rO80rDjZRaw==","signatures":[{"sig":"MEUCIAN1pQxkgjhKtITcZ1+nQarqbhfJdIFhVu6DovV92i13AiEAlkwpwSoyqTuLHg6DlVkM3H2E64loarzEaDy+KsjKzL8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22lmCRA9TVsSAnZWagAAtrUP/2V0p2vo6KdFDsgEMgDF\nBmlfyr9Ec52hRsOZwrgFyusyce8JoJkhUSkwkoCN4pPhPWK3HwpfutXHk3yB\nIU4lebOpBSyoAaTQl4sN+SmQ3UKnKdSg+cScrcCiqKAVIwiR/0ErG8PubLyx\nrGh/d4KTdAjYn3E6IxZh4BcGAIq+aj2mLZ9j6V09J35FKnxc4oKmcN+KDnyl\nTaTiMu+ssWPeYdvcnVebhEBOumm809xwIzbLrc+bzHN6MPbcItgDbT6aVb+U\nHU/1AEdcB2IOzKW1xQApRmABw3VolvKiEa6KVGJL9Q59YAk+gFFLXxbT5KFU\njUfe44whhaGPc72D4Kh6EiHIJRYcISt4UizQhHDRL+wvJWiI01+DBFTTd7dj\nGvV2aVBGigyvJvmT8fHH/wJ9nrJ7nDyL94Q1BvTQg6bJWsJR6jlcRIBBxuWp\n1x8ZUJOTPPAp4H8c0yw4ZhSjZV6R+WiSSCwMuUqqmrLWIoKjeapKWR102r5b\nDXia7yWcriWqGquoEFlI37bSm949uVmUmEtgOnIgJTb0OOhITSWqkbAEJWwF\nSZammRG2dqMV63S6SJmkScVsODKByMmr1pdk5GJ4r6fhkKhp1T4gyjHUhVD3\n/q07gdy3UE0bSi90WxymT0vJEj/Pa8pMS3GwZTY2JN0tF20XFK+18ALsbDdo\n3sDp\r\n=AprV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4c80072fd.0","@material/base":"12.0.0-canary.4c80072fd.0","@material/shape":"12.0.0-canary.4c80072fd.0","@material/theme":"12.0.0-canary.4c80072fd.0","@material/animation":"12.0.0-canary.4c80072fd.0","@material/elevation":"12.0.0-canary.4c80072fd.0","@material/feature-targeting":"12.0.0-canary.4c80072fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.4c80072fd.0_1624992101724_0.30026217058204363","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/menu-surface","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.796811db7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"deee6ebaeef98922ab2cab8d7420865d35372cd9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.796811db7.0.tgz","fileCount":38,"integrity":"sha512-pBKBs1b6hKvJhDKBkLpYmtH74kBtIsOQGTJp/QIlyCzVE90ft7f4RLVqiOZzjmpdf1lyf94LMda1zrWaSIEp3A==","signatures":[{"sig":"MEUCIFJBELrWMmQzjaixY8xfaYyETVZjZdbPadm4uQARycTHAiEAoyhfD4EmIlj6LzBnNNsSGAJNMuizrBc3SApowqieVV8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QZ3CRA9TVsSAnZWagAAYY0P/RAfQHjVNCHarD1N83HJ\nKrElrLggW4RsIcdKSOiaQSysOcIdxhi8ak/jMdeQm/bT6lS0pDTBKnyvX91S\nsZaw9mOmRmabUL49UmPTGrnZhv3DGq9b2Po1sb2VUVKFJHTXGxl13Kzn2fvN\nc9AZm2Q2t77HizAsJ9sE1feBza1i2n8k+OadcQ0p6e40TTjOg5SDW4vgOh/g\n3lJhFHzZDjIgKkpOpMCB+1HRwL7BLYbIEDQkNj28o4hmlnBx54EuKGyjP93M\nauIpMjnIr7MVma7quiUWsry7smoVXw4q/T3SGFnHVzzfEeJokWAwsNxGWzAk\nVNSeFz2qB1D28CzkZ/FvU0DFOmikj3H7Q3UHWYZdhxTw+Sw74TcODov/r8EO\nHFpy4jYZyhkWCEBjwVQX2TChhryy2fIWJk2kc2vg1upNKovugeXrd5wUfOuF\nYr77g0wWwviW1HVyUTiwBxLC9Eeqfv6qOpYdQGu4Q6zqPW5gU9whCG9k97av\nb+oa51kZXtkySvmoZnEnJwXdpotqm7FIn5DnJFelTOJOX9sQLdVIkQHthgXO\ngaU71/jO8k7/KleOWXrkZk90o2vaLd+MXHrb9CfA8wllN0H9C4p9PColn0Ot\nmCNVAstxOkm60nFR69sfbJ4fGQuhiR/n86qN2Jh0g0sX6VeMdq4mGXEsduVc\nZdRY\r\n=4DU8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.796811db7.0","@material/base":"12.0.0-canary.796811db7.0","@material/shape":"12.0.0-canary.796811db7.0","@material/theme":"12.0.0-canary.796811db7.0","@material/animation":"12.0.0-canary.796811db7.0","@material/elevation":"12.0.0-canary.796811db7.0","@material/feature-targeting":"12.0.0-canary.796811db7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.796811db7.0_1625097846451_0.964086083241221","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/menu-surface","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.70e1efdca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4387d793297e4aeef712b2cb21e1fac59b1c426f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.70e1efdca.0.tgz","fileCount":38,"integrity":"sha512-vNUs20bLqnb43udbGAeBb24gj44T7TlzH7B5peYJRj85g8tSSjxYuCXW3a2vbXI1m/ssRSfIQzrQ+DoQI5P1fQ==","signatures":[{"sig":"MEQCICch0wTwMcCwf547480H5od7CTxOkq6avdmlIXzmewpUAiANfzrVawo14AvhJ2wiLiOO+KXYiHRMjYQnijqvQRohZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fZMCRA9TVsSAnZWagAASbsP/jNGXMDe9Vhae3sRvIzC\nVw2js2Y3ZgNPyNyODImdaCgCi3HwJvx6Gqp0JmubAfmjr47yjqp5dqibHzCG\nd5mIO9gxQ+3ivbDqkrYVLa+nCj9cW9MBS4RiFQk97aa+k19Dlxzcg/tMo0UR\nMr7M0xxZ6isQBU6EYsNiHPuiu5na9nBXGCKSCJ3wYZenJ/svpbOKshMsc/YY\nnYNlnQzLYMjCrn0KGO8+Ko66kQsoH66uqmhgKf2ZxQEKnUKXli83gpu7Bo6n\nUfD48zdjYv1Dvp9AB+kFmMBs2kB2HNrREqNztp6Injb1dk8p0fxrl/vinjIs\n6YCTllqlADHDo0FMMOTJhqvbGpquSTJQvFEtijgTL/n7+wQb9ViIIGmx0VVq\nO1WTdL1Myaod6BOxzQmndhRHgLW37C7BDliObBVhLXgHvtK97nHk9RHZItuk\nmbd4mqi+CBrgrwkaTwofZ9PHggwU2m1UqpaYjRWS4wi52OvyIR86DU6PChqv\nr2nz6gAsCZe+j2icJ0LwK5c6oPps8dQ7plfN2k1zVQXBhCQ3R0eHjW317Bu5\nerVG6JIbJa4SUS9XRcHV3vhfeHaPhM2ClpKj+X75zEwk75FRzd9kasXxj5fc\nb3p3FOslWa4BpHl0OTPFY7U7izEmK2pJxf8qgLzWQn9ZUy0gRmQC+iPJTDXA\nK2Jk\r\n=wdui\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.70e1efdca.0","@material/base":"12.0.0-canary.70e1efdca.0","@material/shape":"12.0.0-canary.70e1efdca.0","@material/theme":"12.0.0-canary.70e1efdca.0","@material/animation":"12.0.0-canary.70e1efdca.0","@material/elevation":"12.0.0-canary.70e1efdca.0","@material/feature-targeting":"12.0.0-canary.70e1efdca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.70e1efdca.0_1625159244269_0.007249117550846451","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/menu-surface","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.435866d32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"877741c71f767f706837a208a16b0d2b60376ec3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.435866d32.0.tgz","fileCount":38,"integrity":"sha512-sJGfeZmLlzfDkgBd/g4h6faxlYmjhzVccETDS7AZif782kdssrpHWOrt8G8Kvh+8FtkFfMN+jGCwiMgD8VEpYg==","signatures":[{"sig":"MEQCIDPlXIzKHZ/JDIH+5vVDiyK6JgSX3625uNxdTBjHvP0bAiB6brjwd4ANvqN0BKdY1J7S92VaQzqEGgTHFyrooaShDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31lJCRA9TVsSAnZWagAA0tgP/iF7v1LsrZmyUjl5vSz2\ngpRAyzxbMygnvWssrigl7G3cP1wYnzI9WD5KU8/I+4TvhS2REdM6snnL+r+5\nmKsZux9I3860n2RVmGMQ9wvxldoSoX2dO6EZJaUUS/BnPEbB9vcWex105dzu\nNVbBwyWB/yNO2zjCOvsaUnaS98ioFYT/GGARInf/O2+bDzmGc6l2gkHv3jXt\nA0avHffTCFxXQ0haoYXAhUydsHYwjn/sNQOcOjVe6VXJuWZ5kEWHWbmk0FD7\nRTzyUhqCO7dUYsirN5RP7sCEQwVqZ39Ds8xLiP/awaVUYcpflGrTGkwizIR+\nPkHH2b/KRqjn4n2JJ5OUKMNbd1zhFN3Aoun6HHDZDhlaE5EUdGnSMSym8/7X\n8pcBdZIsicypTOvH0pDtgHukaFv2wMc/5SjlTbDuNBpDtcZ6IAn73PrLnngy\nl/QcBs4KV1ApKztjYnM0O5fur966PTtjEs1hpB6ZD0Zj4Fi20X3NV7/OErsc\nMxOPOFqZlpPLiEDbuu9bAwY71INxjgugxI1Oek1cZv+RcYxXUSv3e1OdZANM\nfy1jHg6/ndQhNMfmRwO+v5Yp/IvTazFXribxjK9tQFh7wf7NkN4VwTMl0cq9\nPk8LKPvI/ls+syn/QJfQF+fH9NbUANGteJQbCg4yvW22y7+Z8y5NNzl+9nPm\njReZ\r\n=+ZAD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.435866d32.0","@material/base":"12.0.0-canary.435866d32.0","@material/shape":"12.0.0-canary.435866d32.0","@material/theme":"12.0.0-canary.435866d32.0","@material/animation":"12.0.0-canary.435866d32.0","@material/elevation":"12.0.0-canary.435866d32.0","@material/feature-targeting":"12.0.0-canary.435866d32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.435866d32.0_1625250121292_0.4276532720735817","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/menu-surface","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.d0f9f3f2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd00a4ba6c98928c798ada903750ece03859b9a4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":38,"integrity":"sha512-LAIE3ecMjJamNirLhf/5r7uWkuibyaf+/qLWVkvCdWCSk6XufwzyLA2wxbvhO3cHEVKPUoDWRzZQXLK2KTWp2Q==","signatures":[{"sig":"MEUCIQCHnvHgadn+bj7oLicYjVNkQa2qAmVd8brotyout6qJ0wIgQbpjYyebO1mGcjjigycI/ixw/TRTktfsojzA6Nv7yBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36i2CRA9TVsSAnZWagAAeIMP/0IlMpSHWkYvztI673wD\nIvhwabpD/NR1yxaKXLvqi4/EtuTuyUDTbzRl7Og9bl9XRbcN8IjNZ/vmUKT7\n331hp1uZo4T2oyAJmGpbjlqiUPwDWN7RWPN+ixSBldr3f5ynpx/fbUJkGddk\nLUQXyZu5t1iQK/85qRadK0lpOFUdXyiUiPGxTxi/msJjA4BQ0CuvUIR6Hiwn\nUBT2ZAH7eyRK01gD2fBAXPBnxaq+TEN/2MZjZIzXWiRL8bDlPnDf7SdJK2oU\ndG+mv8eF62d8W4af+feGnfQP8OjEJIoFbwIVfkSA44mLLlPvFR3ZsS14sNTK\n0mIeqnqFe3ShFZ+VrJiXWF0xZz49cgXD1M/5RplZNj4+yFwcmLqlmWPJjI1R\nblwo9uEqQpYmbXmvEGB6KnyzNOdq+021MGK/yRLY8KWiWu7e4PDOmQI7E1Im\n7jk2SbT5YF55LYh+ayZuuceGSNnN1CRNI/ChguznqC8QHh55fh5/DmWp4s+X\nhlASHsbudplJE9SYN2DJARt2Oj6eFnuGNlUe1uTEMT7StMWv+fC1MpTh8JF5\nlWqMl9gxe+jyFwiYRkFCh3sGIHMaC4SkRbVJyRNmxohQ8qtJTby1AdrCW4cj\n7hWbGrg7WJTEOEP/0UGI/Qpg6VTZF9KJanRsH0EbVekAiY9jfZCIVsSmn6H7\nMphi\r\n=WWhW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d0f9f3f2e.0","@material/base":"12.0.0-canary.d0f9f3f2e.0","@material/shape":"12.0.0-canary.d0f9f3f2e.0","@material/theme":"12.0.0-canary.d0f9f3f2e.0","@material/animation":"12.0.0-canary.d0f9f3f2e.0","@material/elevation":"12.0.0-canary.d0f9f3f2e.0","@material/feature-targeting":"12.0.0-canary.d0f9f3f2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.d0f9f3f2e.0_1625270454061_0.7886357804132473","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/menu-surface","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.adeac0549.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"161769c3bc5c3b08c9a801a222b4162a159276b4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.adeac0549.0.tgz","fileCount":38,"integrity":"sha512-ZVkMRviFwOJ6Q3gq/j6YYiocQfEp7grbp2pS9X5IMXtL6H4Y2eXcXVWzZatkbVQsOCK+Pjr/0HgrhKTxZj4+5g==","signatures":[{"sig":"MEQCIHKSFMvSNL63hCxDcL6uZQO2Z2teEbAQBXz27ij7HHYYAiBWT5OZx97jGNNvaC/CTNLEkfUMma/5pQZKk0ETT1LErg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xVSCRA9TVsSAnZWagAA29oP/2idgORqm5D82Cz09hM9\nJdUSwgfDjbFnPMCWO/jq3YwIjHj828PrHyZxml6oOoF8KU7mwOJOwOpnKDc5\nUquD32nL4/IigSyB6DxrgvTkVHenCL8XmfoLW8nIaZkIVIUJOkgXWI6oXcVv\nbRv+ix1ySM5efPBn6lGDm8juhklAdeOfalqPoutIQzdyniN0eJuFjgnkpgxB\nqjDJudwIX8j5Jlz7setSqCy3v0kTmKv284v7v8tgrWzHj3aXwp892+34oSCI\nB8lw8drN+lfhiWjCmZRYHBZp7fXcgBhz5wE56ZwJk9i43YYfI2ccjonXHdem\nQXtdqZxpH8vIPLxL/QGd223kjWQRi1//QRB+KGx7r5s4TkLN4rkB09+LWeiP\nmipkHdUrp9kKLhY4e1Ox5HEBwpQ5yBR/uY0jqvBYeJpT7g8TtzgU87K4JyiA\nJcjgXUu9aUJ6bzbXeRjxkhcqamGvko1+uQRvcYJ/d5xrpVrto1oSueai9Xit\nT/Xs6TnsGN8zK0ZaBg73WtndzXZ/HmpaDq0IK6gSFAwNsCKhBS041caQSNgm\nFPF2EvUCmgEy9588xMyHqz1xtDmHDxgH+IdvFYZFSB1lBN6x1bo5ZyTV/6l5\nqJrp+toMgmrMoT6dqpbQ7Vf6k1/YgAZTwqkJcG9KeFBZB7K/zRIh7tl53EYF\nPQ1y\r\n=iiM/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.adeac0549.0","@material/base":"12.0.0-canary.adeac0549.0","@material/shape":"12.0.0-canary.adeac0549.0","@material/theme":"12.0.0-canary.adeac0549.0","@material/animation":"12.0.0-canary.adeac0549.0","@material/elevation":"12.0.0-canary.adeac0549.0","@material/feature-targeting":"12.0.0-canary.adeac0549.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.adeac0549.0_1625757010191_0.6526632009027837","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/menu-surface","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.068fd5028.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff360baf91cba6809ae4542fa6dd397675b81052","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.068fd5028.0.tgz","fileCount":38,"integrity":"sha512-LY/8tEruRMWd+SGgj7VH9TggCJ420dZLL3ARA+n3dq3aL2vsmYpwsLYk7PgiZMcE4xBnHZ7rQ2dsn1qlB0uDHQ==","signatures":[{"sig":"MEUCIGm0Nqa3Ac8BgYG/Xoo6CjxLsQ8X5GXaIcStJeAlfScIAiEAwBOu37Zj2SrvB2HXCfTZLQ6YIfjCU/AHdi/IUOI1JQA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50xBCRA9TVsSAnZWagAA+FsP/RLMulttVjRGR0oWL1jn\nL3lm6mCSPhUSNyCR6vIyq4NHLCU1wEklH+XOr1rFk8JTccWFpqlybLiXSLKl\ncZPcADh88nleOZ1shPDfJ77Vf/Jj90i9xI6iCm0Fi1l3eJF7LcTX3UVSSb6N\nPpCbstcyIsL01tvhwqLNbnv3g8dmdEDr2PUgtBdyIlBPCcW/CIekfZCzJBd4\nhQS40r37+RqhCD2ABnxfkIUkqkE8NqqxyXK++Q58sPin2mziLaj8u0ynrx3w\nLmbylagBdSWBs9/ojt8bZI5Oy1CK6jg0EnFIOZUhyYXFK+id1qQudk6qqKfS\ndC5DjGWvdrdnUvbIq/hv+2NWSKDQvkPg2w1myK/HzW/nJfwgeXfujcRyWscU\nzD20Zgx6OEgnv7OrJNaeDYWPan9/MBktM5oOCIltGdQ7PRunf76UMJFt9Ule\nRxLuf/Y35TXMwKhRQ+eKBdYa7y92o9FvcjtM52pIC0N5geH9spb/XI4rLEqF\nUEsaIGEzqiMbZWB78hOosfwANEJGT7/dylvKgW+/Vd3B5FsXG1oJNplFWFDZ\nzn6ok/hhQqDgmFnu9jt06FHgPfCxmBZwy+7Hg0nCJ1PYNZKMvNQ8BVCzLBAz\nGnAPVWc+XdS27pFFL7LppoT/AXU2+L3/gm/1vw0+gy3Trau6MKKmnN43pf7p\nfGzv\r\n=56dj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.068fd5028.0","@material/base":"12.0.0-canary.068fd5028.0","@material/shape":"12.0.0-canary.068fd5028.0","@material/theme":"12.0.0-canary.068fd5028.0","@material/animation":"12.0.0-canary.068fd5028.0","@material/elevation":"12.0.0-canary.068fd5028.0","@material/feature-targeting":"12.0.0-canary.068fd5028.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.068fd5028.0_1625771073245_0.5920400094881915","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/menu-surface","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.5dfec7a14.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a090e16be79fb051f17978c4afb2fbd90e017b78","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.5dfec7a14.0.tgz","fileCount":38,"integrity":"sha512-yzMfRyV2yXWH9TehoCOMm9x9/p41IDZuWmxyjQIzuHOuDB73Vt5DqxON8xjw/iUaRI62tVZ6KzMi4FSRZn08xw==","signatures":[{"sig":"MEYCIQDOJSbZf+fEPQjd8D5LhBSzfeuiiiTYQ0/pxMtzsWLUhQIhAIh/KLTpBC6kGdNdHmLOTFvlBvNwfbrCSETs0Rup/UKO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KBoCRA9TVsSAnZWagAAOSEP/2ha1xmgrC3fBC7IX2mf\nOyoObT5AlYu+8OwZgxjvuQTLsvDDuTZU+a4vMcunow6jY8x857lQicsvIfsD\ntwegmxuQ4/Gh2vnEtnbIU8ylFrrmRaRoKQQYiCfnXBGOi/B9WXONlajH+996\nbC0lV+xhHb87DK5O0vXlNt0EAXwkOKLWzNFb9liRoPdrNJVF6sH99ji3SiBi\nUkxH4hE06Qc7kbBKaXa1dWYaDm7CRRPRqIvjTat+GDINM/Ru4A2ZDDHXmvry\nnVV9tIzIzt73XOCYendfnAbqtiojRW+UmHb68r5DMoLXMIiLM2oVWpIJE/W7\n9Hjg7vC8VBIjyfzWhnI7lRGmaiZgUrYAkzsEGeveFzje0aFO3RX4Mc73uo3V\nhuZNjzieP78ULXdptD4W9VhRaf6dakqlmHFvQKU273d2ouREwTfGoImmhaK6\nT3QI7yjGnP2TT6l35Ll/i8UkU5D44avpkt6IbF0U0Tlfu2y+f+70qYVd1Ip7\niVLj2RDE0+mCnVUBzwVxap1+7Su7q3jwFkMDK99z/MQjnDc04oEczLxzxJcv\nROxjjtExH+Sd4nOLRlaG9LNV4xXpDFJdnxWAHE2Xg/H/fBhIR2RvIEYqdDdo\nVymXRnf72auHiVS2UA0YgdCUT0eDajNtplXoNlzKv8eKF4YXP7ekFVhcJPni\nqLBQ\r\n=o3uB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5dfec7a14.0","@material/base":"12.0.0-canary.5dfec7a14.0","@material/shape":"12.0.0-canary.5dfec7a14.0","@material/theme":"12.0.0-canary.5dfec7a14.0","@material/animation":"12.0.0-canary.5dfec7a14.0","@material/elevation":"12.0.0-canary.5dfec7a14.0","@material/feature-targeting":"12.0.0-canary.5dfec7a14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.5dfec7a14.0_1626120296021_0.9168606078359283","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/menu-surface","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.07a73750c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9013f0e3ec2af4ae808a9dc2e6b8d62d670539e5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.07a73750c.0.tgz","fileCount":38,"integrity":"sha512-EfwJkKS1GYrCqltjKcHLCkJO8UD7IZ1rtSZrN1eALKMNpoISHAof5WfShQgF1dsKWUFwolxN/r4raRg6JNpzTQ==","signatures":[{"sig":"MEUCIQCLcUxKBaViQNVSvMVzUkhWhrbhsd2dTEsZc6VpBGuG7wIgEkGlmceljEbcNaQyFN+0RGYvXHWOCWtDRY4SkcdhmtI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KVsCRA9TVsSAnZWagAA8fMQAInnuwN0D7F+TLQ6ZjGD\nyCiUerOxXI8BJ+KM75ddvwkgK8HToOihlWuu0HYxxg9kP31RVmos2JnblSaC\nzwVTrKhjEInClmmtCP1FxvewvUdgAlC+ZtDkofDXcDA5ZvLy1R1PIKuXoh8p\npY6MauU3KgkP2wke42GqvHf64KCP1t04s/Cj7Y/hHbUF27nMIJ82iMKbTpzX\nedpWebHDhTtPXH7nIivfKl1chBEjvZLRkgBghtCAnKkZnEI9d8V6xzHiwz/E\nB3cJwilEwKN5cDcO6N8f3ydzMqrQOrTcKf1PqY2FbdZZ9NFf18nBcT+wOvfI\noR/rcdIqtZRWoF/hfrFRWAuONAhSLFaR6w+NBUb44qVyYriZG7sXd+p/BWKB\nhYm5Ogi69889K/ZP7LlUMW4IZNzDwjoxEicftVyrl+mbSVFlOA5UCEK9sCZ7\nkJH8ZoXKK2rUzthY1jAt8iM64wGuG0R1Zl/tCMs69SsJdPBqY9JcTl+9GxrH\nIZd5tWt9FX61MrwllpPlW3jIFQnYMfocUw90hlHzr+ZQ03A20/3askIXuqQa\nH/YoQqRmYt42SngsyaYR4AG4RaeNwWHg9oyo0P2KbFL48RUKJZJrCdDWVeKR\nxsxgtZNVt6Meu2sdXXCYRkTXZ2Ti2z6aN0nrLHVu4fH4Qcj2bRTuS3dOSZE5\nbTte\r\n=Qaz/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.07a73750c.0","@material/base":"12.0.0-canary.07a73750c.0","@material/shape":"12.0.0-canary.07a73750c.0","@material/theme":"12.0.0-canary.07a73750c.0","@material/animation":"12.0.0-canary.07a73750c.0","@material/elevation":"12.0.0-canary.07a73750c.0","@material/feature-targeting":"12.0.0-canary.07a73750c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.07a73750c.0_1626121580352_0.94428056768296","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/menu-surface","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.3e4c6dca1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fda58aeb6c0f5948d2e3742fbe490a0dc143a589","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":38,"integrity":"sha512-5qUZ6K21/3WiovuSiogQYcWzxuBYcWDPMw1LV/ZDavt5Da1MXHhkHFE63vIBQwW+e+eyAInnCIafzQR93JD8Jw==","signatures":[{"sig":"MEUCIBapwY+25CATLboucYUjfhbwioOryPA5ZZpshF3K5xYvAiEA1rAGS1eFlp6hoBYLI3J+NFXKUsk2rHDgo0fehQhGMLE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PHOCRA9TVsSAnZWagAAr+QQAI57/sFVlpVtsWOtDFYw\nyk7m4tm7bhwbG77M5uN69BLYrRc/1u/utrVY2CrgzRi/TxeldVEOFcC71DGv\nmUvK/gaes55TB3FK/25SfmmA5ADXoC7UmJJKbYOWJUHRBeWamTAnzZVbgiiP\npy5U6JLicEqreQIwQ/3rM+fW9mpSl7BIh4OT1mlWjEBdnhOAz2WDsJQZ1PGi\n35IT/k2gWOagNEf5QVBO8nRramF2MKjC0jbLP6klOLXtkcuCLiF3EBHRic5I\n56TzjjCDi3PQLJr9Jc2wkaaD0gRu3yk73hGW4XCZK/piV9f9D4+MGweYlyuB\npGmG3PHs56QcCV5QIk4MZyPkXQr3YgmMVBVhIO3gwrRRzdyTt1CufR8nyb4K\nwDs/d+NHCxSjoOOzV54tnllC+eTDyohdVVHK5jaW0RC9BQvODREzRV/NxR6F\nl1xdWjfLOHBv1DwuWvGZe/3UZad90MUibVeOdLElm7HSdruOJSLKK6HokB/f\nOU70nc6lIXqG9f1gMp7vE5ImVXt04qX7w88i9BYR8Esvvu0VaNcMY0Lu0lHI\n106tYE3njcsofXdJ+5+SGtOIy4lXF4zWRQSFZFK5t3J+OTPHVjr2ngj2p/Vs\n2PPUteyYQYGIq7ndiQtQZ3sHB0e/C0dpODWpm5AZ7Q0ZmbNAzNjSkthWZyzE\n7aBu\r\n=WyhH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.3e4c6dca1.0","@material/base":"12.0.0-canary.3e4c6dca1.0","@material/shape":"12.0.0-canary.3e4c6dca1.0","@material/theme":"12.0.0-canary.3e4c6dca1.0","@material/animation":"12.0.0-canary.3e4c6dca1.0","@material/elevation":"12.0.0-canary.3e4c6dca1.0","@material/feature-targeting":"12.0.0-canary.3e4c6dca1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.3e4c6dca1.0_1626141134089_0.49973731050273695","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/menu-surface","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.ea77795b1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28f2c186edace4d81e721976fd4fdd1a77d647cf","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.ea77795b1.0.tgz","fileCount":38,"integrity":"sha512-z73rPA7NqkJOa56XnsrVaJVVx9cOznI566XS8JPgV+PG4CPGwhifB5T9nrMFUEZKMTuyORz3DHbswmp5qPeMig==","signatures":[{"sig":"MEUCIQCPTb2apIa+YKfJMSjt52NpCa2rikhjylzbSQZt7B+mAAIgO5Rvvb8Q7wUagi1u5ckNhOjlKxxnbd2/1UPSfwVOuXc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bY2CRA9TVsSAnZWagAA1j8QAJKoyEZQ9pKFF2eBW3Ey\nOtfDsxkZp/D14RanHAMnBu7GueezRyX2tFK02tm3pOeAYQWdp6nt8KqiQzN7\nLYxkJRZEKuJwouxWwpu0YXXUuics8TttO25BfPVziy8QHHUeH6f66yP1mI8x\nN2SFsyCJMmDpdZ0ZRVhVEnVMCU2qm8Gj6suM6AO+MC/lZ/HMSKRJab05//AB\nNuPlTdWMdGkwJppih7iVk3Ae+jXNcMvgF1HWF5oEaHqenqy0QAW6p93PmpfZ\nJDgkXqdsDjiDVf+VMsPuVTYfmfb7m8jf4hbNDMpsYakbci+ig5HrpwuhviPA\nZOwr3PU05vA61FpUAhf+WyYQ8el39z6T4Jjh/qLcxKwCSQEPBLaWZBCBNtd6\n+px9P4CAX493hZwuRZrhmL2E/FQZCU/W5rCqdNJQwZ/XvzuVDy4akuGn+YHL\n85XOijrtYQ7rKATgT8YsMsryJW1lDighfBHrGjfYWZoOm3BVVp7bpWKTDVPi\nNWV0cIqjAmpcYiqyyQfOnT56adffKJRT/tsp0jjlNOmdX0+jERpZ2rQaqCN8\nOvrFNLmDZusG7TxoQbKe6gL+e7Mc9TNGLWk0ujiXa9NfTYQjslwFEhKV5REg\nQaaGTDcAkCA1ER10um+oALCKqlVjlcU6FYLxVBM7yAkTUI3dcSNqMTYBT9Su\nN7Ck\r\n=1Eyw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ea77795b1.0","@material/base":"12.0.0-canary.ea77795b1.0","@material/shape":"12.0.0-canary.ea77795b1.0","@material/theme":"12.0.0-canary.ea77795b1.0","@material/animation":"12.0.0-canary.ea77795b1.0","@material/elevation":"12.0.0-canary.ea77795b1.0","@material/feature-targeting":"12.0.0-canary.ea77795b1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.ea77795b1.0_1626191413999_0.7542278559047797","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/menu-surface","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.15a179fad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35f203ce789bc36cd618a951b2a2edef4f2cecc2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.15a179fad.0.tgz","fileCount":38,"integrity":"sha512-yeRJzJe0w+OqKzErDkgw5PGZJSPlsf88I8GPrnsorfrYF33kz1KhQ6wXHv0kxHp4ujjjOTCRg4cFFIfDWolj8w==","signatures":[{"sig":"MEYCIQCzavnuWBeRwIGgeUiqb5/tGmYF2VotVsGwun9932Qh9AIhAO24D6+DOt6TSGBlrHsCJ0+Yf/F8msnBfs0OMttpbcsx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dcNCRA9TVsSAnZWagAAVfEP/3zcnAB7JwdFJ/wddCe/\nPEBGIGqxMTwbfVquX8Rm1Toay8iAzGEil6W796nKaHpIyQ/H7ZBARfYW6Krn\nBN+n+qF4NuXWGRej9glJUBCBx/G9lfBLSHza5nZnnGvODtMJUZyT5TsD+10d\npqrGPkjZsFmvP8d1jR9Zl//kHtX02EkVaCx62NGGz/OOzc+QXfCdEW29MUdL\nefL54AvW4oa4JQVAKdrIQDhbJI/ISlDT+m2Z1lxEBhY0JHRaFLKXFZ3NMmjg\nm8kRF5wgfiUnGj4JWCzQCu7Duwwf8mkWU1zoqSuBU1i+Pu7mOqjNS6vQoW9I\nBnjEDeiSN9lJwN0OcZoj+rQi3eBUBqrrRqZCFx0eC2P4i1pGA4N+xT47v8b7\nACXZzVPTP42lhn/x1snLLeWn3ML2pwwdiT1YwWnGt8s4cL5KHm/qbFhcFrJW\n/pzV/b2YHgVfsBR67oUkpsazEZ9+WsfNabwa/k8sXYOJzbLLQcHVgCaylC6d\nxDEU7Wxl+dKclmK1NAyX81f9dHKSDeM0Os8aTCshbVA8Eaq8N5PBM1n4zSi/\nLeguscYLUFxu6BiPuAgv5pEuHiY4FnlWa1j1Sn8dr+09c2xSXgDa7eCuTqtO\nwh7AIILvdEfRQvKfVpkaRSNNaUCNefOOtnsr5SZvLiRImzcd9HuSUqRLOJ4s\neoqa\r\n=F0Lh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.15a179fad.0","@material/base":"12.0.0-canary.15a179fad.0","@material/shape":"12.0.0-canary.15a179fad.0","@material/theme":"12.0.0-canary.15a179fad.0","@material/animation":"12.0.0-canary.15a179fad.0","@material/elevation":"12.0.0-canary.15a179fad.0","@material/feature-targeting":"12.0.0-canary.15a179fad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.15a179fad.0_1626199820722_0.6271615931234231","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/menu-surface","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.c73142a1b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42247902da85b2b285dab7cc3a7a98c77e3d61ab","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.c73142a1b.0.tgz","fileCount":38,"integrity":"sha512-96LDVSJl/IV0XrGITPCvKa/0E+x+SSUK1zl8wenbnc24SxzsVEQ1oTvCvAHDmqrEgJirta3qlZvy2q3OLMvR+Q==","signatures":[{"sig":"MEQCIBhklCD32yvDa32WNxOVaKX1TSFQVOf8RFXlQ9u8OgpUAiAmC04OVmnFdgmXrkgxkvZC30xlSAzXtOtMH/FJ1+DA/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d8zCRA9TVsSAnZWagAAOnMP/0gVWEyUDUgscD7BiGSn\nM0JNyz+TrmxU/CJrrmgBafOL+B9rHhz+8OgWbRqCbFQ7xcUH5Fr2v/p2o0Tg\nDhnThim/wWogrrAsMM6dtHj84b5Gme2SdlQ8jtGf5pO5QluSi8ElYqQ4tIvK\nO75+Uz8grMts7xhAB9PFtJbd4B2x8oabF8OB2biMAz78kJcMKBNg1MPK+1ZC\nRVK0uzauDy6+r9muFAMZIFsPmMngmOtjZhcO3IsHno2jdVzaGu8qrI+Vp7an\nIjKaW0yZ5eXGdT5Q8SUcA1vQ9HD9Lta4W6GGqJTKC3okmtBkxJf02CKyq/YD\no0v/8YsMnbX2auYHL5TNziGO9jev5meax+rrCreUKU9TxlSgjpwqPykzIoGV\nIUjJGRDkEQyRSfulOk55Ixp+dvc5dllhD5fpUSDo0+2rP7Yuszrah/tFpzg4\nC5hsP6sSpbBwbCNeqiAkAeGvKPNnXreHQ6ilVuNx1fFPrnUPaDoTqeUBv3pN\niS8iJ19uXaxw0RySioqWXYCXjvYNGd57wHpf5AFcjaaIG1GNIDNHtPX8o5ZR\npqbekG2zDXCN9C4AiDE10WY3uLHar6Gb3epasc3BK8vcHB2q24ZfGeWRQzJZ\nsbBJebzfwt/b/w2uC+b68XvIWxfjq/Y1QYXwJobpBw4W5qL6EGGRORNZuCi6\n0ul/\r\n=8GSa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c73142a1b.0","@material/base":"12.0.0-canary.c73142a1b.0","@material/shape":"12.0.0-canary.c73142a1b.0","@material/theme":"12.0.0-canary.c73142a1b.0","@material/animation":"12.0.0-canary.c73142a1b.0","@material/elevation":"12.0.0-canary.c73142a1b.0","@material/feature-targeting":"12.0.0-canary.c73142a1b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.c73142a1b.0_1626201907093_0.5542280170915759","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/menu-surface","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.d923db73a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c84719c0ef2e01586dbee035a3c1c3ce2f17433f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.d923db73a.0.tgz","fileCount":38,"integrity":"sha512-Y/NQ3RA0ZFTmUWeng38ms5GFOSpd/+/+FSI4gE7fih5ylFK7FVDhd0me9hGvI2Q344VGeL0LrmKrAg0YxLi5yg==","signatures":[{"sig":"MEQCIBYpS8OXoWE8lUl4odI9XMpyGT3XNqMvldZENd16TKBBAiAZA8fGHW+JQBrzRECqSHlCw/Ma+1KEZWp9mYl4NlnOKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f2WCRA9TVsSAnZWagAA1C4QAI0atU/DX3GTzgIJp3Y/\nUKuF7IfBhzFLCor7/b65oQoyKRntBhd+2zwSGKk8D6XHZYxjbPOV86soofE7\nySNuPD74MQJBOqUA5kG9OePSmPZeNXnlib031n5i8hzx2JeH7YvrR98kHqHs\njiOFRXEW+v1V2jq3eFBT/OYr+5TOcWhf/a6ka8UeNcJldt7aqonVRpCrECZI\nMqWMJfgCh8KfN+ir8RHNpw5Jvlf6j1nyJbPOVi9x0lobxPN4jTR/RurCXiZP\nAQue0qURBkWFknHTuQnPyGWr4HWIU+UTAMHqhfMYMOyXwSgfzSA3fxxNn7/8\nUrOzGL5JPnmRL+ymdVSmrVwZKFf0liJp+xJSIu7xERtTPKaNsPqQT1ahkmF4\nRszbA9Q0od6mUR+aUFt8CLwTm2TLEUk+u9PFWRSrETvbusCzT1HlM/Kzz+5e\nwL2xDO3Pvuyxdg377+MyR1Ic0WJeX+gQF+Wy33QlIay19x9GRn6DZEA/iBAh\nZFUtr19whfPb0XzdlEjkr7M8GcCV/VcYXZPGaj6Z39HC1A+CvRGN1rrRcNCp\nCn0gcrKTVcZDp+cABW0Ks0AmHIVtCYLwBrqvfXM5m5/Vz7N8KoKO0OEaQXvb\n4TuLJRy3xedzVKwd4HchQAr66Bt+9VCGPxtIt9G1k6U5xcpMyT9/IFOAtxU0\nxu9x\r\n=15zl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d923db73a.0","@material/base":"12.0.0-canary.d923db73a.0","@material/shape":"12.0.0-canary.d923db73a.0","@material/theme":"12.0.0-canary.d923db73a.0","@material/animation":"12.0.0-canary.d923db73a.0","@material/elevation":"12.0.0-canary.d923db73a.0","@material/feature-targeting":"12.0.0-canary.d923db73a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.d923db73a.0_1626209685761_0.482296199577513","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/menu-surface","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.22d29cbb4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dce6f845b351842e30cec5d63ee703a855573a7b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.22d29cbb4.0.tgz","fileCount":38,"integrity":"sha512-kvfewRPo4sJtGzBK/T94jjRYnnIaQbC5xqQ+AmGZHGUBsV713cVE1IWVSm0d+7MbERsqKMG9/JZik2Um3YZetQ==","signatures":[{"sig":"MEUCIQCjWiYPfFv8PsTdqI/C/Fs/y5AwkOblq/q1772ecjo8KgIgEhEFVV7bByZEPhiwW0ylP4/vXaTQRnPI0Wm+GSxVwo0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hj4CRA9TVsSAnZWagAAWTQQAJsCnPNZb8wUtj7mRuSY\nHo7n6FJE4UHfPLiILNHovdTBf0S66Um8BfLXO9onJCKtCyNZKNbbdvVMZM1E\nGzAz3JFrvp19quIM6YEAcTYZYZt9NoMeMBmmZSJ3Lqv1d5/hzQPJ5GIRSr/J\nM4wLNyMBohQI2PNo5dxFQmWbL2WsKvERv/NTPN4P1/uZVaw+so7QqoC5B946\nmN1mTPtiOaPOaYS8CHTkA32uDdubi7sGWA61TFjw1/dJOfjyFB/k5+NxE6nz\nap8frha6JqyxdmaZf1qsMisncxU9Vj/rc1dNamdV3FSNnUBOQylgaVGRi3eB\nAQKRqXnUEwWlenKXSNC82MsYYUVkh5RviRz0RjnM/JmJe6aP+89bDOqlFR6S\nGUCjoj7yDnGb87b3asPPm0PsQmBIEjG5FPWMrB1vqMvqxYoDdnDnr2KeDQp9\nrz4C1Fning8izDYl09JpRCxMGByE3+iyfhi7W2d0/Cct/1O+lpvFYaWhALp5\nzYDhWEoitVQg5JT3fLow7wA9+Sp1K0Usrku5ORX4j+V4vhW43tqmzmOqWirp\n4NyG3ALiqHlc/83HpL4IJvs0sSKndyWRetq//iM3JIOJCpBRcJLmNGck/aFa\nmt5dfIBQIgvOUdZrcC6uif3VIAut55bifR1+k76z+b99QWMy2CyVoGxdl0iu\nrlcS\r\n=HVlG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.22d29cbb4.0","@material/base":"12.0.0-canary.22d29cbb4.0","@material/shape":"12.0.0-canary.22d29cbb4.0","@material/theme":"12.0.0-canary.22d29cbb4.0","@material/animation":"12.0.0-canary.22d29cbb4.0","@material/elevation":"12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.22d29cbb4.0_1626216695560_0.8783596530949962","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/menu-surface","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.2749604bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2384e76ce767e8e76316ac57025785656430b3a0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.2749604bc.0.tgz","fileCount":38,"integrity":"sha512-+pJdL7uCrTJBR2mhMCI6l3jQUP9PmUlIlQ916d453NZ3IJPnfMFhU0GuSLsSmOsLWGKRRG6nH3e/dbkPyssH7A==","signatures":[{"sig":"MEUCIQCJVVofA7CGdOnWjIjZZ0ifQlAFDhFm9SpKi20HO+rvigIgN/Wo71pSCaxMthK47vy1l9/2Gvt5ZoNg72ypSVeR1iA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":372938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w97CRA9TVsSAnZWagAA1UYP/12l1bXFzeEm9BivvDeR\nNPbuIl4F72otjBf10+tqLg1piaSzF10q7x9uO/jSKu4yrvrZF05aJ2W5LDd0\nfB0LZhIHrZbxaUeMwKTKkB8Oz13XbitYZa2muuvw7HUtDoXHhc5RL9DrQK9Q\nplI6Hf2k33XvM+PFMD2anSr0/0SL4uZcaeMD5n2AWVV+t8wQwzU863riEw8s\nghLGYq6JE/nBMavbqkGPNr0icVt4isMHeuIUMR9UXjSiwyFlorIkZqE4HrJ9\n3xkNhhlKKRlPsvYLjL5yss3xLt+jFMk7HUCIg+QcgfFifH3M7yjhGZScN6UZ\nkVmPoXIRvaUfbvQY7TtP9RsO0sjB1lXjV4fMMhe/4equo3Id93pudAv5lqDY\nVOZ3fi2TpgDj+GB+2kccB9eAwt2MNvlHUXzq6EommhQdFYbN0yxogPbP0fbU\nS9gJ5Ip0L7bwOU/iG1Uz0XOkpSS3TGKX+myufxbkpOEceiW0NmGt2Q/Y7ugy\nvnYkEn1FXsNOTN/S/hDKyTa/YY0fBFm+xLBk9XQnyhYY5EXz35yOXFiDU23V\nUXEigTVfjVnMlVAbk0+tVxHLZQMxYqhppZsTjTm24mtm6PZlF8CgIt3myOqy\ncqkLO+tmHXG+/0nOhSiNaYxt1r/QR2WLgiiyUzAfP+EQsMKQ+UCUgTYcvjSr\nu4ZQ\r\n=b95e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.2749604bc.0","@material/base":"12.0.0-canary.2749604bc.0","@material/shape":"12.0.0-canary.2749604bc.0","@material/theme":"12.0.0-canary.2749604bc.0","@material/animation":"12.0.0-canary.2749604bc.0","@material/elevation":"12.0.0-canary.2749604bc.0","@material/feature-targeting":"12.0.0-canary.2749604bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.2749604bc.0_1626279803262_0.5205571740643191","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/menu-surface","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.e1703bed9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"caaf294aed441b4795d0502cfdf5b457e3a4ecdd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.e1703bed9.0.tgz","fileCount":38,"integrity":"sha512-vmEtWrQAywwBm35CozecG8JrAebRBYB62CkNtJ6S8yL+y67VAqYXZQAuecxXXWGXbbfeE9F41KAOZsYzIZfULw==","signatures":[{"sig":"MEUCIQC5HPOSJcvnro5cDGPlHrG+vL5s6KfSiPpAchKQJbDSrwIgBeXhuC1kt1xVC6qgVGlBp+FXe6IsXsBahmlGYsyoVlM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71vKCRA9TVsSAnZWagAABEoP/0GNWuUvDzDiNJANE5KT\nHuwDy1xhcYRDziRLmabgguS+DFcH5zQl6i+hZWLhLjeWjIKijPzPPjptNSqo\nLWPfMeC+D2AEzB7+O/H1/yXOE83ULbgtRImwrMq82/JgcMVu9AUdeEZPuw7a\nm7HxEJabo+s/PQxYW8k+D4Hv2j1i6Y3Y2HERvEkOS34hqXtxHHnRnh0u84FF\nule6DUxZBrm9oMDbYdp2fu69gwYAVeSSVK0gkl9A+laU5q0vs22rPKllN+bU\nYp41QOcQWPbEWbE2S2RKIaiiS1UtyQAKAwTsL9QTg6OgNvx567r02HxXlyJ2\n96vrYZVPjJPM6t2VlWYwC6VJL6VXYEGZjcaruw7hI6OGzoi9QehZECgWkMCX\nN2ImuysrgoQOp3fdu25gpXDKvIy1OkvVM+riJz7gip/lGXoNzaMj+4GQd0Xc\nlLsiarL/E4/uV6s0Ajtm17pseAz4/jr3l+GvvLSZOBpg8Q1I+hXhEZgKi8Pn\nKqfp6Z2wYZAl/N6SMy1VsRB1AJ06Q50ZI/Minoi/GyjMLr2vpJ6TgLWWp/ei\nWv62SDRKdAnf7VpWcRtxiLJLkrmWLBqhfz6BnFIIS8PM/gzVRRRaQ8GCss22\n00e7aF6ttpFfritTQM4jOEHU7o5hBU111jlaVzZulckWAlKKQTmNSTRmfZdD\nSEnu\r\n=GPp5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e1703bed9.0","@material/base":"12.0.0-canary.e1703bed9.0","@material/shape":"12.0.0-canary.e1703bed9.0","@material/theme":"12.0.0-canary.e1703bed9.0","@material/animation":"12.0.0-canary.e1703bed9.0","@material/elevation":"12.0.0-canary.e1703bed9.0","@material/feature-targeting":"12.0.0-canary.e1703bed9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.e1703bed9.0_1626299338116_0.8396970622152509","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/menu-surface","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.de48eff0d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed2e6f2d98c1f6331f2cf3a3ebca8d81ff19d04b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.de48eff0d.0.tgz","fileCount":38,"integrity":"sha512-LP71Xf3Iq6eSmQTUVjb8VjoKAJwpVXuwoftyue0Srh2Cb60wb/Ovm+Sek1swIIUGU3N/2Rj3KzkWB51JY8rDOw==","signatures":[{"sig":"MEUCID4JWFBoCTopIXSM9G1W8mm6v98dJ5nbPWebzpZIySmBAiEAztX2Ng2TJMptVFVimSoN/TYVAfqTaLHIvW+dPnOO54c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":373784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8GusCRA9TVsSAnZWagAAmT0P/AzyErY2q7DTskfNzsjN\nV13/+delsRtAK11g94TF8vfwD8NFhIa/iT+hr4yMJTbNAZzEAsOmvODZ1lpA\nHrw+4/Z4jPEPIRCsAscLlI9+hCNsqNkhbV0Lj1DFBr5EWQiZ+xF2DixkAM9H\nQckKQ50VHubEfC7LfI2l1raV5teaJBNaVSvnfz87yaDjkMLcJ03O2q1fmptD\nP7d8bw6fHN7g+MfGetj976/wO4IxVLVbRDkCiiTwJwm3cy93F1pw1EnBn++X\nz2YdWzfYLWgf4R4yVVopgYLipjzjHP4lxfMY3HZWFiA0kul2e+KjlJ4wuIGM\nm5p8snvK+DaVOhNOdKyk2e2e3MGlc8S4hkMkqrfEdKUroUPe4ooU3r4rRksH\nCBz/ZpNK4S33ltpzM62OqlcSNo1H1Vw5RjaAL+/TY0cz0vZAQH9NOO1aPINM\nZyUzX3yVCp47iI7n+uGAGaBOe1VXzBKv0Bid0jx6Ye76RDb1p32W41SQ8LX7\nySHVV6UdGcoAtJHhRk/yeO0KFtiOrX6lgsUDYWgo4Q379xu0PQAxKKzUiNnP\n//0BAkvGFvxjFD0PBRq7bOMOqcT2xnIEMSo8vOO9g52q6fJNYMIO94kRPzjK\nJ1vXwobm1sq+UBAtAJ2hhyoULisL2It/UjcWr+oInOR2L/U2FH5hKDWu4qRJ\nkjQf\r\n=YXGa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.de48eff0d.0","@material/base":"12.0.0-canary.de48eff0d.0","@material/shape":"12.0.0-canary.de48eff0d.0","@material/theme":"12.0.0-canary.de48eff0d.0","@material/animation":"12.0.0-canary.de48eff0d.0","@material/elevation":"12.0.0-canary.de48eff0d.0","@material/feature-targeting":"12.0.0-canary.de48eff0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.de48eff0d.0_1626368940611_0.5094058743276315","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/menu-surface","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.4f060adc5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3c80dfde1825f57c0df06d1a5903ec13101f5d0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.4f060adc5.0.tgz","fileCount":38,"integrity":"sha512-mCWPlU+MBC5WeNja87PMwLqAB+RQoi+G+sffsRyHwWEXkyFzv1JlCcSL7b1seoNAS4zl8hGQoqmF89kNVnMLsQ==","signatures":[{"sig":"MEUCIAy58FWG8zrPI9TdrDjAHEs3OqpCd/v1g1vmgjoRvu+4AiEAl87Zie/tD8Ii1OyfGh3GNYmytBdSnfD90ukNwNjng64=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":373800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8IsGCRA9TVsSAnZWagAActAP/0h1jI1Z45AP9TwLDV4K\nW+ssA7VHhC5GXNL/qUZePqjge+KZu4yoLYd8zWkNEtfj73Pm+eHu/5Y3yHyS\nQY15S09VU/bDH+X0JnlqDnHbHZZ9ZJPxhdOo9O/XOyaJ7/VSDosg2dWexnyV\nq1r7mYc1iYhm4crpCXHmbmu7w/KZ4aDo9QtfQj299Y20p8zTfaTrPGdTbdzs\nMP6gaIIMJ5lwDudked05ici2S8DUdIJaPn2rOVN1nBwJ7Sdso195uj5xG2cG\nQ3pKhkO80ISGt+DTPesVXO2LMj57Sko8r2eJYz1+To85qCboyhlHBa80tx0L\nIyWaYclxfnRd71UyId/5wYdNVPt2+bPK8L2olIWmu8RoIPN6o/9xhmYG0i+7\ndODhzpT9LPny09ld413p9OSeWalYiD8M7F42MX5nQHaV/evgCCnGGsm9mMd/\nMsn5QWY57WaKrKoHGnpBbmzEzU9Y9b1w6yIeNNwDiuAn0rVfvTZE1bQeIykm\nmZae6SluPBrsO2vOermzSFbptlbTMfL6nYa1W8xULF0hcLiJu5a7Nui8s8q+\ny5vZ5ecrR2zUqptzoawT/RciYGvfQ3mhBSYGJDmzbL64wYRkCjMU/4sL1gDY\nqSHYDzw95Rc4oHQqP7jsjc22EWcJBKTAHnpzBHYOMBeY43zim0D6qRHpvHmT\n3lYS\r\n=D5Rr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4f060adc5.0","@material/base":"12.0.0-canary.4f060adc5.0","@material/shape":"12.0.0-canary.4f060adc5.0","@material/theme":"12.0.0-canary.4f060adc5.0","@material/animation":"12.0.0-canary.4f060adc5.0","@material/elevation":"12.0.0-canary.4f060adc5.0","@material/feature-targeting":"12.0.0-canary.4f060adc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.4f060adc5.0_1626376966837_0.5189888090289752","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/menu-surface","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.bd25779b2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e53ea1585d4d1fe035969fce2d37aed82e51ed6f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.bd25779b2.0.tgz","fileCount":38,"integrity":"sha512-ncp6gsRiaMPwekoYTwgncX49jUISjbf/zntY0Lghtrz1qZvJYd4iP2uOw+Suk/bg68GhLaYzubR/NNyddl6Ehg==","signatures":[{"sig":"MEUCIQDfP35EnKndNWgPWd9jjczyjSjlQeHNlLDTwz9uBApWCgIgZfPKSxHpkD2hPvr/d7zK0xfymiF9TAwOWHwukVrss/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":373800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J3eCRA9TVsSAnZWagAA7/UQAIUlk80CZNuGshM2NiKh\neFYlrJ3ZURwaek3WJsQK/NqLbsrCBq7b68qH8EdTRTmIHRmofI1C0dMiRge+\nt1IuG9R9x3SgvknMRIPRoLebh5zT8S8+IzeNDMlBuBaeso9hDvWa76iJn56P\nmsevHHI3tMOOi5MW1mPO2UMb7slCeFdpJQcvB5o6tmkcm7zxaRqKg1u8VLfy\nklOCzCokfJlAQk0YD6zkekoJPifvXwvEaAuMsSU1kqr56VSB4UnNMC1GZT7d\nc1CdZVd6agwTamL/aXf5R061LDdb7cgS3tI6yLoABO4+9HHALTOtJgBjDYnb\npz9qRd1MVmFbQhuQ77/c7KPIimrP2ZkWZdDcfJOiLQOK/sSR4aOdJYMBmIAt\nP4/iIslb4Do8zBIc1URoYYMCq4YAPHOXMVb1S1EdcWNNA9JuNY0ejM7uFp11\nqdR6DEomo/YIhFPe5kYSIhg+5UwGSisNEealSV5twTWmWyeQPbPs/3DMoXEQ\nLjNNZfyfpEcf3y1RjxsGdOjXWrY0eSfXvcIByqfbc70LbupTn6aAojIzrs+u\n/ieJnIZoBXp/Xo9kCWfBYTq8U1Zm6+JbFcybO/mV9mXD6yHig3FJjRhUT6sx\nhaR0/AvAxe7oCzRyDMdngTkAcg+GNP9JCIftvSPz5HbCsOpo9awuA5HBfsAn\nUQB5\r\n=645o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.bd25779b2.0","@material/base":"12.0.0-canary.bd25779b2.0","@material/shape":"12.0.0-canary.bd25779b2.0","@material/theme":"12.0.0-canary.bd25779b2.0","@material/animation":"12.0.0-canary.bd25779b2.0","@material/elevation":"12.0.0-canary.bd25779b2.0","@material/feature-targeting":"12.0.0-canary.bd25779b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.bd25779b2.0_1626381790712_0.11856990465177963","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/menu-surface","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.9f68a932e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5d04ed40f7dffb2b2c707503301519c089bb117","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.9f68a932e.0.tgz","fileCount":38,"integrity":"sha512-GvjKS71/l29wzLkMJUgqaDA2nqKj+I8LDITu/oa3/sxJyvu4FzQd4vzz4ga3418mltCmz9X7G/Zww8szf49G9Q==","signatures":[{"sig":"MEUCIQDtUccwbUruH1llamPeO/9PuS0d051OSK0q7/tC2IffYgIgUW4nnmFVIdnBCDFwXyz8Q8+LHdOTkw3E9n+xcAu4q9g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LG7CRA9TVsSAnZWagAAnk8QAKP2vWA/eh1mLHsm+1/V\n47l+blyBDHp31AcM/FN8dUd/TixjSYZHbaXcoNreoi1XOGiiMthoY5v2AawX\nYwk9VhMvPcCkK9JM7TwCa7thsNjEheuKy43DSa32e5Ba70PXOYpkkCv+C2M0\nVDo8/Rfm8rCadgOm4OmfF935zHwEoazXFkNKqF1CJ3h47fbgdlh6ULHb6Ghd\n2ehV9J9shbdHbozOyxWTWj3ujWyjQdBWIhqOYx6VeCYxQyZ4n+2DmxHnzW0y\n0HbHv122tQ3m7zRVPqXke5Gsc1lPGCX4hTEQatwCXDgEY+rVjDPvOlo0CNEw\nGUeZCU+iAqiyWW6qMW5ExqwlzjyGaJu5MoZISqcFY21ys5v5tWwsEDeHdeh9\nH7FIMo5YsoqPVrmi3+APIZOblCBaDhItEuX1yO83LzE/TXLj+wyAADyU7+km\nyg2ctF1tvnpMhhljQ2WRYhLyR9q1XeLZ0HnjEExjPG49qaBY6m0ASJ41qCvZ\nktOh1op1XAMzZmqxfohaJsWoahBRjzWSfeKd3tvH1gggeW8G5QsZlHw0uacJ\nNqDXXUJeCG+4bz09B4AyroSWKnyVTa80QmBqsKUW8GXq+Hzov4dDiq84EYR3\nUZXHyOF0xEFKBLFYDvgLhQZPO2ptGtYolg4xovsmLrridsYIQgSYjkZic/en\nnQjz\r\n=K33L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.9f68a932e.0","@material/base":"12.0.0-canary.9f68a932e.0","@material/shape":"12.0.0-canary.9f68a932e.0","@material/theme":"12.0.0-canary.9f68a932e.0","@material/animation":"12.0.0-canary.9f68a932e.0","@material/elevation":"12.0.0-canary.9f68a932e.0","@material/feature-targeting":"12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.9f68a932e.0_1626386875169_0.7204972982423685","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/menu-surface","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.4eecdeaf0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c97fd54ed51ac3b4dd2f10152a5eefc021714320","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":38,"integrity":"sha512-XEIQXwh2vteIsN7+zhNkzO058IWQNvkyG0DpZ12qAkEwzSTel/oZVYYr8TZmnvoF6Jj1Z6IfpKPAIXgwYpLPhA==","signatures":[{"sig":"MEUCIQDr7I5DpRXFB3QSavmdByc2Pb3doH0ZEGTlaAL99jfT0AIgaqLjI8S2dZzLLAFNhN7gpNKpRw4UVufBUv22kgxu/+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z6qCRA9TVsSAnZWagAAIwEP/0G6O/3wDPpy2v6pwQ/H\ne1UZtxOlR/jXRlKpA9qI0zSI45W1T6UscmOuqcERGceqO9j8JUI42E/9DQEx\nPgeyO05bOT3yjxBpQpIflXDZMdri7NzuEOKsbBHowkjUxCqQWyowz9ydkeEl\nhnkjofKsMbFni+mvwTAcwHmNH6wVlbAjNlINh/mLM+tcJ6K2dbl+vbkYHeHz\nu9T/F7hsXj3bXXtr72pm83b5qseG1aLuBOswP/D+AlfrDaBbtF51zVAAvOE2\n+OVDQoGJr5SQvNzn1LI4F9BmxSuWu28Jq2SxWIPuagl5mCzQ5dmRu4dBlvBC\nEITqGaytdv7Z+dW3EKKjbo5efuoFeDOQ3/CScsgnOsp0hOXDtX503TFS/sDW\nVOY0mH8/QQ7QY36LumqVC4gyqEu2HvX0CArRp+ys+rA+MJTg3XPqDjJJl8nv\nBrrqEojg+HGwu+QFjRbndG6K8TT24ayixc7yVmpV8DzqFcu0FbIds6BiVc04\nXNKGMd9iALtlApObm0pgIyVQRY303YR95J2joGy098apVPN4V1cnI0NxYK45\nKZlRd11NetA1WJLqnL3GH1s3q9UEVSrNzPZPVY5yru6ufMZJLzQpwXbEDFzk\ntUHvliExUuWgmSmECbABV61x9nwxX1bvUSo9LQNJwOtZgkwJgBljH876LWNg\ng6jI\r\n=sYoW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4eecdeaf0.0","@material/base":"12.0.0-canary.4eecdeaf0.0","@material/shape":"12.0.0-canary.4eecdeaf0.0","@material/theme":"12.0.0-canary.4eecdeaf0.0","@material/animation":"12.0.0-canary.4eecdeaf0.0","@material/elevation":"12.0.0-canary.4eecdeaf0.0","@material/feature-targeting":"12.0.0-canary.4eecdeaf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.4eecdeaf0.0_1626447530385_0.2059896653538873","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/menu-surface","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.7239684d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b22a85d86fb6780f5f6fb424a049859012c0c1f5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.7239684d4.0.tgz","fileCount":38,"integrity":"sha512-8d1eCSbkDMZ/TwTrAh/TpL5HjhCTcg0DISBCBjhCo6NiL0asXnIgU09OOW1PlPKP58QpOr8PVNnAOdRKBDEoxg==","signatures":[{"sig":"MEQCIGRpV1wyq/Dq4vBVbCM0xghjFhDGbTi/LWOQZJC3ePu1AiAzzZlc3M22OOpDhR8ANKp0M++ZsbgkOsZArGyqM8MUMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8az+CRA9TVsSAnZWagAALzIP/3Jte/Glf5XKWOq5Eqy8\nERV0MbWXKMdfIi4ZFqqi/CwKnrrx3D5UVNWEYOW3eLaOPVmQX0gv09kDZ6xO\n/4jmmuDIEqvKiC4R0ujAIiUdzWtuQjelBPlH4A/01zBoNCgfzh+4cLBe2z35\ndJ8EHGjZcfq0LwiuvaXvnOlp30GRtqR/9hC94MGK2dULOpfWrhUw3b2jfIbE\nGmMEMSZhLigR9IDVDZ4c+oHv4k7BjwKqRHJJyt9XiYA8Me8U4tsblqef84th\nMFHzATSs3QjYrX83xcREV+s7eqnB5UxHMxH7GV9UsTYqwAIlZCQOHNEdC9XU\nI0zJHvW9f8NwJkP8NmEK6jf9mcJI6SNSlsdTOOIeDLBcaOUtTZr+g0/0wioM\nPjHk1rRoQqHxSOqCVRKnUS4CKw4Euaolv9BgVmuVKTIpHlLc3Er15SUmhrmC\nUE2m6u9rp42XFIq7yw240zm+/ABpHm2qjB5J03ROmQ5UBWywwytP2Nnv9yK4\nrVJq5+nDA4KlfCrV2VtzIUcVNAL8Lm8akVkqmSLHwWzMJms+m/b6izsjLZNz\nzmRd/koFLLeq+fXOLAOIMpvqwhYIhONh4W1NFG2z8qx9C336UnLP2+dh7Oe3\nmNXqctHxMQx9zg9z7eI5u9g4pA/aD2bqpHHa8qudDPEfVXPqTWfpcfpC2D6o\n1C0o\r\n=LimP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.7239684d4.0","@material/base":"12.0.0-canary.7239684d4.0","@material/shape":"12.0.0-canary.7239684d4.0","@material/theme":"12.0.0-canary.7239684d4.0","@material/animation":"12.0.0-canary.7239684d4.0","@material/elevation":"12.0.0-canary.7239684d4.0","@material/feature-targeting":"12.0.0-canary.7239684d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.7239684d4.0_1626451198254_0.09930257864809966","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/menu-surface","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.d5f1f7c72.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f851d642592224cb719521c2e205c081e0e6938","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":38,"integrity":"sha512-Isrgs+UbKOpVRtF/9XEyk1d/U1H6Wv0SVpujDiXgNWRy5n9Ky6h+Psjhuk5VmhFAhJk5BGCbFXOKbroAy8QftA==","signatures":[{"sig":"MEYCIQCiG6U/3c/67bcv7UsxXk7xImS5xIdie/3hBdh+W1pzkgIhAJNnBWUpeQPFokCkAzasZO5sOWrK4feT9KREJ/0O0XHN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bB3CRA9TVsSAnZWagAA9EAQAIHEWaWSbpmeFDLDxjdw\n9A5W2xTByIQMm8qMOSQmP8zHrW61PGJfZxybBXTVP78nZcf5BE6RjFAPRFzH\nhOxXuAPa2RHZ8NeKmsAx6uAhZmAKWIfZawZapkszIbEywQ9Rpyae9n8w9sUc\npcaY/AzotpiEK3Ys2tP/Df5Z7VNgprQU/vvk5TwLE4sTBJv4+C8cYeboIiuh\nebqyTuJ+5SSh8TaW5wwYIZeKJWwsFVaJPoerX91eGltAGzV8JEldCp+AXnZQ\n+3FNZQsp2OHIeXKgrfNDXmRYKuvNqmcumFge8djZK36WlCUd/JkP1kSzo1gC\nPaR02bMUYdip6ERm9dG4PZS5RfI1XkmQRfjWGiCv+66sQF/cCVG/Be0wU0Tj\nT7+X/QbdMuQjjzaSucVfxKsHJFAYaVmRBrozEISasRaWF7h9XtNP5O5XLCWt\nN9+0eUC+xKahL+7rA7myDwil68IXP5c4672O2WwMbe1RyYNCum3QlHDGLRBL\njRN2Bco1JzqTKd7DFyIiuvfo+07voDX7Vk8JzKuQTu2D0+uI8wWiNcuvle9z\nOubdLfYhvqdbaoeXrrcVFkfKep1sqOv9Llr8Vem9DM18q4B25GQLOX79rumM\njAmCAUk+Bz5gr2EU1YA9Vg2gz1hP+fTngIKq1owIQb+PpSJI+f9nVR+RoVH1\nWMej\r\n=ryI2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d5f1f7c72.0","@material/base":"12.0.0-canary.d5f1f7c72.0","@material/shape":"12.0.0-canary.d5f1f7c72.0","@material/theme":"12.0.0-canary.d5f1f7c72.0","@material/animation":"12.0.0-canary.d5f1f7c72.0","@material/elevation":"12.0.0-canary.d5f1f7c72.0","@material/feature-targeting":"12.0.0-canary.d5f1f7c72.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.d5f1f7c72.0_1626452087263_0.8697323088217002","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/menu-surface","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.4d95812f9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab69e49482229cd433e4d5d224095a15ddd98ba5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.4d95812f9.0.tgz","fileCount":38,"integrity":"sha512-0DIEwIRo1ft7SGxznQNG/GKNntSmCW+57Qj9hoWAE8Ppn6bP95NiQPMoRCszjaPGqZtU7AzLSkJmXpO95GTsgQ==","signatures":[{"sig":"MEYCIQD3ThB8kSPFTO5kcQfIG6G6eyg79IPd7HHLsrkK9fsKIAIhAOfXLpUg21+VOnwe8EFi4H9lxb5ZnS3sWhsTZgz4Bcef","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eF8CRA9TVsSAnZWagAAMfkP/1h2qbfE90ekCC1Ju31q\n9Qw52Ii2ImvQdJynORsW1fvQoGzSHRDBL2L4Quj7YaCTBosYpNYG4MmkFbZW\nymHEuHpFOWXXtC8bfTc2KAJDkEXJXlwRueq73sclerq0XKE7XhLoK7dMikKF\nz4Cgbnaiz3I7lDT1o0u4wJM2/BHPtmu6Qxe3Y6dJpNcvNym3Z0bTS8x8vmM3\nkbz1Fz6I4O/K1Dn1BJm7y6+7TsOQhDajxTxyNywG81pJp61U0Ccy8VimbsCL\nzBebUCyii4cM3sdrVwW4mbLoHuNjxF80FD731rYhyeGTggKiUmtPqk/zwyFi\nIP5DY34OJtGUCpQzXPqC6i3O64OJRVOKs0kg34SLG3utN1dYK5VB2Chn4klj\nCI8BZjbt/JxBa7jPxXtrk/A0sLEqmiRSdTyQkIJQRD83Ls6VeMf0D0gsXDpZ\nkJcC8xktwWMCfYp4z8zAAk+SJjKG4mtmpYUeH3LffZ+BGaxWUVONc7FUdWJD\nip/LPgPRVm/lKaAnT3TMwNPWPBauA3xFwsjT+Du/Oaro5FRMtRtQJYLxr6Pq\nbvOJTq4i88ThBtpK0cAB9vwEGGEGUs+1B2MmUTc4+eDlAH8Emc9jLHnY1sVL\nMyKwF4aI7rrkdONhh9QrIibhOh2BaCu4GvcCsSIlyWZariFEV2UvF3Qr/+qX\nDlkh\r\n=Af1A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4d95812f9.0","@material/base":"12.0.0-canary.4d95812f9.0","@material/shape":"12.0.0-canary.4d95812f9.0","@material/theme":"12.0.0-canary.4d95812f9.0","@material/animation":"12.0.0-canary.4d95812f9.0","@material/elevation":"12.0.0-canary.4d95812f9.0","@material/feature-targeting":"12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.4d95812f9.0_1626464636689_0.4593164195822468","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/menu-surface","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.38d1846cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fa02ceef25390d0443d7564262714e24ccb16c5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.38d1846cc.0.tgz","fileCount":38,"integrity":"sha512-2pGBqO23+nWi3634iCh7sYaR2OoCCp6BIc7197yjytoSedHJgVwHm4Bwt8ojzknFLKWLPBFXv2pq3F/ID8NKJQ==","signatures":[{"sig":"MEQCICGOUGZxJ7oZzwtvcBpdHpxssYZuohn2HdwLQaOEwbh4AiBpbk5LvA8hvbXl4tY3aRRQZ2G0w6sBzLmD6j7zhGMMYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9cesCRA9TVsSAnZWagAAO0kQAI7IchZDvdhYboa/p+qg\n9jOKYAOR1y7kICBDFZJ3M+A2Mg6nnpb+O2SXodOBbqbZ+POCx6RDhRy2aA2Z\ndJ6pkFvjCIlzGi/gQ4pvx6bBYI1aPs1Tcg3/i4wKDIBBE0zcwBb4WkTdI//M\nmvlV3DY0exp1qQXSYCIos7DLrVrekPQLjtrrBy536PjAZOf3JqeFcz3g3nJu\nuI7WNHOT0Iqm4X9BqeOZwop8pPFNJft+guVHt3D6Ko9TujAetkZ7qPd+lYOP\naNIlVhfFeXcFoPVAYb4mSnUSnOttZctvESgjZgYRAC+lPGCVuhSWM5jDNuP7\njdAyi8s+B8t93wRBkWcX2dUA8paVOa+LFGUYISyNz2vNLk5C2gPoJ2p0AYj3\nZCAbGXQQP/up1Nw2D1O+hD1NfJjh0zThDKJkIX9uHYk/K+slZXb4dT9rqf3H\ngi3TotmSEBMvUVmjrHFvenUCv51HMkEhvy675xqHVUn83LKMVQX8KuqleFqV\nRK94dMeJnLUswGzvhlAbJdzFsv7/lkDjnnFdUhQ/9GjBwlBkm0XC/w/uKjys\nn7CB+VFDINwWGg8nLj2th9b18W2EzU5H7csPwTcdJcWDl0QW48pLKS0W7Q2C\n6OTLGH4WoNjFqMPllJ66RJCmR0jEkoTVsYQFkluNBBtjv6lLzVZsNekPZeNF\n1STw\r\n=Iw4C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.38d1846cc.0","@material/base":"12.0.0-canary.38d1846cc.0","@material/shape":"12.0.0-canary.38d1846cc.0","@material/theme":"12.0.0-canary.38d1846cc.0","@material/animation":"12.0.0-canary.38d1846cc.0","@material/elevation":"12.0.0-canary.38d1846cc.0","@material/feature-targeting":"12.0.0-canary.38d1846cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.38d1846cc.0_1626720172314_0.10035089714789591","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/menu-surface","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.3f691eccf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16f5d4295a53f6919854c821c78670f65d696244","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.3f691eccf.0.tgz","fileCount":38,"integrity":"sha512-rJpL4hsD2Ofx6iGfLJKQ1pvi24aJvtKquaXBflOQBTmkeOKSFdyG0IJXHL3DvjvFJMySBqZQ/X0mQ6R7eJv3Cw==","signatures":[{"sig":"MEYCIQD4kd/u6K1zAEOQz7lGWDWdA5PkXiXo9IKgWBJhXE5vhgIhAOx/uXy2PPQ0Rb8ogPY2IcpK44d6HWZQED2t23SwfWFG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vVSCRA9TVsSAnZWagAAnjYP/jpFaRE0bPdyijcR0DbH\njZHPxrDzX7QJN/W+7icIApL0sDNCkUKNrz1V+NGyXpKvGn4W4l894qpr/kVQ\n+1dR2YTn8OZb+7H+587tOXUSAFwdWeIKzibMh4OHoXK0vBuZLHkOmYTMvWAF\nZYaYeR6ep8cK/HzeD+bztikl137DNOYf0rDdBgQP836eoDMsnQwqTsJ7nkGk\nTPJjytG+0g9OtTCwlxBuInC04OAr5pcNe/4DOZFQlyOvFJkvOyFeGxA7+26N\ngreUIODLVBE5GzAFuk6Krc/9ypWdS9umePk4hNZZcDnEmdEtApiovmi4XX8O\nFv+YqTW9agjY3YboHxEQGLo+0SNdpz+G4IfHJrDqM0ms3w97HKl4JPbeklsU\nIE9bGhCLwWp8OtUFZ85fJONeLHK5+Ovaaoc6c3vwKBuiMNiUdZafrERywtdb\nh+GM7FEY5kFNyAbZlN+TOJ78+FZCprGb8gEnoUbVIfseVy7QAXisQy/dt8dy\no+rW+f1MhfcTOozoGdXH0yM9KrjNF3x6+7+BXLSFPskiR5qkXhGZ2BGCZDXJ\nPUYk4LT4GmfHUs7oUUGI1CaPGxLdO1OnHz+OE7lXzNQSFCMZGSsaLgR/UGFk\n7ULr051xmR61sKrBrkFNF12vrBZ7qwB+BYxJ4dlGpfwoMHxghFmbPbwJ7Eth\n/DmV\r\n=ClL9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.3f691eccf.0","@material/base":"12.0.0-canary.3f691eccf.0","@material/shape":"12.0.0-canary.3f691eccf.0","@material/theme":"12.0.0-canary.3f691eccf.0","@material/animation":"12.0.0-canary.3f691eccf.0","@material/elevation":"12.0.0-canary.3f691eccf.0","@material/feature-targeting":"12.0.0-canary.3f691eccf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.3f691eccf.0_1626797393918_0.12876549884905675","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/menu-surface","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.ebb5c73bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5eff291f124f42e48161aa26d8285da165146eb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":38,"integrity":"sha512-XVFfeqCCZ/Vk8IGpl6kLjklTNeQubhobPrGoLMzUh3pZyDBdvjWE+hp+H6AwW3rLho0WBEsX8ZYv0qmij0mFZA==","signatures":[{"sig":"MEUCIGEWPR0E+91rnCvO+jHCkdZ6V06d++afPUt9QqanC9IYAiEAreZut44EXqxfq4FcBHMj37BAAwMKGK0JDDrrW0GDJqE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wCFCRA9TVsSAnZWagAABA8QAJ+5El1KLfuLr2cVaJqS\nk2rjr/dfmjzrgniaeKwnslV8prDHmwopDMDHlPGvoCUd7wkUN5FA5BYEfpCh\nreZth+OuHs4cEJGsVZIrExQ4g3p3WQvg2B2HXOZxsoYUP9oznQRLo6ZnKxoH\n+oGESA3Ih12VHMeDnCIEmd9gBv2CKhGNvfmmlPI2jFrYDjUz6LJ6ZUu8pshs\nvgFOESjf4HN1z2jqy9/uVak58jB0lEj9DdAhSzNHUWd0C2UD13mT30SWXdtx\nuyWpCcw/tlhrVYZysvlRJA53VRRnIHoyXeNweiIgakYvqw2BRY/Wa+yIB8gu\nH6FTxSXLLTWlarGm9GLC5y+Tk0ltnL9QESg+D52wlFFwq70+JsHwBfYBl24G\ngQb1bTOkY88/cCYE1kOOhYzSFqt6BSawFl7Cd0JbMLRu6YvBouXuklJeHiGa\nWwDg0J8B+LVfsKhruV4foXc6QRlw9wJVpBPjihQDQRyRwhMUezWxnIvQQ8kE\n0l0hFmBCHgiuJF2IoQbQO/FrQVsANZoTRGSX4qB0TZsd4XeZBcXzXOx978wt\nm5zqr8qp+MSgPp+CNV+9/RN+y9hs5OTQOcNlS6f+d+jEQiTveq514L9z9Ah8\nUMjBc40/vDhxE1tfxK8AEanZoxzK58RybjNmXAYyCmBiDJptJsui7X8Aq5EX\nNyG2\r\n=7hbS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ebb5c73bb.0","@material/base":"12.0.0-canary.ebb5c73bb.0","@material/shape":"12.0.0-canary.ebb5c73bb.0","@material/theme":"12.0.0-canary.ebb5c73bb.0","@material/animation":"12.0.0-canary.ebb5c73bb.0","@material/elevation":"12.0.0-canary.ebb5c73bb.0","@material/feature-targeting":"12.0.0-canary.ebb5c73bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.ebb5c73bb.0_1626800261332_0.5674320002229245","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/menu-surface","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-nightly.778a0e8a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f396291929cc809e2e82add8fa8a602d342a8578","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-nightly.778a0e8a.0.tgz","fileCount":38,"integrity":"sha512-8BrIuJYDrZ/4k8Me7Wrdkq+viwjwofcK7F+5EXq+r+LGN+CbwsIDulRgbjgJ+rrWyUmAzFWm3yHE5FDiPuSb0g==","signatures":[{"sig":"MEUCIQDWX7S7saGFqZxO3Gavc/8sjiJWdU7sc/FMKeflOEVuVwIgC+TuNCwKNW2YoGAWIpZk0y/0Re40X2FhwzMnJ8/Ny1E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zrOCRA9TVsSAnZWagAACGQP/2nCSiq8Ajz4Z4eAlAZ3\nnDSU12VElI3d46J7MoSy3ZoACH4em1PpLNuCOR8T5FrCLtCQv1OACzY9ilAK\njNCzZvrd6YmkA5vVx1bbTuSab+CO7LOvx3jpxUDwZgT2kKrZ4HnQMioalsxm\nNloMyUux4Qa643IiR+ihB1mcIyYVIh2R4v0qLZFvgyYg5kxpsU1QC4fZmBqP\nPK6K8nZPfkvaFvjDJoAxhDUUHhUqdnLKid7BImGEXnzhTwEp7kc49DOBbx5O\nuECLQLW+SQDhIqZSktvDJNOPNIcMgK3agVnpYhADIaXKoKxJ0qGzg6vdG4UK\nbDrSUjN8GNFnkTGPzWATZ/mRHzXvtWogb4wylievfpJF5eV1JvUGEJ565NQi\nRFj4ODf8579yOHLeNFHMXwW0c5FlzeBX6cA1HfU3+I9Hmq2E+uzj/vmN9ZhK\nd/PJHEFVNJuObeVYrND+XkGaggwTWxbgooXSUNfLvQl+hHZTPyny+LpcRkId\nn16JrrNqFxGTRhnwIgS0X7SE9QpoVPvAVZx6lT8p3xKN+j5TJLiPZsjEqRiR\nrF+8myJavgOUUMkZdgjxCKAi+Waz2oYdg30MnSQ7qb0GmAEoqj8DfjW33Vhp\nhZoVupQ70uYR2m4z33I/Duc4oe2AvdPGep7bt+qnzQqDukxM5wSQOasdD/Qz\n7aWs\r\n=Wiie\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-nightly.778a0e8a.0","@material/base":"12.0.0-nightly.778a0e8a.0","@material/shape":"12.0.0-nightly.778a0e8a.0","@material/theme":"12.0.0-nightly.778a0e8a.0","@material/animation":"12.0.0-nightly.778a0e8a.0","@material/elevation":"12.0.0-nightly.778a0e8a.0","@material/feature-targeting":"12.0.0-nightly.778a0e8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-nightly.778a0e8a.0_1626815182074_0.6515350295033651","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/menu-surface","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.791311bba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a85177be38fb7f79b8aecbc0909602454178b0eb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.791311bba.0.tgz","fileCount":38,"integrity":"sha512-98JztFlgjf93UQBrRK6xelMvO2QHeHv5weAuAQ3mhXS8MD3GOujA+xARJo1XQEwzYxuOPMsKFew/dmbleXHsig==","signatures":[{"sig":"MEUCIQDs1nr/eZ7lh3kqTKWbkIfZcWrgNkB+zvJKxF3hSiKu8AIgMtExwpH1jhghi51K3XzFcXKev3G6sQXBq3AhBnf0Lt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90lYCRA9TVsSAnZWagAAOm0P/3Ci66UBLBWE8P20IFMl\nVoHW3Tic/wzwJjs2JNxqZ0GSUYmYREpC/7DBXtRvdjnnOsZekdpzl4h1taCo\nIgiPuvZBeRiwh1Y3h6veheTLYS25aAvdEKPCENlpEOqQQv3nUeIPAEl8YBOC\njzx1iOUQ1xQhFTeH0bUw8fmy06fK3oAek0ZLNwM+LkDiHkVsKg/mUlOUociL\nB088j3MwQXudD5Ns3cbQwvv0rShHICa/Vjex3Xho8dmOOQDS5Vev66xpY7PC\n3RLTwRmKgbDbgaAbeBI0rxAEZ6H0+mFcc0BotbGA+P83vmYhGf6F0UGEy1iy\n1peBxXxziEIIGroYL0fNaJUfANhxASXwhZGDWAALCRmi2W5vkkbMYsDoOeoo\nQXvCSA1AzqymC4BaBFgwraWplQ+vON9YKC5baV4Q0yhoZo4tTlPm/B9bWChP\nr/owuiyv4MD021HEDGskZFQ+42SVDuyPZJqJV7rFjRXJ6lw/Tab19pLN/9QB\nxHyzrx58OLOxj07yn2asJggNmKh7jR0hJY3ozGveS7ohORdQSM7lwnpx0UXX\nsrk7BDL01T4H2wd1/keiX2MqyRc84yRAnJVlla2pPWsOcf4f3/a9g1ky9QTA\nki4fiZRkVyHMUT6Kt/9qpr2zX+ASBzOt2M1uBOvcURPGL94gwMS6s5kvTghF\nUhrB\r\n=IPfC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.791311bba.0","@material/base":"12.0.0-canary.791311bba.0","@material/shape":"12.0.0-canary.791311bba.0","@material/theme":"12.0.0-canary.791311bba.0","@material/animation":"12.0.0-canary.791311bba.0","@material/elevation":"12.0.0-canary.791311bba.0","@material/feature-targeting":"12.0.0-canary.791311bba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.791311bba.0_1626818904703_0.7824647286925919","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/menu-surface","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.85e9a6ac3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4e941b1832d632e68d52f2d99d449332d88aa65","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":38,"integrity":"sha512-0a+qOLO2sSMlkLSzhNnMTp7/MmbEgVUQg/XX5qGeM7izKPFBAztqU1COAnGevNOP6QlYW0HFumBR1xaxUKY34g==","signatures":[{"sig":"MEUCIQCBpMdbMzvULoSi0g3LFKvIqY1iMqkyQ1AepLg9PLBRngIgf3Qd1OOkhQfna0qxdy3bY4d+ke7VPgYVRzspI2TqCaY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D8SCRA9TVsSAnZWagAAVrMQAJ80iVHCiz5rgLfw5hgs\njHmpjR9L4lkYwvb+AINdmAqnwJMa2nP8sReAGMbRMMX2gWinNq7JYW1acXuS\nG75BhTchC6Eij2uO2iU5b8F+BdTqnk74jEBX9CYtiA2P+K9+cVgZN1CKJxDr\nV7p3EpeqDOTxOYBeQ9H40E8hMcB/+XDIEjEGX+tHKNUZsw1wE8+qPCOze6LY\nRNoC+RvggrNlKxpZC6rjZ4/aZhsQtXFPandICvHh+aG5i+rYJx9wRNwDSIeI\nu7ZApQBViL3siohO5MU4a09l3DZrncU6z39+g7xsG9p61009/HVVH6TeYal1\nuHt9MowrNFWku9Zf7zlikCLZV2pOPl2JYfhnZfK+LkmNyHRIvT7NEOV0S65B\nBk4/DcKoXCM7WQmvcFy2M0RjlTj+j3Y4jSyWUlJEjmcYbb/98aAbX4acD9sF\nO53X7RwxgHpZXultYVCnnMMddt1DHZznuljfGV5nzXzoBxXuO7Ub0Wc7QUtV\nNpJj/s2Zj78VFjyNPR1Lgok7Feyr3pysE0Ubd9riHeDCH/HHTH9989uacYwe\nfaxQW23v+WC7bOfdtL9Ed/T8dlJ7slUSI+byct+ni7LXKs7QwzqpzX1TXFCy\nLrr5u6DOxCTryK4sp5skO3OIwqiRogCpQt4Qx9bKDDp6Q172QQLFIluIHCGF\ncdUy\r\n=sUuh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.85e9a6ac3.0","@material/base":"12.0.0-canary.85e9a6ac3.0","@material/shape":"12.0.0-canary.85e9a6ac3.0","@material/theme":"12.0.0-canary.85e9a6ac3.0","@material/animation":"12.0.0-canary.85e9a6ac3.0","@material/elevation":"12.0.0-canary.85e9a6ac3.0","@material/feature-targeting":"12.0.0-canary.85e9a6ac3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.85e9a6ac3.0_1626881810173_0.8430464594412195","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/menu-surface","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.6b0442278.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cee0c135bf053d383e83292e685b8c891b1d4fec","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.6b0442278.0.tgz","fileCount":38,"integrity":"sha512-CGgxBa024zTmB9m6/V6X/hgLItjnbveicmnP+L8osQhtH3MigG4q0lXBYMYyPfmd0bP/qIYaO7vxxSd2Fu8zag==","signatures":[{"sig":"MEYCIQDnYnp4OLIbL21MfHJWDXSWiNm/lVX9kFlT4M1Uym0uCAIhAIoNGgPMAoqQJFLPn0Mn/bSim00rz4kzSucDjejck9y0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+GyGCRA9TVsSAnZWagAAz0AP/RiFl9IidzlDrY93ga4l\n+amMUJpgKCNOa2g1HUiBlu3GV6x4a5pSkUZalO+83K93chvJRnMwxBo8tbER\nz/mzO/tmD847iy9yUFLbjktnxZ48H4uvE9WzqAAScS70qKHUV5c3K75wC/fm\ntJev9wSCuByKqQdspGIhV2Tuq53sOfYL6wxnd6wNhMtasHyDcEJ5PGDTZ5uB\ncHr8gQFkQXksSS5tJR3fCOvh+2IDQdwG71+D/y37xse0GoVciah0OB+JMjPq\nU5Wz/d0xJj48iRPniJ5qTqUWnpzBF5ZwsomSIh64QC23+J3nFTE6Zp15oJgk\nc4Ix/wQtO8H0c+vuEVQ0FFOvnqZmEVYVW+sh3du732e73VgM3SEyeFUKa0L1\ngpGNfnpk3mO/EwZ3pIkgrzhT0CMmNJtQALkHqK7UB+zK05cye/YoPhY2GYeP\nx9Qnt36m6Om2XF2uTv4emdtsJUigD6gNvLzJfnAtr4CfHsk4rniyQyY6i4so\nHZWLkDQxFarTcFxfgq8YQaHx+cchwnVK3fgxX4PohGN0++dOhIWbTB4YKbzM\n804VKu8vdXQb9FA/z/Q8sFjBTm2Zoa/BZx6+hlDa5TZonmdl3+zFGaN1ofr3\n8HAEx0aNVLcupw5tYyjbiK3dirSvNT7ULqMQGaSKE/qUab/EJVf8MYhsDPh4\n+31n\r\n=4/FI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.6b0442278.0","@material/base":"12.0.0-canary.6b0442278.0","@material/shape":"12.0.0-canary.6b0442278.0","@material/theme":"12.0.0-canary.6b0442278.0","@material/animation":"12.0.0-canary.6b0442278.0","@material/elevation":"12.0.0-canary.6b0442278.0","@material/feature-targeting":"12.0.0-canary.6b0442278.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.6b0442278.0_1626893446009_0.7472162111589651","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/menu-surface","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.5f00e454a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd73690e9ec0ccd4d100c9d853fc08eac64b7407","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.5f00e454a.0.tgz","fileCount":38,"integrity":"sha512-/rpTlogZG7Nq5zi/qFehtKR9L3Wq1+gUIvAAy1fe2NMP7wYXpmxaaGKPJBaHior33+zycXLPC9KFLD7DbkhpzQ==","signatures":[{"sig":"MEUCIQCR1EZS4XQO+opBTFGacQvtpkdKEvCKB94ehA7uC8ApwQIgVSGek9Zc1pWs0DdO+yQwERy6UK974kXyjZcfIv3KaPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aXDCRA9TVsSAnZWagAAyogP/R7R0xy4F3+ZUrIsWN7V\n9o6CYHO62StIk20KrH5im6v7QHo2z76IKxFPzf5oQVcasn4cZJmYDkndR/n6\n5et6KxfU9kq5MOzdFUM6z8iovaBoxMtaF4RyH5CBNQAoNrF9aLXu7uM0z7Vh\nmi+nz7NKUOqrWpqWIMkvOYoShGQ2PuVGoXxJAvsCeGthKG29bCwT/fKkHwfV\n8ELk+tqqPsmwYdZpL6Au8O3jmchjaqcKLGBobmn4vgDrs6As8bRV9VlucWAz\n47/3Wjcme1c7bL3/HiSUtOODSPYgUXF9VDfi5eWtuBjzlix8gJqO/wD6GhqI\nxV36O/hmBk9yLfkJEot1Cl15MrTdpn4JQyC2FK+4Io+9S40POpuWl9MrSJqy\nwVZr2fH++wtaSJtO8Wq/vdCXdjESmsAzXByJc35EnphonGDwVksO6dK3Ip8D\n6ypvM0b8TVI+63Z411WfKi3SdGuOU5aSLmyjw4yxfQLGJfkkjOw1AxoJ/ReP\nKwSpNp1aQdyJL4VEh4CEcxIONZuzXoL6Epc0WJ1E3IPny3Bb/2GnrDkUu4Yh\n+kqsooWqJL0qrb2cm/ZsyqLp6agXN/HGFhz4ic8zhWFZJYa/SRnxEfj71BaP\nbSAJi41pNTS1+TaqZ4ZLQu9ngObceTx/iZ1z8Z6/Tz/X8Pb+RU64NgIPOIoC\nOWr1\r\n=KzE2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5f00e454a.0","@material/base":"12.0.0-canary.5f00e454a.0","@material/shape":"12.0.0-canary.5f00e454a.0","@material/theme":"12.0.0-canary.5f00e454a.0","@material/animation":"12.0.0-canary.5f00e454a.0","@material/elevation":"12.0.0-canary.5f00e454a.0","@material/feature-targeting":"12.0.0-canary.5f00e454a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.5f00e454a.0_1626973635299_0.833099876039878","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/menu-surface","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.90e08fc6b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e136f8ee9c0bdb1693b0621b5e596b217515a716","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.90e08fc6b.0.tgz","fileCount":38,"integrity":"sha512-sv/cEIN82o+vXqxf+fLq3AOiLBrY4kJjlcL//adgQEEDFgQCaulS+WeLgUcWhDYoH84SzZn4/qnoGNYcHr+1Uw==","signatures":[{"sig":"MEYCIQD/waDfBrM8HfPB2LO0i4NAEFOSKTRlV0KmoW+69Qaa2AIhALI04eqxXH+niS7rX/f6NP9XxkqQHACeGtFT9pmJvPUh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gGYCRA9TVsSAnZWagAAx5sQAJgEn4cNVeHQdb17tdGN\n7ihMRHPQc94WH3cSuNOd1uiAJEKgXDCZtWajrgpq3YEXVBVVW1f510kIBOJ5\nLul4iPFT0egWPw5zU6P3Fkh2+wpOCBD/3GuUX+g3W17mZ4q1gM10QlHAi8C2\n/JR7Z/8v/GI25qFOi9NFUJCghD/539TopV0P1bIZv6Rih7AwftCI/r3wYDoQ\nFtaXqGiOS3VLhpD1m4bCynqcAfO0uPthwunmvYL5bJo9h0PMSiYb20YHaSps\n++oksya1ZhcoDuxN1NX7VFuDdc/ac+Nu1/7O9KOaptRldE7b3miirrk9gDMu\n4nQJq2wJsWjDemRA0KX2Aw2dF/I0FLA/Tip+agfS0ARSu9o9VSHAiU9JQl6k\nRULeqRt1NOhVPL7qfwu++S/3ZXIZQsMhec9GUdO+J/iDlvjG++M047VkITGE\nYEkdIPpesnn1MwmKuEL3A2fP5DnVz0CkTfW/ncWb3e7MPKxipZSBvAbXOHal\n7Bz5y3eau19/g+DcOKHy3d/j5xxSzNJQLQ8AlU39SomAax9IxrJoulv9ZHVy\nI6yrggGk0KWOqUP/MYW5oTs+BE+0uK/n1Puoo8A2ZxZvCCpeyvns4/iDoGFU\ntWZSaexuKgzbPFfuRbHrRU+84HKd1hsSMgEs8VrQRr9iet94R6mww3Rsf/Y6\nUkeR\r\n=0Uoc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.90e08fc6b.0","@material/base":"12.0.0-canary.90e08fc6b.0","@material/shape":"12.0.0-canary.90e08fc6b.0","@material/theme":"12.0.0-canary.90e08fc6b.0","@material/animation":"12.0.0-canary.90e08fc6b.0","@material/elevation":"12.0.0-canary.90e08fc6b.0","@material/feature-targeting":"12.0.0-canary.90e08fc6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.90e08fc6b.0_1626997144122_0.4633138069896483","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/menu-surface","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.cf5b9eb86.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37e9af9d040dbbeb9e9406f08bc738ffe83e7cf8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":38,"integrity":"sha512-cCdik+FpXVAUVbi9BbeQ4aowagD3bgF3eieUI1Wq3IM2OOzVs5uvu6D9r8a4Z2L84/DOY9NJ7kCrt1rQk40O5A==","signatures":[{"sig":"MEUCIBsm5VeE46kaeMaDWUYK5zLhmm7hKPnOXfK8eo18/3X5AiEA1hrjePr7thmuz/9Z9epeV39/xqJ/WRTB3snHsm/vxBE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wauCRA9TVsSAnZWagAAk1UQAJyUmCSfTEq3nTDGjADB\nU00U2BOpCOXa15TYbrJRLno0ws9jabERb70Tk87XFWeq6bn8Jx2BB8hRMch6\nNYAriaj/pFWcxMKhoOE7P2zwwFHreMz97Qk332B/kLe/GXfmYD1Z4+MX4i/a\ns1CiRDsLivKZMLg7B0hoMsciNqco1luApRQCUNANWq59pjMkM/Z89NOmmPAB\nSCQzNoqzMpULKQbAvYR7SwcPpeTNM2duufFs1JcErvzwaPYqEf9G0sjcWSKf\nPR9dS8+gPfnrywml7wfgarbJ55gVQSSvvSjCvOTwbEsJ6AeoDohzg+2Z7/gs\nKuJOY8JG8kyemGxAApVnJiINAZgZR6+B+9gOx/MfZC+y/PhqwXi8iO3/U9b/\nugmHvP0i1C7EgojKF0uWFs3lHUvFKfcoTW8R3SlYfhQlfOEU26fACNvUYQ6h\ng0a6gjKIHVTwdbn27yy2mgmg4jEDPQ3RxvmZofJHD6N1tqvIk/4Z0HeEAPWJ\nGfswmZVKfb4nCRrZm+WZXjm+Dlo/8HjKk6zxYHujl8PbjHfBrZCUUDm9wRXI\nx9tk8EvVDJC8Sv7Chb0RcgavxGuZvzKJQt2b3HhNsfMiaT9wYRTcHo98/hVM\nO9stKs82XUvF6dqs90uFQWSCnGkCfUL4VDb0nCpXZIAyJTsTSz6yTAWsuzmM\nGQvG\r\n=coXg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.cf5b9eb86.0","@material/base":"12.0.0-canary.cf5b9eb86.0","@material/shape":"12.0.0-canary.cf5b9eb86.0","@material/theme":"12.0.0-canary.cf5b9eb86.0","@material/animation":"12.0.0-canary.cf5b9eb86.0","@material/elevation":"12.0.0-canary.cf5b9eb86.0","@material/feature-targeting":"12.0.0-canary.cf5b9eb86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.cf5b9eb86.0_1627063982072_0.9436554300535889","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/menu-surface","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.3f36ac75c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee625b8b685cf183409e88f0a419f06bf0a81952","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.3f36ac75c.0.tgz","fileCount":38,"integrity":"sha512-3Kl+n6ncORWUFOHQGSDl3qQAQP9ySMImpN1qCCMIBziLOk+UKpok6uk1wULDg66l5UKG93EeFD/69m3HjiIX7A==","signatures":[{"sig":"MEUCIH+L3IAaVFqmwvq+wtmHWNCxFg5ab+VfwcPco4NWIPD9AiEAq0lh4b3tRjmlZOtwcdy2xSfGQCzkQr5330xDQSQhBgg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wtfCRA9TVsSAnZWagAA17MP/2DiVCQ0+gvZt1WppteG\ncVqEfeHOnkYrOhPCmIXIuta57no+Keu+8xw614XyKlLp0nvtuKnbIovohlc/\nGlxaslwBfOEYfFJss1Lmfc31k0diMPRaOqPkeBLHg0vNn3pIgwTEA1+IGuO6\nTP6ufyBkOjChaULFtQZuek/gzkVyVvAz4hSYZeWkJKG8R7XscbQjVl7LTdyQ\nH+5nWOscDPNQjGwpFuw6EvrGyQxceWv8NFb5kkc5B3wwWVVAItrgoTtnw2em\nrzKPg84dh127yFDJcQ/SSUrsxJe4lYSzKFxk4iEQlH1rK6+DNTyEvqTKzhJ4\nLX+Lr63Ev3MOTvuVaMnKu9LPITQcmmqYFDb/DEkwGKttDcLvSgc5CT4jFwAT\nXQ9bIMx/Kw7YgzAC+1J91LqqyfD9dKdjA69XNOUU1deJAzCicGGq+xexfE6B\nh6mu8NaMSq7iaX2Z3ZHtJKNR1LZasQU2pFRQwqm0th5gjfqM6xNFPxv2nA9l\naWggOD2OCHNNJg/D0peBECF3iflOhZPWIHgLwNwyLPBfx9LbehN09Jbkcoc6\nO1UmdvhXg1S0okCpkv1Vv6RIcnYzCQzpAhFAsneojoCcz5OnC/T6bRthAWmV\nspDO1+woe4x177qgye4NOZxV7kJs9rcka1SQMn8+ff+Zw4FONZeo5YC9euhu\nE7LC\r\n=TqM/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.3f36ac75c.0","@material/base":"12.0.0-canary.3f36ac75c.0","@material/shape":"12.0.0-canary.3f36ac75c.0","@material/theme":"12.0.0-canary.3f36ac75c.0","@material/animation":"12.0.0-canary.3f36ac75c.0","@material/elevation":"12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.3f36ac75c.0_1627065183231_0.9776096622907438","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/menu-surface","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.ea1e1b850.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7700ef1fd23b4b16e2b0ef709fb4462854d3aa0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.ea1e1b850.0.tgz","fileCount":38,"integrity":"sha512-XVchXghs00XToldxWS8ytDS57ZfG/kG6sVvVwK2upZfCTxGUsjUaU1Kpt0i4F5olRPXvXLjSKmH1B+orzujRcA==","signatures":[{"sig":"MEUCIQCFlVjWBxPFXmw/94xLHQ0vzP4aUe3KmYS2QKxaRdquzAIgLKia03vZk+Z8DVtV7sfGDyvrP/ZnCFoaXSnyVKhn8o4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H6GCRA9TVsSAnZWagAAfX4P/2nDpbKNlxswMxzJomaW\nV8vTbLtk7+ra0xHen0H627JZJHK2Nl1fm66xY2hZbPQ5RBhaEfOugm+eeuyO\nn9eF7Ipx0ctTT04p7HYL62WlBMaXaboeOfVQYJZREdg89QowdLs1U6/6i1ii\nnt64K2rNDTv2MjnPEjU8kGMY4Bv9YWF3U2qetHpxX9yD6KNbFX4JzWi+OBzt\neMn+6QSZ+waZ5CCS+iDwgTqKtSVMQs20cTFRTOmqTh63qDgS4XECyAb+Vx0N\nrqzpekcT7IqP2g+b6LG/XQl5F/HId81D5M74pQx7k1xsjsZxqIhS9lyxI4q7\nYaN4eq3FCqv40Qw3XDC21ZOEJyc4z/16YbWdZBioVK8BSDlkG4wzsmIEVmsf\n62ehQz9TwarJaSsgvHIzDJcvs7ZzIeB3b0w1ltkWi5osEKMeftz3ce07t0HR\nnYe6BpV3l2aPHsR6bAmbEBrsQc8KUoOBm1y2P4EzLvdaXMjX+dIDiMt60YdY\nne3cE93RPkH+L4nlyc8/zAPh6I9WBBL8ewEBynUZeuK8hkVgFQ3vNchQVxxe\nZKZV5USTOCPzEJ/0TVVUSXb7vEmPZ9eMPAhlFtqeVBD9tZBCzf+UaJwD0Lw4\nvezWuZteD5NiLXjKMYDScwrjnaJRP5BhD8CM8D3iPWp5WE/mvi6NBWZPCNdD\n/JPv\r\n=VE/8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ea1e1b850.0","@material/base":"12.0.0-canary.ea1e1b850.0","@material/shape":"12.0.0-canary.ea1e1b850.0","@material/theme":"12.0.0-canary.ea1e1b850.0","@material/animation":"12.0.0-canary.ea1e1b850.0","@material/elevation":"12.0.0-canary.ea1e1b850.0","@material/feature-targeting":"12.0.0-canary.ea1e1b850.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.ea1e1b850.0_1627160197875_0.17280540067914885","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/menu-surface","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0-canary.22f390c43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"515d674d76760d278bbc22320c7636fff75942b4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0-canary.22f390c43.0.tgz","fileCount":38,"integrity":"sha512-oZzc7zAEPgwjVllzWYO2XY/Hi776iFzWgbgAMeENMwoa9gkHqsq5Gr7sS1tFcYaAlhVsTPzbUuBmlbZrWTQQMg==","signatures":[{"sig":"MEYCIQCroNTBXviKl7Uh0UuDfQJhuB8nxouFlx7Bl+goE65MjQIhAMPFKNyownt9JvOK4yY0OkNGH9y2N8vVufS1MHySSbwk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFfdCRA9TVsSAnZWagAAnCMP/1C2ajIRRRAw3kvKbSCm\nOqC3hArclUVV+OeN0pl19jMGB9+p6LoAAPpx389L0Q+y+UAj0GpQv1cQOILh\n7zkYjDkDcNVEe/ocaxXjAfsoFuMA29e34bJnEwJKv5y9I60WML7zCaKiuA5G\nb0SvGUtAa4Af6BTqc/Z+oVmvUhhzylaa+Tkgg0avdgcXSTyKboTWQXIrRGxm\n8AhhuRWrKqeas+CbZIj8o4tBnBnPA+e92FfrmEA6yrf8YoVz6vet7kO3nK+R\nMdaIdkQWKURY0FAabdR26EeLgFEZswaogxC0cZlh1O0wpQIQzyMVnIpYLGnS\nIwTXa1hvE5Ww7POVMh8h77B558pY8XXl0M27WuPbPwn7RpueEpq/xcy5Je89\nO4oDuRXM/zbDuqpQT84bFl/mWzuZ0xJ0rml84iQzhsXG7A8w3pCZz7tlKUYY\nfVNxir73CoIlfzv89OybyITNa7zPg28Rp8zMfal9o646Z31TLw769C5Ysanv\nl/4ruWthmn2N9EgzfdCSTFiORQNjD8rLjTcv/dfLlYO1e1ZYw6k35RNsUZyB\ngJhMN1a+LfSsYpIr0Exuf/2SGEt19XjTSPfWOc4IaHkl554Fw/+eq1dwiA9l\nfuG5YrSGg0gsOJhQ0LKL5J7ZJutw5jIpJvLtgLVZDs14VROWEA4M6Y1V/Sb+\nq/vj\r\n=iDcH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.22f390c43.0","@material/base":"12.0.0-canary.22f390c43.0","@material/shape":"12.0.0-canary.22f390c43.0","@material/theme":"12.0.0-canary.22f390c43.0","@material/animation":"12.0.0-canary.22f390c43.0","@material/elevation":"12.0.0-canary.22f390c43.0","@material/feature-targeting":"12.0.0-canary.22f390c43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0-canary.22f390c43.0_1627412445424_0.6543748627961334","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/menu-surface","version":"12.0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@12.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d54d0537a129b15e5334e6dd4a3309bcba7a102","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-12.0.0.tgz","fileCount":37,"integrity":"sha512-9+DIE1Pfz8uw5kZ5tgvv4T/yog7TOumQMCh6ifMN9m7xqRwxb4TKVC7JBku4m5JPj5ajhZzT2skX0SWDgWJaug==","signatures":[{"sig":"MEYCIQCZXaNsBTKRDU/qT2kWVzdwhPc3/afyydaJ3M5K9bNlWwIhAMq/hgjrjzl7aIqeKP8EGRpyYntP5GJJAPOo4jV2ni4p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":376582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGOZCRA9TVsSAnZWagAABLAP/2f/O98brOiPANQ/V7nw\njcEIBIG4qPl0PNiBRYGmWyT2tO9P8CUaEg3jVh0GVFI2ZN7flHqdAEmC/Tcx\ndrX16x6dTb8z9rKM5v6J2sCemq/uNJkRExcnyNcnGzXK8mbno0b7HSlCjxtk\nRlCXxiJsdoGgu0hhCXgFg1h3AcN/jEq8nQcFn9tkqJdrb54LtWicrfaut2VG\nR08M4UiAWMVBx6rt/WNIXcVH1RrGU6/ZeXwa5l1TrZR7wv7og0fqoMexLZvb\nRlmftyFlqBcIBA3ZzUqigzBRdjjsqiIFvSp4wYqXdmD/6H0KqG0lxCVKUyb6\nATIYSRmfuhgRpNidJhdxwBEY+PLG3VfBSmB/0SxnvmtB7/ZovwIrhBP9Lmel\naojOyANsnUzSQt3PdyD61XzDU45bpf2GtozIzBVptIsdaVfKaZFLTXWN58Zu\n+QXj0Z41EYTtNnn97ag+Zz/poAtBQ6kW9JPAmzDDmRoLaElQDMb0GK/YOwSE\nul39gZ2EtFEB8XiJhx2imoRjNZXHDJRoUezlSGmhlro7VMf8EMjzzeIyBHk1\nLG5tO0wa7HDlt2g+44zWvYTOVJR+2qz9JlHvW5NQXQxbgyjPckv0AxirQc1w\nlvLd6CYHHtrypCpL4TqRvgre1sv+zJvma4o/dgXGLZx9dXNmU2kzRZ1xnkIo\nTrPB\r\n=VyNh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"^12.0.0","@material/base":"^12.0.0","@material/shape":"^12.0.0","@material/theme":"^12.0.0","@material/animation":"^12.0.0","@material/elevation":"^12.0.0","@material/feature-targeting":"^12.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_12.0.0_1627415448904_0.14868510041302851","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/menu-surface","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.ae85f7eba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b18dc13a4f36dd61b46368ad7deab4d7e605d57e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.ae85f7eba.0.tgz","fileCount":38,"integrity":"sha512-47ptX13c6LN8rlVSv21CIcHanG+2XcLijftNzvse19TnMx6YV3A9B/owWjpA61a05Vvx2p22eL/kOc+f6/fvyA==","signatures":[{"sig":"MEUCIAK/5zR/nD431alVCTcbqQ0qgg2KpsmAgkdGsiTcrzBrAiEArpUYEmHCbMExFKsllDkOVLa91BxKZscR7vX83NRUuPA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGP3CRA9TVsSAnZWagAADb8QAICEUTphADlXS1aygjJg\nJpvMo4KiCeyNdAD4QVlwqHLf3xBQP9XwFFy+mVe6fJ8qPN9b4Ro4EiVmSHOD\n0A8HonnYx0ZRMaCiGSADAEx8sCtIExbDBf7g3XaAd/9d5vvHnmb7+XgJZbRD\n1hm+AcPlenLxrMQKjXf83Pb8uU9+Tb1s4v1i7jtpgSx2U3M6Yqtn1NAl00up\nMh3HalpKM36R1hSfxoXsUnnBp985HGGMgfETwpYVVwHlO783vyDqbIFp8rHV\nHZFUdFXBvIu4SS/Ew2BpsIAFhwFtn06NiyqDyXIycqjpZyjRHme8rWal5d+z\nI0G+yuIh44XHA1WB57bgYChaPAGzevUsnIDDygeX5gdIcnIGVxodYx1r7HM8\nK2yhFvgxyBvYgBB49JhD5M7BO94GxRyTauDczmPACwkborchOaNI8teJxLnx\n7RS/ymol8F6o98qUyG+MKrtFwDNE+ZdpKzoWTuNVWeRe04YDlM+WbTU9c7Gf\nhL0g65DX1uhYGf4+E1r6dKoGv2BBlzld0kcriFgNVH44digs1j93u6v/I2Cj\n1ev3iUnSqOCJd5nIkNlcXKZoyoRGoKXWkp5i9tGD9H1e1OCnNwMNk7ZQdwnU\nH3koggxR8S3m487pUM2Ey8yDI+PGTKeb2KDWQoJq8U7zIBYLFmqI/1Po98G7\nMniy\r\n=2gIU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.ae85f7eba.0","@material/base":"13.0.0-canary.ae85f7eba.0","@material/shape":"13.0.0-canary.ae85f7eba.0","@material/theme":"13.0.0-canary.ae85f7eba.0","@material/animation":"13.0.0-canary.ae85f7eba.0","@material/elevation":"13.0.0-canary.ae85f7eba.0","@material/feature-targeting":"13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.ae85f7eba.0_1627415543452_0.9405530847971129","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/menu-surface","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.5981207f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09ae6cbc513094b05aef9d94a29ec5d61511e97c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.5981207f7.0.tgz","fileCount":38,"integrity":"sha512-7f92QOzmTklwLvIsuZOM24NlU8B6FAC+lYDjqmYfvjBq25spcFxc0GHr2+y5hPSrg94RGv2zBoUf31grjAeBoQ==","signatures":[{"sig":"MEYCIQDJkjG1MvtMSBFR0IH8YK7yLhYYGBKDndlZFRZfjI8aiwIhAOtQ8ypTSHySYwXgF+88wska7B8PhMGpOnFiJFVknW28","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJRpCRA9TVsSAnZWagAA/+YP/RayEH7hsiHZUuwjrrO3\niJ0r/BBFsIhS7QOWR05d9BkF9yFsFeSDxTcwYRzKb0ZIxg5REeYCca3Zm731\nq570FLNaXOacDDf8sLJcflv4By58Y4k7WH2cW1dEhlD8KwSr3bxkT7eYnEh3\nhSAYGatRCCGzI7pjZ199cQatadlqsMCkyZo/6rlB/jn2esJKW9+EAYNXKVUo\nuxNN9Ea5RV3wsbeqA0iURcHYbZczMYg5ijuc/2s5Vi356GJN/5dKwfX8Je5s\nm+t+SA5/NNgahsg6XRqMccWO4tYU6Vy3i6VGq45+gEgs9ZFSQrIZPmngF1/u\nEWUL+LZ/XXpXsa8Qo561fgpeVeFfEEiFmxQETTDE7rGfv5zWuMNGC2Qhi7rN\nezkZxy4EqXtykd6gd9k0JVTC1C+qYOiaVhAoj/JMI2ORWEsOTWHc9FMypv3J\nyhiqJWOx57J+xccku+gfEbxeAc8wOO6AUm2xJrQT+6W5zSe4mUS49m1IV8Qf\nIwbXWfRRjPMJV5e1BLEcTJCrMHzUy+v3BT5hjt8ad1EjRFEXjMQChF9KThEi\njO/FqX7aeOSKqzqq9KSEJ/66XdcL8iutEy2wBtoD1HHoHY9JQKURhXb5xiz4\nL6iZ+Qr8B3RWzSCsdl1iTNvrFoLjO0NGf3hChqwfLthgbFYCFe4hw/7a5+86\neKJD\r\n=cag9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.5981207f7.0","@material/base":"13.0.0-canary.5981207f7.0","@material/shape":"13.0.0-canary.5981207f7.0","@material/theme":"13.0.0-canary.5981207f7.0","@material/animation":"13.0.0-canary.5981207f7.0","@material/elevation":"13.0.0-canary.5981207f7.0","@material/feature-targeting":"13.0.0-canary.5981207f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.5981207f7.0_1627427944875_0.48705177050620674","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/menu-surface","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.83bdd0222.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d86fd3cc0ef38a2501b19de4c7794db59a2057b4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.83bdd0222.0.tgz","fileCount":38,"integrity":"sha512-fAc+DYdmUbqBLdN/p7NKqo+Nok4XG/vSfQlBpwTGEQCzfHhhiGcMIxIqzo/4cbRcxC8u2/fR1ZqgVJiUBQD7GA==","signatures":[{"sig":"MEUCIQDw8cZRUIZkqOfh70z5o6qQGIjt3OIqDYIpU1/cFSrM2QIgFcHEBEa97Ca62Mymstd+aBbmHXs7joUsJV/x3/v2uR4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZNXCRA9TVsSAnZWagAApLQP/0Kp+Dom4lVfUKVZsfFX\n0UHl1tlT1yrbT7yCIdQTC/VrQr/Kikn/EpvxN7Cu9DiE1o5EIFZghchJGQpR\nfRuXuXQSfWs6iLKsxfaOY0CgC+fDqzz6FIuapBC9RALF4zUc+VHRxsaZ7k+p\n0Vop8kaNhKrKNU5VC2xoXD+4uG2czuukF7lBPCwrAyafhCRBqfWjcKpqcfIO\nafeelU9mvXVGSlYutbs30Z9+2S2Aggw3OP4Raa7c4CYo38VmKL+u8ufsH0gD\nQ8E7dV8ypkDPtRUBlxnX4r75vuN7YhJuVgD9nnGh4s9XSfAfitA17IcpFk3K\nNy5iYdxJlAXKW2A/FHnUr7QiDCbDHvO2SesBd6iyug5Acq7xLxhTZEvnkCF3\nbWVJiWgroT13RQh4hWesN0ouZQXAUkul4jztUnvLT5HAtcJ1Fl2UTr6rSBPy\nUfv0V0whB3bpn4KjiVaK5hSguorHpOoTU4OAhwggqkV7fPslTQl+ozI5hO6W\n1GAF8BvLWWsSGr6gqDwGnLck1SQj4jdqQpRXAE1mZJ7An+r15TqP0adij7eU\nwUdQwIwhVdc1udEJCPVzCACDnUT6LTIMfbsRhIwYaBERf1TGcxmwSDFyQM0V\nL61nez5UsWL2SrUpC17zdUuYEaLSshuwGIxw2Sd8NGrnrbSD4uV4kdqXNeMC\nyTlA\r\n=TuJ1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.83bdd0222.0","@material/base":"13.0.0-canary.83bdd0222.0","@material/shape":"13.0.0-canary.83bdd0222.0","@material/theme":"13.0.0-canary.83bdd0222.0","@material/animation":"13.0.0-canary.83bdd0222.0","@material/elevation":"13.0.0-canary.83bdd0222.0","@material/feature-targeting":"13.0.0-canary.83bdd0222.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.83bdd0222.0_1627493206804_0.40079748952891014","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/menu-surface","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.28656298a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1888aa262cedbc9997bd35e036ec65fd7655059c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.28656298a.0.tgz","fileCount":38,"integrity":"sha512-zLXRqJv8XtcFP7J24TEIdRVZe0ZDNCWC8LsLEmuGf2Ve+1Lrj72bn1M4sBZ9afH8JrZgD8dUe9XuOntLNgzOJw==","signatures":[{"sig":"MEYCIQCdFDmVgZOmcRC/sB883honRL48XaDcVW0h73Nu/7rl7QIhAOolem3BN1TgLY59V1+s0odONwnEOqM8kJG2slVa5yf8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAu/fCRA9TVsSAnZWagAACNYP/1MyElfcrFciMGQeSAwi\naOzVQ4ScLKnTuDXkkheUDkLs4nq0cQ6KfbYfDmBg74j9ZYDO5fnV8KTC2mWM\n64mMy5CPh5R+p2G3r9hkzsHsred8AOO1wKRNSxxCmzo6A6rZK7rXOI8Rkl3M\nzg3X3eHWjM6rpyoykP3ufYWRSUR4yG/1lTRpbGBgvr+SX7NbXn9MAbaf93bX\nMyrTvFfYQVcKqhhvdnqUssNNY2x9z9x9vN3ClLRO5VVQQzSh9O5IJZgqJ2SY\nCAz+6iR7tYq4O0SoX8TCR7XJtNh3tc5+CUS0ZFEcg0jdEDKCb6l7xpRdxAhy\nB2uFtwDi6M112MVad4zrGFW79e/lbm1ev7BEvpOAvAE7AwP98Eg1B7cWvYIJ\nXVsoOP9WbCVMTETxiuAMLI3q2NGqItWUTHsxM1QIu0TzwHXvdtwzEIHChWV2\nooh3AvzYVdj2dO33x17zor17usWU8IvzttImv+wB6Zqn3dL7Cu7XeRMQ0udj\nRaNXi4SjiezlS+ePvFrzlbkmJVnO6zOQa46qnZ0uXeWpVhPrwgUrmJvuFLds\noU8RnBYldd0Z0vRRvHLGfqnvnpgn/FJxyRaFGknl/ywmPlD0JdCAPmwXBZX+\nRv6F2syZya+jMTYyZ1o7RiaQT8WBvzBUras4UYB6+oNIa1IGQnKU6U01+vsx\nSUYK\r\n=6zJp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.28656298a.0","@material/base":"13.0.0-canary.28656298a.0","@material/shape":"13.0.0-canary.28656298a.0","@material/theme":"13.0.0-canary.28656298a.0","@material/animation":"13.0.0-canary.28656298a.0","@material/elevation":"13.0.0-canary.28656298a.0","@material/feature-targeting":"13.0.0-canary.28656298a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.28656298a.0_1627582430956_0.07369160327696522","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/menu-surface","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.9e797daaf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c17c74445cc3ed1dfdeea97ca9d348931ec93051","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.9e797daaf.0.tgz","fileCount":38,"integrity":"sha512-gqnSWuNcxL31gVF9NJiSkGA761B5cFStM6Y2M1dPnEzs7nnMY+kDasH+KmuIQVI48mx68ruH9+qejKEBSMGoHg==","signatures":[{"sig":"MEUCIQCFgLoNVYFoMWWVOg+RDfNrcQWwY9CwuWxH2siVSTkjjwIgU6cfAPEACnOq2phT9g1e8WmicODP4OCTmxvR4QiiSNw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvUaCRA9TVsSAnZWagAA9YsP/jryOeuDeAuT021vgiPr\n3EhmnGrI61W/LLvlcWfMSPx7/3wWtRkQSAgXCVssMug2dayqAe6l1h6cOoDi\nO3qDZOLqtQfC9b56xWO4X+SD2CjrpNjvP2jTpqwzGx8mq1ImETGsigsn+quU\nFtvwp7knsdsqhzGYBFG+iTNFN3hrVYtGwPVcB+SbOo3PC76/rgpZg8vwTUQm\nmKFsSRf5pyf0V08EcmnIk5vppmv1lJYK0fW0EXKUuocAk2lha9r7+HB4dSpJ\nSS2lWRRCCFQTDHqeCFj6SrXfoT2hBf3JGY5DExk+1v2pJZjLvyCmFMTTWeXi\nIT0ZCLdA2a9jplr/hYQY2/rMI5VdnK5N91+49Xkrm1emdESqqhgbySCa4+C4\nwp4VXyKL5ykyFryKSU1527tUGSwuT3u04OKQZl95HU7N7OC4gHPo3ViW6/Q7\n0ilBaF8ao19MUzpG0ZFevXjLbp8aANj3VNAgAQjiS4PpkPAuWBWq1JmXjR2j\nCiGydxw3vkVnoGQ3JG9C/bH3wwbT81S8MFQW0OGQQbhkxBuN8OeAtByjL1ch\nJNMVkomdxdS7+5aytBf++GDnKSdsuasSPVJgFiegxG/C9U/X1HnX7bBZdvjs\nuCzcPwtqHcW40gDveIO9JPY4AqCXZ+3noFUrSVUh+J8PumSLPVaLcqSBWLbZ\npZEL\r\n=JZTn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.9e797daaf.0","@material/base":"13.0.0-canary.9e797daaf.0","@material/shape":"13.0.0-canary.9e797daaf.0","@material/theme":"13.0.0-canary.9e797daaf.0","@material/animation":"13.0.0-canary.9e797daaf.0","@material/elevation":"13.0.0-canary.9e797daaf.0","@material/feature-targeting":"13.0.0-canary.9e797daaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.9e797daaf.0_1627583769867_0.0489941979135009","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/menu-surface","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.adb9f1ad8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b073b85b04bab43a433309ac6133ff93cdfe56f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":38,"integrity":"sha512-ok4flJE2Kc9OjHP01ODRySEBesICkayDMxs3SS35bhcxPu3MF+3tRq5xOtgSVc2WRVyFDwf/zLzyGkUFzBCuGQ==","signatures":[{"sig":"MEUCIQDuGBm62+VcqewJrZ3RuQnJKHx8yNo5E5GhZjVgRK3F3gIgRWx86WKpyvZuWatg2HtdAN57mXNKmmgVdwE6t9UzTGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE2QCRA9TVsSAnZWagAAoJEQAJOE7tds2U9A4UgSotzc\nO63CLJFHV2drIaIEQWua0f/NcK5DAW/gYQCxyxsGzFR2hGsdHdaHTIH+hKV8\nOZB9FEAZd5KTyzwsjGFnJ4nwohJWWu2ZogydecaqkT90kidf4vcSZdtMlDWO\n/SeMAcGgzNMqjPe/amMChxsZbo70rqZkHfKlgsFFCA3OXX/EcLVR9vbPeFNC\n5mskVrVIQpgTIpTE1XJRCpvuc/W7CbuGZv9SG6/x6CajliWdIASG3Ar1PMy5\n8HlzVnNJINaQsDUEEi/5Cp0v7ROVA/Qx00VVkky6ifjwuVo5F+5PNCfUsB70\nYkeQJkX1IxUyLV8EpvBnJTnuPtUeksE/UEkOTsw7/CLwMMSULcZAip+BFs3S\n1QsNtYQPEbI6uLo/y25Li7TsHRLkwdZiwHs4yOPwU4Cid9wa+DL8/Om91/oU\nlD49rR9ldo6ncPVnIhtzeYmoBw9UV3gNKq4P46/iHJh9H4ALlAk6TWrk2HwJ\nMtcIVGR2LTElF+jBj0nJLrvB+xfMyNUa9A9VOMvmiScjg29G74kurjz73sqN\nrwlvMoH20hPdqerKWcsiJ789pOtsL9bF3BB7Zr92tpazKaVCzefbF2QNxHtI\n1ymXyZbwK0cJ/RYmMDqdVhnFdh72LZaAYeTfyrKxy1Mo4FtQKYSJ9JsVDyHh\n68yk\r\n=VGUb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.adb9f1ad8.0","@material/base":"13.0.0-canary.adb9f1ad8.0","@material/shape":"13.0.0-canary.adb9f1ad8.0","@material/theme":"13.0.0-canary.adb9f1ad8.0","@material/animation":"13.0.0-canary.adb9f1ad8.0","@material/elevation":"13.0.0-canary.adb9f1ad8.0","@material/feature-targeting":"13.0.0-canary.adb9f1ad8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.adb9f1ad8.0_1627671952240_0.46444022264732965","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/menu-surface","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.cc5377458.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a042c668b1713cb8826935443b24669e67afa20","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.cc5377458.0.tgz","fileCount":38,"integrity":"sha512-XaubSSolPQYjZECP9/gFkd2iFddRDsyoDOqnh/iBhq6P6QdkjK10LKvgKlF0YAQ2O+wq5nFxQMssmNYfbFdxEg==","signatures":[{"sig":"MEYCIQCWVQGtTSQdDv8UHXjuvKu7N6oHJDUBxzkc2syLlqgG/gIhAK4qFtmrvBYn8ZVBfBOvSckk2xfmNe9vNb9gx5p1ODFn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHBWCRA9TVsSAnZWagAAtAkP/iDbHUdU2lXKBiTVOgTk\nKMBphXxUqQUI4TyQEbJAi1ER5iqer7BVAslilYta/MZA8QzF+BiJAL38ZucI\ncy+yMXAadFU2F6rFw4jcN+tt6McwndC2Eii3BiJIGCYArywLGB/LoqHyljM6\n7wrV+Wh+M8oSic1Y4gCa850yobUbkBQOy0+K7nyc6e6Spoel4Zm7Z/LV47/Q\nNipaGwMZ7r9hBcZEjtOK9LUhj/5nHfpWsAmg7ncIUPOQ4LksJ3so4f05ED09\nHvoRt0FqULiWZJqXVTj1djuTlRh1dnyqATfxM9HEbEy7ZoEZODVKQZN5V/pq\ntpLfgE3uBq4FSAAaiAMEeHTPVxkVhwFH5kaJe0XTezh6Svsqq++BhOxxVji6\nxC0K3UXGlOibxIfTQrGxV3zfSmAPtGfhPILQikGiIujZ6zc6rwhOo8lk6SnB\np7NilPC3/jgTnil5Y8y1Jd0R7pn9FOOVrP6kkqgL/w9Lhvmw8RE77h8ByaPw\nYVsIrD93VVYle+QptkdDHrmNXOHs6kp5G9SJwONu4HtQOQN9ukUMaPY92frB\naavrWDzKlKKPAqfuL0MQl3btVBXzkgQq0rV0Ms99DBANmfii3xLj3Evnpc5k\nCA/pzTYOQIwsA9jiv3veNXFzl7+2EeITXfdCWJ4wB1Q4/OuI4JIdL+YvaeIq\nRzfX\r\n=OjPv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.cc5377458.0","@material/base":"13.0.0-canary.cc5377458.0","@material/shape":"13.0.0-canary.cc5377458.0","@material/theme":"13.0.0-canary.cc5377458.0","@material/animation":"13.0.0-canary.cc5377458.0","@material/elevation":"13.0.0-canary.cc5377458.0","@material/feature-targeting":"13.0.0-canary.cc5377458.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.cc5377458.0_1627680854023_0.4310480410251607","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/menu-surface","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.a395972cf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42185993f7fdeeebc88ea78a3844b06789ab41d9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.a395972cf.0.tgz","fileCount":38,"integrity":"sha512-zdb/GF+DyTo+SLXMpbKT1hsjpQyc2EqXsRRIyaqj22hvGLYXz22CS7UgJID+O2mLvenRPTo2yJyor3HEu/x8sw==","signatures":[{"sig":"MEUCIQCLe4Li+KWFjdUkbU4d5uHG/EWUb3UavX3EGweyLAtW1QIgB/cPznP8K9iZvAUH1ng1p1uz9TMeTwklhs/qP37z96g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbQACRA9TVsSAnZWagAAIpIP/2RzFX9078dLuCX6WIwj\nvKCo1HUNxF5+eLdRzPArErlcTEb0weyOSfnnesEdi1X+dNnxtq9mzHCKXq/I\no+FRlPNLwRnqtQ2vnljeIW0x7crv3fC7/AOB2TLHKmhx9+isL9O0nNWaJSUd\nrY01GlXdyLaKpI99mCHR0Q06Y5/8sKyTK+3B8eMRCo7dhDdEgswyGDh8Dp+7\nl7qL6GuGL0cAm0dXzBlSHVYP5Dwn9OiGL45OFLzoUGl4YADzmlKYC3edAOxe\n7fOyEknJxLmSOXLQMSQeGB2bsEAIQpY8rscpK0CpW7kcfmMsttNJecj1oEd8\n9eMnhjCFYPhLv9ruzP0WwQuS8bWMOFdshsVBihtJjaW85Vc7czARPBnuFVv9\nO+ht3fx0LK72EQxvjqm7IK8iP9U/ra9f6SC2wK1Vtl/5wQy47iT4ompeTFT/\nnNSqCXLanLTt9M3m6Mt4+3DLEaJnczJwy1ITRagmsOdNVF+uDNz4vrBHiKIf\nhq7240+N8B6AuJ9HsCe1aJ+s4Vujx/k0HuJvQZ+UpOZPo55LlwUCMH0jiz5E\njPjKVxGtwr8BTK4E0afJEr+MNmrao5TLtRZKqDdxDeH9Pa4cWdCzIGBN+z7s\nCGvNiyixV56yXNZWrSEvA8ZRJw8u/pUN+knWmAdNm+6FO8Nf8FFAVnM6A1ky\ncV0v\r\n=o+kg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.a395972cf.0","@material/base":"13.0.0-canary.a395972cf.0","@material/shape":"13.0.0-canary.a395972cf.0","@material/theme":"13.0.0-canary.a395972cf.0","@material/animation":"13.0.0-canary.a395972cf.0","@material/elevation":"13.0.0-canary.a395972cf.0","@material/feature-targeting":"13.0.0-canary.a395972cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.a395972cf.0_1628025854897_0.6156568491650045","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/menu-surface","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.7c96e6b98.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49d6f8ca8762880aadfa74dd5dadc1284389bdcc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.7c96e6b98.0.tgz","fileCount":38,"integrity":"sha512-28W6vP3Nnk8xKqvaWhGg4lYcJ1bvluftu5trmfpaP4T3QN+U0lZYAG3kNUjSMFssaULuPRSxADF6okwMgFQ91w==","signatures":[{"sig":"MEUCIQCgnpjiV4imzTBVKM7muSW6lbV8Ezzn1SxCGmDVDOZbgwIgRwahgZkUb4hCfNO8r3Dmnt1/6nZN1cAgJkj75Rn/k8Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb/SCRA9TVsSAnZWagAAfywP/jpSX9wvsj2738F41Txr\nGzPSz9MjmQntL4M0KFpBqxt8ScoidkuxufDVzaUnAVIo3Hc38RUeUcnInJLb\nDfMi58LYV2XeFCH/9ox1RlUgw2LLlfjUYecQjOvdugUNwWMDvO5WxHTIfaai\nJxlQtQcNp1h/C9p05o13yTFq0zPunmREPmvDQKP6EikvpNhQZMXXxbR3WCKG\npFU0yzctZtBKrpTla257qrdNGo+ZwYB9firvFAFKBpzBbKPcy3Hw47bsTXqu\nxItSGEWgvKuvgdxaCrvDpV8rCafZeLrnqhvRNAxUseZkIXceOmA9lFDbwD+X\nKxZUXswvNhz/kya7lyD/E61WO8w6jzbo+8pYgOmwXc1doRXTUdvlIGUMfQZC\nOWTmiYHceB2yRH4aJZ7BGaETRTCI0jAfS0AjoDHWTWBkSseBh4EA8aKgEksL\nQqswJxizeLnOxMZqJqFQs3PXT/+lZTc8LQJd24nHFWAGn8T8plaxWUgUYgv5\nmpvanoSCOBkfN8u0YMnKUVvu5L+fg/VjG0HEZFP/fbuFKMOT2dDP2V9Whv7h\n3JEMl3OErGPXZ3Jax+SbUKUcT+Lo2JUPX632frG9Dxzsgc950lX5hzJbYgB3\ntKpLBldicnBv2HBO0uujOXP48eFjf65kIgdUdyhhQbpaOcSnbEzVJTnJ3HDl\nggCx\r\n=YuCz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.7c96e6b98.0","@material/base":"13.0.0-canary.7c96e6b98.0","@material/shape":"13.0.0-canary.7c96e6b98.0","@material/theme":"13.0.0-canary.7c96e6b98.0","@material/animation":"13.0.0-canary.7c96e6b98.0","@material/elevation":"13.0.0-canary.7c96e6b98.0","@material/feature-targeting":"13.0.0-canary.7c96e6b98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.7c96e6b98.0_1628028882467_0.556907339130635","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/menu-surface","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.a80c8b2c2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9df835b743a3d7ff1451753a623dc317f498b2d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":38,"integrity":"sha512-YDqKOtxmDe+JkPESdUsDD82ZXsqQNiMj3CVgNb84ElymMh29gkyoiCoNr+9+mT8mWspib/7KKfrsqTEHlFuPpQ==","signatures":[{"sig":"MEUCIQDi+PQ20BzPZ4dOE6SqKJUPiDtI8sxmM6WwWmOZBOwAVAIgWyfNmnqD4ka4jrMeNNsFD3NBfCdIdakWmQREHbf5opE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCyooCRA9TVsSAnZWagAAR1QP/AhyH3eGJkBeR1wumS7y\n3fSOiOFoEl8QoVkxUYiXQYmfwuL0VH7gTOZ+Fc5AtmsN6IaQwulGN1L5zfKz\nzw8rFXUWOrXUmwQRmqQFWXUDkzz+hPebmS9iYadN9seaKekjNtRgv9TsfkR1\nswzg/2k8mji1HvUR0bQVNT2BadiSPYFtdMRVR9ujnCB6nUjbutsHZAnJ6bDU\nQac2x6RkP6mBSgj+VEROB1Ynyo7VVm2rJdPD73TMY+ciNrYOCj4AYXo18Csa\nZ4YiaVSS/BQbb8TDkyX5Wqdz1D62Awh3D7jzHWKIOyUM/b5YnHAKCYwS2I1P\neRg6HTrQM7C7LHv57P6NoP9DqrW81DGtaSPy5keJkQx42HXG/rik0aGfZz+V\nrwJFETj4j4EhaZ11ybAmaDTYZXeGZknO0aZdEtV3/yAZHXqQCQb26y9TgJW7\npuZoU3dEk083FPUOnjI9UycvTWLvR/GuBrcwrtoyJrte/ylZ0Rvxf79dFlZn\nlz/3muRFXfD/LGsuviGRxx17YivVtoux7Oe5IAkINQUe1PXw2WmJUrrr15X4\nRLwBQmf0kIK44u5/Ndp0DgLbPaEPE1H8sWQbuoRuTfjOtCgW22E/DgrV6zYZ\nePyZ+XUbdwjFsdPd5nOFTm20SFNRoLTAETrcWKvajTmjWvH4z00jKcXl3eGK\nObJz\r\n=Yxnd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.a80c8b2c2.0","@material/base":"13.0.0-canary.a80c8b2c2.0","@material/shape":"13.0.0-canary.a80c8b2c2.0","@material/theme":"13.0.0-canary.a80c8b2c2.0","@material/animation":"13.0.0-canary.a80c8b2c2.0","@material/elevation":"13.0.0-canary.a80c8b2c2.0","@material/feature-targeting":"13.0.0-canary.a80c8b2c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.a80c8b2c2.0_1628121639943_0.22050365938248961","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/menu-surface","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.3dd611091.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"100cf0e6a943102837f39ecdcd089c0e7f6acaa2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.3dd611091.0.tgz","fileCount":38,"integrity":"sha512-kGZXw22AyjXT8jkOyJJquvBMA6y1nnJo8EItNdQLw+ERR9AEOYCCzSdL78pFjC896boV9QoLiAR5ssZ/5dvWjQ==","signatures":[{"sig":"MEUCIQDdgd36GjZ5cWuAuir3abelv2MxbBesQxhcE/3LuXRy7wIgCSr61X5fOycfVja0g5dd3VElI537eftzY40tnP2THvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2GkCRA9TVsSAnZWagAAHq8P/3fqxAVhr6OKLu2FSs8B\nD3bg65HCNpHkmb/Lsu/clAsZUZm4GRxoeFKNIyL0uM1+AZT7cQtwOjIw/2fk\ntf8o1tIIaY6dNlS0UJOSXHQnYKXTdRFqATrzHdvT9iZsSCGLXemQF+FjGY+M\niYKU+N91WJRrnqDF8CUL39X9MdfAdzueKj7Zq8L8+kBmqFY4DpAa3s2KaF/h\nEMitwtBqiwVV7AZgY0yaIIqKVusxss8jf6MhGwNwuI8Yp4PNseyO+zlolTe1\nbP2zwik2L6PUpWGvhTMGJ+bvJ9b9K4s0YPOJ2rO+Dizk5PvzxwH8yH40Bpie\nYbHuCtr50NGKVl0IiuBff6tStC4CGVy2hNpNRSLdSGqj/FYKv8RzgsrYDjXk\ndPhckJIOYwNTpjjmCYzBV8nM6YljHo2/Jl5p0MBMiK8lmGeOdHWjmVyv1HpX\n4rnw3RvKxUBN7GOURYUV79VaPudTEKjxYEdgayl5xvgDAkASImP+hFmwtWPY\n1W3CEftnZwBabEayJyVAZPmv14oeWkQdo1+sOjO8kca4xvPemfpjfIP+WKNU\ne3eT59QgRHWSkQMNrEH/CDoRMD2QAnC6KWGlTz7MD2wHn8TlMVc/FkExY3jh\nZ3aVi6rsmpHgslqmtLncOMRLabtBjR8d2QSAGAy/izudKJVx9vow74aZDxGm\nJY9z\r\n=gCZn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.3dd611091.0","@material/base":"13.0.0-canary.3dd611091.0","@material/shape":"13.0.0-canary.3dd611091.0","@material/theme":"13.0.0-canary.3dd611091.0","@material/animation":"13.0.0-canary.3dd611091.0","@material/elevation":"13.0.0-canary.3dd611091.0","@material/feature-targeting":"13.0.0-canary.3dd611091.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.3dd611091.0_1628135844439_0.5216811066900333","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/menu-surface","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.5dee37ff6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0796ba3ebd3030d929a4c215686f629df3db08c2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.5dee37ff6.0.tgz","fileCount":38,"integrity":"sha512-BFmOmP1XUAy2c41rfLoyEm1cADteEo0o7qdCB4wiJfPFD2msGgziwSpb/wIJx7J+Aj26BUJ+STZuuh81NlmWSA==","signatures":[{"sig":"MEUCIEIYKGAKPumDOC7+9c/EcNlXl/biEWEYbSTlHd+VU8TGAiEAwWIZt1vD5BB71m6aFEnY/jD8P4bmktECZLgiMOALfcg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCMvCRA9TVsSAnZWagAAOLwP/2G2wgs3gIkTevsPVCHl\n+2TA42TXeOCNOjq/LmtD4B5WtGgpoBqXpYYevNjTS/ivsjyWCdOFkfBlGzMn\necnRDtRD4tFsCOcgUe1Sz4q2gmZYuLSN1Fevno0633Zk5raon+/Xx0CA2+Lc\nGgXZ0RBWii0ERQMxd/wWLGTfIvooZnbHv23nvB9vDqTMb0PBmBrt9eSV4BP7\npX2eWPpaysOA5jCvt8yX/AXmrT6EZhvYfFzQydHAdSt0fp3HDpsb94dmMFQe\nGk5K19XL3tgxUfxoX8Y7LPxIyTcnSn2FDB7uIPFk7gGstBODpLLLjV4mcm+X\n6KIxHeVc09H4G6hqJMqQrATmTLhh7blAItp0VC3KYfcM7zXr5se4Tz90oPuA\njatg46q47DEpe4uJNfiZipJ4jY6bQuc+LEfY17bHAIYmu1hdwUKL3ko8g0a1\nfp0GFLVG3uhp71O8STS0ivWv8CBVopwa9C4oJZ+cRU6O1Xt9eLxYI5DX5n3Y\nQOAWx5ALqVO1vf63kfq9jUHYUzjt7BDaT+wiTN2Y6sneDuZWhLt5Oi8ARFIt\nUk8unOn//qQgsHX+xhMRRrQj4vg+UnKKiJHKZJCF0CpOUiD8rFe82zRCThDQ\nEpM8ZIvFNe4FsbzNNgmzR1jui9pkcADIxIp+r6IN3kye0PI6jGO2ZCJLlqFY\nr+uh\r\n=EB6h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.5dee37ff6.0","@material/base":"13.0.0-canary.5dee37ff6.0","@material/shape":"13.0.0-canary.5dee37ff6.0","@material/theme":"13.0.0-canary.5dee37ff6.0","@material/animation":"13.0.0-canary.5dee37ff6.0","@material/elevation":"13.0.0-canary.5dee37ff6.0","@material/feature-targeting":"13.0.0-canary.5dee37ff6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.5dee37ff6.0_1628185391837_0.47843401658391427","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/menu-surface","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.bf405d22a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f98426d117af2bea50065d0d5c645cea9682251d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.bf405d22a.0.tgz","fileCount":38,"integrity":"sha512-+0kyE2V1tw2e1Ss9pdSRKdhPrHQzGkx3dIbMxpyYCz5OcxeEKg3Tcpzcy1soy85XLUmAtquUK1bdmOHRUYDtbA==","signatures":[{"sig":"MEQCIC87xqVGJ0uG+VmaYb0d9lFIzBuGjzAT9eEKdyDHpeqfAiBgvNww4vp74tBiZwI/+kkluFs3/xS/P17P9u9bYkU8LQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEe1CRA9TVsSAnZWagAATZEP/RW2uqv9tKSioPk+uCai\nOpQGv2/HbZjum3qRJuZThRzaGrQlJVZgwI+SraQk8SLYdrv85YLuSYwmuT4y\nkzo7X9yDQLvZuPnW1oKvosuNBXytc4RWP2qqroQmhQq+mhJP01FoTVtAx7dh\nwLscoaWmgqynlvmJP2BBH1JfglVOHQ4DgdQJsM8xBgf8uHe4HCHajEQU1Z3c\nEIPk1PR+CHbnv6yOam26oTgucKQa+1tEUGZmTi+iUsO7gVjdIA0GdhGfGhdq\nOA4TEYvASkywJ5qGBhSnA2CUerbUOEnoTfMjLt5QW0C74Nlw/96hRrvAyF4o\ntbNoqAUYhfqLVXS6wfupd9SpEj90TockSoO7iVd2cw1Nrg5T8g3n+Rk8oxgX\nzxSUaVbMSzx6DhR9vkIEQJPc92CYgj50kdlURAzLNLiuyZkuiNaMSbQtXSqn\nZfLkkc/NinKGSfLUBV/gOhH4r9msR03HTXD73tME6qv7AiKRnpgFJ0MqPF4w\n72kbtw+jJYNgm8dklzV52WN+2Uj2wbO1kv4mBxCq6hkvwYFoNTtzSUi16XPa\n2ygf2r5X4DT3plzh8cBCTt58r4hgMUYXAVTbDjFP0BDCNSF5WL1RWxGsioW0\nevPQxBGRhyX+DF9HJLIq3ze5+ghFTe2J2CRiFQsTBymJyuUcfOELhdk2p6mQ\nC/Zd\r\n=moQh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","types":"dist/mdc.menuSurface.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.bf405d22a.0","@material/base":"13.0.0-canary.bf405d22a.0","@material/shape":"13.0.0-canary.bf405d22a.0","@material/theme":"13.0.0-canary.bf405d22a.0","@material/animation":"13.0.0-canary.bf405d22a.0","@material/elevation":"13.0.0-canary.bf405d22a.0","@material/feature-targeting":"13.0.0-canary.bf405d22a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.bf405d22a.0_1628194740889_0.9086109711601624","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/menu-surface","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.b47dd37a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80ae1a67cb0d3a2d054b705b76c3bbd53d370f7b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.b47dd37a6.0.tgz","fileCount":37,"integrity":"sha512-RtR+LRQyEpkGf6WAP03waFCK5CxV6VrJC+o16fSbT5p3o6tTBb9MJUnFRTWBs4Cxa10snJeQLxRkmdKIJoAApg==","signatures":[{"sig":"MEYCIQC9IEg5grWdVWzt2fwMW2znS/h6c4Iyhhuttv4JPTCkvQIhAMhnB73/h1FwaTNPkoqwx4LL7xWzOAjLSvkJhJ2lm8Fk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE8oCRA9TVsSAnZWagAA+WsP/2VL4svj4GyFIhy6yY1D\nkVwe3A2yFB2wpJRCOpiXqVX51XRVHMCo658ChcMPKpbIQJwoibSaahuGatrV\nK66NvygsPEp+S1ZLbipPvfQjev1SNjwD62wv1XbTmULQLDr5H/mC1gJ4Uy2e\nP9rc8VowMGSuv2zkaGFyJI/G4lhvuTkkp7hH1IA31ym9YIGSMi71TI0oOurA\nx9wQ55ZgZFaIR31Z/915x5AFMe+IwUMgSnxlET+5KMoUy4qrprHAVZHnNocm\ny9U8fbFS4kNdlgSDVpSwYjcM3tqGx3Tn8vxvDknDo0kxtpO6P3nNUzlb4JpZ\nq91EkrB8j/b3Y8BzkA813DAMN5BeVFxAhqZf13HZuNm6YDo0nNheD8Dkv5Ts\n12XyDBgy2n5iKIih9gy0WttBKoCFpEUqFR16Zoq39YQIy9BE/4rTvG4Cw0uy\nuIuQ04inc0DIbumnrTVVYBcoWxEcv3+QqYDtB6WKaPJcjrybRlFTAaQ+1vtO\nl5xjntdavPP6EnBVdd/aGDhgfThhP4GB6+DaYPzysx262KTCGqE8qo6iuyp9\nWPZAQWmQg4awkFeLHGJHgJmx+2LxtyDh6ieXNFWGASZbGkn793TGvSAh9NEV\nzMc6FYJRIs44ZDh3ii/vH+4e/9SyIX4GzlRFmlxkGQMP4zDRnQ4SKvc9E09S\nbF4C\r\n=/dC1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.b47dd37a6.0","@material/base":"13.0.0-canary.b47dd37a6.0","@material/shape":"13.0.0-canary.b47dd37a6.0","@material/theme":"13.0.0-canary.b47dd37a6.0","@material/animation":"13.0.0-canary.b47dd37a6.0","@material/elevation":"13.0.0-canary.b47dd37a6.0","@material/feature-targeting":"13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.b47dd37a6.0_1628196648766_0.7591809782606902","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/menu-surface","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.6c82b965b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9514249d1eddbbebcd9a08eb19753b30d2d8f7e4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.6c82b965b.0.tgz","fileCount":37,"integrity":"sha512-Pi3w30kGyt1bl5v0DTdlABcZjKm/5c+OTaCuDZS/iVYTxqQh7pyTdnfrw7Aoxsp9TF70MFC79gh9EtkCBeobCQ==","signatures":[{"sig":"MEYCIQCKFY12CvjTQ94Kune9HYy8omsWNSYbXWoOXDFveRWA0QIhAIWtyFgRkpngALmsd5vPt77cfIfiBpu+KUSlYbEuxtz6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWAxCRA9TVsSAnZWagAAHK8P/jeQjWF8vSbv3d2MO9rl\njMr38jVoFRiFhyVnyBkMhyH+3cpYIoCkeFqHu67tnfVdVADU01FW5IlisdXK\nS9KhnDlkP+AAKoh+jk4trxE9s4oSjHjObSUIU31Sy6vhBpvICJ0rL4shPOKk\n8KFoBEAZIyzHCzb8ZyV796ieww2mlUZHtowy5prhTK9vWgSceffaWEg0oP53\ne2VBigSam1fZxpNn6cotVDDRtNSUYgH36jXWTJYtGr6JH26ARSQevQGJW00g\nO5q1XHN0vHQm6AYl7kRLbFr6UDi99w1BVrxT1ZsWrqw2uhXBeHuCxMwYA8O+\npxl4ZUvTjPq/ET8pKDIrX8YWxABg825OkHt52cI16Qa01DzhNXO1tpwnAdDA\n33c9LA48D5v539ujYELibb0XCt2UNUMbN0I98Zgc4Y7ki+HC84XzHeDpjyUV\n+TsLJyx4k3JnATh82tttm4avgxv/MDC9E25lm7xHdEdnXyAj39XC2jGVTbJy\neqOBtiE8BqsXCJoPKapk6bsU5Hce/mcOUzLXUfQEa1imtbf2OH2T12YeNuh+\npRaJznpie3NqcQAcGhetzVTplEHF9ULQH0woeg3qa6XlvtwqVtfKKUHyAgp3\ngFUG8FmRo7w9nwuHiZPrsffzYuqdU8SOcgoxSbGQssH2f8EQRiZjpEC4FNsM\nH2q5\r\n=WVxk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.6c82b965b.0","@material/base":"13.0.0-canary.6c82b965b.0","@material/shape":"13.0.0-canary.6c82b965b.0","@material/theme":"13.0.0-canary.6c82b965b.0","@material/animation":"13.0.0-canary.6c82b965b.0","@material/elevation":"13.0.0-canary.6c82b965b.0","@material/feature-targeting":"13.0.0-canary.6c82b965b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.6c82b965b.0_1628266545562_0.2962693032104031","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/menu-surface","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.4ca11fe76.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e6d76971296ec552ef52a79b0ccedfbeb69252e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.4ca11fe76.0.tgz","fileCount":37,"integrity":"sha512-hmT8X98rX/NNnN0b+leTxw0QssAVGQxpwQdrNE8JtzYWruQs1u1Lkz2+PrTkpzdVjYYwBKbJYnUsUMfK+76dKQ==","signatures":[{"sig":"MEUCIBdtnmhTMnacSrGAtSPE57lMh1Sn0B5hhVSZA77rgb4tAiEA3SVufWTLRqnfiWT7RXF7IKIuoHoeF1a8ETRao6fTNog=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWx9CRA9TVsSAnZWagAAZQgP/1MWvz5SeQq7pvH3HAYR\nbRS06LzOOAeZda42ReerW1/Ugeo6ZLC3pMhJ0KY06cC9hjpRlTn8LGQ6v4Qg\nZGXIdEU6DszBiYWMU6jdFsNJMPJ9i4HjAjlxs20qFCCCXB8W2N2QnIDi/GZ5\n8foFQUhcVI4M8R2heMu/FYFSRppoIYwkZIKUbgIJNlE8DFYOzkw6I8fgaG6i\nvn8ssUOUhwcRzjCZimc6RJaiE8P7C6JeyFJHKkgMfCR24qBUCFuHT0/RUbFW\nG+kGMwdf3fT0dsbHl78DjjXw4O1O35TTVWrxW/VOTXO46UMAuOTS+QCXqS5I\n6VpNs05tpkkOIKlHuxdREP1QDyNfIXGKuTGRL6z8QWtFfVsakPgOLvDsrM/w\nGo5KSfGFZA78YEDjtIB+8++IFVGysYiXQNRzUg0O7gwc+sHz0aQRsur+5y77\nw5RbBieqB1GAR2MgAMJ/cb+/JSHYJsGoVp+7ZU4ZbjjsnBEFk/9KwWzjDp2S\nKfWkmoEStsKSzGTwwwYi3tZAqs4bQqs7ioLzZwDx+WUlt+PRDUK1myGaSywj\nBFiONt4DwX6rikUC6qCpWpn3AVUxsOIV/UwYoHELpUk7LOMDKmImLcjPHPDV\ny2jt9QoR1vKEMHxTvSNNkZSifphDyQ17RvV4rfwhp6LqNj1nil/Gyu1rooaH\n7y1O\r\n=6wQD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.4ca11fe76.0","@material/base":"13.0.0-canary.4ca11fe76.0","@material/shape":"13.0.0-canary.4ca11fe76.0","@material/theme":"13.0.0-canary.4ca11fe76.0","@material/animation":"13.0.0-canary.4ca11fe76.0","@material/elevation":"13.0.0-canary.4ca11fe76.0","@material/feature-targeting":"13.0.0-canary.4ca11fe76.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.4ca11fe76.0_1628269692940_0.9063782489308831","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/menu-surface","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.510cf90f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9361e2ec3b22e7deb3d4f47d88729b333d18693","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.510cf90f2.0.tgz","fileCount":37,"integrity":"sha512-gdDCkLbMgxkTL2OaQo1tHwdFJp1nskTZM4kwPXH9UEI4gno4kjM3juyktTpWIebmFz1OfNQWZDQygXNibHax8g==","signatures":[{"sig":"MEQCIEnH+Fxct17LNrX2M0EwqdMvvbHgSbvQc+Ji220uYD2sAiAk6LeylPLJcjAQh1I8y9aJHVJTWNTlr4qitRxHORB8tg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWNXCRA9TVsSAnZWagAAuMUP/RuRLTU/FtBY3V2uQmCO\nKQv6e3bNy5V2wkZUFhlU4wBDrMc2MQvMxEmVfugBPGgPcfkCDRBTBNFEoHPz\nGFvjMg9wX5FcWTgEpddAzu6QbUnSg8DJ7VQXW8EgpNOY0OwqiZg+ZR/1xEmf\nFVYDifO5qBz/sMpMxXT1zNKyF33tXpi+5Z/TIgkH8oiNHz9uvdVNSV4iG+WD\nSEulxLlcRRb4yhVrKn1ER9YnZgOz6yR1pZW+cKQ55Flz31Vm6asQlt5oHYsJ\np79/Rmktfkm00xJVrsAe5sHsFx7X16gfrdTc/7H4CLULawTyM2LkAW9PupYs\nahxFXT8L6yF7I5n93d6DHst+4P7VfeglCcmCRggyVpueLhVAqcP3l0tu3R3F\nB3dmiogeImHEs5mSTFz7tySHg2Dw/gdweV/DZWAtcjy/E9Czcjr80MsuYueu\ngGdh02W62fL55+WPMgvGc1TqsiDhonjrKfeNjI/y7hv0qksUeOOQuNxGEXmZ\n69/fIuKfhOLxlKJdRVi69B1sIyvxMlxXurzji+uaBkDjoUnL4T2cBxJh+dmn\ni5KuU4OrAZPItA4QzQgCHgE3+WOpviHeyiczC+k2uPiqPKeVabYG6EY0IABS\ng3uR30wfzJV762wLjVFkUjZI96MIsnw7JbBKHynBgGGLWw8mDOAi0K1CapJA\nv5x6\r\n=HmY+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.510cf90f2.0","@material/base":"13.0.0-canary.510cf90f2.0","@material/shape":"13.0.0-canary.510cf90f2.0","@material/theme":"13.0.0-canary.510cf90f2.0","@material/animation":"13.0.0-canary.510cf90f2.0","@material/elevation":"13.0.0-canary.510cf90f2.0","@material/feature-targeting":"13.0.0-canary.510cf90f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.510cf90f2.0_1628529495258_0.24291482039579493","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/menu-surface","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.17580ebf7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97953a60076d297069ae99615f3102edcfc31148","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.17580ebf7.0.tgz","fileCount":37,"integrity":"sha512-NumQSdhWMYuwrhsPUWL6mKtHxzSdEmSLUqSHk/hz+P0ALj9eBpXvAyBCNb4IZLWDTrADuZH9iu99RX+2eQ9xyQ==","signatures":[{"sig":"MEUCIGw26rjQ9Sp/Z+M0Sj2OXZbgl6gUxRtDa5qGkPito/vZAiEAv7tl/klPoYwo3KoB53ljHeIu/O7INeMoK2BxFj8314Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXF0CRA9TVsSAnZWagAATzgP/R+UXrwAOmQccbKC+vHs\nvkyFhN68nkw5Xf1BgVzCtmKQCQYB/GwGZIIQYX6SBtsk2FNSLIEeBDG3gWQ6\n3Ta3OhiyaQ9cuSB84hXiweu0utJBUPFxDoV8YsRsaJyLgMwwd9EJs2SbCDp9\n2+5+XNRA4mOhs+fqmFrVpDLMUL8NUe5WdDgWWk0sdN1qJsBqrtqIu2EkvnIg\n2e5D6YKfoVzcfsxZjMhN5S6Ma+7B71lxsqKzK2j0VLG+UJP57oh26EDD038M\nvL5V8h1cwZGMLXngXwAZHz9NwU2a3rAotHTC5FWIqqbd+mfIG/OU5cf0CXXQ\ntUzFkrcd3G+hgZQaLe6w8qKkGZVE6XthQj7Be2QWJbGtFz9PAAM86binab9C\npxtDyFsZMIXc6OjBKMzhTF9V9h+TPMKG3wcV7KB77qEwY1mGIUW4RZJWryUF\nNp5qeoJncUG40bplz4gAKW/8Kc631bAsY8S52S2CW62UrYjiz5zWEIJbnZ/A\nftWrd4ea1B607yqMKrGwnxccU54C4Fup1/hgUBdiAdgNH8tpt0wc7PEdFndd\n676iTgAQlLd5aKAgAUOfGuWJNIqv70LD47dVb+KoVg1UKmO3nGiWBCNVZOD/\nCmhucbxOJ4FROZM9WvTsC9UKjyAallHiIzqjzK3GUNr69A7RGvTrbJrglTTA\nAbot\r\n=9ff3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.17580ebf7.0","@material/base":"13.0.0-canary.17580ebf7.0","@material/shape":"13.0.0-canary.17580ebf7.0","@material/theme":"13.0.0-canary.17580ebf7.0","@material/animation":"13.0.0-canary.17580ebf7.0","@material/elevation":"13.0.0-canary.17580ebf7.0","@material/feature-targeting":"13.0.0-canary.17580ebf7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.17580ebf7.0_1628533107933_0.09966595902253061","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/menu-surface","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.7249a3060.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d116b290e590c5482e8888210d1a3839a84bc5c6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.7249a3060.0.tgz","fileCount":37,"integrity":"sha512-Ftm9B8vZRmWrIAayyY5ZSfc807ltzE9UrP8i6xbfk6UfQnMoL5AqIfWlXY3Un10GhFKr/osHXXzv7hyWm/j61A==","signatures":[{"sig":"MEUCIQDQsCdADbejjHJayubZKEz2OwW4kCWvMQUMvp+yfk3N8gIgFw/R6mBjof7hBooNLN4dWiQJAJHYy+ajwBL5dB2vQwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXJeCRA9TVsSAnZWagAAvvkP/1ofeope1aJexTqaCRlZ\nqHB/2CrtPzL6JZsrVi/osdVSD7shB1db8QRaYctt6clmGbHymaltTQALmVfn\nr1xkH+slyx5mJjbxYZs0SieIJ/7V2MjsmgLHD3rkxfZ3A4ATGyBb5dGnGhQI\nYZvmGoYv0DU39fucxNeHiTkhicmbdpyWn6sjpNCUbxxINXU2SXmTnqaAn163\nrGpbSdqM2VHzHMvMX80CJfk1a4BmtFnoKOiVlu6wgXipXRjBhUBpGQkIx2O/\nrQlL7dnXSo/zgLF3NyeoDN3eIxMPwQgiBUqGZkNmcYxpXQbQQ+KcbYS2fBJn\nXdSQjco4Ku5f397mj0g2Kg7mcTCMM42zwYXqxv69vCAlwDn8e+7m2PEB8vIW\nnDC0NwJAozVoULFjcu0ChlVqTwU3g17+Hr1i93efyi9eO57SzaXzih9KFznY\n8rBnu8FPwqOXe9uOqNkR1lAi2S8hgFqTQtFcl5aFh5AsEthQu4CSdjq9GfHB\nVh1pJlbySzePhsmbht5K30lGXLIJB2MAc0ddYC1QQ2aeYDz7cuVs/DQHgPqA\nLxqeI6L3pGWgV4aLPE3IwX/EDlKaHp6NhDJE5mo/KPVkOMnfKSuxmrLJwioB\nUoz+JtUHVlPzkRK23LSX9wjetPpEktYge50N5VqNmIUUWm30Dcr7cO1JExar\n5+Ji\r\n=NVEO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.7249a3060.0","@material/base":"13.0.0-canary.7249a3060.0","@material/shape":"13.0.0-canary.7249a3060.0","@material/theme":"13.0.0-canary.7249a3060.0","@material/animation":"13.0.0-canary.7249a3060.0","@material/elevation":"13.0.0-canary.7249a3060.0","@material/feature-targeting":"13.0.0-canary.7249a3060.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.7249a3060.0_1628533342663_0.22995938900124235","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/menu-surface","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.4c405863b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9d192a4729796f8852082c73cb2be72741f7ffc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.4c405863b.0.tgz","fileCount":37,"integrity":"sha512-dw50voWch5fLjaS4OWvklhop3jrppPsBN212UkA7RM7rZRaGB5jqan9Q0TKVzeRZYo9KwlkXJMChjQIK0jJL7g==","signatures":[{"sig":"MEUCIAWWT/TSBzHEPPC4Lf2c3AyOdju+AwL0hvHwcGBXoVQ3AiEAm6FHc4nQzAqRwq0IhxaLUY3mVbkHp1mtS0L178Gu1yY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhErpbCRA9TVsSAnZWagAArVkP/19urrKfIr/Nxr+FRqE5\nxYXJeCofRAyz/bSvCPlmNW8Xu3gIixclR/PqCsnBMljblbOzuMNcE+4o59Ym\n6EFkbOuL4Ww6CqNJCJOVrSgKOogX3bFtIZzprr55ZM5oH/8yubZWCoovT+aq\n9s/NFwn4f+eIaHldns/ZzfO6FWhFGbWrfKgbEDwn2pV0/tZ5csx0H45Pypef\n+eGR82lnQsCm6CKDJQoaMx8tOlqVKLRM42e0Waf9SaHvikB4/2SRjJYYxf+Z\nQnYyUpesXZstFkYx6ijjMcw7ahxysdOhAxXJPgCp0HlBouvTaMesAB6RjWEF\nikpj4Ah0tqG7MdYp1691Hps3d87yudutKhK9n1mx7Dn9Gu2AERJzP8SurN1e\nl67tc6oQvm3v+UngQL345yTzyCVcDPvtHXgANVUfg2iVNVCbZkE8OMwKDIcu\nJ/qr8192fO25nvHrV6UKVxPhr0m1IQbG2yzDIBZXmncPO2Fgv9DRwigyN91h\nSZaGhiCyfoVmlTzoxuK9GDMz8ewNZmEuxLx8+zk7sRThg5UghCCrMBY1qP/Z\n8LpYTFzsz3YSqqDIFxgZpJRZHhpGu+lRiZl9hvGv41QyZ3Xj3gZHf2uO2xO+\nO6QNfOMOousw5xcQdh85FoYy3e/7gOimk0NlGWhWztUp66jg4256+FH0xLEw\n8BJ7\r\n=BHWh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.4c405863b.0","@material/base":"13.0.0-canary.4c405863b.0","@material/shape":"13.0.0-canary.4c405863b.0","@material/theme":"13.0.0-canary.4c405863b.0","@material/animation":"13.0.0-canary.4c405863b.0","@material/elevation":"13.0.0-canary.4c405863b.0","@material/feature-targeting":"13.0.0-canary.4c405863b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.4c405863b.0_1628617307040_0.29046819135417823","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/menu-surface","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.f4241a42a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb41237b0a9f6183e31933b91ec7f2c715316f96","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.f4241a42a.0.tgz","fileCount":37,"integrity":"sha512-uPywlxBERMPCJ2aNxJQ84kkRSWZIz1jldiGPL3r6JZbD7M3CrUIVRYrHowASI2NMCOmGKFghi6hWsiH7ZRCXAw==","signatures":[{"sig":"MEYCIQCqPHFoy7J625EGu290PmP/2QchbyQXL3AmBu8pHEMGlwIhAO2Qp+7WGWZ2EqDKk94525UBInH/OJC+CJe00YZm6fHa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAIoCRA9TVsSAnZWagAAfOsP/1WSEYSOVyEckE9FDwAE\nUUmP7jrTAk/IyOFmqHZRTzOhMzVoLo/JexpylogbLc6lKA/v0U0c+M3gaR+O\ns8tcEfxg2QwCiP+FHJY1O1ueIrIrakRZuHEpCGgwaOkUNM1YTCwJq6cgOXrN\n+zEskiUye+/GGgHBJ1j0bi8xnfqgHsKjpeiF6gcGJRZn7tRM/mPYul1sGfOT\nvCndHAjJ23ySqVZ9TR+Y/O/lfHJfEClvZbb2sFdT/N2nxDS/w7/b/2A2ID0L\nPjBTysbebVEDuIOhXKXZjYzyT2msbuKLTLWtxYPMOxcGl9Bqcgs0gd+sg+QJ\nFh9vWxEx374zTNw+0flfcIieYEH3R2091jUVo3BMpFHsIwURKkpzlzCRuEew\nqOEsoB0Q8vvqVelIlEq3RpEUBY0klFocN9oWZPmyJhY4axzPup9ty3JSivHT\nDxSnVmV2/tj9EyI/svcrLdlusKlWFNTH78pRaUcOJOvdgZoMMxwGaY1FKojO\n24GQBtOQ1CydNeeAiBR/5dYxo05NUvBn74fAA5xETRE1V8FOLfMnYTweKE6F\nRVk8P2fsHdadebsQMvTxvowlNAq6qg11+K8hpHNW6BorVQ1CuiZL4vdKvxl+\neyS5MXCGhbtrxZu0V3VSHGMpvm7fU9JdxceoTYfqlA0bkHE1ayO3jEd8srHg\n+zUw\r\n=o6Te\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.f4241a42a.0","@material/base":"13.0.0-canary.f4241a42a.0","@material/shape":"13.0.0-canary.f4241a42a.0","@material/theme":"13.0.0-canary.f4241a42a.0","@material/animation":"13.0.0-canary.f4241a42a.0","@material/elevation":"13.0.0-canary.f4241a42a.0","@material/feature-targeting":"13.0.0-canary.f4241a42a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.f4241a42a.0_1628701224614_0.5781031721469476","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/menu-surface","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.0ad12ed3c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44693368aabb6b06b468a1ce4b3d038e0c25889d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":37,"integrity":"sha512-lwb+lDPydURI26f8ihs3BkAnP6LJKuRPY5kfbe+VZ0vZNfQnySPOxA9RqqHlNH15A7Y+WjplARwwHvZu7lEC7g==","signatures":[{"sig":"MEYCIQCJmM8v4xC/eANypAPP1p9COx3abg0GYs+97EW9EhYaLwIhAP7tLVS0c4mT6OcbHKNI2CYtbheHSoFycj7tBhuk2q43","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEFFCRA9TVsSAnZWagAABZIP/3crjaAsD6JwAF+w/Y7U\nk/LLY54MbMbiW+0plKBSKutPr1G2FMXdnZNWFIWP4lRFzpQx1FvoieNm4uDO\nr3sRHHStPZDa2dG+Cp9J3LgUKLNAZ6kKh4olt+ilcCbpm43GsbOvfgCWdY2F\nMOK2Ve/W4C+0MYLlnDBL+7W8Ogiaz34dBE4f2SBRrNVY3kqjG84BrQcvHQp+\n2XGbEE9tMHditXCOPvBtRyeVzXiGOpcqkA4uH04+bEgdt9ShiTGjPjjLMz8n\nMTcrYC9ER+Hi9bpm73AhcozwxUhT/REZ7mKuFg7LmYGCgh9655KupmhL0Lq/\nFD1WR5D4pbErTfck+BGE16A04ONbkEn29U6x1qHyUVHXbNEhk/YMmXV0w77+\nRVGqZldyyUoe7qQqZc69rHF/FOq6C2YWW0gg8FhtoGr24ICnAEjxz4Qny2tD\n2tv2kxFHVGVTUPKlb/xkd1+k6LPPL6ZlYNNOCmy3LV4XVgat8CdzrILzoDcc\nM9eCLXAVf1EyWJ9BQmxPQJVTiSCG04ke+jYeGDq2YdVjx3eAJtpsqVqkqS2x\nhh+f5o4whlfYfZViaxV2foKrAjqCQ0GBZX5fE6XKDn4qh9Q9TMK7xq4l23/Q\nubc8MGDX8a58uIrWzacV+/ycNHYNppN1hKYgSJ09lUisdzwfldXL9V5Xg1MK\nbOBn\r\n=M8Rf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.0ad12ed3c.0","@material/base":"13.0.0-canary.0ad12ed3c.0","@material/shape":"13.0.0-canary.0ad12ed3c.0","@material/theme":"13.0.0-canary.0ad12ed3c.0","@material/animation":"13.0.0-canary.0ad12ed3c.0","@material/elevation":"13.0.0-canary.0ad12ed3c.0","@material/feature-targeting":"13.0.0-canary.0ad12ed3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.0ad12ed3c.0_1628717381095_0.33808444045171737","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/menu-surface","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.077dcfcfe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"400866059db0b554f30eca8b75d8842c7ecca808","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.077dcfcfe.0.tgz","fileCount":37,"integrity":"sha512-l5jpSs+AkPuNFiTms4tX0vCxQgtlADq0EMYGpjusIR6cRpdFni2zvCD1czERCNt+T1YYldwZ3AWYy6mR9K0ezA==","signatures":[{"sig":"MEYCIQCDCWKaJz8WiuEZF1F1KkloVzy5g4H5c7csAqn3ewKQ7QIhAIxgoHTfuqS6FsBh5kGC5uxweLhh5aZQsPqZreBcENqq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWC2CRA9TVsSAnZWagAAFzEP+QAoFQ80hEKSBZhK51Gu\nB/Gjdv88P2dLEX/ixBLcnkUZ6GN3JfrShZ9XUhjifN/7AICTVf52glMooCUb\nrXbYYeSF6FUTsTy+LOgTre1eI/zzdIcsMR3Gb10CtukoX8kXUanIkfN7X9uv\nJxDn4JfjvhlM3p77+yh7m+efrrNW1PCSZM5jODbNxBZtq4FWdlLAMq8Tlicx\n8PWvqEhE5rovui4hYZhj/OhLZ6nz5adHU9+ZrQuD262BTR0gz+d4dDDJ5SWZ\nFZSzDuLiaKX1A2cV/zBbzhDzxisiOoA9IsOIc8JBWecz8oaIAl59hfrXqkDV\nXHJk7ZcQOrrwLusJQ9htu7eoXd3q3WiU5nxaDQJjjbizJOvC3KT0ZWDTf4AH\nT9ff15dh0N73ZG3RZd7dHkQGnIOwHVbRvUJ8fy+2ERfyaWtaJ4gtNUgx+XDs\n3AwVgrguFKH+6/le6dKFiYaoP+CPUPtKMiGys7Tep/FVCG3lIdX/GG9W9LNB\nGFSn8eWT0FtESvpgs2pJDnA7A6v2vDn87FGHXVJjJMcot9lQ0zodbiKPuNTu\nQlEE1XUIOCF9XhoAHWrr8mgxgtVuOoHcN34gBW00LAdhs3PPirjNmcsV5rq0\nPmlxuvLdIRI9dEXh+uYGeH9/HFm1C6s4Hxsvw52WhHk+oBbHcjJmI6hXVF30\nT/6E\r\n=kxo5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.077dcfcfe.0","@material/base":"13.0.0-canary.077dcfcfe.0","@material/shape":"13.0.0-canary.077dcfcfe.0","@material/theme":"13.0.0-canary.077dcfcfe.0","@material/animation":"13.0.0-canary.077dcfcfe.0","@material/elevation":"13.0.0-canary.077dcfcfe.0","@material/feature-targeting":"13.0.0-canary.077dcfcfe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.077dcfcfe.0_1628790966737_0.6794808641464978","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/menu-surface","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.e3346766f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a715578ceb2c476c16325459bb24e22fe297ecd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.e3346766f.0.tgz","fileCount":37,"integrity":"sha512-81Cir+ylydTST0LOcMY7QWmK5sOOeQQ9nTUZ+reQMH+Khvv10zSP6J/Zmk8s0z4lYnLhbEPs+mkyC5BlOVLMbA==","signatures":[{"sig":"MEQCIHJDOunNUCwFh6RxAtIbYRkrG/3wj/T/clsaNrL40z4FAiBB7yeEu6S36/AJ7YSCtAMgv8SqE0gEU1FQiRMsgkTQeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFswBCRA9TVsSAnZWagAAQkgP/35f+sZVg+XonmAtRWXk\nqFpBXY5Rc1ejQkVVgGZD1DJ1yOD+Z1ntujEJ143kPZjeOUooLQbIfEQt0UFf\nz+dmUGpP9V3a/ugclEcPV86qTEqM0FBowlGCmsEvbDEiFBKfm4K28F/Li/Q0\nsG84P+/E14+3iQl2s3hYr8KTG8NcSGuXqF/+5OzvV2KdOV+VgtQBSB3HnMea\niLOD3E+3HkNBM55ZKNMy4ZBJfQQtB9EJKb2Pk4RvgcDebyaDHq3/NssrBEX7\nGL1Q3CwQVAnHbrjWJ/uadTfoMxzHEqhz7LgnyoxiTiEc4dbezK5zTr3gMJEK\ngjyW6LOnRTbqkCKLQaWBOkp8BEG24cCGplkK6dRIInyaC2iCtTteDxtkaOmw\ndBhx83Nh3Oxml9N1Vk2DWw8+wKbS91JZnMdhD3FaNxwmsh9sYInxAl2nJ3QN\nW+9H6BJxSF6h5wlUcuOeGouYXgmOvYimq3mDUjDhagPQf8Om4Ub0hDeDsJ+6\nSyozTn873kdRcDdxu9FOFgiJU+6X/5DPIkKQJ7mLzhmGbwYLLxqBnFCyCvtC\nLava2KB6mmU9PYKjiReuHrCH3C0V5D+U/Eu7ccZ343Ks0qTjdNyj2MaIDHqk\nDXjfKw0cpMNRZvSnBcTNPqFygw/1/5iufy+T4jQmUrX0PPEy8OZ+envl7mwX\npcyy\r\n=9ayX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e3346766f.0","@material/base":"13.0.0-canary.e3346766f.0","@material/shape":"13.0.0-canary.e3346766f.0","@material/theme":"13.0.0-canary.e3346766f.0","@material/animation":"13.0.0-canary.e3346766f.0","@material/elevation":"13.0.0-canary.e3346766f.0","@material/feature-targeting":"13.0.0-canary.e3346766f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.e3346766f.0_1628883969625_0.7389298886002247","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/menu-surface","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.2fb068fb0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5652e884dcfa42977a5abeecf49c658ad3cc3a7e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.2fb068fb0.0.tgz","fileCount":37,"integrity":"sha512-ZAzHXO4exMosRU4bqdRrpIPjtewKGuwSa9IThIReiarVwqfr9xW5NSbSC5a6xSHZFPxVWo2NbZgWpIAtjS/ywA==","signatures":[{"sig":"MEYCIQCS91ZwrUDYAQ+dX2zaMrum0F3clxLCHXXCEkdJPaBVkQIhAK2UqwkXTWUS7BveuLs5eKeay9njq2Ni8WVBtgyLOb4q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFszECRA9TVsSAnZWagAA0nsQAKBY6pysqvRo/Lr3IM9Y\nANnu7HXNpxs1voc/ShLs3g+ZBCO2GxNU2pNbG6j/ogaD1PO6mbCNTnin0GOz\nasInzurvOuBPJJvhLfwG1c8ZSqLRZbkS/TrmaCMiGwV7gvV2/S0WQzCILo86\nFRBRkPoDku9kDwZhdDPmxN2ES7wT9iERyAkDzeHX/CbHMibTokkNhwmRv+2W\nOuwj6zBTNz7XJdA0fOESgeCzuTMBqihH1vcSmv7RGvk/Hvyw1g2WscWH4xDK\nK2e1ydJG2vKpmJ6lWbGXph5QkPBl+OG+uuH0ZLHPizKLIQXc7QyQHhZY+LKP\nHBe8JueB1NpEzwOprWQvOEUMLwUbsZN/xqA9sRf5mdpsaY45DZdqkA/T+1vm\nNNf44T7uyV0nuHqjO3RLWTYb9nIe8WFn+gSPjOLtBVR+HGUiUu6CXaqfcQHS\nqiLcNQmoe7Pcy6tW4su6YpSCqMWdJpHvoB4GK73eLDA8t/7knmowuAlvRiAE\niSOVMEwProCFPtL2l8fOW+qiBeRTAC4q8M4xDDR223as4xFl8ewfACJAZJGu\nvxN0EHQaYm2MxaH6GtbhHaFTtzdmTty05ifRH1kgwSYAhIIWUNh8c71lH7C4\nZKrw5C23SEv/bGeFfRt9TZ+6b+lDT8bFT3+7+3Hye2eW6hz12HNDf1fvNEwz\nYvQR\r\n=yIPU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.2fb068fb0.0","@material/base":"13.0.0-canary.2fb068fb0.0","@material/shape":"13.0.0-canary.2fb068fb0.0","@material/theme":"13.0.0-canary.2fb068fb0.0","@material/animation":"13.0.0-canary.2fb068fb0.0","@material/elevation":"13.0.0-canary.2fb068fb0.0","@material/feature-targeting":"13.0.0-canary.2fb068fb0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.2fb068fb0.0_1628884164628_0.8098765853555163","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/menu-surface","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.fb76c5069.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7168085ab04a3c0d98b5492352fb3b31d06576fb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.fb76c5069.0.tgz","fileCount":37,"integrity":"sha512-6vxUlhMRVqXGfVS6/WXWWqxwQ1QNeaqWfiByguKstDxbX/+P7EOXpXJSRKy/njon6lwkVKP0J2yuL1FmI3xKqQ==","signatures":[{"sig":"MEUCIQDBA2O3k/oDi7sGFLVKy4YBnOs9r+prEiI114aafWI3bAIgQv4GXheg1QhFuCJ0JI+KT0gy9fggo+afUHbdzCz1YNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsXdCRA9TVsSAnZWagAAFagP/iOdeKn0aV0eNKfS2por\nV5AhQnHHZniSrhSH+n5f1rf1WIFQwu57dMGJqzEGWQFN3BqPIC4//RYy0MgF\nJfyn8p4ULDHjPa5Obiq6ctR8qn80rEiHRgkemm7i1kJ3WGhqjyNHc3ArCp9w\n4xnII5BkP5g3aCHkbCVSOQIHDYv8MHF6v6FC+7k5L8q5W8GrOOxOGTKom2G9\nWhLos9dyvVAbRWst7q/psCWW88NcDmX9x7W2z2j3agiCB05BrzP+htY6azDR\nn/ScvoCn5yNK4GcPh6wIXsjGViVHCM8IMEfvQQg7buLaO1Jpk7uwQOFaX1T1\n+AG7bgXpSZmB9MUUM4W5mtCinYOIbkGSHUzIhwzKrIuMgUlEiF6opmPZDB8e\nD4kg+foxWxJa5/CjQqlIh7ANgQA57xbMc9m/Y6ew1TK/qVAJ/IWDrt10sxh0\nQ3F978H+xNZFdHB9sltnBdHhiOXW/ciu/ovQY/kqYB/YxqMh6wzQfsDob8iI\n1OldKrI+ZwunKk5V5krkp1HVqQd9FZqgvpFB7RmRp0Gn0bCuJhI0k4LhegyQ\ntpNHUZ0UV2MIP14koIduJbIiZ4vpakfl3gYBQ2NYL9Q1JO2EdrOVVhVhriyW\nsHsE1L74lxYPLDqjdl8JI4qK+lus9nZzS9vOCGNaS0HGX7sAKiNR8wSAtePJ\nipiN\r\n=qI4l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.fb76c5069.0","@material/base":"13.0.0-canary.fb76c5069.0","@material/shape":"13.0.0-canary.fb76c5069.0","@material/theme":"13.0.0-canary.fb76c5069.0","@material/animation":"13.0.0-canary.fb76c5069.0","@material/elevation":"13.0.0-canary.fb76c5069.0","@material/feature-targeting":"13.0.0-canary.fb76c5069.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.fb76c5069.0_1629144541130_0.6322353887111407","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/menu-surface","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.457d89aad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d71b7bdf124ede25146efb6ab7966c96718e6898","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.457d89aad.0.tgz","fileCount":37,"integrity":"sha512-57o+64pYg8dFq5P3fAvrV1ykXpjfnWYqPOv9BbjJCkctO9RkERpWqG4ZK08DOV6SAdrgVXUzuyphGuzvV6/Ffw==","signatures":[{"sig":"MEUCIQC09YYovue0tZgNSRTVxO8OsoCR50E42RYzeAa1eJGIEAIgfD3MadQga8SqByS2NMGljKpLHSZPKaed0tNQuWOJrzE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9RGCRA9TVsSAnZWagAAC3gP/1SLDH6fh02Kp7jOkJ5Y\nKS6TBs6EeS5JKqZs0iyrV3AeZ7lXwGzqgOAgS1PSjHLMlKT5jvEYwhoSb3k4\n1oLJA7Sw/ec53xFY5BAJGu/DbswEbGNOJ+GWEgg/wMT0PqGwmd0AWWHf5QHF\nEypNSZ6ain67UdXrL4P30o+nwM1z/t/okODX8GGkQ8SDEbFphel+LZ2MxMsB\n4I05rJQ7V9v6HoDUFwUAwXXuT95xI26BX0oCtWx9nHIYxTJwhiBXc93zPIcS\nuBhM9IhzgmO99F3XMvnpd/no3/N6Lw9O3cjcYY/F6i49Au6O7MjITeWMxMaF\n1w9fkLnUlLP2v3O3KiV7jEE+xV6lIA/d3E4mYuen7Ds9HGpwFBP3glcdkjCa\naGdUOodkW5zSLFUCcO9OQeogREEeTI2xsQ9RC1aRj+ffqmMSV5iFzRfVwLi0\nlecvc+ryRKDXeorg2/8xe3hMBMeIPDuFqD94gep7Tl+eV36A6gzQO9ECo7H1\nPiGyw5nKA1XSiiyW2axPICyVRfdEsw2nQT+QoAteCuSOCQQK0Khd8QaPPN7v\nX0TjtdTUghRfMCwhpRGj1Peu8C1LruEyecz08UN/nFWex73Xk5iHl/vZIKVT\nCwM+jzQlcKBFq1csa9k5nY6JWd8A+omVt9ywfCEuSzVN1w3EQ6vG+gXSiC9C\nufRh\r\n=TWQ/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.457d89aad.0","@material/base":"13.0.0-canary.457d89aad.0","@material/shape":"13.0.0-canary.457d89aad.0","@material/theme":"13.0.0-canary.457d89aad.0","@material/animation":"13.0.0-canary.457d89aad.0","@material/elevation":"13.0.0-canary.457d89aad.0","@material/feature-targeting":"13.0.0-canary.457d89aad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.457d89aad.0_1629213766680_0.8177455522947921","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/menu-surface","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.0de2f2edc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7396eef97a3949041327bf59a7bc42eaaf0022b7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.0de2f2edc.0.tgz","fileCount":37,"integrity":"sha512-V3FvxZX4dwp9d1ZMLmhkx5bDEl8Nit9zLN0fmC6/CSwevgmKnkT7EeQ7+zhDFdtlGziIBusUrYbmIBPjM43yBw==","signatures":[{"sig":"MEQCIAWDODEEwuI4AdBESleWMFg+BOjy8ShF6qbGi8w9YHQcAiBmk+LFk9O7n24cEq+Hi0PvOQ5t9flVLvRBXTY0u09Vvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCIkCRA9TVsSAnZWagAA8toP/im02VW149iHOAhGgg6B\nWnduGvBuiRS/8Unja5KOe5AQtoZwWdTNBvnKjyD/TvGvfmZaE//1gBS4h30y\nC6hW65T5+B2TCP6LlD2TLVOZErdZ7pTLLgPw4BDvP2Hl1hPT7kzgOotnlbp5\ni6uCjfpGrJ3F3fCtC0JS9+B+rFGdddtp1EYbp7AGUIHr7Xe9KkFcVZc2VE31\n4j3y5kNjwpqUwidYP6IhxmouBiNyTMprTwm0w3WMPskIQRkMHiA8ssKdL+DZ\ng2HdRSb1lBDA4RaqyEKYgI96PJM0Vt4T+BxXIW5csB+8A3GH48BoXdKI6vEN\nSXaiWK5C0x4djezKUk4Vjh9O/INglhhcgL9/G7P6Q43q7fxwzD4a7xqnMKiO\nPwD3bmuF4wrtKvo9pfdoFh0TW5rmenesGRnrsPoCemXmtiQlJaZ9Wi9Am60z\nTixFO/tk5/Uk0FJ7rTBf9Iqw3AdttBta9BZLV9/rUegphm6u7pn33cEudfcd\nGGhiP51gWRYi3d0RYQBsIcPTBtooIqem1Qdpl55Wgt4RciheCuyCTRgGQ2dl\nNqhRZjQcvL07sIrKJ7dT71/XI+GL51eWQeGmbozNX3kx7fMySev6YoDXRRy7\nam1icM5ZlegIvHAliI08+9BJ6R9CTnAyTxPO47hWK4FBTdpRRJM3405wxgV1\nQ3GZ\r\n=Cv7W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.0de2f2edc.0","@material/base":"13.0.0-canary.0de2f2edc.0","@material/shape":"13.0.0-canary.0de2f2edc.0","@material/theme":"13.0.0-canary.0de2f2edc.0","@material/animation":"13.0.0-canary.0de2f2edc.0","@material/elevation":"13.0.0-canary.0de2f2edc.0","@material/feature-targeting":"13.0.0-canary.0de2f2edc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.0de2f2edc.0_1629233700187_0.474222424239384","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/menu-surface","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.1f9259b9d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e07f60c039b30a8bd14958bb10d226242d325131","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.1f9259b9d.0.tgz","fileCount":37,"integrity":"sha512-vnqFmpfjrK7RzAGcwPCI78gWCUPN1Ex8fh0/2FcsA45X3OXhcsS1hmhtdtW7TNdL8ym75ejFcDrej2R9vclccw==","signatures":[{"sig":"MEYCIQCK/a6fF+sSxZgqXLLxv2vElNp2/00G2uppBXT5XLEIlAIhAORmt5l9B4qLpRC4gfiF0P5g8UMoZf/SG+BElafjefx6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDTnCRA9TVsSAnZWagAAEjgQAI826/dukrWTdNsWgY2Q\nA6JbW4URjf5AhKFQRnWsdyB4KVCF4BAc9COEYnwn1lHPQgPX9kqeRYj7aenz\naHGTzRqGy5sG4O5xGXBlp1aH68UJX+v5v5SURSW9Rf7uBFh8xbIX5bbigrKV\nuEXBbOOsQ42NXPj9RRs2eA2cQbSVVYOEMlwcsa+svpGYqatVvTsByccMJu6o\nkExkZaZedhiEm2p9AReiUj37e9kx+MXZnYqEKpUy+6qF+BpjVph8aDWR7vcG\nNg5bRfbHJQtapkzoY9vzEN9ILWb97FAUxs2oRjQOnZoQX80bw7sfgjpF0F3v\nwZ+SoncYtn72LEN4o5ZynqTpG5d/xGV/57eG6ZbFrRU3KNZdEjD72zA/VlEQ\nZ9+lanzHPGailJN1WaGvSw4X1hlX5pTdbOfHfVWQ+0dmqXxEBPFVGeYQYh9O\n5OcCVaX4hcMtYirGO/jlAbbfZh7Ly25LCNqGiPlLYashUJ55ggu8Z88VPsPp\nQDYaEvz9eWqBtng+84p/irl5mFOzRXDpLCqxY499H14DrQIFOz1RBsJfCNDc\n25k7aEcaKWIWb4be/DWny22wBWSs1/xu/98pgVK8F3cuWnMAJ/GOnsj4Lrbh\nJaHTr3VwdHEbej6fpnZ7tdxZtrtfEffgRITt2VaejvMaJLJ3weO+jt8NVSM6\nFyFf\r\n=rU58\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.1f9259b9d.0","@material/base":"13.0.0-canary.1f9259b9d.0","@material/shape":"13.0.0-canary.1f9259b9d.0","@material/theme":"13.0.0-canary.1f9259b9d.0","@material/animation":"13.0.0-canary.1f9259b9d.0","@material/elevation":"13.0.0-canary.1f9259b9d.0","@material/feature-targeting":"13.0.0-canary.1f9259b9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.1f9259b9d.0_1629238503792_0.7784220473611714","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/menu-surface","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.3b9290351.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cf453d871e8788bc2830feed5df3754c2d70c52","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.3b9290351.0.tgz","fileCount":37,"integrity":"sha512-s1H5HvAVVRgD1jVBb8irByHEs/bCr5koLPUKAUEQrtBjcsMeXg7IE8nfQ0NmbYYXoMxa/zmcQb6DWlovCRE9tg==","signatures":[{"sig":"MEUCIEQYq/9i30V+JsJmYAiKtfZy/xsdFoQ3U3rMuQV+95GpAiEA+iYvk3gKMH/Nbh5f+bT5+LjfvBcXEri4khgZVMn4hAg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJmgCRA9TVsSAnZWagAAyNoQAIHlyAidDm1GImNfy4Fl\nvrlFilhjoJ/gRKQRZSrCoiBs8y1UsnPOBxR/35yYSvF0ZGtG79/Nm9t4Qecc\ndeVdo+xz6S6LrLeXepUIMob4ow72sG5nzUfhSJa2/mD+BR0Y7Xs0JseK0E/P\n3Fz/eFtIFQdZT/jMY+9PuQ6wYtpEXxL5jFrUWJ4iDf9e8soJWC96JrQKR7C+\nPugDKn3dBKQtM7A/eRe4z4H8N8jDXc2oLb4An22l8HD+64bJ/IT4DHtc8yjs\nCkMKPIcwXzceSTSmIVSD4YijIzVY2sbRfiO3Hk94/mx8kSihLznC7wj68nlK\nOjwiVJHuv/TvA9+nFU6dpYfAcAOId/lSThjnYcLfJHuYqncQNzhEQa3uYnGQ\ny/fs02ocgzqlW8rP6ALpOS6SHGb1g9a2SBelOUluIMTtif9PWxF/ZuS0q45c\nLMxJONZzdQb+9b/o0tJwEM5NESfYU/pMsG4azTDdw9EojWzA7ELyBdNHVa/3\nRGpeBAkMp72yXf+G/pb0JLc2CBJocKHmEvKsCp0jK1C4IM3ntwAehY3fy6bo\nuU2stNvhmyVxO8P/KmXalD2+uk1ZCVNC7kZdfKkzVKKNbIMKPI7bRfISlfZD\nHJQuL7j5jA/lFaFet3crdO3gnTlYdwjVRJxWuBRvyjlYvQ892cemYhOSRjm4\nRDU5\r\n=Wxms\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.3b9290351.0","@material/base":"13.0.0-canary.3b9290351.0","@material/shape":"13.0.0-canary.3b9290351.0","@material/theme":"13.0.0-canary.3b9290351.0","@material/animation":"13.0.0-canary.3b9290351.0","@material/elevation":"13.0.0-canary.3b9290351.0","@material/feature-targeting":"13.0.0-canary.3b9290351.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.3b9290351.0_1629264288433_0.01468068069636197","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/menu-surface","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.43d2eed2a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fd53a27363b07330d1492e32b1da98e15da7bb4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.43d2eed2a.0.tgz","fileCount":37,"integrity":"sha512-TjuwJXb5QwNsXTVARgfGm0DTboqGWfwzm07f/rU0NKNR0J5YrtfK1jY7Rj1ZUUJHYlq9mhrsV8nTyPkPovm1Nw==","signatures":[{"sig":"MEUCIQCxW6uUfKFPPdktj+32N6DeLGYucLkNMfAcv4gt/tZs8wIgI+oeeVeQOp+50eBxLkIBF3Cif+aj3xCUyG0hPboOgqI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS89CRA9TVsSAnZWagAAuVwP/2MrdUuW6n6gIJHocbcT\n9S5dHQdHFfihcvmqmy/o+5VRBpAnpohHU1/vyWGAMOpRHlneCJhqH1tbtSUp\nv6pcfAvodpLVH20CL+OfSwko2GepnttvBZqoB7z4BWcc4uu6uTABc6tg2BSS\nIESGVR0C6F+Qs2S5/t8FS2EVRaKx65En45AGHq7fMNzZ+pUrpkvNPSRkuTus\npIFQWTvFrczFJPIDcTDmu3ivgg7lJl7qwb5LklVEbRgTpDG1Cgva1xBtdy1u\nivZYthxn2I6H6U6yEt4TOsTJ7nRCu4KOhEnDsSu6AzZt88+Oq9jLBbTx8QBU\nNJDtA7i6SKW6rmHWYoqIgymarSnvqgfjGpV5PhdAsXvH6dIeS6bpDa0suVWk\nJ39iewgmT15ki/DOiaf4ycETx0AP8VIDHZMzsPccLkpN8yj9ZSEThpHAvr4E\n/b2m0EoTYwfNLMGLNgUcNKpPdczBoxiMQjn5kCERh+gksX1qo26L4UEWsfln\nLWJ99Wyox/K2b3R2lyP4Ho+HuCUW7rEm2L1daCxCC+z5L4/l61LBnipww8Ak\n5j+tIbzFWb3jX3pNQS8VeP4UwKOWuxTKuOV8qQxJpVclA0PoTsL1z0cVKjH9\nbv8LVVbquR0rNxS+3SMrZEqHUcuoAR5U5ASlXyY3t8zgAO3md1H5Vc87fsRM\n4FmJ\r\n=R6sz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.43d2eed2a.0","@material/base":"13.0.0-canary.43d2eed2a.0","@material/shape":"13.0.0-canary.43d2eed2a.0","@material/theme":"13.0.0-canary.43d2eed2a.0","@material/animation":"13.0.0-canary.43d2eed2a.0","@material/elevation":"13.0.0-canary.43d2eed2a.0","@material/feature-targeting":"13.0.0-canary.43d2eed2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.43d2eed2a.0_1629302589117_0.5296595781238795","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/menu-surface","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.0a9069300.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79e647b9525301defe1161e6e142190cd6bc76eb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.0a9069300.0.tgz","fileCount":37,"integrity":"sha512-XU9jQT/5KCM5kQxorJ/YC6Of2zMlxXO2QuEDomAHLRYfe+Ykr3wwTMfOEZVDStfqM3/xucJSEQjDpBOBaRIYtg==","signatures":[{"sig":"MEUCIQDFG5maz+wLxREWgRSR25ktEPYB+4/PMAmzDscvzw1LrAIgRU3zLp8OmKvunJbuLTHQtt9pvJvj2gycjGBvzpILwDg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoRYCRA9TVsSAnZWagAAd0kP/17pA90FKRpq3uqVa6pO\n9D8Jo0yn8DIEX79tLjFtEtaOUueh0jQY/m+JLLYywgFlxPh9N0zleBjQZhBa\nZ/KCmM9WlHJ7wdKQ/LtM4KnX3cxmhrbYj0WnaHqHusAyobP2DIEusV6LNexq\nH6cp1Euxt6mxMZG09GQCe68krpxqBzAqmhbXhG28xXQqKcXXvr+L2xEfQAQu\nxkuja5skqugRoMsem1rWkJGuk5o2YQgatyqK7Wopi/x0gM4BexDfdHyAW8zC\nQW3Xp3UIRm8Fmc0AyDyPYK5XatEYUqPoDIeDcEj3cEyOBddOVKEvQVM7Sogm\n9ivb8q0LI/leT3c5uq/ogKy+5rrCXDDrw4A9KV8wQ25IOnHls024C/YWTFls\nGADGHN+7Vxy1oglA851MFg8aVB9Hx/w+fP6Xj3pKLSIsAjk3ElRnnlyzMKGy\nyEBoNfonP1k2lOBekk2sb98xv9f/tMf713zyJ1EzqtQ9s4Jyjgf0Wq6AOMfo\nQuzJU3MZn9p+c4CXoAcb4rozt0ckiLYzAPquAFB42haGN5fSE5sQcLEjvfij\nIipLsu7DdXeHTM7phBbW3oRAj2uhL3YRCZKwmX5+phCsrHLfDo+2mjyeFb4l\nJkCHucobzOUrP1LhC1i6HOzcp6EcfdubFRIXXgMsSDwmTotRYFlFmJ5N6d2O\nCwlH\r\n=BlEs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.0a9069300.0","@material/base":"13.0.0-canary.0a9069300.0","@material/shape":"13.0.0-canary.0a9069300.0","@material/theme":"13.0.0-canary.0a9069300.0","@material/animation":"13.0.0-canary.0a9069300.0","@material/elevation":"13.0.0-canary.0a9069300.0","@material/feature-targeting":"13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.0a9069300.0_1629389912263_0.6601209446674416","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/menu-surface","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.7da413ed8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9aba723c7d90927861fad54cd74ca0768e50f908","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.7da413ed8.0.tgz","fileCount":37,"integrity":"sha512-TufCgnLs/8kEmYc/z+ZWKGJrf1D8ZfiG8r0i0WV9JD4IqBuRhO57DV3KVa6NkcT1ZXi14EEm+C2acD/tThowKQ==","signatures":[{"sig":"MEUCIEVmrFZ7OCbRb5uJr2SybWICb3IL/JZLZ1RSyg6exxYkAiEAmy9uziM/anwQHUihDLO1iyZ6DEojMXF2YCO6wrg7ljA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH88aCRA9TVsSAnZWagAAkEsP/i7yPAMSXWVXEDKR3D89\n5SNvVeyjxFKS1RB4VeFx7ID6HmdVItrZ0lFZTXYt4sXZrOZbulR9pqgmxeC3\n5lhJk67SGfLMU8qie0BLEqjJOmaorOhClp1EzmF1/G2WC0tiwbkcB+MNY48c\n+n8DrGqxeBNdlZGENj76yR369gRpc0XJmXiDyHCwBj+FPgsvWN5dSnIZJseN\nWxBZK3f3LJLYBGuYKEmHHeF9ulO7rH8+yWBTE50hubck1vNPuizzCW+/eovH\nTtWHP+sjqizKcXLw50cC/zGMS3k2AP8UU8XYDrw/8bUo5X8RpvbNqCxll2jw\nAR3nPZabx7wOIKzc/knex52QrTrXYkfH4T9DGjG7LfwQzYFOVEGlQtooSS39\n89DY0g6J4Mh9fUQ2TZRQrwRb5FrS06qhFxvUvcCQWZ6Xolvl3Rl64Uda6gB7\nFIpYEZY22LY76BTW1QaQUEvU5xs3mPlO1Sl4nNBOpOd3oHph+S1JaihOf/lZ\nv/jYtHX/PDtLw+9ouBikLMd5Ps+1CwVAqVdGyirl7hOgsDBJ7dsVCBS+3d8H\n3Y3iDM932Kc8GzVI6ZMAarxMtM7rNB2piF+54qBW41Pm2TzufPbezHlqMDyY\nv3UJdS4KyY720LJIWm5oozR+XxDYHnNtgUNSLh1y5gj4S7cq9T9oAR/FqLq1\nvpR2\r\n=mQrQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.7da413ed8.0","@material/base":"13.0.0-canary.7da413ed8.0","@material/shape":"13.0.0-canary.7da413ed8.0","@material/theme":"13.0.0-canary.7da413ed8.0","@material/animation":"13.0.0-canary.7da413ed8.0","@material/elevation":"13.0.0-canary.7da413ed8.0","@material/feature-targeting":"13.0.0-canary.7da413ed8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.7da413ed8.0_1629474585822_0.2457529232183362","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/menu-surface","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.e1e69fd8e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"723ce3304d73cd52c7f229a93893bc83ce844801","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":37,"integrity":"sha512-16h1eeU+BxkjeZdH5f/YM54ZfQ8IbXuBb/wl2o9dIqdgzBeIugp0ExQ7llrOWQRwcfp3sw3y+7sDZQtAzYaYAA==","signatures":[{"sig":"MEUCIES9zgALfFHxzGUs+Shl9PqIOS3I6hy7MnyzKAm9NLwlAiEA92fgDFRwymfqXIR7B/Al7rzmo1VNxeIPMMXaWFjvOdQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIAN1CRA9TVsSAnZWagAAJZcP/Aqedu6bFjlTVHWVLlhJ\nw7VOxKqxWSmVB6dom/pXYkKgfV5UFj4+klu2GaWarLBjqMtM8yAb8CYIJKPb\n3uVyOXWgYM8mYO97e5r50DU7lP/3Kx7/M9XrlLBfR8MGj4sw1QgzD8OOM7KL\nPUU95q32lKz3n7tzJGibVPJd7aMyfXa64IMvf8Vbp+y+bzNYfBb/T5ofSqqd\nZOY98y0zppzDCrWolOmkvGbdPH3KzEBedlcHOM4X3YLsa/oKf3zBJxZrgw+C\ncq5NVzQrGHRbIYVvCoaUXNrNmJeGuTpHZHkLM+qWu140a2o+niNeoEiUGYa/\nC0KtZM/jCt2NR6ZVv/jWU/XoJ9tKLlZt+3TtwsGhwwd4AWuoXwb9wLI/VwX1\ngmrK4FaTpG3o9ZHEJ87T+qTf5o8iAaufNL0GEFd3vSMi13s+4PhXW0UjWaxW\nCMOVMPcTRCsyZYdnQlJZy4T7XqEeJ58TA0snRbFUHqUqxZG/09rnm1ef6EFN\nYz+Nr6ds/jqBJP2PhpyoLyX2r/xQ9Q1Acv6co4XaDbMLPGdb7y8DPIZv4RHH\n0cmP28mYPSuQGPXf5RSfdKWJ+ewXZvvkiX0LhtBtWtJKv3taUdwT4ITkrucp\nF91fpd5PWm55tOAzSZQZ+TggSGzpsX2tT5mw9K7qY3f4ECHmm99kC5WGUWvJ\nDhFE\r\n=dO2c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e1e69fd8e.0","@material/base":"13.0.0-canary.e1e69fd8e.0","@material/shape":"13.0.0-canary.e1e69fd8e.0","@material/theme":"13.0.0-canary.e1e69fd8e.0","@material/animation":"13.0.0-canary.e1e69fd8e.0","@material/elevation":"13.0.0-canary.e1e69fd8e.0","@material/feature-targeting":"13.0.0-canary.e1e69fd8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.e1e69fd8e.0_1629487989617_0.1750103849917255","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/menu-surface","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.f5afc16df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d899ae36d530cd043a11b2b7867666a7319a4754","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.f5afc16df.0.tgz","fileCount":37,"integrity":"sha512-JwuFO5w+oz9mnmzdh3g778vSV+yD5NuD1kKWb+zG0nAhz7cX8D5V6loIfrU6fm5uhUNWkAGXO3srd2V38449EQ==","signatures":[{"sig":"MEUCIBFSKGJ0i40v8yGVDEpUn9fplEyK4QoRy6PoghW4IKzgAiEAsoxjvTpO8wpC/ixX7371N9eqDza14WZ4tL7BztT88W4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIBAvCRA9TVsSAnZWagAA/jsP/36L40TuGPpfNwRqEqIJ\nhcs4Pk3X+G8uf+eClnNSHsI7A4+8FrTtIxg+3zCVUUtRdRuvt3Gon2HZ54Gr\niWejiGSRU3bdTHg/vbBxUhB/obUPvAaKjV2sU+qfNnhVB8wzL5X7h5g4As3x\nT0CSJISnCcWhFUosQ9ZMoWhOmvGNPx0HHojthZv63qXxIqs2p3Aa5o4S40rY\nRwyxOQnZl2C7tKNvpRDwK2wy92yJzPKl4zo1JtU91K0UNXtmEdLTChVysfVp\nc43RamweCHDAGlzSz+umuDT1MmT3pWnFRh2qaS6PltnOtfVn0UJqItHH7DST\nfK/WYR0jIXixj82ngspVxXVV+b9DbzN7JFPQI+m3wgRWcB9wVs5zCdeIFIyC\nTugUYehBKJwBzL6ZcrEe6DTWdbqTbjxvomYu2h8uFXcCf6uiT/LEapVlGMEo\nf16QC0yNWFlbso3xgv2CHXfPbG4Vbwl21PcsuRrDbIq5u8ehPx5oPtSFm2O0\nJi3ojkS20RU9eqX0rqjr8n3RXpbbP7RQKa0C5PM0Sjk1kLnHMqJ/cjHBRen3\nzcvYTv48tAQnp2iDQX074WEicZkXOyfQXCYsWuh4b7ytN6rJ2LA4rwN12Ttp\nMFxCV82W+jLiYl4rrS19WA++X5x92f79VhtZpVRkZskR2OyboEmC7VhmfTXx\nimCP\r\n=ZJel\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.f5afc16df.0","@material/base":"13.0.0-canary.f5afc16df.0","@material/shape":"13.0.0-canary.f5afc16df.0","@material/theme":"13.0.0-canary.f5afc16df.0","@material/animation":"13.0.0-canary.f5afc16df.0","@material/elevation":"13.0.0-canary.f5afc16df.0","@material/feature-targeting":"13.0.0-canary.f5afc16df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.f5afc16df.0_1629491247004_0.670903777987029","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/menu-surface","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.28d0d75bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b314162d6d62c771dc1ed98f4f4e6ae43a1eec99","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.28d0d75bb.0.tgz","fileCount":37,"integrity":"sha512-5px/mq246B39k4dzpv9ESqq6WpISlbRT31meLgHcTl3GWSIrzhg5P9anedlQJJ0UUiBI7HqPnUC6PtAyueR9Ug==","signatures":[{"sig":"MEUCIAsPjrFov/+cd5nNdJ5g4j6U/BBjWxMGRLO8UNmnV+amAiEA0ygbFW4bF6U48/lLTk+gX2dqGxqtV0NFwJmUhBY0J18=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICrUCRA9TVsSAnZWagAASn0P/i9MQ4VJnBhw1Qy9WXFn\nWzQshcJlwY0F2OzkbwuufodrqJ5NnCDuwFz5G4AyIyUDFV+SfDlfTPiYsX2/\n6xVN4uhb3+kTi4kDb+m8Ma4nS42rsjeorniCHDKJpEhJgDxBlhHb7eRc3pXD\nTLGf+6mScUDfPNa1LjM2F187VZFgIl7w9JFoZt9yi1DISujsKc3mII2nGZmK\nDlFARj6qNMRsm+OKVrasSCWIIl6Z4JCALmoEXgsLs51XFI/TfLKjqXvc9sgj\nEq5Kas+EYbuzO2EAJSZziuMGd5acfxecAOMgxjLdC1Zp28D62/+G/ZQCe8tH\nvB1HE9FtNtch4TqJwW0S1vsE2SUok6XhRSiP2buU6x10MX2O9uMhBnSHxrkk\nwT0Bwnf5gjP4pgq2XV2MJLrkMit5nWdGHqmRzzTqrhs7mst/yuWo8jHN182s\n3HFLjyYmoyU63AXPr3BhFvaMipQHN8eH6MzqepXSqLDUC0ebrsahIcCCXJ43\nZ05lnH95BfLtxaQZGK8jHFIUmv/NsE2PNGaeMBexiXtq17GmnFwXghd/IZ9D\nHEY3K8YXHGAVLoee01u0AXUWP7ImlUFcDEGbVzgZr7FOEG+QHoxQuGrTmtwj\nH9J7CZCQ/cSD4g4FikIPyLfGT0tyQBypKs3Ri1HCGdfr1FcVSUfh5LrhWstd\nm2qk\r\n=pMZQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.28d0d75bb.0","@material/base":"13.0.0-canary.28d0d75bb.0","@material/shape":"13.0.0-canary.28d0d75bb.0","@material/theme":"13.0.0-canary.28d0d75bb.0","@material/animation":"13.0.0-canary.28d0d75bb.0","@material/elevation":"13.0.0-canary.28d0d75bb.0","@material/feature-targeting":"13.0.0-canary.28d0d75bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.28d0d75bb.0_1629498067936_0.09381720906931923","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/menu-surface","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.21ece5360.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2898c72e9f0b6192b92a530a72b97b504ad3e7b8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.21ece5360.0.tgz","fileCount":37,"integrity":"sha512-cyV4g04+TsHDau6uivJ4WzCYJXJMVL03MxYGVgfm6f9E3A0dhlsTjalUkSvHs4EG/Amzl6hqU1pyG7KMP7de9A==","signatures":[{"sig":"MEYCIQCbK8v7uuMw0EDGmoJ/E+VUZ3GqcSSBDdLu1lXfUWRsvwIhANbkUji+76h1thrXXNpOSDnhJv3hsdxapKYLOT3balbW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID6GCRA9TVsSAnZWagAAUoYP/Rn9nmc4t6FrW8T0u/Zs\nZmrtY5uZfNjQktEOStcN9FyWRu81fNlbSvBL4KVc/yq7FSAnhT/tbU56uj7b\nVuxcY1cAJfh1q9ivzYtr8xq31m1iIL9C2IyFfcHfxXVxH4V3czJKS9WGs7t+\n+F5jmKkFoovNzA8J/SnzPm1RLfATtu6vYQ7FB7GJJJfUUEbc4zMYAsZuWvbh\nwFJPr3lOvg9GNy0dUsO4KsqbbICwOQcEaOOe2zlVQwGk5ZeDUKvSqnf4HvKB\nxvJ29w8Qa+IvdgT5JMKfbg+qdkS7mpgACeOBTDvImhTeHkPlGtPSfycgdmj0\nNJtMlGczV7ykr7o70Ziwrt2hqOkG/isBrVXA2DsFZGJhUBmcI7fWYiRWTzwB\nkNSvQJLCAsAKlPLpXcsm5bp8F+AfJrNsgztcyU146lj3Wbph18RjrISO0qCx\nZHz/FwUtnrDUlNlrL3WzLTf8Q6KgS9a02am2OyUbJGt++4Bf7TWesnt5N/cl\nVFC+HS6l8LR0E1C+SVulpvTh5Hn6DscqvUUjWthfqX1j9ZE6G54A36ref6ir\nxEJwyhonLZawvHzQ/cvoaWdBW+XEbXpydkvYq/BFN8L+jeOoFVEnT46zfKUE\nXv8XQQkugVMkzYDbh06lWVhwBJgKBRKW0tp8Cd/etHP/5L15UFO2KGsEYlAh\nhtZw\r\n=H45e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.21ece5360.0","@material/base":"13.0.0-canary.21ece5360.0","@material/shape":"13.0.0-canary.21ece5360.0","@material/theme":"13.0.0-canary.21ece5360.0","@material/animation":"13.0.0-canary.21ece5360.0","@material/elevation":"13.0.0-canary.21ece5360.0","@material/feature-targeting":"13.0.0-canary.21ece5360.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.21ece5360.0_1629503110151_0.7666936272846958","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/menu-surface","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.8de07c02a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4adbe3c2a7284c0b4d73b14002a1e61150875d56","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.8de07c02a.0.tgz","fileCount":37,"integrity":"sha512-ZxE6Qs1g9i7bf6V244Ub10tFWlODDNV6+q1KpvtKHgshojdHYrWFN+ge+Z+a2PQb6MQIO71bSNTTrTqDyPrDQQ==","signatures":[{"sig":"MEYCIQDSphI2Xl2KdeI+LxprmfvdtdNjZ0DQsfS4tu5s57iH4wIhAPcuchVrEuW13F7v67ND0SjzbWIzFjomVePD0GgUk8DA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI75iCRA9TVsSAnZWagAAq6sP/ijmkv5s8g08U3BDYqng\n7orBsPq0vMRBirHdPBny8KPXjPUMcWOhrpbQQ/0Ih6ngCObJJFRF/jqClnja\n+FU8BIxORWHbL+kL8omNbB3J4e0bowGYyVx4w55StyWLMgvX4v1i24yGLcXL\nbhM92ny4WPnOhwxLepguo/AEps8GIVwCm9ih/7qbs1iPRCGcHH7gb5Ie9PoL\nm4aT7RiGo1dzvf4k+j3n1mlJV7Zv4X6Zg5rF+xp7MUeOhDemG4+AS26HN16a\nqLrvdgtvDnxOQEugQDVsqV1HdzjA1qbyy0/bW61dD5tCf6yxfzgaPQ3brhDy\naoRPh3qMn7wM4swLRXEuu60wSDdrocGahYc17g29JK8usAL+3ld39b+pXr9U\n7Ix1nCgVbh7ffaBSOOgalosJKd9N1Qkqrvq1xFFO0iDjgbuf2JunhL5KqU8J\nj+mIJfwIqbKcMK4mcsLVxTJyeX7jq80s9zfrSc4Io1JflN96EuxCTLU4A6hU\nI/SonI4tAjx6QQNTy7sx96fn8h5yBY3tNahqa6M3b9FNAwL8Y1ltIAdHlFiq\nsNHFyJnaDHSb6AfOy/YN/FQ3TZ3TvJ6siqeRBYWriOhPaGcTARKN5zc1dKoG\n/tO+SZho7vmyGFud0qimaN37Mosq3Z+dKy5qVaFEs7qgIOHtsdeP0gXJa0Is\ny1Hs\r\n=j7vl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.8de07c02a.0","@material/base":"13.0.0-canary.8de07c02a.0","@material/shape":"13.0.0-canary.8de07c02a.0","@material/theme":"13.0.0-canary.8de07c02a.0","@material/animation":"13.0.0-canary.8de07c02a.0","@material/elevation":"13.0.0-canary.8de07c02a.0","@material/feature-targeting":"13.0.0-canary.8de07c02a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.8de07c02a.0_1629732450708_0.15273742808263013","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/menu-surface","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.65aa63b0c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3919be5b194410276e185a59ef5bd3d5af73d644","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.65aa63b0c.0.tgz","fileCount":37,"integrity":"sha512-DyU9BBRGkj0bDqay/3CQHxYILAg4eYctPk8i2CXcS9+fTDtPuM1M3oZdDb82vuiTUOJTclBqHmP9+1y7gbhGzA==","signatures":[{"sig":"MEQCIBrYLgPEn2Epv0lXZ1TIo7AuKgrZZUkcBiXMb7YmmqmzAiBKiVga8bnOdhj+32sxlRe7NwX66MeSRGpf6h5WK0ykdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRBiCRA9TVsSAnZWagAAC/MP/2Ks7nyXWeR8NuUhmtB8\n5DoqxxNsaIqp1zBfIK2/Yxk1mIbi5I/o8973TCUlj9M8GBBiUoZWddCu9HbY\nCKBRTA+30NO5gMblGqedwi9/cXykugJi1uWgxpCna+PaY0yDPzF37j+AcQNU\nA+AAAnBA/aoeqinbyJUlM3L6gott2Hnm/ASJT+1+zMCBFDQ4bsjmRCe/prJw\nSgDmLl+2E+0i17TcjWHkGCLRUDkMYrpZA9s4hYkhKpeBhk9iu+XC5DgRCUp6\n6Ou5LJW5MVu4UHHxwHw5MpG1IDdYVd8q10Pbm3VjHTOGVqbs5SY0L1xd+aeA\nrqSrvIdBJ9bjOSpLPcwlTWZW1OiN8WyWObswIhQnA0cjxKpwKLmXYt1WihSG\n7GdD5wbap8Y8cyyxqpGFKSJzYWxrIFG5UoAXljDQPlIkQFCKk3m6ocKffrIT\nXabrfAaNYhQjjSlIeDej4u1mb+eMh4eoc1B3SanKPAWmXq94U3JARelBmqDw\n3WNTzP8P1zETrE+JaaVaX0S5i88DJK4bpAcPf2gnG6+WxD2nfV9V5immL8aA\nnV9moLsbtFofGu3zJtijz/pEZwMb7/CcAvz0zM0cGQxiDF5ykx8jRW4qgCwn\nilc//2kAuvUpb5eKIYJMDKDKPPtRNgO1Er2XqA+VbZ7iv5M0cCCcoDEdS/++\nRfRp\r\n=ZRwR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.65aa63b0c.0","@material/base":"13.0.0-canary.65aa63b0c.0","@material/shape":"13.0.0-canary.65aa63b0c.0","@material/theme":"13.0.0-canary.65aa63b0c.0","@material/animation":"13.0.0-canary.65aa63b0c.0","@material/elevation":"13.0.0-canary.65aa63b0c.0","@material/feature-targeting":"13.0.0-canary.65aa63b0c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.65aa63b0c.0_1629818978295_0.24930069244756692","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/menu-surface","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.15981e9d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb2d5a7857acde863f7602faa0f87dd275e287e4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.15981e9d9.0.tgz","fileCount":37,"integrity":"sha512-ZOxCQbZKAA+a1cNL/nIhdEa5wvZzqXi5Xfc65tsILQpm1h+hU61FW932+JsqFLUygS1yZnYp13IPRnBsW01odg==","signatures":[{"sig":"MEUCIQCWmKgLNoLLtlwv+egcj/XmeDhIIPFJWDjinS6y9j1fpQIgW/kIP4LZ7BEgYgo1iz0pHrz8XQANE0T7prRHm9nr4xw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRu0CRA9TVsSAnZWagAAPiUP/RC/NDqafyhelAHyNNOj\n5n6c3ZVlsjx3IphNn+IMOmQXU1Twv5EUy1ofXyPRxizh6vbGbcsSjDfIKhK8\neXKCzmbjrReBXEwMCaQB4vRrYtW9P/xJT5KlniMiWT7wq+qWu5uPO5GEGR1/\nqeeQxhXqEdu1q63bZTvSwYvUe+GYHHT2+T6QfPzIf/t+X9+xAWfPrDYjAP6M\nAXf+Fth7NX71+GEk9uodjKlwyvFSLcrK+Xy4MxEjJbMqBqk0fTiSv6vfGJ2f\nxuVyIzqqIEnvzwJJ7jOVulJJHJyH5pl6qzQ1DKpzzswvzHFqGQYyrLB+jvyo\nxnjfhTC7wlyYaBAWooIZjpggk533e/BFAxyfB9CFiRzduawj6TNRiQrf7tMB\njZ/NXW8PQGvOMNrkxomIJeI5PjjfnKUG7Wdsyx35P0G1Win8/ehIF9iSduLs\nytJiS+agTK6FR9VlMfqVBVp983IEz2iWzJhNFir+H7qffSPN4C82OIrYQTqg\nignsTDF9Y1GhgAi0zsGs3UoHJ/35tEpsv55sYNycS/QawEzkNf8m8beh/R/U\nEqDmxe6/kppEpN/JUxsz/3fPQ30SsQGw7q51CNILrgQUiE/6Bxh/pehZnOiV\nm7iANRZzMpuBtic/41Oyod19RbffQBpALcmrC75ajiJz14TH/uLa4akXdh8b\nPc77\r\n=CIZa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.15981e9d9.0","@material/base":"13.0.0-canary.15981e9d9.0","@material/shape":"13.0.0-canary.15981e9d9.0","@material/theme":"13.0.0-canary.15981e9d9.0","@material/animation":"13.0.0-canary.15981e9d9.0","@material/elevation":"13.0.0-canary.15981e9d9.0","@material/feature-targeting":"13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.15981e9d9.0_1629821876585_0.3400407497959137","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/menu-surface","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.fa7520f62.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db060ec1026e051debaf6d14d587ef5063106f58","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.fa7520f62.0.tgz","fileCount":37,"integrity":"sha512-cG9co0rFFHIn9MJYdNxQ1Icb3nGXg2i+CGx5pagaxt/4s0+GpSN9th7nt+1KgPZSp3c7Lg4jaxkOj9HaIzDJIQ==","signatures":[{"sig":"MEUCIQDjfXvFL3uFdno+bUvNUXcfxNPFNum9TTNkxiCS5IdtXgIgaKzVvAhfndrBjNWwYrXJCuLIqrM9q0ih4yw/gN1s6vU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXKfCRA9TVsSAnZWagAAyaEP+QHvhE93UQe21UUZf1My\nELgrjc8JieDfQcE6cip8xQ0YQ3sC2guB7p/upzsnmj50QzhSJ78C2Z0OHP9E\nrifSXwwv+ALcEd8HZDyIl0ohNn8KJsrRiLhe5ryhYHzq6jPUz/sLRRjIyxMm\njRQvXuT9HBN8J59qcNCzS9r0ARRaTdVTvls+1WPbDp3Q/HuHxUaUjHex9ZA1\nViUzbkb/0QW1WalVJayuzUKx4u4f1rVg13DGiii1MOZ6/pHPrl1BqwD3eQ7B\noFMM9L62Kaq76xiJBSTyrS31hSwaHiqv+pmz5cLrE8wFdO5muSvzN6AsCA7j\nEHg6bcuily+Oh16aszhqhFVjd5GvPritIracz7OdTU5hd9AQElYtVgcJwwo5\nZL3yEPepjXbAFMHdK6d3Q1ifMsbA0MKha5PbDlHw/x9MmR8ZcinM+fZ4SLxL\n8S4tVhNXXK07tNf3M5/NCvGxeaiHsPvAv2+MrqDS7eBzALa/pW4c2ujuAv2E\nV1c/ZRVNBp1ONWVXentwvXqOctnnvLdjhZPR3ns8oCvRsQK2wlgv5qghTrhX\nj6n30V2jduERbo6fqLj2ZHd67IcxukPilEsyoN6pDxvr0FQF9ihnmAEiAh+9\nWYBOgR2N4HEt429bsh+m65ZqMMEG81w7Mf4iaBqhQq7e+BgXoeJlab/VtNUs\n+kKK\r\n=NBnn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.fa7520f62.0","@material/base":"13.0.0-canary.fa7520f62.0","@material/shape":"13.0.0-canary.fa7520f62.0","@material/theme":"13.0.0-canary.fa7520f62.0","@material/animation":"13.0.0-canary.fa7520f62.0","@material/elevation":"13.0.0-canary.fa7520f62.0","@material/feature-targeting":"13.0.0-canary.fa7520f62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.fa7520f62.0_1629844127074_0.5001820519994105","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/menu-surface","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.ce25bc3ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a44de28d78faf0f1deb411d56b2062271445cde1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":37,"integrity":"sha512-B+X/mL0kiY2kxE5m4iDnV7QVXbSZVzxi/+0BZDu3yv/luTBRmlIBy744el4PXhiu9Y9kePG8FbbgICuF5fJt8w==","signatures":[{"sig":"MEUCIQDR+bfoXC4Md8HmvbDKENRLhYm4zxb5Gmz7tPRVD/aGogIgBHkTVUu38XjKxK6xu6CnnGlu+8KNdItUM27ltlAWIGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXdxCRA9TVsSAnZWagAA9qUQAJFO+cQ32r3nU7l5FKi4\nYcyUf2c8iDZ3IARvagMgpAe1z2FYd1lHLtzYpwRBySH2BgsQGPh3QbMihBFH\nwiMi4i2rQ3kL4+KsLzIeQwtFkXz2Jw6ttEeF8ADu7OlLiLd9p/DqfGUOxaWW\nZdQhYKQDF6mQVeZ0aMkNezcM+cxI8XIClhk7PuwLXNnrQHQDan3kDqcuoj0o\n8gKlkBKrSyA16zoObGUVCxaMxyrQJcr3SiQZ1aDUCYJ17wX/QjaMMP4Pb9za\nEn4BNXPkIFWgR4KpTF+5huSYHPyW9bHI4bILBMuAdmmdban7YrxwB7qhSvYt\nDiACe5WjfYDmRI1FC5lNVJzADzXfDeDK3poNVgLN5jGUX1eBTNObyd5WJzYc\nziElggtHOwK35c1HKvznPrlCixJtqx/PCT9NWSHA7dwt936ik4oOgyBYStmG\n6ubYNWXkaBC7Jw1yfUk+Y1g9hERiY6X+A20IadV5gjSmtQHt1NFbqxIwXs7V\np+gSAL823osx7uJyPGDSSHaDBgPyDY4oZjJEYBLQXsW5BGocT5DjycUvoDFA\nkYhgaXgZQcIApWywAtXLViJtv0RyrSUbGxWV2/bK1gpnmgMPLM262dv9OccL\nqiJOmr3cwxvtz7BKUPAV8oKbuzh0hdZ7U/QAfirU3SBTqd3zhdRdWTxLuN1U\ng/Y3\r\n=EPIT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.ce25bc3ec.0","@material/base":"13.0.0-canary.ce25bc3ec.0","@material/shape":"13.0.0-canary.ce25bc3ec.0","@material/theme":"13.0.0-canary.ce25bc3ec.0","@material/animation":"13.0.0-canary.ce25bc3ec.0","@material/elevation":"13.0.0-canary.ce25bc3ec.0","@material/feature-targeting":"13.0.0-canary.ce25bc3ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.ce25bc3ec.0_1629845361451_0.2525696989580133","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/menu-surface","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.12f5622e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4946f56e37cb9d1b54a927d8ed358b6d5c827d98","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.12f5622e1.0.tgz","fileCount":37,"integrity":"sha512-Zg8YodFbKGOfeVzJtyQcBVUsGlrlEBaL03a83cEMihQ1vVySU2hF+1LuGrkGnZayWpWYnXuHDKudYsbejxJOOQ==","signatures":[{"sig":"MEYCIQCTPAWJavk/ofX0405VFj1e6SMH+rGgyvE1oLLHtrCwfQIhALpjlp0qs5itkKkeG2NcF7LCv+zRw9S2hHrPo3yMFwz9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX5pCRA9TVsSAnZWagAAE2MQAI/lxAPJfn8PAmupRKoc\nkIpAA+hkUlfgmtfyWJnR2E2m9KsR1JI/rMatsI4nxgJGs+eZyWSJEbIVzPad\ny5jfG11Vz4nS27z1I3YSlfrQISzgpSo9Lu0sY3SYBp3cLHW4EtR4td6EqXMx\nQ//9xz0oySaviYaReiVj0Idr1fMQiOL4wEo4M+oHOJgzddRa+lCkYHh5OKdy\nFO/VT6Vys8Vcz/4n4qBBBcdZ/j/lQksqz345G3d4Qe2OXxlOAlV+EATfDzjE\nchuP/B2dyHVUwpWDVzO1RDLdCXlEKmTb+KIk/9OVFNfVoO1K90wE7ywuZXRm\nq3nweXYBlfIiXz8Z/I9UWgOHX4KYbUmUw/Iw60G4eD9XCo0rh08hWcJKqqcQ\niYDIJBX2ZC3AH/ascRYfMcKCLiTIu2eo5WKZu/XpIL7S3Lo/3cf2Z31mbRo1\nUVEzTtER39yKESakRMs0p/1EACXxotoA98B9jvYaVVZ5HRkvoq0sMBXpnVpN\nvevhc8IovQOE5jm4GPXFiWKhbwRoa51A2JIcLG57qb3iRgBc/6X+GPh7Rdwv\nmG/1/TUYMlHVer5uKP9ZeTlRznjuSE+lOgQciQPfkB2BBIfUKmowTg/d6tGw\n9dSRbhCDMhSvV88Ak0QtuUcr0YddVqUWcfXLwxa4yP7x9hMmlOyDjQdp0Db9\nzFrs\r\n=u9yc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.12f5622e1.0","@material/base":"13.0.0-canary.12f5622e1.0","@material/shape":"13.0.0-canary.12f5622e1.0","@material/theme":"13.0.0-canary.12f5622e1.0","@material/animation":"13.0.0-canary.12f5622e1.0","@material/elevation":"13.0.0-canary.12f5622e1.0","@material/feature-targeting":"13.0.0-canary.12f5622e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.12f5622e1.0_1629847145105_0.6507936010331568","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/menu-surface","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.d97f8f133.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0238761682753f20a67f6fe0a5ad92cc48768886","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.d97f8f133.0.tgz","fileCount":37,"integrity":"sha512-DRrPtM7v9CcoJXPJ5FLP//7jRIHVNyptHvMiW8AJreQhT5ePMD/C7q7eJphHvm7dTIDqNkDLKZ7YPhqvdPXtnw==","signatures":[{"sig":"MEUCIEsUDS7aDdAP4hv7DRKUK1C0g3KAPAE20oa4zQ8xphfUAiEA+GZgQFfg5vAf7+c666Q1j9OXk6iCBaBy/8m1JofAZLI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJo0eCRA9TVsSAnZWagAAMs0P/0lM+5uas5si0zMly3pz\n3LFErvUt4o5lJooesINyVNWtwq7RbWveZaFnZMrIMcLNtk+x7Zj5nOOdMbu8\nLt5Xmd+DYZOia4TcOvGkbYnJCUBxtQ4K9KXebdqMRUbvD+X5NWSKRpLwEfjk\nW15aampPAlaz1EcGtKm/OnFRa+k83k4fgrejhm1RL07/oaP6POFqykoulWFm\negRcdAGbxLlrhFvNYdptAshy2dM4swE8jm4Bn4APnd0VVC3I1nf8Era2Jttb\nev8zA4YV3+QVlEPnF4lsLNZR7fA10AIPk2nywm1sA3fJq8MIEgsb3j74QUkp\nu3MZNuZwuivMzOLpP+392bwLD3JBrp1em5JUdqDc/XpCHOdgV1AAI02kezoW\nhF8+nL8oGDT9iwqbtGEiUa2hFjPu0upKzjUZwbnNDLUqYmgwASQ2L9PSvTkf\nYTfiDYI/MSr+imQGFl0ZjhFOAah7m6TzMzn02GNNFFcaPcUqXDN8ag85NKqO\n0qBcXofoZ700m/ZpC05sh9GTPcY2le/boAx5bBWRgg7MNaQEUPGaJR0eWcbE\n2TB99fT/fpwOC/8owxbS9kD3giheNOivYXW3O6n66+HDwgEv7/dU4rlKdB05\npZ8tiBUJISq9sHCl5aJ3hzeNVHO7d/rYRGR9yKp5/schQOL3rPxVhOMQuDqq\nlz9n\r\n=UbBh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d97f8f133.0","@material/base":"13.0.0-canary.d97f8f133.0","@material/shape":"13.0.0-canary.d97f8f133.0","@material/theme":"13.0.0-canary.d97f8f133.0","@material/animation":"13.0.0-canary.d97f8f133.0","@material/elevation":"13.0.0-canary.d97f8f133.0","@material/feature-targeting":"13.0.0-canary.d97f8f133.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.d97f8f133.0_1629916445995_0.2873323073905485","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/menu-surface","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.d86fb6fac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"174c0057b33cb4bb242985d2e9919aa56470009e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.d86fb6fac.0.tgz","fileCount":37,"integrity":"sha512-QBZ/L/qXjws4XbWkH67fG3WjZhs4mziShjOTaJFdzI5eL8eGn3+9Jyk8BetcfII8LxbNv1OjBk4B9gV0yufhDw==","signatures":[{"sig":"MEYCIQCN7rpEOKxKy/pkMNtN+0/tl7h+n4xTP332CNdpEIXwrwIhAIz5LUAeCP6x96jlxWA7iMVh9NOCHmTVX9uuasU6b/5E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpHyCRA9TVsSAnZWagAAVL0P/19DujU5zrcgpNPMgp76\nYRQFBXRqBh3nyWcK5rBgsREDsl1hNuyTx1RmmNyjU6s5qqrdVsb7ElULxjHZ\nRBDgGSVMXACzMRtuY/PhvcYZCVIzJEjLYLSDZnv08ZlYIt6ADeDRNcGMw8p6\ns9XlNMEqV617nFbGhn7033Wwkzzfaro2Rz0XlqNx5f2gNz1CtSUr4ps3sdF9\n83/dqJX6rvC2KqzIutS97ZwCTvZuBQ7jqzYyKpYjsSUevQAH9xR+Gfn+ESFy\njzPvYL9SqLP1xjfjmsfZNS5eNUKxQhfunnyv9cmZqInfpF4KdBGOnro6wKSm\nWAF6meuhBRlFu+HEqdhwuqBAD7/RVQhk1FOXWY53mx2L53T1KS0RIhDI+b9S\nXcKvdvCZvC7pfsJvK0FCM8E1Qoe1tcq7f2Vg/wKG1jUQeq/bezMAUEn4ICjH\nu6k/D8smJTJEYG3iyPWBzTwIuSErY2tII7KgsbR+dDQmK9NcybhK1dGYQTPW\naiOyUUiJc+5qIMSWNx/54ov4gaQdi6asmhYTb84A/Em744BrkUSGJ7/zZKKL\nBPw9Hgqo6Ln2LRz7+g43VrRsbRbLpasn/xdcdjM3WmrL4URQvBhf9Ipi40ib\nWZssrPV/GCYMe4i8nVrgbTcNqiAlKStLCfuQyeiODa/U0tlB/xrqRt7aO/2e\nyovR\r\n=m85I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d86fb6fac.0","@material/base":"13.0.0-canary.d86fb6fac.0","@material/shape":"13.0.0-canary.d86fb6fac.0","@material/theme":"13.0.0-canary.d86fb6fac.0","@material/animation":"13.0.0-canary.d86fb6fac.0","@material/elevation":"13.0.0-canary.d86fb6fac.0","@material/feature-targeting":"13.0.0-canary.d86fb6fac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.d86fb6fac.0_1629917682309_0.37158505760786653","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/menu-surface","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.e8554dbbf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16a8a835d9e01222e042007025774f40480a10fd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.e8554dbbf.0.tgz","fileCount":37,"integrity":"sha512-8mBkgrCR9ZroNAAjsrTiAnoOLT6N8HPCZhEUZFzlKrVn4hY8KmyyLikSVbxbNm/ICdbioZ3bZHtXzfP4JOCsyQ==","signatures":[{"sig":"MEQCID2bmcCyVuShmGsqXXEwGJyBkGxXYLKiRI/qkk3OrtMbAiByTTv6T01WC9oeRBOfhCCfxn01cMECMkXdaR1SJ2TRsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr1vCRA9TVsSAnZWagAAqJcP/2EENIxyBO6c2rb/gJtV\nLuHU/ElBhfkIvEXDZL/1co+T+VrzCCqmmSFJ1jv3Na7y3YbMCEuLCFSOLrTc\nJwwsaurgSOJn46wTg++O4P/zoFrJVEUxSk9fUSljaaam8vs1I6X3tp6WX7wi\nCruHCIFGOETGbkqrA0fGhoThAFiQU8ueRfSfcMwKe5l4dzm4JDo0rQqKiXPj\nNpxuX+wSi8QGpHXluXm8HdFm2b3YVhEmD/o5SWSL/9NQAHy8brxBxNy2GmJF\n+LuOkGVd7imkBeLeYliXvKcA/kqiQdA63zkznIf0HTVk82oIlVwQwYg40NEl\nEM9LDWjLKijGWJejf0Eb0QTf6lVdjw1wuBreapkVRJwrR52hoA0ZFRUU3ooE\nPC3MuVh2OCeiiaj7ffz40AaFCAQDjwapbJZFYPTd4xsRyw6ezrchyh/DyGmr\nEXQuNmogqtEz249zXZoocc60c6+qb47rYGuvThCh3GkECo20ijjbTG4OdP8v\nf197gKO4gfj6Br7MzxQslU0k5j/5318p+3ESnucLj9sUTqDBEQrhtJ7XcttR\ne6n8Q25ujANYYICDgmtg/vZfPEXnYrTDblfo5AL3Gmesa/o4dTpA1gnwyVGt\nhjgfVYbF5HSe6BHaRGQvz+V8ts5poGKbI+qnHYZMLvRDusIqiYTO8e14wl9w\nh0SF\r\n=7Nev\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e8554dbbf.0","@material/base":"13.0.0-canary.e8554dbbf.0","@material/shape":"13.0.0-canary.e8554dbbf.0","@material/theme":"13.0.0-canary.e8554dbbf.0","@material/animation":"13.0.0-canary.e8554dbbf.0","@material/elevation":"13.0.0-canary.e8554dbbf.0","@material/feature-targeting":"13.0.0-canary.e8554dbbf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.e8554dbbf.0_1629928815721_0.9448052138402641","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/menu-surface","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.877e3fb0d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb60bc732a2ec4224875210b26de5713913ece1c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.877e3fb0d.0.tgz","fileCount":37,"integrity":"sha512-Slkyxa3XGoYre7fKHAcTOtJ/wWNJM4SkPkKzcbXXkAVleNhp36nKaZPJwnBTk5tMUDo6B2bfVOSMCqLuoRHPBA==","signatures":[{"sig":"MEYCIQD6DnKVafj8eZh0afU/WjmO6O757k4aROzf1Y8QNRdrjAIhAKAMFY62ZNp/mX8CXvEUHfoAJGQbkheVaUOEgg28H1vl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7WeCRA9TVsSAnZWagAAluMQAIeVUT/HZrSqyzpIZdU5\nTlJmklsUPLOtnNBpcGPQ+Vm+dvwbuEuzE5vj58/+wvt5BapTZ3p392tzzpm7\nHyw4+mfR/D+ygX0qp/wMpUVYk8jRVq66LsWwOXsKZwJVuRiPRraXRDbTyHcG\nhHnHpxc2pkfszJflwvYNIr8Gtp2MM16rgCaJNGULvaGhadyUCyEU7h3/Se7Q\nWdYnXgyDqxQNFBcY2m6mP0yrHeFfJabGWBVS3N6d8l1vZ89JE1e6UvaMNdo4\nj7zys4lmgJFqn1SdufMkmDvJd+CsORt6xjmH2uS/r80rFcS8r+A8kLWKrpLP\nYallTuILc6VB0sZZFhv0VJU1Shj0ok6rw7EOWRpC5gC6UU0Kr8k6XkGIfn0S\nHsZE7C72UdBWbygLsuHN8/aJSrIPQElGJVOKnJMb6iTeuw+1DOXQgRmIsf9D\nE2tEkd4aSgjobf0UGNBqJbXn1rLWU4sQK23bDZyoHGhWTB+jvzqfDuedWA1I\ndNVRYDYm/Kurdb8UpVjkIfMLFzdla5CcCKL3fwtoiTEyVTttZ1e4tcm59YjM\n/OGc4GAY+XEnojhOyv2gHsUVkprQkuC1vbtM+xEGjUJG3MFEzwg5i1sp+iJ8\nZYLZdYRVRu0aPNlWtQvDu97j1YG6JzMBxNv3+h6aqhCs9EcOXQmUHC5rvXM4\nhQN4\r\n=VTak\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.877e3fb0d.0","@material/base":"13.0.0-canary.877e3fb0d.0","@material/shape":"13.0.0-canary.877e3fb0d.0","@material/theme":"13.0.0-canary.877e3fb0d.0","@material/animation":"13.0.0-canary.877e3fb0d.0","@material/elevation":"13.0.0-canary.877e3fb0d.0","@material/feature-targeting":"13.0.0-canary.877e3fb0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.877e3fb0d.0_1629992350605_0.7906474298116826","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/menu-surface","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.6236f3576.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36cc728fb12d0ddcdaeca8deacec5886d297834f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.6236f3576.0.tgz","fileCount":37,"integrity":"sha512-Q2lIwH0GSuxWwbS62rHAOt49gG3IV3XymrMggeZDBvx12AoC9j+Kd5WEXw3aFyEQdzhWvN8ENum1TJCxZqrO8Q==","signatures":[{"sig":"MEUCIQClrs1NaiH2MAxSKFp+bxlhaAzN3jnBlhPdGP/yQqSIsgIgc3wb9xvrN+qFTmBcPu5qrwldglmiXznNF57nxS5qr1E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7wXCRA9TVsSAnZWagAAhhAQAKJd/RcduGK3I/g8bsOl\nCV+ZxwtvhDUta6i2x0LMwFSJhAI19lxCAREzCj3nwaaqtdiI5wBdr0mrefkc\nTBU35QT1X5LUUB89HC47AWhVR1agIMPPkwRN6UOBG/hYgf69IJUDLfwtLM3b\n1/zK4oI11NxGBPnfASR9O9vxIpspyvFr+aVo+B2izyOkK/ux/OIQLiQZUf88\nMu0Uosiv25akHYQVbWH2mrt7bq4NLgHVjuk811kD6zrUWm+/kWqc7VURQt+M\nZpR87XkBR4bz9MFKmdk0ds32M340z7SHqTXAHFo+kSnmnPEtCXQvIUcxA0MW\ndhfO20OpxM79U7Bu5qLopLvQFmJJtzQQCjXdPF/l6bXBU1JD3DsVe+4eY02w\nZXsgwjKV8Pn+oxXVlz+IRsIuFLNqfnf1eota5Sj7NAArv+VMnygQr/ZeHJik\nRveQpPnT4/H9WYoTeN8CSSuJmQLng3XSpm90e2zPpzxNdbg6nDh6kOs3Ef5j\nXZPfD8FUwRornCsboGGeNeDCuupQGWzpIe38pWY7tu+OcohLoYAxD6SFRGHJ\nJQm25bT3KvpNw1+YkRRBvNrIPZOn8TIpuktUFLLTGrrXljfs9Q7ftE1ZnLMC\nj/f5jrF5t2nYsApz7B8gpuhEVy1WEWJpgGfGWmRXp6hmdU7xf4qus6TMWHcJ\nkzsy\r\n=ae+x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.6236f3576.0","@material/base":"13.0.0-canary.6236f3576.0","@material/shape":"13.0.0-canary.6236f3576.0","@material/theme":"13.0.0-canary.6236f3576.0","@material/animation":"13.0.0-canary.6236f3576.0","@material/elevation":"13.0.0-canary.6236f3576.0","@material/feature-targeting":"13.0.0-canary.6236f3576.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.6236f3576.0_1629994007591_0.6986652158565785","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/menu-surface","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.1d19158a1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2f3b9e81c4cc36055d30a9455db59a1c8e45f26","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.1d19158a1.0.tgz","fileCount":37,"integrity":"sha512-RqL+dGS0QORfuyks1SOxG2ZkNBPL6hSKgZjGNOnABCU7DPwE0lK/Zl79FlTWRe/4+5rOKrxSPCekJSIgP73HtQ==","signatures":[{"sig":"MEYCIQCzM/PsM5QnhFz6HVQ2+Fqtf2C8M+SQ8slOa9Y0Y57avwIhAO9zvSG9H4CDZ5AbN7jksk9j46sk3ZQPvWA1rpqCefZu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8rwCRA9TVsSAnZWagAAYXAP/2DJ+A2UMLN/dDYWcRxw\nE2bkf8Okdzmzc+E6erWrScY4oF2zrlFPfmnYxC5tj7IKik0KJJBHwPPNkWBJ\nt4UZbsMJdXc5eSBzMwTwS0c27oG2f5g6CS2HdrWnoRiex7ZlyCYYw6RCTOvC\nw1RFckG52odCJQpZGco+X8EfJBGBb0KuOUOltAPZkp7toMORVNZy6ar3VouU\nj6LjaeINcDxcTRNVV/JVd3tpY4KOJYrIIeBflfAbOvtkiAppaWQDcJfUOBQc\n5jEkHSFI2xSyACCzrpZ0xKhZG0rKgqwz0MraEmL24CcFI4qoDh9VMCPRLXDH\n5bNbhwK2/KDozea0GUIO97CJbFQE9lT4jCj80s+gdU/hTUtKdNWuuS7C9/BL\naCDDse0AXnwWYlyZ4ylrwwEbnyEeJOzCoi3T1Y/Q6gbb6dwm86VXL/BOOsg2\nIKPvwClaXeurfmACBSHqMda4VsWhRd8WwJzK00fj3XGzydA/deuYBiz/2FjE\nq1kySHJsOVzN79M8rgPIN7VL5ZsfVLQzYDAba2NUm+g3qidAr0pXBKa8sYhc\nbb/InxBLQnduoHlqoD5MCR5Q1oymMkHeAj9VL1tuanN2nalF4efpRAhsDrSI\nIK0Mrtl5wo3AtjaJDwKnqm3mhGcdA4vp2+f5AmnBvxkS/tEUo4PA4UNRTmod\ndUcV\r\n=PTvO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.1d19158a1.0","@material/base":"13.0.0-canary.1d19158a1.0","@material/shape":"13.0.0-canary.1d19158a1.0","@material/theme":"13.0.0-canary.1d19158a1.0","@material/animation":"13.0.0-canary.1d19158a1.0","@material/elevation":"13.0.0-canary.1d19158a1.0","@material/feature-targeting":"13.0.0-canary.1d19158a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.1d19158a1.0_1629997808809_0.2555878717839135","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/menu-surface","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.6adc9e83f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"617fb4de8317b29dc440caef3ca05fc73cea2ac6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.6adc9e83f.0.tgz","fileCount":37,"integrity":"sha512-9jDvTh//bLBQLjdW/DAq0j/90lzUDHN5qasVpRrE4ZkS1NW4VDRCOeZpGj8xcmU3dWsUEtQxC41Vl5GbqqEOjw==","signatures":[{"sig":"MEQCIE6ItzX1a74lzzurDe4V8GQMAqOuu9n4+T2yKXgFEonoAiA4o1B4SeK3d/ylQqEdjLqpFfWP9QWP/0QJS8hjL8weNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV97CRA9TVsSAnZWagAA5gAQAJ6K6LTFAGu6HdemP7F9\n1FRD7QEDFT4wx2YPi/VR+wDISTB9iTN/9rx5LIUAbp4y70WLya95XUSMznsn\nJB0YrNL9q0eqUem0h/vGux/4ZdYkUZM47BG5K94h8Q8P1vupNP+PVz1siPuG\nHrA0EdUdQhFcgyCc5tPKIhjrhctKzH23eby48KrFuisZrBSoxQys/xSeycyK\n+r0qmegXh6cRJXKkPpa3RX1gsF2iDHfUe7jQhZD+n0j0SUqjkP9Nw/kDOtON\nDQ/pdEAhmWcpRd2fkZPAEkMkBdXx3SdGXzcyLKfNkemNztYnAqy86OB4nYMW\nPRovovtcQcyPSCEliqKUPAXNCXrXrScCwwKktHXkwXolmJvK8DKLxyN0KG80\nJddDk/k//TSk5TLM2IitRvcDBFBgZl6XB3+FzESXIP+MbFwMc09z/9p1Q85a\nEIsuUzWqR3rJZwXtB7NTZokkmbLdzkk3VaXF8FqjmvRsOWOR5GbsTT7MLCBt\nN3DHWJS5VmYds31Gh1X3jD1mUibaAxeK+355nYmIMQkX/zAoZXiEMpNDOs8I\nuYPcwn8m4wkiLqMA6wIliBCScy4zzLztjCiWsw6le+lR3xwFIu3EafC3tU+J\nKLN/wH0i+BvPkRc3VFfRSo3JlYVzOAghaPi6k7nPKusSHwVFWLLg57ZBoPQP\n1Iuj\r\n=A0d5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.6adc9e83f.0","@material/base":"13.0.0-canary.6adc9e83f.0","@material/shape":"13.0.0-canary.6adc9e83f.0","@material/theme":"13.0.0-canary.6adc9e83f.0","@material/animation":"13.0.0-canary.6adc9e83f.0","@material/elevation":"13.0.0-canary.6adc9e83f.0","@material/feature-targeting":"13.0.0-canary.6adc9e83f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.6adc9e83f.0_1630363515099_0.8370038981394843","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/menu-surface","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.d082790f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e367df706c1b7a0bfdafc6678fd431cf45269f9d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.d082790f0.0.tgz","fileCount":37,"integrity":"sha512-j30uxCN1LO4qFOU6OqN9i78hUVwACI2SBDYDjO0gaiMKqtwfGmjpEPtvQNJXcKbKtHy2bw6a3oZ8HeWajvvRXA==","signatures":[{"sig":"MEYCIQCOwnOMwkBUW1i32rmBd2+PXlfpITe8WnhWvVJBtmejvgIhAJDJDCUcdO1o5eZgT2TmbOngY52YuHTRSIp8yh6xoQit","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/a/CRA9TVsSAnZWagAA39IP/jyYo26nyRjH9yZXZgTv\nr/IrQi/5aG5ECrJOMr1B65FntcmCoa0u/HvLroAHbV0reUAmRl+ti24FUuZf\nPLaTwPbebEAqtn37qm1rW84iOLrTAggTwRi3xEAqmbQkh63vVSrbL6yP2ee/\n3Ls06+fMvhcOGowIRGAo/NEotNT9+XkxYPs+ZtlG5Xzy6SO6i/Qzp7VC9/7F\nBZdujglsDawChzegsmnyX0ESRATb3ewzNFAWS/pFvTorIe9I+/3pc+HmGxgT\nOgix3ZxHNvZkthdllLndCLcZZVlMjDRZk4UQLsN5Us+4jI+4vD+8/HPJOk+K\njQYmEwz1Fpyg+4mR0Fh560I/mcmTVNZEcmJggM8RKZLAcOwxRgIbirqT2jy+\nWm5P/a2ficLE6JvKVIyb6QvoqH3wXEEOqQ64P1CqShPPYhXZCDK+sTlx7fOr\ngHZqKfgilw+TsMebNm4f+dphvPyOrpqqm/rfsBmv3RT+rYVeHItEXjDHO4yO\nvfI9QKKdxpEAKAKh0B4WZR+gI/trlJtfqXnFGQ1Pts8iZftpt6FbUyqyoe3k\nPwsUj5FARRnMDJdv+mLyxkR8298aQi4HDYiqr7rHyyAb6gk5pGkFuwR/IWLj\ngghk+pXhgGeSRhERygnHCkBdwwOVAs1et/rt45kLMwmTCVgyYI9uiqUe29WI\n3Jt2\r\n=4Rf9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d082790f0.0","@material/base":"13.0.0-canary.d082790f0.0","@material/shape":"13.0.0-canary.d082790f0.0","@material/theme":"13.0.0-canary.d082790f0.0","@material/animation":"13.0.0-canary.d082790f0.0","@material/elevation":"13.0.0-canary.d082790f0.0","@material/feature-targeting":"13.0.0-canary.d082790f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.d082790f0.0_1630533310878_0.16970898018560354","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/menu-surface","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.e2c4f0196.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50d0aa518ff51eb285fed28bc533700c1bd4f68d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.e2c4f0196.0.tgz","fileCount":37,"integrity":"sha512-5dkpF+EcfrkuIqrW8v2XkXkRiyR6yHy0TdeLOIpylo4gDRVdNad+3sEJLsI/zvycSf6UGM2m/47R6qttCwTIoQ==","signatures":[{"sig":"MEYCIQCvrvYI4lwcHT/GzrkuMa0kQEcO5QQLuAE8PwU2CL9ihgIhAP9oELmUXPa0ejXnwf55IoOsBTw1LuKyGlSAQG2Ikavo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDMACRA9TVsSAnZWagAAwnkP/3HskJoBAAK0WNJO/uea\nquY7nPuixKF4dSJLe8p3E+xasl+1oiLJ97aypoRDtjNquLXmsRCPTx1w5FmD\n6A9BzfYOMI48ou76VQpQ7rG2RvSbHLhXVmA3cgrqjfBCD4B6JmYc9I+lqxtB\nS8gzztQXWoOvnO4aWe02afRz6eMrIKKax+I3X4iaidv4SaXUbmSeE1/aT+r7\nh140NrCSYSFLDq4b/edxw8MymP0GrJWWKjX1P3ESpFbjVC+KJywW0w1teOlC\nwKaBIOLRbWoWoPtneET76YbAE2M1/jo51HUwapiW6SR/E0j1Jt0YaFierCrr\n4YWXKlWIjnjdQ9+Dr9mujRdueskkVY22UtXGteDNd4pRGWOphBvAdJADmxEt\nmXxDM3mUC0EZN2Z0diEPdbVANEhm2rLyBNWm5JypXVzHM/OkR2t/jAC/0ZsM\njHVS9iEDjixjYBQ4KBXJh4UY3dS8yywuXuAZd2DYvAHeDkfeYplkCVrllWMV\nAyvU1qQnKVR3gFRwv5WdNiZMUtuGxiQ/igo284YqK9ca87THnOjEnpld5cos\n/pHkYjbcePTjZLZM7fV6ZtXwONUjSCRVwEampqWgo+tmBFuPElZH76rxtU9t\nZZqDsUxtoUZq6WmCgK5RmII9osxTXKYLJ1NhyeIfX+MjQv17Z+Pe1D2uCeS4\nASga\r\n=wmxp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e2c4f0196.0","@material/base":"13.0.0-canary.e2c4f0196.0","@material/shape":"13.0.0-canary.e2c4f0196.0","@material/theme":"13.0.0-canary.e2c4f0196.0","@material/animation":"13.0.0-canary.e2c4f0196.0","@material/elevation":"13.0.0-canary.e2c4f0196.0","@material/feature-targeting":"13.0.0-canary.e2c4f0196.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.e2c4f0196.0_1630548736325_0.27090609663711196","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/menu-surface","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.611db508e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e6b170fafc4645e3ded0673913c67e7b8443d50","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.611db508e.0.tgz","fileCount":37,"integrity":"sha512-UTjwybx2MF1dvYudwKT21x+tzQYvciqOWSSVmrOt1/Yx0LLxfLgZLOotZHvyLg4eOKDZG69qtAUNxz2W5HsoXg==","signatures":[{"sig":"MEUCICBlCEoIGlscASDtGGmGkvhmsRkNgPBD+YPVphKHqjgRAiEAnZqY5IaLgcfRllCG88+YFVAou1uJWndmj7pE81hdxDQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEH5CRA9TVsSAnZWagAASXkP/3Sw0MaYDQ+m0Of3lG0R\nhfAX1NX9rs3NzTcmzLBp50SVWNcRT1ecrG6w9oIb4JSE1z/twV1nZ2b7pS3u\nXZ+AehAhVJkBhNkg0DmmvvFzxqX3J5iq4471koZs8fgkvpQZPrMg/g28rFg4\neY1+4o9txujQoZ6s6TPnAWNQqyhxKjn4xXZHSEU34n+tJQ7OCVGBMmeFXXkK\nDKeVHxyM7Q1bpI+ZnZbJOaWdyTpyGnAXmB3UWmVKjcNJYdfAkDXfjPdwEHwC\nwLhvJddDvgySi5/p0EsxqcEbBP1IpAzwTU2yghrvKibtDXn7lgpYSxLV4gqG\nN1vn0R3yGlcG8lCocKmtjZogbewZOmNFEFLIHhn/Bhb9W/PKOgcsVDd1Bo0Y\nw/32xEjRBEvvI4MoCoKJL6OUrngduPZ2YnYFG5cFlPBpnOumkrVP11jK8VWI\nRUxj2Or3m9EzuhjvShYuw7djzDkYJ1MX8J7J4aKQihVDeoffOSFVZv0HRz58\n0xK1i2VRXTlXb+Nx6cUIs9Npcykxss9lSvzAlTtKB5I7ADq2zOce3xjypM0u\nVtstq1naNLcU8SDP75tHUKAYNfo87KbYh+oImwdFWvXgr5GPRQ1Ojqcaabe/\npHcyOytfcIGh0SnGFnUgEsCN6uDB4WNVWHAfw/aH5vkRQH3bGFpDcA8l9EH0\nnsFO\r\n=N3IU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.611db508e.0","@material/base":"13.0.0-canary.611db508e.0","@material/shape":"13.0.0-canary.611db508e.0","@material/theme":"13.0.0-canary.611db508e.0","@material/animation":"13.0.0-canary.611db508e.0","@material/elevation":"13.0.0-canary.611db508e.0","@material/feature-targeting":"13.0.0-canary.611db508e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.611db508e.0_1630552569636_0.8079728014650025","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/menu-surface","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.d4706933f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0a2fc1aac7332ec811e21d9169a53969731f2ce","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.d4706933f.0.tgz","fileCount":37,"integrity":"sha512-de2tpj6d+C7Ii4KVwQk5TfsC5k2HKr40luSTxzJQ90eoWPB+01ijkxTkm+Z4mA2zQTi0BVqPQkhyM4D57WeVhg==","signatures":[{"sig":"MEUCIQCjZ1iSM6w2dMXvZrWGoXdtM7UtkhEbZKklGDG4GODBWAIgQPA8ViCKhtbYfJcj/HMHDuIJjXiZxORpZlXybtmQmRM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMO//CRA9TVsSAnZWagAAao0QAILyM+aNuoGi4bUwdhPR\njpgM/YMmzp57fAhKpbaSxYpN5zySbFf7qZXtDANJ9bMjFkclyXmAdChzzG7D\nMLt3dmf752COrdyhFpS7dPWZ//NzwHfQz35/Uy+5k0oaVs7eND3aMA9uSQ/x\nc/up6H0Ic6JediECaQasJK9SfLLG0ELLgN3Ub4ZQOwABbWJADIKv6YfzgyuQ\nwydFcI4yRyXhXWp6AJt9YpfG07s9zjMSgV3F507kW2jjqR/XY3DXD7tQoYyo\nQbQl1M2mdATQjXVZU77ZCfVDnyOtb/a7fSEWQxq8Bu8VL5Xoq7SKP+D/rCHs\nhlVaopgPfNY3SDrWHHSUT6RbTO25gamNg7lUMOFD3NrWOhoq4ykI3/U4tjFD\nmWx5Hxw3K4f1AVtfcGAMVkhwan8cmRfrYuhystkF6L8xrrgsUDHv/C5YiXPH\nY9Cb24OPhpHVXJCSRMFGdKH6wbbYpsf4xC0IStpbiYIYuXY18CsiNnTwbTqZ\nF7AO8dWwE6qxFO29R/IjqXVTCOPuyihzlosHFTgRsNCOcvIfnWshcTbQm+OP\nzcPcSbZCNCHRZ6fugUxbx2m8rVqE8UqnDotWz0psXLNX+Oz91DFFYKY3rI9W\nNKmNWO+KXHxqyjlCUKDqHJQf3umY7kJZQiV8MJOk42Izgjc2p28YCPMS/WKv\nVsjy\r\n=jqmH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d4706933f.0","@material/base":"13.0.0-canary.d4706933f.0","@material/shape":"13.0.0-canary.d4706933f.0","@material/theme":"13.0.0-canary.d4706933f.0","@material/animation":"13.0.0-canary.d4706933f.0","@material/elevation":"13.0.0-canary.d4706933f.0","@material/feature-targeting":"13.0.0-canary.d4706933f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.d4706933f.0_1630597119734_0.23815143870790867","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/menu-surface","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.c16fe03ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd22134dd4b682219eac5d5aafdf80830ee8751e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.c16fe03ce.0.tgz","fileCount":37,"integrity":"sha512-YfPKc4sYyNy597RECVgWhQ4d/PT8QDFCsrEIq0lxPVbUVCMvFL3Sz5jerw/jCCJLM/aCE9T0+eGm4dj/+QQBEQ==","signatures":[{"sig":"MEUCIQC3u5MDPNKzww0ngDVq57I7qx7qpmieLWzaLtA6eBxUeQIgJeZmodZU1px0Mkj2rnqj9Eb16U5MFvr0+6DP4bTednY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ3BCRA9TVsSAnZWagAA2ecP/Axa1FRKHc27AKgXeeAb\nrBWd8m8F7k8YbuM7g0cxT/7RekTmm+h/nwyq98mCNrF4OnXuGBsjp4YL9qNS\nOCN2V8OTCzvByiaq1gjI3K7CZs9SYlZ8Alky0yqxgPAdTQVN62zdL25SWtA1\n1FfsvNGZU/PqjfrEXnsysZQpc4+g20ceaAWSe1NqY+FRG9GABaO4mP/5BnNO\nwaDrSlpYmg8s57RclmKTKamygjYZbPH5oAcHx/+8GIeX7am7rfGQpd4agwQB\n1hd+16aqqOur+LpfYJb2J90rGIj2HaDuoi0tpdirlwwQaCgAeTgWuhPDAvK2\nckQUucjj18XDI2JJo0SDPNbOocOGLcoVWYEK7CIwDk1HSWP87LTXBRLerhIl\nwo5e6y/S3KyS0fF0g/98OIgjN8lYusXSWOD6hRjw8JwqaXodkeN68MrQTosV\ncJ/1+KlGKPElavptouJWMLt5Rkq9GZanl4bVmrx8MSzMBE7sAeXjj9mKz9St\npjlFeITKqPinT3ZSOE+ZCkozsjGWyEedVHU7DWHBnhXf1DVJstbrTpcow/xX\nXl3xe+hljas739Od1NVMDOrymALcT52exkOejgT9fFXIpukGrfIrynUxH7Ql\nN3T7f5yFMFLosv6wQt8/ah9XIF0+wSnl4W7QLlrUl5gc5HJ6FUEPTJRsACz2\nZBFX\r\n=1WCJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.c16fe03ce.0","@material/base":"13.0.0-canary.c16fe03ce.0","@material/shape":"13.0.0-canary.c16fe03ce.0","@material/theme":"13.0.0-canary.c16fe03ce.0","@material/animation":"13.0.0-canary.c16fe03ce.0","@material/elevation":"13.0.0-canary.c16fe03ce.0","@material/feature-targeting":"13.0.0-canary.c16fe03ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.c16fe03ce.0_1630604737739_0.05370645322595702","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/menu-surface","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.9203a958a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4378f45dfa9bd9f471d4b89c1952cd7a34ff976","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.9203a958a.0.tgz","fileCount":37,"integrity":"sha512-aL5BhMV13BifZjOo1dhGEfUBkP/bmqnx+yDsaguFzGy19Ur0WNAJHel43VsuGkRHI71HKDXyYbyUF28dE2Kmiw==","signatures":[{"sig":"MEUCIFlfVvtK756Ata0KSg0NmTkbNq27UYae3Z9oAuij3fTJAiEA05it60wEC0B8IZJKkFZx3sKsnrqNcW6xnWvNiX9j/TU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWJtCRA9TVsSAnZWagAANHAP/Ay5qUn9qolHrLLYTeTT\nCnZ9Z6aDYWfN1sMLM0psyT7P+q94qzMZDTe2SxAImPGu3wy36L8wKm7wDLp4\nk56YS1/p9Jy9fVHapmy6q+QIJlYuljKDapzdfCtLqDIkv6nUQ+YRyuvRkUgV\nyQW0tlnqb9dL/YwXR6gLf38Mcse1JeDwM5Amm4WJWstAYqBF8ksagoCfERmD\nIEYsV9+tGXlEu9uiifvGBWW8jrm1Bt1+jpT9rB/bLZNjOYLFTiiuD8rEhYmk\nyGAi9hHuL81zJOgiUSpK+LJIdKb/KUB22yJlea36Wc2Eu84JHhTVrPCHqUju\njTz/XcEMx6rcOgeRDEbXKQ2Ug8O0sdftapzJ9uCUHLFKXSeHGVrlmtKHTDqS\nv/t4SG2i4QzT1Qj2B7FL5CdJXoIxftUKHzdxD1rY2odLmyS3V6KolK3ERaTj\nrENTsZCCbeDU6ojXla00ZWRke+WodIE/lPA5IBvZ3vEU9wVgaydprSY2Hdcm\n81eC0AuGApDl3rP0pMfr5AD2heGVltLh0gzUcgci57KyNdjWUWtm/fZYmVo8\nF88melMUFkCTCCqQJQfSqnRul16z2s3DS4Q8+Xa6VG9HtkWA0j88Rs7MZfZ/\nuEulown0D/rM90sWbEnTwx1enTXAPJIRm4wZuZFinGDGoqPr1xkoMeAGizc9\nK2ua\r\n=xy7w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.9203a958a.0","@material/base":"13.0.0-canary.9203a958a.0","@material/shape":"13.0.0-canary.9203a958a.0","@material/theme":"13.0.0-canary.9203a958a.0","@material/animation":"13.0.0-canary.9203a958a.0","@material/elevation":"13.0.0-canary.9203a958a.0","@material/feature-targeting":"13.0.0-canary.9203a958a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.9203a958a.0_1630626413812_0.16859938920261408","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/menu-surface","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.fddd5ae93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6e6cc7ec815c8480f291d75476dea3908f586a6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.fddd5ae93.0.tgz","fileCount":37,"integrity":"sha512-DIAvNlZ11r8Ouw2lvJnRHAyVQoLJPl02UT/RFw1IftF+oYQpNlLfyCb4NHsuqgwQ/1EHH11Nddnlk4lPoHQpzw==","signatures":[{"sig":"MEUCIF5bZ747837KWckr/w4rvGI9pvQTtXLI35NDOjQlWwc/AiEAkyDMmqI2RBm7/UlvkJg84rErPqWNCGQdz54okUGpxYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc8VCRA9TVsSAnZWagAAaC0P+gJyjX1ht/NQfb0QHLnS\nOjdmX81K8TACclqEmgC35tgBL1METgtmj/PZlLV3wiyd/1KUV+W0DDj74SkH\nJT/1PgYmyOrTSigL8xe5LAAfQ+JKS/3gtZrWu9VyTNt/r5WTzIRpYju3aZPt\nBho2sRSl4y9724kWQytyJOi+Ezq5HOIt8VviMIEYraILd2vHJrV4yhZPp0ra\nsKqXqQj4e+wlbjheSdGS6+hkR80VMJICCzi13BquuhlZnaN5t2/QlVCgquKK\nHCk+JTZ3e2DbonMJSdCIC4QMIqJz4SThJ6vMzYjp/EQ8O7Qx5b1g5d/QtVsG\n+RrDnL/0oVWmh9BHn+FHZYleJVjqn10mx9N/s5sA5pKHwWjxi+6iBwYF9hX0\nxgKo00wXKoQ8Pzs1BAHHbxXQ5/5Yoq4fTtr1dYTfO53Avpmd7VrTfemWXTQA\nidoNFdcFW/VoNsZuJAjXk7HUian5Ek/OKBLVjPd/lQsuFmB8M+9z5RWt1eQP\nb3lexy3n6g/aBifVzSHjU3QvA04H7Zhr021r3kSUwEkDQIFIRyfrc69ZGWog\nltiTB/oNpCToGOqMCJhXyEo410rXE53T9N/yfbsPCxkRyTLdF0jrV4f+1TgZ\nLg8fm5gGWb+pooKUL81I9S31+Bs1FMBWVq82dV2LuaakuJfYjEhKZEFID6os\nqLgh\r\n=WgOy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.fddd5ae93.0","@material/base":"13.0.0-canary.fddd5ae93.0","@material/shape":"13.0.0-canary.fddd5ae93.0","@material/theme":"13.0.0-canary.fddd5ae93.0","@material/animation":"13.0.0-canary.fddd5ae93.0","@material/elevation":"13.0.0-canary.fddd5ae93.0","@material/feature-targeting":"13.0.0-canary.fddd5ae93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.fddd5ae93.0_1630654229450_0.11170035426543135","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/menu-surface","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.117599a8b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8aca7e61de0618b6ad10be4f8a2487e175a41ff","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.117599a8b.0.tgz","fileCount":37,"integrity":"sha512-YgiXJTAcsjx2LjfWSXSh4kB0gge7hmhx9ohaSHv/BmHrG6AhkhyGBoS04bjGb1gDgRZs7gJ9ojCtbQe8DpA+TQ==","signatures":[{"sig":"MEUCIA2c+8mY2Ay1SoZOZbD5BvVZ6kxgp0Vyh/O36ESDZoQIAiEA1adOve2vUiHNYuCt98cOVmR+ySK+HHSF2jeswMGBQ/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc90CRA9TVsSAnZWagAAS44QAJg/GrOIad3ddBVIraNc\nctu3QO7BxHtUF/eG8G93hM6IW6afgc8jIymK2e1VYO7R49LhXwBoGZPPhbZm\nm3mHf396ByeXPhPSwVw6M0zz1J6bBSb394IBPcfWqB65K1/cdWxhqVyOeEg8\nzpCtTEK3UnaKGt2uvV9Sl8aI4I8eRPBvLet/SKOD0slCqhCCACphW9m0VnI+\ncGuak7jnVoGDGAZBx6PzYoKqPwcHywlQ+1E/Bc7oOY5/IN+LQtUCmcZ8e/7u\nL6oMY3CCftazXhP5lJg89C9gykYwcj2CBICdMVHt3Tk3MYI2eUWldPfnc6oP\nbLC3RuhBKHqVXmjFgiwGxUmZzK3I7mkfHAz7QRFjfgwZ0Gfp4P0/TpiZMhjn\nnhKVUNXUal9ijIj5swoP1gteGRB2Cgc/Y/nhxVSqw4hR22fKn04QoHUv6RgY\nhc9j5o/F6Hm8BlRhrZzyyLO+KY5cwIdGBuAPD9QxF34aTInKYLcMBwrKPXIz\n0zVVuY65jGCOWmAr4+vXsWXns2Ol//or0mTUJ/XafozPPB2pMOQC1U3GDg8V\nVtWOhW6UAcXb34jh4dqkuoOi6I9WSt2FTaIPLBks+5Ke5CeNWBGGJEFFSFqM\ntitGHAW7J9YGtbMxcCUKjDFywgC6u0R4XOD+tydAuDUMffFpIurYYQMQug44\ns4bR\r\n=uxPM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.117599a8b.0","@material/base":"13.0.0-canary.117599a8b.0","@material/shape":"13.0.0-canary.117599a8b.0","@material/theme":"13.0.0-canary.117599a8b.0","@material/animation":"13.0.0-canary.117599a8b.0","@material/elevation":"13.0.0-canary.117599a8b.0","@material/feature-targeting":"13.0.0-canary.117599a8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.117599a8b.0_1630654324294_0.3032685857700472","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/menu-surface","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.e4180d07b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5e5e53e6a2dfcd510659671446194d534d676ec","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.e4180d07b.0.tgz","fileCount":37,"integrity":"sha512-9H6rU8N1aJS+4eBrlR9XgJ7TgUmJFga3gnikSSbqDbDxvaXp+rn7AkKGG1mcu1sjOk0lzINCpSYcFarhKiRxUw==","signatures":[{"sig":"MEUCIBF0qHOrRRPwee1r0BSwiHVaSUuvdnbGSH7GV45E259yAiEA9WtmcTcTIyo9B79GqFiMq0XRogq/LIz25iweSSdhGBU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc+VCRA9TVsSAnZWagAAjnEP/2Jetle4vB//cOUXJlei\nxSZl9qzeoVS5mzgVAYvrjfGo1kldyq6KGO3pvfusRNTN3WnzX3Lt+5//HLWZ\nRJXISroIjNHXiW57Yytxazq6v1WuvVWmNvBlz7oBHuyQtQQ45x9XYWLk8AkH\n3kWavf7Y7A7ayhM2hNZUzMek2AxeuZjzpH9RHk8fK4PdHON/QOGwdTk0cEOp\nMNKbo9eymuigjNd2kpiNDhEduy4Gc8Iw/grVyLaBSrcFHcx0VCxfWNquYxA+\ngHSSYppH11t6oeP2J9nqz/PQvJ+msBAt2/l1IA6OSATdGx+nfEKjacYIZ1fG\neiFvmv5+EfPD3PdEJfR95/0FAH27NoMPn9o6C/XOTX2Mdzgzjj5IpI+hzku6\nRbbCrobyD2skvvQpk+3wnaY//aNm+u/PQqITQ9o94o9rRdFrY9CXM68/i4sq\nI3EpWbZQoWQZbqCXot18lWJ4Ibhl3MfdqYYYuu2ERKPnaxI3PLgHoO6qF4EB\nFwSR+JLuWKb2cOJ4zXMqDljDo4E22utr6yB46TaIHx/MDRxsdiz+YZ4CnXuQ\neS/xIMEnR+/4LhHpDJUFc6zgvhTHBGjptN5UgR72ACACAkRw4uZ5vUmi2mgL\nWofS98B/48N3Bp6TEnaCwl2ruUx6kGMz8IHxAuXKztX2iTtmXiqgSgD/7QiD\nXKro\r\n=VY55\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e4180d07b.0","@material/base":"13.0.0-canary.e4180d07b.0","@material/shape":"13.0.0-canary.e4180d07b.0","@material/theme":"13.0.0-canary.e4180d07b.0","@material/animation":"13.0.0-canary.e4180d07b.0","@material/elevation":"13.0.0-canary.e4180d07b.0","@material/feature-targeting":"13.0.0-canary.e4180d07b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.e4180d07b.0_1630654357169_0.7885635416416645","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/menu-surface","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.42d175efc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e94f65de558da53a89d31f5c05e973dcf2a7ae4a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.42d175efc.0.tgz","fileCount":37,"integrity":"sha512-pIEj1OlDKCHoYpg/F2zTXMfe+Ez+qId9jxcNldbYgqongkbR4OHlSAxR/RsTOeg+xszlZdD35umD3qAWOKAWpA==","signatures":[{"sig":"MEUCIDpl5PQCBs23PAQ5k0zOIyKoMb/mgOKL6c6zHxM3DAbWAiEAn8mT6OP6oPq4qfdoO5uubFrkUtDDtFyxY23LsHb6/aU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkKXCRA9TVsSAnZWagAAyh4P/Rp3b8yEKzHAM2n4xveP\nPczUT14yprOwocfzblQCRShdcJTaKZpMDc0jPDJsADnG5gdMU3OmmOV31hmg\nSm0zaaV7rX69y1wDi6CRnHN9k+HBK+YZ9/B4JuiDt6AAY2M3qdebPzz2Lcjr\nUKJJLb9MHQj6vDixGT4v1p1knFyPuiib1NOHQO8V532RNnh182bsmHSBPEg1\nTDsFi/euBSt8Pw1nKQ8uknDCZeDsk99iAH8XFdMFPbkxGDS8u3eXcjwq+m24\neKAgFe5+WZMfNX7YDrDLodmPk7IpBhK0HuG5hlPCU+3uq7t3pWibrrrpSu7m\nx9go4guz8ImepFKRYGw6N/2CUfSVO7emJH1egA3cetaoA52mGsBawGjuquar\nT+/KHnpDO6zxlo8OPYF1NHp7VVnqR7KTZRpFDBQU/kA7BblV5Sh/WZWOf+eu\njbzbhGuSQNIs5pqwUW3qYiiua9EkHGXTjFtkGyszjCPFQCqIM3KVhQCqXUAs\nov+WNkwjU7m/xKwlrpOKcMeNCUt6fyP8NqhYEz6RhMoUUh46Nd5DUsW5yd2V\nekrK5j0NzeD038cmKPj72liU4kHb5zUq00Mcj4d3QH0Am2j5RZ1XpACHhDJ+\n0Au5SLIjyOXHyVWOU4DLgvPkc2HJe0/ecAbA5yyXthz/a9mpt/mCfWGrN/tu\no4ed\r\n=IGi8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.42d175efc.0","@material/base":"13.0.0-canary.42d175efc.0","@material/shape":"13.0.0-canary.42d175efc.0","@material/theme":"13.0.0-canary.42d175efc.0","@material/animation":"13.0.0-canary.42d175efc.0","@material/elevation":"13.0.0-canary.42d175efc.0","@material/feature-targeting":"13.0.0-canary.42d175efc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.42d175efc.0_1630683799212_0.9406347570823241","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/menu-surface","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.72464476c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f81d48c906ee30339804cf575b98c73e377cc148","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.72464476c.0.tgz","fileCount":37,"integrity":"sha512-LwZVUaQ+JTh4W2MldkcnSzSCIsgw7LtV50FDo5h/ThFPrRJm3VBGoeK/iVyh4Rkl+GBmzvepbrDeYg+v+Rty6g==","signatures":[{"sig":"MEUCIGdnjSZ+KC/WU0fXCZMLhc/WDy5oX41G4h9MHMj79clcAiEA0r68H61H7XVtbhzrd3Vk6nHsAVsg8QPddBnd8ClK/oQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4aRCRA9TVsSAnZWagAAg1gP/3CSzHnGTvpV29c8X/sa\nwyn6TUytqq+MbVzLcoy2oFwD5JgTs2klTqcjQiVQLygYTbSJ66CKibFge48b\n4Uka8bNIS/6BLYKmPsJmeFcFfeXn8AYB+NOWLf7/ExTQwIJ7DRjG+yzr1W3w\nSRUNhZtTT0ESaQjhBWvqMeYrDYBDKd4DuGmw8G03co3dVYA3l3afAqzT5gmx\nLlTz1lOD1NhHcTMkUX6CDZpskVjFIbL+6eztpY3sWbaN+zhzMbodRTyezOJh\nLzTyBU7eN5NEBjgxeUILi5oKEY0NZQQj5owgI7bhkmOOLRXWOe/HJKXYkEp/\nlgLQ6Ghz8oAYg/iGAnrsEBk4S9TqRnKkjThqCHa+Vl6cKC/WrbN7flGI645H\noWWjzkAJE97Q0o2rl58DAjonhcGaJF+IUyunwOTqbG3pdpNuf5+8OIaIJEr5\npoUbwJDTTbuaKhzqsqg/gNgTz8PdscxZNkA7W3f6XILDyPpUqQ53V360vGpZ\nyazcJ1+bj8RB4tDmbJ1xb1DTxsfeMYjUnRmoJGFOIMNEiu6Sb7A4PzwFl3XE\nyw4Qnxr/R3Z+N6GEmMhyTUJ0sVWUjkGOYwf9CilFFzlc3gxDhQ1UtL+DEFK5\ncg+xOVCuggwSN5PQ0BC+v1ApfUNi22GaaP0/6wGAjixrSQKibb3PdqaGHOh9\nJCBC\r\n=PXDp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.72464476c.0","@material/base":"13.0.0-canary.72464476c.0","@material/shape":"13.0.0-canary.72464476c.0","@material/theme":"13.0.0-canary.72464476c.0","@material/animation":"13.0.0-canary.72464476c.0","@material/elevation":"13.0.0-canary.72464476c.0","@material/feature-targeting":"13.0.0-canary.72464476c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.72464476c.0_1631028881546_0.9750950796044122","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/menu-surface","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.37d4db866.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9361902af08e4a34de53539a06a81d727dcb7f3e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.37d4db866.0.tgz","fileCount":37,"integrity":"sha512-77V/0Im7AkVAKZDzztZD79I9bWPRPTBnZjw/MebyFJ2LUTnPPYFhoca1r5MmOYaRrkLWbgrUp8Ie3HCZWIdeFA==","signatures":[{"sig":"MEQCIHG86dATooyJ8HzMBX6DmpliVE3Wv94dMcE4hDKL1PMTAiBFkW+jQItdh94Jx71qHAXdP1wfRcdpLD5g0MJvaDuFjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhtVCRA9TVsSAnZWagAAPzgP/1fD6f5vWuiabc3bAxN+\nNSw3uwq7h1lAIPHUutQsszMHsGKMO80938poYcU5mTY4SdhG32LLNnGEPoiA\n55LtssE9ZotABS0SWUi1z2fXycIWQhHzrDOYvQHd8Xr7BrVWYp//ngjHTkdr\nXmxQXTwIukFaXILJbTst2b2jmVi5iCzHSTeRkufT8DrQ9kMbHLGZLhw3RQzy\ntRbuj69sWDHsPMkPgIEopWnRYGteTcCEKwr3bReePt6qbtZcQPuy2kDNk7jo\nP6DC6UJWO9Y+MFPQoEUrdfyZpb5PyoWp448vrpSDnfFxf+S/BW1GiO0Zqkf5\nGqu1rTgxgEp1M/a7X1509O/UUeszK8FxePNRZOcJ8J0eOMiRUBq5U5dhYBbM\nAto7u3OG1hqtzjksgxpfDYJ/7DmEdyDYwc90GUl41H+HbHnJIbcUOpbGoDQS\nN2p7iOfPAkgFr8swzzz/Mwuu3wFUtcdWhRGFomwQgzV4X/ZLTpCVYqvMki+Z\nS/QpOxsYN+ef3KpSje/fc469Tm431ZN8zURS0gUioYC5kei66cYEqSdGlNRn\n0klLMiFK2yXZgbr9YJBX3kwz8i1Nt9+CmjaPwgn5ymnlb+9bUft3Zbj70WJG\nYz9NaJmwgrhJFq5W8KljGjQGzEKS+nSKioNJ/A9FhANTN2fvLAchjuPWP1r6\nrbyI\r\n=2ZLe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.37d4db866.0","@material/base":"13.0.0-canary.37d4db866.0","@material/shape":"13.0.0-canary.37d4db866.0","@material/theme":"13.0.0-canary.37d4db866.0","@material/animation":"13.0.0-canary.37d4db866.0","@material/elevation":"13.0.0-canary.37d4db866.0","@material/feature-targeting":"13.0.0-canary.37d4db866.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.37d4db866.0_1631198037692_0.07066592121371462","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/menu-surface","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.6df682e74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2be37c3c1835f436f0a2fc15a94127dd4d5726fd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.6df682e74.0.tgz","fileCount":37,"integrity":"sha512-Eh+sY9rG/WsR7Z5erJkPpK5AJAGqKU6VxX9KEIazyg1hxkgWzejyxGb14D1w1jfLRpCEesMDg/WWXfmq5WZ/NQ==","signatures":[{"sig":"MEUCIF9VjSqRsKfExRlzc3Qf3yMUNfEWOFFTFaB+oOVLuEGFAiEAkU0lvGHwUdMmWJAOCzXIcxsWhhxDiNpZ03U6yQhDFTg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOiusCRA9TVsSAnZWagAA0RcP/2UuylSTumM/5Vwgr9/7\nJPvOx1Lyib8tG5DkFO6l7ZNvLavCaOODb8IJXSQnOo6Qpi35hJMJEZRnU1Cm\nQjf8uEeEzOw5D0L7VAl4n7oLZjZ/BsW4xjOSODMfv9lQEWqXTDiDwxnm1pba\nglJu4rweCglYQOUvzQ4lZNXlSaeKP7WfPXjvJXVMEjDoJj2XLiMLyA9Idq2r\njEIeZF9vL+8yHn3SFOQTvH9GY1xnQSucE3sVspmWjYeWFhWq6tdiEuyXt4X0\nzqrJW03mV7q36NXD9SU8Zm7N2a4b87oBYOphXbQ/E+tmPwx0i62hIj6CZcMO\nUPLa9AmEbNT3xc6qMWE0hRQmgeo/7aaFBPQxTV0swrZjhbZ32XX5Mnrbkoeo\nS64r3OPaKRIhMiwf8P1YALYpN6MWgt4qrhPOM7YxiWSiz/+fDA+/EjGw8Qe+\nKqqqQNgo1kuyED+WqYg/jFFeznTHFOFtlMhh8T3BryzEiT2DD2IyREmcB2te\nCoyJLZWWsILFLmXzHUIerDxaIKJcWe7+Y62EZsJHt7LYlNz695f15ngNVqBP\nsDj2aYGUf29bcMsdt+OC+oNdtcfnKaUiW3FGeUUKicTvHv1qeUo4ob9TOgNW\nTn7qiIxE3wMDsi7i2POScMICg3154GAgXllWkG7xayBDtHrdDYxtiuLYVCUw\nzMuO\r\n=8gsX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.6df682e74.0","@material/base":"13.0.0-canary.6df682e74.0","@material/shape":"13.0.0-canary.6df682e74.0","@material/theme":"13.0.0-canary.6df682e74.0","@material/animation":"13.0.0-canary.6df682e74.0","@material/elevation":"13.0.0-canary.6df682e74.0","@material/feature-targeting":"13.0.0-canary.6df682e74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.6df682e74.0_1631202220595_0.4026924857307064","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/menu-surface","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.b49359c35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7e546d1feae3e6c0a13678fa5b67c144067cb74","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.b49359c35.0.tgz","fileCount":37,"integrity":"sha512-LdPVetJjXOVHkgd6nCUu+GroIBdEP62Sw1PfSWyoSEDkfpTuNryKJ+8VCe2c0TjCRTTrpauXtqMe52AGoxfziA==","signatures":[{"sig":"MEUCIQCqg50E5ru0LtBSMKQ+9ePHh5ldGgATHKV8wqpDTr6MjAIgddRBtDSPRqrqZXTZmgBn2loWDxv2WfVFxy7yz5zfU1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkX+CRA9TVsSAnZWagAA7nsP/A3JK5/GDckfqNIE5AvX\n4i6TFEX6B8nUhqjNAn/EqrR6fbzXmTvzMmjep2ZFY588ZG+chmzpIwmH254+\nHJtBQwoSz1y8ddeVFxTtiMDvKH1aam9y8Xaj+Ex06tziLaX3azNyalg6Xwnc\n5Hcljmx3ZDmYGmsLmPg7+kzcGHyiFBHnShypl9lmQE6ieNFsu4CE7CkemBW9\nuZp8ir9SRMiXWFdoHI4pUOj9kexweeopw3UVZoNcV2TI4qabjSwwqOPqBzk/\ne3x68uoT+gBX4RLiqOC7f6H9dgnNcTl+73SqWlMnnZO9Jo3UWji8Jte2lGLX\nWXse93l83TOGz7lZBCHhH3LxpzQs8V/6Nn2YDzIGXqzXx0z8XfBD8oBvqZGo\nzFqst4MVMlxTlVqZUCtxqq/tNi5mcNyP3srAIhyK8hvXVRALX4fH+YjgBFRr\n/+ZmGEcwumwW8jW7y65Ld4DsMMDytYr/+QtgzTMYeM/EYSD2M6Zoo+5+VTw8\nuZch8RrJZiSXwvFOvp30S0s16GArXZXXVZqDlB/jgI7ce3nt67BmXWD3A7jD\narK++c5+zccAlcNsunmkvZ0W/rD0it78eVMo/5bem4PfqIiQwCZMx3DKUDaB\nBOUHG4vViApFxMQYe++7sPYbouPde+2J35g+o1356prYP3cCbND73EIt6KXF\nfQmn\r\n=wTZE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.b49359c35.0","@material/base":"13.0.0-canary.b49359c35.0","@material/shape":"13.0.0-canary.b49359c35.0","@material/theme":"13.0.0-canary.b49359c35.0","@material/animation":"13.0.0-canary.b49359c35.0","@material/elevation":"13.0.0-canary.b49359c35.0","@material/feature-targeting":"13.0.0-canary.b49359c35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.b49359c35.0_1631208957986_0.2895479271901076","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/menu-surface","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.470bd34e8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec1623f86e0ebd035b700b1e6cab823531678638","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.470bd34e8.0.tgz","fileCount":37,"integrity":"sha512-TR7kptsTIayMtg1rb+b1m5QIVprdaaAXtRC8474UTOKg77Sj3G6FSNxSu89ZG+6ajw0nwgpD+g/BDe0IYQjp0A==","signatures":[{"sig":"MEQCIFNfgV9eL/JQWH47uT/ATn1ps0/vBVs5rWEEmM0MlPkJAiAE++GqcHcfQrlzYzafOPVXZnf08X5gwyNV5YOBjbGqcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkvsCRA9TVsSAnZWagAAyCAP/jZOvJjl5QkvmLGE00Up\nUjIPfZbvbZBsKijpM/Rj83mJKUe9OW0AvLBJIbq4TCw04xdCKzIVaRdQuiuV\npDevEVJ+oCV/nIaN6Plp8fVLoj/sIMxp2Lav3nBpFrShFIw9snqiJ/ssXUqy\noFCH+mR6KLk5xC6pranmo3Bt8RS6KI7PzCf/Vn7t4gRWjgckiCq5vPAvVYw5\nx2nJ0XG2iS4msYW+kDjh/RT8ocuOWOD+kJGY7zMXmb5yD9pwMVhqzUtZloSx\nuNR+Fx9e4XkBk10v5owOKr9/2QFuDbvA/ot7J/Ss5XKZjZykSma5ph5cca+W\nyyCZvJ9yM935KkFc2BdmhUDv1q8bOjIsqkzmLObWBYopsNDcQ1lbV57LHfdW\nPODDwMbHMW9Y6xTIB9jOu/RcECNC0u0Kc0sVDKADSG+eNNPawEPyuEjWg6xo\niwy0G3DiafPg5Y9GHZMVHo5CwuIwYRpewqTaOfMKuTxEXemdsmyYYo+iTOKG\nsH2eNfI1saVZLVFaQN+Rgry0+hC3JWQKr7wY7fbK+4hY/ZqlU992F9g90JHd\nlZ6aup+VVSFGqjsFkj4IUqckkVWm24qsflIsF0In5d2b7glxRMkV4YByTS4C\n/ryLiUhANaA3tfaxBAaKrwEmMrPEORVfeImmSsMGt1RGoRj+HP/v29tPzs2w\nqk/g\r\n=baBM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.470bd34e8.0","@material/base":"13.0.0-canary.470bd34e8.0","@material/shape":"13.0.0-canary.470bd34e8.0","@material/theme":"13.0.0-canary.470bd34e8.0","@material/animation":"13.0.0-canary.470bd34e8.0","@material/elevation":"13.0.0-canary.470bd34e8.0","@material/feature-targeting":"13.0.0-canary.470bd34e8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.470bd34e8.0_1631210476209_0.7562763337333902","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/menu-surface","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.d48a01771.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85a6ff72dc67de949289a4329a51231ac2026350","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.d48a01771.0.tgz","fileCount":37,"integrity":"sha512-gkOJhemT2cZSIS3h/Ue4jK4AkgbLuNEQYlj9yqayxdlFgGwnPty9Fa6ieNMH5PFKbgxCpxG8QVIxPHPjhqBqig==","signatures":[{"sig":"MEYCIQC1S/G++T5Jo28X3FibSvTDd/vTsVz4Xmnt6q68bUD7ZQIhAL0BcOKgguK1DXQ7ASpIoObcFFV4TtxwY1vgKVUZr7nv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk4qCRA9TVsSAnZWagAAOEIP/0zUYKHkyEXNRGpUoscB\nGBkX+R+HwVp0t+yo13DpgDOOVk1zyIWidDmZ+igIdlB0izaSsioY9wiUW9ji\nF35GOPn60WKz2LMJYvN0TFEdmBQws/L8umBbQNFDdM20JyfKCP9VKaly3Yd5\nlCtSTj6LnwXY1i5cTunfMR80IvpN5MorMuH2a6/e8epQHoTN2BmU0LOpO/jE\nrs1g0p2e10zW4bZRPlEK3/VGGWiivNkcxfTjZnqKtq/6xm3FQIYuDouGbgJA\nRVtA6tNDE/eX6Hpc3uXduw9BDtN4HSJyEZqixJ8dVBhifh828aLGW8W10iKv\nxcbl6cnpIXpQpcq4Zs7xcJSvfJmGUp8V+GhJbabDhvUSQjJP0i7mIJMr+CXE\n+2cGaPcTaAz8j4rkzw+4G4pWFHRRw/7feYAJBqQeqki7+8us3egKjD1rZWcj\n1PSFj98VjchFqVQjNFYlNjz6ZT79Ci7MgaDJXq+ocYnbfYtUvgDIqq5TtXVv\nFovcnK43xAX5Hkula7hmKJwhHxni1TbPjOxEqFeprIzx7hYudtjIDHbsiRa7\nyL6YeZZICDFnvGBpSZwAkGVDzwwQkJT6eeNn7w51CGFqQWANtl013UuLBGfW\nYZphPWTVHwWdSOBWqdEHiJgJHAfBgRLBVuNqblz3i3sUKPLTxjbbelwKDbWK\n5HJA\r\n=khSu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d48a01771.0","@material/base":"13.0.0-canary.d48a01771.0","@material/shape":"13.0.0-canary.d48a01771.0","@material/theme":"13.0.0-canary.d48a01771.0","@material/animation":"13.0.0-canary.d48a01771.0","@material/elevation":"13.0.0-canary.d48a01771.0","@material/feature-targeting":"13.0.0-canary.d48a01771.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.d48a01771.0_1631211050007_0.9477744898934373","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/menu-surface","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.13db34b34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3539ad15a59e3fd52128bc65fb6a4e298d1aedf","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.13db34b34.0.tgz","fileCount":37,"integrity":"sha512-gPLZPOzevY5IfRP2p6FuOOObGBp778Y4Wke/9AG5F3CCRDjHepsvjPL0k2xA2M9GMzUiwITTC3/SG+6iYrGVCQ==","signatures":[{"sig":"MEQCIBEbdtvCyAGQj1yZfJ/H/q+ZgyhxCz2pWHQnPgyvy+BzAiA7f2syw1Xq5oImOfPwitSDddmAh1cg98dI0cRFejBJig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlGvCRA9TVsSAnZWagAAfhkP/jqyaoAn3yfxvmkrIYoW\npM3shbupc5LP1Kcvo7L9AVXW3Ri6sATmCBPQ+miFkVCTt0G4tlKV3CyORcKv\nNL+RBiofK7Y7rFAQki54haAXQ/qeM2Slu7O32ogSfhlQ5QK//bYy8+56K6Wq\ngJmhuk+3sdN6Vv+Xz+NagmxrlyjpLN67eAGRN2bh/sC2ZmkQvxRbZuW1YdFJ\nzP5gLZBuBo/YfioPAp8dHRA13OpVIc11i0e8AbH0VrhBiXc/gNhPYTO5rfX8\nI6GmE8w4KtWb+2d0B0J8l5Nt4ye36hEDabab95fmZ54aJzR+uPBhyrUq05RG\ng+3T4t3r7gQfLJKAuXzH6KAc04bvgehCsxS3Vre50nZ7mDeLCgGpbNX4yoTt\nRdnlw/mFCdE4GevNPpldI+C6ENLVWRtsxmuPMxU83fJfOudlT9UZBhNbltYQ\n03ljHjIwTVNkv+zek13pa7Zz/gwJqCv2evoRuLv+JmNTdTaLLjfrXdYUvw93\nF7JzoC4FHia6Kn0SHMlMWmFupCJdt2Wc+ja7SeFZaJZv+fetwcR1zF1tYSez\nJGtnt1V912TSoOd7HOb08SG1wX93xqzfM7nuJm7Jfj72z7N4C+K5SJhOYIST\nm1ns8aqCggO1m/wNVHGJStYxSfrOwKklnJRAmkRqhXXlafZC3Ql+HshF3el4\n9scZ\r\n=I0R0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.13db34b34.0","@material/base":"13.0.0-canary.13db34b34.0","@material/shape":"13.0.0-canary.13db34b34.0","@material/theme":"13.0.0-canary.13db34b34.0","@material/animation":"13.0.0-canary.13db34b34.0","@material/elevation":"13.0.0-canary.13db34b34.0","@material/feature-targeting":"13.0.0-canary.13db34b34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.13db34b34.0_1631211951227_0.9765499891987959","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/menu-surface","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.864798678.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"122680f19cbf158adfd7996368e58735750ebc9f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.864798678.0.tgz","fileCount":37,"integrity":"sha512-6/erq4pGMNY2XtiuKPu8FaRacb1YfHNDMUPOjteHOfT4KE9AG8JKMgt2Fbab/ktzEQO4nQa07B/dF2v+KCQHjQ==","signatures":[{"sig":"MEUCIQCppFeLPH6QGOrOvIp+kBf7VGBe6EdjKZ1ndGXb7ZReaAIgcPks9vPlZ6Sm1gf2Mlt+9np+gnGKtgktSQrewvUbRsw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlReCRA9TVsSAnZWagAAreAP/RFdml1Bk0iH+93cAYMV\nRLHxzTFtvsYry0In65WX/bbssHCM5UqTIhSf24P/Q801zr+XuK8EuzA5x/4O\noSMzLr7Dv3wM29IJfSIAwlIXSfk55QCmyNrQuiTDYQ4yniDhBRrn/YwwEKJr\nf03lsQJg/Vg1KVSix8PyplY1W845oL8R+xtEWCG9y5ePs6GPDGONnTlqHAfL\nSEPQ15lZCVrsLOMwPhWURwJqhpLqR9oq8hOKyTNb1/G1OaGDiFnWCEF6At3K\n95poJUHT+lPdqxmLPa6X4JU/zCNfK6eLL4909ANSvyLLuw7ZNhWe6pCBwX5M\nKoBdKz30w0jCC0JT6gRf2fYd7xTmOYEXSAMjI88UFb0wd2PTYZPR7zJuCJj+\nCwrVeoPEfykG8dkA/m8IqGLiytFyczqmUNRLUro7hwKGvGaI+ip9qc250BDA\nTdbnolTGjjCnEEN3YbWLk5FDOfefgHmWta07npgPDuWIEVFpvgymX1KzVVIN\nBlK+JmBWRgKxdY3CVxi+vBEJKsPDRSxMgZEGpSfsEQehSfG/SI3JbAqsOLpm\nigAdcxwW98w/xW5BEzviQa1WVe10L6IgKBwdbLM/ZhJKz1458AJFT/0S7dHn\nMPJU0CGLVLjkke+TW0PbrE30w1Ps+Mn9CHkYBqaH+4kT2RodGyPiAymlKSES\nDqix\r\n=OYXG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.864798678.0","@material/base":"13.0.0-canary.864798678.0","@material/shape":"13.0.0-canary.864798678.0","@material/theme":"13.0.0-canary.864798678.0","@material/animation":"13.0.0-canary.864798678.0","@material/elevation":"13.0.0-canary.864798678.0","@material/feature-targeting":"13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.864798678.0_1631212638553_0.7993781009615089","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/menu-surface","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.d04bda3fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3ca2ce32228a28293e01d842cba010d982fd197","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.d04bda3fb.0.tgz","fileCount":37,"integrity":"sha512-5IPnwBfnWJBaGjcpbVFAkonYbvHETzmeJ3VT+4z2obSgpbpGgKP7fj3KikO0Mf0J8rDGZfqMGI9y+gqqFru6BQ==","signatures":[{"sig":"MEYCIQCqqOat3qEeJl2F9OPTIFp84FMfUFPTCensb/BQgeoakAIhAL6/krEIYybQgKFpngJZ7YDX6flhgDoHXrQAVeHrFMAj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3geCRA9TVsSAnZWagAAADsP/1MqOTOyYgdpXbLk0xIy\nP5cIjZnCaNdO867W9e8Znrv9W7n8OSmroWiWrvc8Xu0mAZUFbwA4GVJhlLAY\n4XuGbJSedLGDthoLU0yPKHLRXKYamdDv02be8N031wuGB00y5vT0y8pNtiX6\ne29HHpgowF+vDu2QHVILeSyCCI4lrp93Ebxr2GPDntmAzesFMdAYJXYogRw6\nAl5NMKTI3QH0dyJ7NP+bKuqUycJN727CDfEkRLPUaqABlCuq5oGNDuYgHytL\ngE6m+pNopFegStOxdw93xdKunAavWZsD6PMtNDOekLusQLhNBzOz0XCL6Xgc\nsoDBBJvc9J50Lx0sM9Q8s5WdGK3Aw/eNlNC9egVQHhlVsvrQ3QLJuySwYo7j\nOpJR0WpadLcJeLgNK75rOV3cB4r8oaiAMSFVjRFne7aMtAySX8xr7QIXoTiW\n3/hEfeTszPLd0mHgg4wm/QZWvGGnfnxVr2dlPr10BRsBlmvN5hDAeAXcS7IR\nfreSlr7xaZnV9ByX/dALCJ4bnVm6YLrcEdhi4gHKLkcqblrlcmpOVgOEk3am\nXyF4CzetRtFYfioMnAGrB6jbKin8+BC5HTVcgej6zDWUC5xwU8m9dkslNYCL\n4kFog1D966gstgXtvsEUPUF1L44C3a+xnKLwDaePxbZal+pjKT58uiTPoYWa\n38Sj\r\n=v5t0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d04bda3fb.0","@material/base":"13.0.0-canary.d04bda3fb.0","@material/shape":"13.0.0-canary.d04bda3fb.0","@material/theme":"13.0.0-canary.d04bda3fb.0","@material/animation":"13.0.0-canary.d04bda3fb.0","@material/elevation":"13.0.0-canary.d04bda3fb.0","@material/feature-targeting":"13.0.0-canary.d04bda3fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.d04bda3fb.0_1631287326699_0.040474543659008155","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/menu-surface","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.5533f73d3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d623a2f8e189183a1eefe39edf578bbb27444a94","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.5533f73d3.0.tgz","fileCount":37,"integrity":"sha512-vqvLKMKJvsHwUY5MoMjOsWKTfLHAtRRnfNYczVLEyG9FN2usme4MkMCtU3Enxug6Xhf3srGLHThmJMYEYxadgA==","signatures":[{"sig":"MEUCIBXBvuVjWSWhGDXGWcEFD6JoGn4yY5oAGsH5fupgmKVmAiEA9AsOCIA4J2dq5TtGvi2RaOiPaOBoyUOpIZbvU1w0F54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9jmCRA9TVsSAnZWagAAzhoP/jRDecLEZv6q74ZMwmWX\nSyNcDIiWLv/88e9LwgzMtTUz0MqwyxCs/5Mi8TNQu712ytwMX12mWtBXk1iQ\nXay8eyrtqV9mj89EowPf2XX+Hpf0KDnpr22IUVj60XbNF2EsqeuE5hWTIgoL\nzU4HFNwZjtZg+vfwLXDwLc4JSuw2dCIlSHNTvLUipuf7+ee3llIBLBd19J3W\ndV19q4xWwxhm6d2/FsUeFtlA5dl56ghuWmsSrFOLaKmB061H73mkM85MGJI6\nXG+esnHStqSXKVDQVEWMDbO+0uSqx2VxIIlw4WSDWf8dBXrWyQgfwH0A0QnS\nYKTq33EDXKepL19unHaoj5/6snCVI17zl40dRrXwYjHZL5sBQWuMGj89l0Ja\n5Z5X4uWBn/npANzZd472Co+EKH5kYZhN+UI3IPLGGxEu+9hbP9eQg2MymQdW\nIA0sRI/p8uF0L9c+z6O8dXt2cUMIr/CXz86QMyV3jdfuL+1TyQmeqRVcFfUU\nv/FAb7KtYQ5MqHVht35JqTbvwWZqv+WmlNQKqSuk1nbs+2xyUIy6V9mApeqD\n9ujHcaTOGKT9c2AdvVc3fM7B4BK1gGHvdoxTqxOeoFAeoKFWE/21ubtDBq0F\nFNpVzURMr1lQEWgFYMfxUa0N0mTnfHYnu8bCpvUzjaaTVJ4LiK8TQnT8+iRq\n8kN0\r\n=4ZcK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.5533f73d3.0","@material/base":"13.0.0-canary.5533f73d3.0","@material/shape":"13.0.0-canary.5533f73d3.0","@material/theme":"13.0.0-canary.5533f73d3.0","@material/animation":"13.0.0-canary.5533f73d3.0","@material/elevation":"13.0.0-canary.5533f73d3.0","@material/feature-targeting":"13.0.0-canary.5533f73d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.5533f73d3.0_1631574246500_0.8773082440290669","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/menu-surface","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.08398f880.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"585eaf7bfc36412c3961ef592ada709ff1d9db13","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.08398f880.0.tgz","fileCount":37,"integrity":"sha512-KknuIw0EEnWMLYd3KQtjDZa43rDpv30BVFm1+zsohe4Cy25gvmiBhbodnlhs2r32fA4ZKby85mMZxzLcpqFlnQ==","signatures":[{"sig":"MEYCIQCIBESQVRwJMYgDPB+wRzh591tpi7HFbtGT12r3xtjtYAIhAOLqAspCdt/ZQ2/x/5v+51Dl8+uOAlfSjaY1kDaL/xIg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP+AXCRA9TVsSAnZWagAApWcP/R34bcxCltf7n53QJHXo\nj/mWB2R9Q3lA9/Mvx0P1S0F+YnIIwUNHRINh18YKgCCv21ejEUGhjiS1sJ7r\nqDRJ4N/0BrlaIfpjkh5a3pWr1fW2IUQU+Pg5rDiUv7ZTmk9V4F6kx4D4ZkNT\nTFkmsWkLcl8JxoCvxO0cpXn24FmU/6HK8O4nGSFPUCiA+nIdyC9KMC+/9SR1\nrwpQxjB4L/Tk0MoouhwJyGrGW/wnra4ScghmAGuprES1ia8UUXASrBTw8pQ5\niH3XawLAErlOxJw3aAhEsOl0wVwMDBfrVDyOgS8jeFh31UslT7Asd7Xy8+1S\nOvhrzoXCcTdFU1/oUkDBrwunP+JxV0JqM13CYzB0mAPywlbAwfVBggEd9pq1\nOncNKl0imKci3jrDM5Gz93z0YdfXWC4lascYCMRfYlynDyF7tFPFzn9QZ/Lp\nwSRYvmU+LjAagIo3NzCH30tHrclYXCainXazsUBJgFtnhqSrO9Mvan5l/iey\nS21tt1TP8V1IR+c1MQ5pzP9ZbbJDTVF0EGFhULv5uZEiYzDoHCXKi+lcDXk7\nlzL+Jrn+0YT3wNxuivUZFfoTb4Hwcti4Hez/eyrElqQJwS9pyST9qtVgh97d\nSGOIgis9mXtss/DMBgADsguAQYAgp1qQfuB4WKtEf3e5eTFlZFUvA8LT8vZG\nIVT4\r\n=l6H9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.08398f880.0","@material/base":"13.0.0-canary.08398f880.0","@material/shape":"13.0.0-canary.08398f880.0","@material/theme":"13.0.0-canary.08398f880.0","@material/animation":"13.0.0-canary.08398f880.0","@material/elevation":"13.0.0-canary.08398f880.0","@material/feature-targeting":"13.0.0-canary.08398f880.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.08398f880.0_1631576086966_0.1336601792705907","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/menu-surface","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.818f4ee93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6411bb0ee4e991c5218d459d76109a3a8371e5fd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.818f4ee93.0.tgz","fileCount":37,"integrity":"sha512-p94uV6UMELJqZr1Pd1PGZS+HtzjeK8zBP6/X/R/x/j8pQw/FIZHMTgtTl+olDj56kXeZe7sgUH98Fry4WqWyqg==","signatures":[{"sig":"MEUCIHhgvRuYdSKYlT07oXjtg/tAdumyNBAyksuRDBHoO/oPAiEA45cXxngabRM4EhLR+txFlKv2HmIgphw9a8XlgsUBfn8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjJ3CRA9TVsSAnZWagAA9zEP/ipP8yVAVuwOTpDgcI7o\n+cyWxALi+VANIuG7oQxOCE/52prRCz2ux5x44Gaw5Qa2ZQCJaAnGJy+7kKzh\n8s0UC75F/uRB2DfLw64uLV0CQzvu2MCLcFesL0UTPwTCdConO9e9CXffcYVz\njWoLnDTBc03PAF/yxuRni2vfEf5cO+FISH1pO7UuUKlmeM0ID3RnAPdNOiCj\nuoW46+mybfxBZ7nbiP3kQ3jjieHAEwYFmmZokebApaeNutzG9D1I6+dRQ9ua\nqWYrMrApd+ZgL8bUr/qMT6MYCHxPaE71igxIQOnxWC4RQKn4ojqamfTo8Gk/\niXTI3Myh5f4d3W1lkV9q1JZ6xpPRgfr0rFgER60b3ZJTFdlBHgYU801NT18T\nlzOIofjhMGIoaI3WudD39okqmFVpDCXFr0bnG5iEMFAUsrOACZtAIbM4K0Bo\nv1n3bg3uKwNDR48n0AWCeiqp8V//pQjzR84cqt1SIXONAORgRCoYGbp6/ZRG\nnv8so7Ji3REPFYo34cE0xLobM4ITpMfyCsBAvWCputWowIySsA6Qak66ZG8A\nYcPac3FH1xnuhxRyUq4qadVlsBYB7mUSL99FTJo2UCZEDWVAaAkvCO0hIX7v\nb/jZkw4Zj8QMzPg7/tkgOclLvur2qzfPcXKQbEL0aH/ugAxuGxi1JRsEuWFb\nGXk2\r\n=kraW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.818f4ee93.0","@material/base":"13.0.0-canary.818f4ee93.0","@material/shape":"13.0.0-canary.818f4ee93.0","@material/theme":"13.0.0-canary.818f4ee93.0","@material/animation":"13.0.0-canary.818f4ee93.0","@material/elevation":"13.0.0-canary.818f4ee93.0","@material/feature-targeting":"13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.818f4ee93.0_1631728247204_0.6153179692521984","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/menu-surface","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.8355e14dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90d55eee6e796735b395e307e6e795efd04a93cc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.8355e14dc.0.tgz","fileCount":37,"integrity":"sha512-YcDbaDhXSdlBPRSXbEOzNQLphDBfY7gQPW/T0YWOjGAWDHnYYK3WioNQIp9I5DxLv/NTP8hqucZCrRzoORN0wQ==","signatures":[{"sig":"MEYCIQDBRYeAcYIfiQkGz55bRgIUeL0oZIW5ms7oPOyJyPAxGQIhAPJOVdLchWMUHJNzvSC8Fbr0ZbfmfwZzrcWQq5DVbqZF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkWuCRA9TVsSAnZWagAAf7wP/A0Ve/iEiUb/SjT/fG4A\n9dXo5mE/MaKehWfOlV1h87XkaB16prKwvuWaY5ROdOu9RXPDx9A/HiaUaMZm\nqy01b6rxUNc841dyVDaIe4+o6fNbeZZzKef++DvnuExW6HRX1pLurupVemjZ\nryQ6MUx2y7JPPppw9GFEVcvEj35dy9w+lmkju6oe5hQQh0SOwW7SrMZkJDal\n6nEz+USY2LbrbnJfDXXCFXsKZRQsZF4x8dDgZZqsiUZ6dVQDP8X+UQBN+ml8\nureYfeVtSwxo+PQG39Hq++PsSTj1laFtf7o3ABe7A9775tRCg2iIMy/S4Zp4\no1e7S22XvaxyCOg91nD990ZyREWBLl4+orFY7TM6l3U5n3QDnZTWxVH7E4Df\n4pPKfuJsAwBOso2gtCMC/HAtmM50wjJRYE79eoLr4ayRAd1erUceQ5uxhlYw\nqX7alNb1dkpflfsUhVD80/l9ABevTsYYi7egSjhH1tAMr/BLX7akx/L4/Qtv\nngAzCBu1Spso6nGi21pVJRLcJbzkIW3sFXc7KtIma5XnlAC7EX0FGBC4TWW8\nQGoUSmoo/J7MQkxA//SF+2t+2GezHXFIaEIU5rMrphQRQdjDPSpT1Afw61hp\nww3rYO+mYmzd/0s1YMbnUTOr1wAdYKn8Kv9qEWSUybyYJFp9u0YfNb5vp4yU\nRa0D\r\n=ja41\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.8355e14dc.0","@material/base":"13.0.0-canary.8355e14dc.0","@material/shape":"13.0.0-canary.8355e14dc.0","@material/theme":"13.0.0-canary.8355e14dc.0","@material/animation":"13.0.0-canary.8355e14dc.0","@material/elevation":"13.0.0-canary.8355e14dc.0","@material/feature-targeting":"13.0.0-canary.8355e14dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.8355e14dc.0_1631733166193_0.18006428880554504","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/menu-surface","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.d4e16a6c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55923a81376764cd537679c4044b59b5c14001be","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":37,"integrity":"sha512-/pcGJMnQoDN3X6nWO5WfTBh5WEKN9IhOaTUGWSvVa56ypMum07pesrDqWEPcBfKZYx50Az74PNws5BTOEB6WwA==","signatures":[{"sig":"MEQCIAeG6+WoB/HRT7GfUChGMWGf6g2a0ETvaTwkmySFTa1DAiAxaolI3dxr9dIjaoAzPznAVa0nh+zIeoN0RhjUpQYQlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmzBCRA9TVsSAnZWagAAjvAP+QF7vLOEQ1sUBfdGjnpb\nBj8rPBRxxqLmtyQ7d7D2r7uK5ZVmCLeb9dJJRGCIOH9DI/K174Id0gh+KD3F\nFYb8lGzgvI60pfd1fgIkzRzau3ae4aeJBEZfRTDJl+FuelRzBsDQ1wojaCQ5\nCDRga4PPTU3uSj0iNe1z/KY1UxS21AlLgb7ehYl9hknOkFUtFEinbGFEtV3U\nnocC3/Mg1ko28RtBUQm8jkNXB3skcH/ItNq2MQuLXHRSJV9E59ex0TzHXoBM\nebZWRszC3L1q0lqLClSsp1H2mKYcVjs5cEQsKlZH+YJGarn0aRRUGaeE68O3\nPYLpl3R6QcUE/Az7TAohNCST2u6VAWnFzUZNFQ2Fvc9sX6P+7ZqkJ2emw+l/\n8/t6+9vRAnWaIixQuWxqVacmKsWv7wrt0GcOR7bH83CshWsf3g6cSnKP5fU3\nteOeLqO6KfnnIoLFGg5conlx/OxZcGeAIrzUhxHYiYSAI9EcfjFoPe9K24wO\n40vVjrEZ7iMqTnLuQ2irssISHJlrnlux/VQ/9dpvmwpnaFpMwhN+K1OxV4/r\nfe8ryWumW5BYqL7hWjV8VOIiwbHfwyfa65Pps7RXXBsFruTfwVDtCpU/+JeY\n/hbcfpOOug23xGEckgeW/UjlD9w2EYj+zWedEf5Xt+LP5sng58rYMmIRsBbQ\nnLeW\r\n=x8J8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d4e16a6c4.0","@material/base":"13.0.0-canary.d4e16a6c4.0","@material/shape":"13.0.0-canary.d4e16a6c4.0","@material/theme":"13.0.0-canary.d4e16a6c4.0","@material/animation":"13.0.0-canary.d4e16a6c4.0","@material/elevation":"13.0.0-canary.d4e16a6c4.0","@material/feature-targeting":"13.0.0-canary.d4e16a6c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.d4e16a6c4.0_1631743169490_0.19056687199604272","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/menu-surface","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.65125b3a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41ab6037132028f78387e9d9d23deaac1d06ff40","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.65125b3a6.0.tgz","fileCount":37,"integrity":"sha512-EDE5dz+BpT3DC846XipwbTG4Jpzyvyt3dV5fo9Vt6Akh7PQ7QB0IkyCkv5iPQ9l1rQ0L55TGtxRpT/uabmb2xg==","signatures":[{"sig":"MEUCIACAbfxczoJYfAMKVzgF1bP8bGdBQ0zdfIJhZamSIsvoAiEA1Cl//CJAKSlu7Sx2VPhxZ/hoJQa1IFCmGJBonZPjMSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7R8CRA9TVsSAnZWagAAZzUP/R0/EVmAPsvFR4d1f1r5\nGtxtARDhSPqtppZeHhwDBSKelvaW9bh/bvgzc2qbPaBaPJBZfqgHE8s89LWk\n2qv2ckpNEVGPm7TWGYbq/FxXcitNgOXZ95TFAdEx+YhS6wbvBLJBt1X9f0rS\n0tpW7BAXwwvQ0O8zgKJi/VOpLe+cdSc7nuljQbTVU2b/NvO8oW2w5ZdVwEtl\nsrA9tkNinMOYzV/CvJEe3iP15mL+e176R+JuhnR0bHkD9e+8ZJq0VUk4jQU2\nhm0q4irZRaayhJe3mhmZE/UZH3Vh6e7aYMuZBEuent1rD9oBEaPuRv1qp1OQ\ntAIoyWvxfSzyUBzZKpK7HAzzajOpOHNCcKFzxyK/TDufutWZarrxly2HadGg\nbo1x9uugzNONtCwmzZX9bGdXQVgZLcpX4bjX+Ss5qMq95tvnE/3nObvJvW/u\n5PRzbYjCyUzQNurdDAGhySEz8GRaXARq4JU1nt64FKgpAQtJvorlgzSz5tDL\n21+ziTTnnztpf+PO7YpR7FIdGIFRHYFDBXqSW/AYcURo+1+/EBwogIxa+z7C\ndCxtgnXswwCq3gkteLIdWmU/dzMC9LdUi9OefDX0UM/Y248HiZk5F9jmCH/j\nFxnAK+8V8ZJEHp+YKFmmYHk67k92Yrjkf9Ep/ip0H7S3G97C8yp0u7y3IfTn\n4sn6\r\n=QQgs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.65125b3a6.0","@material/base":"13.0.0-canary.65125b3a6.0","@material/shape":"13.0.0-canary.65125b3a6.0","@material/theme":"13.0.0-canary.65125b3a6.0","@material/animation":"13.0.0-canary.65125b3a6.0","@material/elevation":"13.0.0-canary.65125b3a6.0","@material/feature-targeting":"13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.65125b3a6.0_1631827068301_0.29426841186261754","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/menu-surface","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.80a583365.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de555cb9c05b208199208be79b38087f36dfbb93","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.80a583365.0.tgz","fileCount":37,"integrity":"sha512-hBowY2Yf7GKUxuHiCyO+/GlS/k6vyZtFO0AKDZt9bCo2cY2qX4+4TLu7e7y+S0/Rn5XE74Eii1Mb5/hf4ZKsrw==","signatures":[{"sig":"MEUCIF1GJo55I9vnbZ6J7kIh13vaNUQ2zuAjgK8adaKZ9VCBAiEAipIm6oYMrDd8HAom6HY40NYqQKd5KxbeLGNH49gcN9k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362131},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.80a583365.0","@material/base":"13.0.0-canary.80a583365.0","@material/shape":"13.0.0-canary.80a583365.0","@material/theme":"13.0.0-canary.80a583365.0","@material/animation":"13.0.0-canary.80a583365.0","@material/elevation":"13.0.0-canary.80a583365.0","@material/feature-targeting":"13.0.0-canary.80a583365.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.80a583365.0_1631910958669_0.7864470961928776","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/menu-surface","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.83900936a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c540945617eff9a5ff27d99bcf708da19496a1f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.83900936a.0.tgz","fileCount":37,"integrity":"sha512-0B5AKJpOuprHlqgHD7k6Q8Nue9uKTn1oqYXCogGvWyxF342PKaadc/wY2dhPmvqyuwwZMRXtdgS8/djVfJydQg==","signatures":[{"sig":"MEYCIQDhfP4Lzf3fxkh/cegWhxtcS33K9pDNRg6o+8/HEyHeGQIhAIx5aG+qKmujDGDzIy3meI20RhVi09nv0j5RI3mJ1Tcz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362131},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.83900936a.0","@material/base":"13.0.0-canary.83900936a.0","@material/shape":"13.0.0-canary.83900936a.0","@material/theme":"13.0.0-canary.83900936a.0","@material/animation":"13.0.0-canary.83900936a.0","@material/elevation":"13.0.0-canary.83900936a.0","@material/feature-targeting":"13.0.0-canary.83900936a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.83900936a.0_1631921070469_0.9812281341926119","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/menu-surface","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.860ad06a1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6309fb192f34f86a739d6755d12085f84653a854","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.860ad06a1.0.tgz","fileCount":37,"integrity":"sha512-oY7bHe+n6KfXOZQSTqmamz0DrlUY+XwrqCiDJngWbsSb36/bJzWW5cT6S2b2g/dCcOIQdaBFr0dCo5c6zK1FEA==","signatures":[{"sig":"MEUCIC2AerW5nVR8R5wDnYua4XPoQZJ1w6a3eQ0FabcBWHNwAiEAj1dMci7BMJWlE8SgHW3L6MNtXvdtJR1BxQDLpY/JzWw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362131},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.860ad06a1.0","@material/base":"13.0.0-canary.860ad06a1.0","@material/shape":"13.0.0-canary.860ad06a1.0","@material/theme":"13.0.0-canary.860ad06a1.0","@material/animation":"13.0.0-canary.860ad06a1.0","@material/elevation":"13.0.0-canary.860ad06a1.0","@material/feature-targeting":"13.0.0-canary.860ad06a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.860ad06a1.0_1631921754723_0.23593654464618075","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/menu-surface","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.3b8d4429e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a66a8df292e11890267d28a63a9f899ad47890f5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.3b8d4429e.0.tgz","fileCount":37,"integrity":"sha512-EO8YeyyyroBv5OA/UYwZJKcNi7NKzvUqrNnXsR+vloIr3SuyOudP/fdYQi56EPiOIjcjTAZqdKgSi9eWqs132A==","signatures":[{"sig":"MEUCIQDKwIDLAI7Nj8U6n18g4kdhi0ingvGoi0V5gz7knXSzEwIgGYq9hY1eMbKFKthxqRHFtQ9eqgDvRdwB/NVrV35nPIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362131},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.3b8d4429e.0","@material/base":"13.0.0-canary.3b8d4429e.0","@material/shape":"13.0.0-canary.3b8d4429e.0","@material/theme":"13.0.0-canary.3b8d4429e.0","@material/animation":"13.0.0-canary.3b8d4429e.0","@material/elevation":"13.0.0-canary.3b8d4429e.0","@material/feature-targeting":"13.0.0-canary.3b8d4429e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.3b8d4429e.0_1632160065940_0.47010591110077127","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/menu-surface","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.2da3606b9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ebb852599036eca906c5efd6221cabd8bc16341","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.2da3606b9.0.tgz","fileCount":37,"integrity":"sha512-c/mETChSQl68f5fBHKFKdFe4BK7rOnVKr0/7nOENjWKtJ9iEliD1t3Ivgl4eQPVOoZMpPZBhpJJvRTEzR+VtXg==","signatures":[{"sig":"MEQCIBH4jQN1mrq2II7YfkAF0hnuTp9abZfYSh/3XIqED3SZAiAn8zFVyx3rNNa5Di1nmnV8JA76X1P5CVLNKl1e7GITmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362131},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.2da3606b9.0","@material/base":"13.0.0-canary.2da3606b9.0","@material/shape":"13.0.0-canary.2da3606b9.0","@material/theme":"13.0.0-canary.2da3606b9.0","@material/animation":"13.0.0-canary.2da3606b9.0","@material/elevation":"13.0.0-canary.2da3606b9.0","@material/feature-targeting":"13.0.0-canary.2da3606b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.2da3606b9.0_1632166672769_0.1797869816182489","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/menu-surface","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.e8c598d1e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"248db01e94adb271713f3b52ab51050fe0c9ef1c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.e8c598d1e.0.tgz","fileCount":37,"integrity":"sha512-H/BX6F1XYzZ1SSmvvC58zv41Xd5xk14wBWVXcDGUVNxb3ZWY43dZnCp86C1Aa/pjlK8q4O68sZXeR8mDRj5ylQ==","signatures":[{"sig":"MEUCIG1m45kAuKnJFxH7JSyKyOLbzb2rPdAnNcQvtYEBFTV0AiEAuC4BZAaqLLQg9T1qUeGDLNio9MuV/dl6718aB5wZ3BQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362131},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e8c598d1e.0","@material/base":"13.0.0-canary.e8c598d1e.0","@material/shape":"13.0.0-canary.e8c598d1e.0","@material/theme":"13.0.0-canary.e8c598d1e.0","@material/animation":"13.0.0-canary.e8c598d1e.0","@material/elevation":"13.0.0-canary.e8c598d1e.0","@material/feature-targeting":"13.0.0-canary.e8c598d1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.e8c598d1e.0_1632172324414_0.7659502097163862","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/menu-surface","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.1340ee9f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1081ad8060eb9f78e4cb2842fb221ee43ebb0751","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.1340ee9f7.0.tgz","fileCount":37,"integrity":"sha512-Os7jtYqb5NCgL/03BpHIUvps62BSK9ZtswgJa23XNGPolMBYbitseZ/06XtrgjoaSZzzcvHl7ZxpVq+dsC4Quw==","signatures":[{"sig":"MEYCIQC+fgGoNkXqjg7so3MUoXypX8lcQ9NdIJpuMtlwPl/zDQIhAMzM39NaFNqEVixzi/cTO5wzKW30T3dnU0U5fnPGfw1W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362131},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.1340ee9f7.0","@material/base":"13.0.0-canary.1340ee9f7.0","@material/shape":"13.0.0-canary.1340ee9f7.0","@material/theme":"13.0.0-canary.1340ee9f7.0","@material/animation":"13.0.0-canary.1340ee9f7.0","@material/elevation":"13.0.0-canary.1340ee9f7.0","@material/feature-targeting":"13.0.0-canary.1340ee9f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.1340ee9f7.0_1632333469178_0.5800388679658512","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/menu-surface","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.65084baff.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad7b42f8453e23c5f47fe0ffc8ff16d1eb4de382","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.65084baff.0.tgz","fileCount":37,"integrity":"sha512-bneBhxUkI+BbGi4S6oPZJS1by2p98evpdXxlp0vMSRtEhj0NQ1QLFIlnvpoCcq7zLH7jZ/880pf5VgElGvOMOA==","signatures":[{"sig":"MEYCIQCieR3vWK/TiLy7jSlJzMmjK5lwap1uuwfUpKf3nXfRdAIhAMe1bqRN12AB7z1PATKhlJ9vqySwJ0PrnoETjj9NbA6o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362131},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.65084baff.0","@material/base":"13.0.0-canary.65084baff.0","@material/shape":"13.0.0-canary.65084baff.0","@material/theme":"13.0.0-canary.65084baff.0","@material/animation":"13.0.0-canary.65084baff.0","@material/elevation":"13.0.0-canary.65084baff.0","@material/feature-targeting":"13.0.0-canary.65084baff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.65084baff.0_1632432325711_0.19393929522720033","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/menu-surface","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0-canary.c79aa0cdd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f179e5392ff11be24dfe32e8c210498fc83e2f66","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":37,"integrity":"sha512-r9QlpH0fpoXp8UapAMx1YVOGqbyiLz9k3uY8Df4opSZU0xvyOxmm92m4rW4FfCU52Q5gNJfy3NYqx1tO8xpRUw==","signatures":[{"sig":"MEYCIQDzuEWhnYQVQrZE1zQUt0c47mtZbLSJwSnbZrt0w4nrVwIhALcarIh3+ADxvB5HEu+TZwCBrCWH3MQuMdw2mmZwHAgd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362131},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.c79aa0cdd.0","@material/base":"13.0.0-canary.c79aa0cdd.0","@material/shape":"13.0.0-canary.c79aa0cdd.0","@material/theme":"13.0.0-canary.c79aa0cdd.0","@material/animation":"13.0.0-canary.c79aa0cdd.0","@material/elevation":"13.0.0-canary.c79aa0cdd.0","@material/feature-targeting":"13.0.0-canary.c79aa0cdd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0-canary.c79aa0cdd.0_1632490909356_0.33506516349298665","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/menu-surface","version":"13.0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@13.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4c6c799e714cba6465513dbf1020ba2fcaee588","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-13.0.0.tgz","fileCount":36,"integrity":"sha512-Irfnk0l8AO7z8ucilbBzZI8izbFV/aK1GbiPpT1SmZuKkL1z+04rB2HpB+OqwaBixdLTDq70AyawcnQ0MACeXQ==","signatures":[{"sig":"MEQCIC6x4OwmUGdw8IiiXVVOkq3E5VNrMfyq0CK5snHI4xgMAiB3TyA6W34vSHbNjyqUkkeBrZdyDCaZZ71urAkk3Dswpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361270},"main":"dist/mdc.menuSurface.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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"^13.0.0","@material/base":"^13.0.0","@material/shape":"^13.0.0","@material/theme":"^13.0.0","@material/animation":"^13.0.0","@material/elevation":"^13.0.0","@material/feature-targeting":"^13.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_13.0.0_1632512762646_0.42565844432960387","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/menu-surface","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.198431fcd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"016967bdbee28bbb852fdaaaf56992fdca976287","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.198431fcd.0.tgz","fileCount":37,"integrity":"sha512-8P2Pg8YYvMM1mSH01KfJvKiK6M+jRlPELB95ele449MMlkPmaG9gcei2Rbb6txFzCwnMPW+mwhsY/ylyAIOqYA==","signatures":[{"sig":"MEUCIQDtfZCdKsmmhEH1CZVzeNsraPg9X9zZNdT+M+to6BnhBgIgPeUVISfY3hKmckbkhyYOz6pHjxFV3ESzaHvPwwTPLAY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362131},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.198431fcd.0","@material/base":"14.0.0-canary.198431fcd.0","@material/shape":"14.0.0-canary.198431fcd.0","@material/theme":"14.0.0-canary.198431fcd.0","@material/animation":"14.0.0-canary.198431fcd.0","@material/elevation":"14.0.0-canary.198431fcd.0","@material/feature-targeting":"14.0.0-canary.198431fcd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.198431fcd.0_1632512806635_0.05755466241159479","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/menu-surface","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.9a02b6ef8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2050f9345db12051ea77efac1df4aa562d7e5727","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":37,"integrity":"sha512-XyGTOX9cKZhdtP+rS+XkY/y1hJBNIy85DzBZt46nNA32NFsIMerMw+bgDV1qn7ix+nwPuVJJxk9zVqJo3Dr2rA==","signatures":[{"sig":"MEUCIQCNBol6P/KMNQcNN0Oh75nBbcxd/BcRITBhurl+wUpp6wIgTuhc2qbGdVB9oCOgpUHMB7xsqVJIgXf1Sy2YiHxQ+M4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361798},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.9a02b6ef8.0","@material/base":"14.0.0-canary.9a02b6ef8.0","@material/shape":"14.0.0-canary.9a02b6ef8.0","@material/theme":"14.0.0-canary.9a02b6ef8.0","@material/animation":"14.0.0-canary.9a02b6ef8.0","@material/elevation":"14.0.0-canary.9a02b6ef8.0","@material/feature-targeting":"14.0.0-canary.9a02b6ef8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.9a02b6ef8.0_1632575456807_0.398031433012245","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/menu-surface","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.758ce31d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8307ff253b9e399de3935a5a880d21f670c007f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.758ce31d9.0.tgz","fileCount":37,"integrity":"sha512-Fu+j7L5f+9kzCjVSuhJDQdOi2FUWxlPIe99WUbhVhlct93YUP/BTW2WXbV7WAxOhVmIAnTjQA/eY5/fNq2ld2w==","signatures":[{"sig":"MEQCIHYZOd9GibwRhQFQ1dZ/m0q+G79r0HzipSezJpVrd8JmAiBGwLON12NyMgEbP1gVIBGaJSI0Y4zp+t8ujBK++tkuww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361798},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.758ce31d9.0","@material/base":"14.0.0-canary.758ce31d9.0","@material/shape":"14.0.0-canary.758ce31d9.0","@material/theme":"14.0.0-canary.758ce31d9.0","@material/animation":"14.0.0-canary.758ce31d9.0","@material/elevation":"14.0.0-canary.758ce31d9.0","@material/feature-targeting":"14.0.0-canary.758ce31d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.758ce31d9.0_1632763750492_0.8161295634167844","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/menu-surface","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.86b50ef74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84b863a4a1fece1c9031024f14d92651f49bb131","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.86b50ef74.0.tgz","fileCount":37,"integrity":"sha512-PJOa/XUHGwr0mDlpy6rhgTfS3yjekmSVA1M+wbWNZPznJTY9wRGRA+qjGp+cYrnsnEw+nh03b/HRPYPT4iJyZA==","signatures":[{"sig":"MEUCICQOsEu8yIUwqevXA6q+TbEVgQtDqJW6JVtEKGZemvzhAiEAsz4MwzxkoIAYZmGOAYFa2pcUOYV/qhpGWXP+lMw65K8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361798},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.86b50ef74.0","@material/base":"14.0.0-canary.86b50ef74.0","@material/shape":"14.0.0-canary.86b50ef74.0","@material/theme":"14.0.0-canary.86b50ef74.0","@material/animation":"14.0.0-canary.86b50ef74.0","@material/elevation":"14.0.0-canary.86b50ef74.0","@material/feature-targeting":"14.0.0-canary.86b50ef74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.86b50ef74.0_1632850975002_0.7755499606243665","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/menu-surface","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.b2fe3528b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8970e2dea221c84859319f3263e6ba9360aef158","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.b2fe3528b.0.tgz","fileCount":37,"integrity":"sha512-boBpoFi/1PB7MDBBH6qVSCh1T9/UKJPyMnBTTYATethVhoXJ4TOrrChh6V3fFmyqmZHckTgXntre2lT6Vkzfng==","signatures":[{"sig":"MEQCICxk+fJ+dxb9zFOBFKjzymOnqZDgD+Cy9jtlLrt0i83UAiBGm0QgAQIPZuX1HRxi/N9aCynF4cnL2Q9rS3zp8H4tYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361798},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b2fe3528b.0","@material/base":"14.0.0-canary.b2fe3528b.0","@material/shape":"14.0.0-canary.b2fe3528b.0","@material/theme":"14.0.0-canary.b2fe3528b.0","@material/animation":"14.0.0-canary.b2fe3528b.0","@material/elevation":"14.0.0-canary.b2fe3528b.0","@material/feature-targeting":"14.0.0-canary.b2fe3528b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.b2fe3528b.0_1632956225257_0.596558914575885","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/menu-surface","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.586e740dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd737ad07b1d7866b3ae71bebbcff7463d162305","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.586e740dd.0.tgz","fileCount":37,"integrity":"sha512-Tl4nthuLFHi/xrbivQ1P3UkV0+nQDS0Dpf6FbDpuqvjsIFybmoRa4fJmFExrawEHW7bC6E0zFpw/TKlMQqFJQg==","signatures":[{"sig":"MEUCIQD4cSr9YETNa8c1Xs0tiYvZzn8PbNzw4qpeAkwFTdr0BgIgcgkHk+4XifhyDmTxTSEF++DsggRyWah2j5riKuJfRQk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361798},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.586e740dd.0","@material/base":"14.0.0-canary.586e740dd.0","@material/shape":"14.0.0-canary.586e740dd.0","@material/theme":"14.0.0-canary.586e740dd.0","@material/animation":"14.0.0-canary.586e740dd.0","@material/elevation":"14.0.0-canary.586e740dd.0","@material/feature-targeting":"14.0.0-canary.586e740dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.586e740dd.0_1633019489484_0.7998887438864255","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/menu-surface","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.2ac92d766.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4500bb6a55e84e07267eba3c78555cc2565b17f8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.2ac92d766.0.tgz","fileCount":37,"integrity":"sha512-dfCOPcYjDzQwDquowcoZrDjrR5C2xkqESjDnuH4cWB3UCPr6VEbg86MNZbm8NN47Q6BUMVUVgJpm6BXEquWdhg==","signatures":[{"sig":"MEQCIFNYtR2U1mNpjOAcMhbJkPFC6DayicTKc1vofmkYuExfAiB4Fx3H9aEpOan/KItuTbrVORc1bFtJPm7zoXX26IzsFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361798},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.2ac92d766.0","@material/base":"14.0.0-canary.2ac92d766.0","@material/shape":"14.0.0-canary.2ac92d766.0","@material/theme":"14.0.0-canary.2ac92d766.0","@material/animation":"14.0.0-canary.2ac92d766.0","@material/elevation":"14.0.0-canary.2ac92d766.0","@material/feature-targeting":"14.0.0-canary.2ac92d766.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.2ac92d766.0_1633462107480_0.2968884456964973","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/menu-surface","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.353ca7e9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25ad9aca5b7b352d614fa87b0443a71f77d3ea42","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.353ca7e9f.0.tgz","fileCount":37,"integrity":"sha512-iTdbxE+0a/SaUanaAvafAoXEsfDK6jrD94U8sXfXfPm7xKVy4Bzty1pGLLl2c5aszv5rI0uT0jgVVOUhUrYhag==","signatures":[{"sig":"MEQCIEfcy2Y90y+7xAFaGic/iesa4ERbxlqqcXV0YhH0DD+EAiA64OEgASK1kPGH+OgzLDEJx3X5WAPUsnJZ3YBvg3hwlQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361798},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.353ca7e9f.0","@material/base":"14.0.0-canary.353ca7e9f.0","@material/shape":"14.0.0-canary.353ca7e9f.0","@material/theme":"14.0.0-canary.353ca7e9f.0","@material/animation":"14.0.0-canary.353ca7e9f.0","@material/elevation":"14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.353ca7e9f.0_1633718826672_0.568660263795105","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/menu-surface","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.c78ff0429.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"084349a9b9c20cbf61534b9a529af67129345bd9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.c78ff0429.0.tgz","fileCount":37,"integrity":"sha512-5j0vKwMJeaLQ1Khlkxw3TsVxCnxdEk7R2Y7ZnV1pEgHdqsSQUDGsW5kSWIBfzXIzTi1MvjkRzBJD2Q2T6mglhQ==","signatures":[{"sig":"MEQCIA7WMHuOhfxg/WQOQDuDxCpqFTWm49tkrFYXL3RpZrnUAiBOke+gbZshRJoQXeyPw470QsoRln55hlEkyj7ukxzYtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361794},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.c78ff0429.0","@material/base":"14.0.0-canary.c78ff0429.0","@material/shape":"14.0.0-canary.c78ff0429.0","@material/theme":"14.0.0-canary.c78ff0429.0","@material/animation":"14.0.0-canary.c78ff0429.0","@material/elevation":"14.0.0-canary.c78ff0429.0","@material/feature-targeting":"14.0.0-canary.c78ff0429.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.c78ff0429.0_1633972918816_0.3811993016126023","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/menu-surface","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.261f2db59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5332e93bdd4724745825396a0f336b0114cfd96e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.261f2db59.0.tgz","fileCount":37,"integrity":"sha512-zv/fv/W3zdSb+c/p6GNcOqA3+wAc/r8MOtV53WJPLlvZZSpGoTwHUp+GPiNeovfbsTSxN95XOXuVQBEfKEb8vA==","signatures":[{"sig":"MEQCIB8Fo3FXqztjOH8UaPXF8ceE0ZiIwWGRKaEWMCpiKLpQAiA8G2kFicKiHA32bc6dRYGwCPUVJlIYkPblXrtmQbivLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363939},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.261f2db59.0","@material/base":"14.0.0-canary.261f2db59.0","@material/shape":"14.0.0-canary.261f2db59.0","@material/theme":"14.0.0-canary.261f2db59.0","@material/animation":"14.0.0-canary.261f2db59.0","@material/elevation":"14.0.0-canary.261f2db59.0","@material/feature-targeting":"14.0.0-canary.261f2db59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.261f2db59.0_1634749176600_0.22705513728169446","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/menu-surface","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.9803d2dc1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12dd5c9709cb087b869c7cb726dcdbf3801539e6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.9803d2dc1.0.tgz","fileCount":37,"integrity":"sha512-8/U0+48jqAbcA3v6kvz48RGBWB1Hd/sZEWKYQBWSawHwXAr+DLW7xcicrsQ4FX4N7QCrhMLEkgHxu4KIHEcguQ==","signatures":[{"sig":"MEUCIQDhGyIKYJ1mTxGB9AMN8XAYqyuZgs8MyWKag5hTISf87AIgJKNSl4i2yIp8Kcrykvr8DpOJ4x7cxvhH4nmlFoLTioY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363939},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.9803d2dc1.0","@material/base":"14.0.0-canary.9803d2dc1.0","@material/shape":"14.0.0-canary.9803d2dc1.0","@material/theme":"14.0.0-canary.9803d2dc1.0","@material/animation":"14.0.0-canary.9803d2dc1.0","@material/elevation":"14.0.0-canary.9803d2dc1.0","@material/feature-targeting":"14.0.0-canary.9803d2dc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.9803d2dc1.0_1634757722999_0.2847944015032007","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/menu-surface","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.348665978.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dbecbc3786b9efc6cfb6b693f38538a6f60ea49","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.348665978.0.tgz","fileCount":37,"integrity":"sha512-Z1RIvHVSLtBDESYXyQln/oyqVP8+S3J4UuyEHWwEVhcOcXO9viBSWoJyva7qY57ahuMiAUz7sMDFcs/NRiJjxQ==","signatures":[{"sig":"MEUCIQDYTVw1qrXrt5LAbLTjutfoHSv2WfveBh3U1GZaC4qRZAIgOoZQINhXiuACt9yc1XbPur0ozv4qnJ3eNjuk3XqG2bM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.348665978.0","@material/base":"14.0.0-canary.348665978.0","@material/shape":"14.0.0-canary.348665978.0","@material/theme":"14.0.0-canary.348665978.0","@material/animation":"14.0.0-canary.348665978.0","@material/elevation":"14.0.0-canary.348665978.0","@material/feature-targeting":"14.0.0-canary.348665978.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.348665978.0_1634827856747_0.5486522805103722","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/menu-surface","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.b2b979a8a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bffdf9071ef0ddcb06dce6e2162bbf8c55a2272","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.b2b979a8a.0.tgz","fileCount":37,"integrity":"sha512-iXPE0owx756aRg+mQhJH2OpXifyjRi/A2hVFR2A7JWUYt3a0+05NQFctaoXq08k+/Zr0PdVKqLrtvGMnOoh3fQ==","signatures":[{"sig":"MEUCIE2xDAgws/tm4GHTzBp4xgjaas9n0ZOSHU4Fguo/hl9wAiEAlD2Vz01cLp9eBz9KdfbE/hkUNTC56Wb2hjEvaJZxcek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b2b979a8a.0","@material/base":"14.0.0-canary.b2b979a8a.0","@material/shape":"14.0.0-canary.b2b979a8a.0","@material/theme":"14.0.0-canary.b2b979a8a.0","@material/animation":"14.0.0-canary.b2b979a8a.0","@material/elevation":"14.0.0-canary.b2b979a8a.0","@material/feature-targeting":"14.0.0-canary.b2b979a8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.b2b979a8a.0_1635433951786_0.8785026083457346","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/menu-surface","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.1af7c1c4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db03495cba95096535ec95cf7f23fb75a18cbfc2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":37,"integrity":"sha512-V8CKM/oS6mrS20MWs9nvNuTZiuc6o6df+QMeqzjxFRUKwSqn1KOj3O+mCvFoDqixIQx4pXxJTniltGP4V3ALEw==","signatures":[{"sig":"MEQCIBBTZTK+IWqz1pFCxow8E4j5e0JVvOdVXP9Z1vuP4I/xAiAW45/K1K4DbpV97VzlX1E9O4eUq6pp/nKNXqH3XqcYuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.1af7c1c4a.0","@material/base":"14.0.0-canary.1af7c1c4a.0","@material/shape":"14.0.0-canary.1af7c1c4a.0","@material/theme":"14.0.0-canary.1af7c1c4a.0","@material/animation":"14.0.0-canary.1af7c1c4a.0","@material/elevation":"14.0.0-canary.1af7c1c4a.0","@material/feature-targeting":"14.0.0-canary.1af7c1c4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.1af7c1c4a.0_1635443564871_0.9758212277709177","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/menu-surface","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.4afd353cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0765d73b32f92f3585e760195afce58fd79ca98f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.4afd353cd.0.tgz","fileCount":37,"integrity":"sha512-CcwrAfh/eFtjKL7BkRNjLSJLEE5cPnMAL5oaDoBSFHKM/2LBLEDP8VU9TX7/PCtKF+l6WTU219lXmc/Xp9sykQ==","signatures":[{"sig":"MEYCIQC19OzhHIzCWg77b2Kjw9w8VyCVIuUzfR6LyDNR9fgg5wIhAKOgfxUk+gIGc2DTPvjhQhmk///B4iCujPu4OYsdn5Sk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4afd353cd.0","@material/base":"14.0.0-canary.4afd353cd.0","@material/shape":"14.0.0-canary.4afd353cd.0","@material/theme":"14.0.0-canary.4afd353cd.0","@material/animation":"14.0.0-canary.4afd353cd.0","@material/elevation":"14.0.0-canary.4afd353cd.0","@material/feature-targeting":"14.0.0-canary.4afd353cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.4afd353cd.0_1635519689131_0.11130491597216907","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/menu-surface","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.a986df922.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d935582d6ba9341c6726604ded4a08d60ea44a65","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.a986df922.0.tgz","fileCount":37,"integrity":"sha512-CvY/AK+2uYFwztFdl8S61ds0w1kT66xmyhA0G8SESeOCnIu35cTRGUel08talrcqtDDePFkoVA9Ls+rINFgTVQ==","signatures":[{"sig":"MEQCICHvZtT02XwFLFUFvpG0trlop2vgslGzMIfczI//2K5vAiAzQpb3TqJVAZc+y1gWZdc1KTSUlbqfvYVjQKIl6AzykQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.a986df922.0","@material/base":"14.0.0-canary.a986df922.0","@material/shape":"14.0.0-canary.a986df922.0","@material/theme":"14.0.0-canary.a986df922.0","@material/animation":"14.0.0-canary.a986df922.0","@material/elevation":"14.0.0-canary.a986df922.0","@material/feature-targeting":"14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.a986df922.0_1635543297957_0.9004627217822572","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/menu-surface","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.c3cdff07b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b6c6911ade70623b59ff3a06f6064cf7ce48d20","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.c3cdff07b.0.tgz","fileCount":37,"integrity":"sha512-4A53DV8Tz1Wpz9H7amS61ShSgqdlMvUog3K3YdNrCRtye7gNK5i1Yh8XVUTyXbkv+w7c0mWR60ls+K/ydv4HZw==","signatures":[{"sig":"MEQCIGYy0KcfIyWmmVJ2t8MVaVr4JDvxiXbq+JU2vPbXEh5uAiAuz7U5tQsvl3fvdF5vKSgsRfaUVVrS02CYUL2+jiP0Ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.c3cdff07b.0","@material/base":"14.0.0-canary.c3cdff07b.0","@material/shape":"14.0.0-canary.c3cdff07b.0","@material/theme":"14.0.0-canary.c3cdff07b.0","@material/animation":"14.0.0-canary.c3cdff07b.0","@material/elevation":"14.0.0-canary.c3cdff07b.0","@material/feature-targeting":"14.0.0-canary.c3cdff07b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.c3cdff07b.0_1636484749780_0.8363218882431949","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/menu-surface","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.468392606.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7142ee1c84000df2d49d3fbdff87a9f78a66383","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.468392606.0.tgz","fileCount":37,"integrity":"sha512-n5vP6KgSOIb7ubKp9a7uaHaUE9l3I0hkRfVxh5zxmvHuClC3KfWG4oELKYU0XsV8Fd/bns3rKfI+XRGzIrS4QQ==","signatures":[{"sig":"MEUCIFytplnDUi/f5hfbTqHvPg1F6Fm6dEy7nXA55LP1pjvvAiEA2ybhor1eM0RTIZsoz6lOZbXS2++6h4MhlfjZS/tRFxE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.468392606.0","@material/base":"14.0.0-canary.468392606.0","@material/shape":"14.0.0-canary.468392606.0","@material/theme":"14.0.0-canary.468392606.0","@material/animation":"14.0.0-canary.468392606.0","@material/elevation":"14.0.0-canary.468392606.0","@material/feature-targeting":"14.0.0-canary.468392606.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.468392606.0_1636659619463_0.500945222592313","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/menu-surface","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.828f9803b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74369b46bdc784cef093e2c4a5c19d6fd765e3af","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.828f9803b.0.tgz","fileCount":37,"integrity":"sha512-qQFyHMeXtWbXlNpDdn24IOgQIyCg7NCEQBj4orpHj+9zIQLR1cxFUen9ipeos2IXXQ+pbe1Rz95q5GKtkuXqCA==","signatures":[{"sig":"MEQCIA6N4QogzVekr6ti62pBuFtUe9yjBtFKnWOnGTFhlZtUAiArSVs5xenlclbgZLDD4ZRzCqdGk3UJtWx05hExD2gHog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.828f9803b.0","@material/base":"14.0.0-canary.828f9803b.0","@material/shape":"14.0.0-canary.828f9803b.0","@material/theme":"14.0.0-canary.828f9803b.0","@material/animation":"14.0.0-canary.828f9803b.0","@material/elevation":"14.0.0-canary.828f9803b.0","@material/feature-targeting":"14.0.0-canary.828f9803b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.828f9803b.0_1636660261453_0.5934793531757221","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/menu-surface","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.8795cba87.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"358741c657d232b98c68c33858b336d5b81beab5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.8795cba87.0.tgz","fileCount":37,"integrity":"sha512-99SGarkqnSrvdozYIRJwk+SHwQmLop9P5aXH6VFbTASUsqlOlM491H7XIC7XH9jKwsQ+q80inCI7M9MoNdaOGA==","signatures":[{"sig":"MEYCIQDjZ5rN+FzPuKoRYOvBZtKc4ZLj16V14FL0n3GfFiLWiwIhAPcJ2/C8GilucDSw2UPcLhohlxJQFxoTUlsoVJtZY2kg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.8795cba87.0","@material/base":"14.0.0-canary.8795cba87.0","@material/shape":"14.0.0-canary.8795cba87.0","@material/theme":"14.0.0-canary.8795cba87.0","@material/animation":"14.0.0-canary.8795cba87.0","@material/elevation":"14.0.0-canary.8795cba87.0","@material/feature-targeting":"14.0.0-canary.8795cba87.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.8795cba87.0_1636660617698_0.9154455007046847","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/menu-surface","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.cd7f8cace.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d6d9fb4900191cdf7dc03c1a843e47b42caf6c2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.cd7f8cace.0.tgz","fileCount":37,"integrity":"sha512-12pGQqL35ldmmcJjvFT99T08MsMp7PmXeVnHG4E+eTJSjGTj+cpI6gCMHbSDIGDU7fnjWvZRKklaD970HX4TXw==","signatures":[{"sig":"MEYCIQCzlx0NjTyE/0X7dguydKREt3vCfGzEDAs0qRibcim6EAIhANv4aXhM1RPJBdHk2+DlByf/6Udg7egwsCYDjpAwNzMQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cd7f8cace.0","@material/base":"14.0.0-canary.cd7f8cace.0","@material/shape":"14.0.0-canary.cd7f8cace.0","@material/theme":"14.0.0-canary.cd7f8cace.0","@material/animation":"14.0.0-canary.cd7f8cace.0","@material/elevation":"14.0.0-canary.cd7f8cace.0","@material/feature-targeting":"14.0.0-canary.cd7f8cace.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.cd7f8cace.0_1636660722373_0.6106838727512272","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/menu-surface","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.207230eb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e688515f265e4d1b15427fe06f4fa03c30978ff2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.207230eb8.0.tgz","fileCount":37,"integrity":"sha512-6DAR6ze2Vd0Bxv7FbrS5MpzYlhKAmGTdf/FRHkre9Iqn5YhDa7oB203iKmoivZ/RCQYKshCQsQO4LC8NIRpg3Q==","signatures":[{"sig":"MEYCIQD3yyoY0ImNd/AStM25Lqe5nec7BorVrz1bgNZyvFqGyAIhAMedZPyNqkOf2N1HYzxXofc/FbNHAakWK/LwxrFS6Ahr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.207230eb8.0","@material/base":"14.0.0-canary.207230eb8.0","@material/shape":"14.0.0-canary.207230eb8.0","@material/theme":"14.0.0-canary.207230eb8.0","@material/animation":"14.0.0-canary.207230eb8.0","@material/elevation":"14.0.0-canary.207230eb8.0","@material/feature-targeting":"14.0.0-canary.207230eb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.207230eb8.0_1636669461503_0.7701284703735192","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/menu-surface","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.991fb99f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e08af803d59f1fb37c41e91c15f2a45cc2ca47e7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.991fb99f7.0.tgz","fileCount":37,"integrity":"sha512-s72pOTimIKRMCtBnMs8JP06+f+s5VqX1VNIP/58IAphZak350qZa9Q7Q+pj6WaSwqcRmMoxzXHBUWgDoz3VUVQ==","signatures":[{"sig":"MEYCIQCafmaSlw4m3BAq3iwHHugfRVkxC5JdCRuEHGFJNeDJ0gIhANPK4WShyBjjQpWLBU+p+AhUHxWESOZmvVskGH2gHVgy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.991fb99f7.0","@material/base":"14.0.0-canary.991fb99f7.0","@material/shape":"14.0.0-canary.991fb99f7.0","@material/theme":"14.0.0-canary.991fb99f7.0","@material/animation":"14.0.0-canary.991fb99f7.0","@material/elevation":"14.0.0-canary.991fb99f7.0","@material/feature-targeting":"14.0.0-canary.991fb99f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.991fb99f7.0_1636670197987_0.5843012168778334","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/menu-surface","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.15db4f164.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb7e034bc2f64374932b18c68b074016503479ef","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.15db4f164.0.tgz","fileCount":37,"integrity":"sha512-drLMj5rGXKPo7IUW9gLDERs/cU8aHrSNqo72nyf7n24kFvydwVjs1kxBnq10hfverCe5IiHBJH44gSXlvBSmgg==","signatures":[{"sig":"MEYCIQD3ADrDceqpM9ZxtKR1qsvW3HuL6D1gNOy+Er4J7SIJJAIhAK7ruiYVHeHaYJ03sUa9HFIn6EZbZrwLQ23AXa1hBTtH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.15db4f164.0","@material/base":"14.0.0-canary.15db4f164.0","@material/shape":"14.0.0-canary.15db4f164.0","@material/theme":"14.0.0-canary.15db4f164.0","@material/animation":"14.0.0-canary.15db4f164.0","@material/elevation":"14.0.0-canary.15db4f164.0","@material/feature-targeting":"14.0.0-canary.15db4f164.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.15db4f164.0_1636738198785_0.45417562706191794","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/menu-surface","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.8fcad5a3c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a424079ca17bdcbe514d5d67af541b37961486a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":37,"integrity":"sha512-rd+IL3uAARaBKN4boYYTNewZw9UHwmiMBrrZ2BJqZUaszAQ8AzW/zVZPQEAWDJyzIMTC+dit3oLjdTT5x0AuTA==","signatures":[{"sig":"MEUCIQDud+R8+XFPfWWfTRSb8OadBme7GiYcCUgb+JLa3uPjNQIgEK2PYrbnz5iXv861xIb0RJOesGaBktF/U5+pyUKAOF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.8fcad5a3c.0","@material/base":"14.0.0-canary.8fcad5a3c.0","@material/shape":"14.0.0-canary.8fcad5a3c.0","@material/theme":"14.0.0-canary.8fcad5a3c.0","@material/animation":"14.0.0-canary.8fcad5a3c.0","@material/elevation":"14.0.0-canary.8fcad5a3c.0","@material/feature-targeting":"14.0.0-canary.8fcad5a3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.8fcad5a3c.0_1636744424944_0.6935057790392234","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/menu-surface","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.f81fb1d23.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b2cd20f8b476b9e6298d24651607a65edde8d35","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.f81fb1d23.0.tgz","fileCount":37,"integrity":"sha512-l5CFHR5wYXaQOB9wkv84Tk9Ffi5/pXljiuCSFHLjmz15PNRzH6R2a0nXIcxDd6oQL3MzXve1HB2qFRmQ5lkUdw==","signatures":[{"sig":"MEYCIQDaQvsOOuyOIMiF9JB60AthLi01Z2+eHBaclyNxtiZq8gIhAMKg9uyl2jwjUg60OUZj1OyO8kGpgtKKavS3Lq0oOh5l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.f81fb1d23.0","@material/base":"14.0.0-canary.f81fb1d23.0","@material/shape":"14.0.0-canary.f81fb1d23.0","@material/theme":"14.0.0-canary.f81fb1d23.0","@material/animation":"14.0.0-canary.f81fb1d23.0","@material/elevation":"14.0.0-canary.f81fb1d23.0","@material/feature-targeting":"14.0.0-canary.f81fb1d23.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.f81fb1d23.0_1636756828003_0.7836906636484224","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/menu-surface","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.783f6fd5a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38b93e07ff731edf80b164bd4731bbade9f08347","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.783f6fd5a.0.tgz","fileCount":37,"integrity":"sha512-AfpjtJlG7TefezwsVx+8xh5cl7jcsmTE+8WXdGuCgvA/TCCTM8Q+KCRH/CQpp5RmYhYLK07+4aU4QqM5dl4yzA==","signatures":[{"sig":"MEUCIEG2K54O7eQlXxtz4sYFWwnibAM6kUnhHe6QryfKOpixAiEA9OLUaJ0PZDK46GuWljJhaGDazYIPKY3GK0x5/fvOTqg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0acCRA9TVsSAnZWagAAdrYP/0RHmWSV9QI9HFwmNqQ1\nAEJG6UZkUXXHhieQOErURR4BGwaynKGm1pLhm4sPpyeMJpzgGpis9Llv89by\novajzrhfO7q966onApECs8YeQZTfFZGdLgY4ABz0AoM2EpxvZtyjVHPqSOtF\nO9yjhqGwHXwugC70QDiELzexpG2WRxZnWxVvKz/wIyLBCT40gkEimMH8tKUF\nPwhIz1bk6S1tc8dKl3XZ4dr5dYTDO+rqtjaJgUn3pT9jk/mnhpXDzLnbBDjv\n9QcSR1WGpGUdRGOvc8z37PKZHayNB3dTvdlhh8QSRL1LIOi3bEjVu2Kd+HN9\nW/OTCbuTLCNakyX+hnUuL1k2eBFiLjj14Ft5CN1i/DvcnJt9jTrc8qkllcVF\nJqksxPPdUtCw1H5DpxT3SO6BarWnb7UH7Rkh/5VnS5DudVWSIrLskrLa0ZXW\nX4QU/EvIM6EWs7x5TPFnlmy6r2WcwyKw2JBOGMBPvGbLHx8QHvmcP+xPhmMk\n2ebNl36/DEU7fxqlT6B4YNOYvWflSYfBmY9n2P8/jEQDob2gL78Wt9IwY36n\npWLR229lT5/8ktwKopYuPf6KjCnSnMxspeYE7R2WbaVJclMNN5LCIH3BO7jl\noWQLqqxUfmrq3KBIGNisq+kAFnw8rsI71vxKUravHO3wdMdg3nNOJsPKzkK6\nnUcF\r\n=pb7J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.783f6fd5a.0","@material/base":"14.0.0-canary.783f6fd5a.0","@material/shape":"14.0.0-canary.783f6fd5a.0","@material/theme":"14.0.0-canary.783f6fd5a.0","@material/animation":"14.0.0-canary.783f6fd5a.0","@material/elevation":"14.0.0-canary.783f6fd5a.0","@material/feature-targeting":"14.0.0-canary.783f6fd5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.783f6fd5a.0_1637041820154_0.47738579263181946","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/menu-surface","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.d57ec74c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"820af2edaca542a4604d9992345f9a623d2eb797","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.d57ec74c7.0.tgz","fileCount":37,"integrity":"sha512-Ph5E+kaNIt2uZfNUCoVuG3VsS/CbUBsnRDatCuBtvtVP0S+ZnQzB7ymEErjPqg+EAw8WJqnhcnbG22ERpFXYyQ==","signatures":[{"sig":"MEUCICghyv+2ARtvVUaTYRN/pC7WUyVewUH4cH92QCr8+PGaAiEAr7hcLhKB9YbbL+MwgFX7T6dblzp8eMuY+zvs8az6chQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9lzCRA9TVsSAnZWagAAXjEP/iV1zb/hC9pVVE1Gao7Y\nGt41E2GNIoqsqsJ6yuILmS+Pfz42kp7jxExSCHCa2PLE0FAXhm3WqTRCKbkq\njOTaqlXFAi7HZnYPOUuetWqJ+ql9Hjwi1RN97p5/0jmPPIg2tkp2PWYC7DIG\n/G/AMAN+eowYdUcgvdy44g1oMwa1zL93sT9hR49ngluAA8PbFdVpvKGxKO2h\nvv5oQJoeUvEzc0xZfDgeynVI5AGB4ttoijYpSWmr02OATtAUfnopreqMcuMm\nQoFLnztokvYanefdx1JZHrHp2RbQXELJBs96N5n5AMrkZ0qjuih+YNlbki/h\npp4E9qdfZQjLrxMBogEdkk9n5Dxf2x3hb5sizWEz1hEViOJuawuTyFN1ywFT\nV6w43uuEk6gjCGy9wpkVIpqInOs0f5n3XGSkKHRnXMBJk8J2fL5vkZ/XwBz8\nLSRaZqIjHVZmaNGAkpR1WpFSV3X0v174jR3n2SgTUVJ+k6/+O0s8M6w04GN1\ndIp1eUvSONHJqJj3rCwqXnl5VVlTixkXOozqGnfzvtA0kJkW3/ZiE85dKA1t\norSoH4fCjP/nnCbQgfpTWJvVj1QevS3eSjQIqcDmDbs2jn5inGVf64ZTBqkV\ngAXlri0Hd+acB7BmT242r3KzK2xwIZeaBToeEmTf2qIf5Xsau66RJGC9ey4q\nON9W\r\n=fy5M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.d57ec74c7.0","@material/base":"14.0.0-canary.d57ec74c7.0","@material/shape":"14.0.0-canary.d57ec74c7.0","@material/theme":"14.0.0-canary.d57ec74c7.0","@material/animation":"14.0.0-canary.d57ec74c7.0","@material/elevation":"14.0.0-canary.d57ec74c7.0","@material/feature-targeting":"14.0.0-canary.d57ec74c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.d57ec74c7.0_1637079410999_0.8718796480701481","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/menu-surface","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.554c71829.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9f8602ae4225e332fb697760328d06f16c647b9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.554c71829.0.tgz","fileCount":37,"integrity":"sha512-aqFl0Edzwk06jGtRLh0MkTzH7fIdcLovqOqzoAimvM+2mNt/A1NVh1XZ0QjrF4TW8IvBShMpgi56aSKllAV9Cw==","signatures":[{"sig":"MEYCIQD1Vvf1VmNTqBQJH7zEN3/h7/oW45fWfi6L8utyGXtonwIhAJXTGuIfYg/dWSMABp+8d/KVbAQFqLbjh0WehOn0X44F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9ocCRA9TVsSAnZWagAAypcP/2JFozGcE4JkX98eplK4\nxjhWglHaLEZWPfXtJCLUgynkySizWti3l1CM8Ru2smXbFqKxEUhfJcHQRqiK\n2Kj0syun9Fgsd/FRfgXTV7dyxJ/uVXCJV8k/3NqHf5HsN69bYGa30t0cJBGV\nfEKKzF/f0bF56OI37u3Yi0/VFLyY8qVvU2Occ34g71KV2ma4NdI4HZnHWvem\nfHfYezSjyQqRCUYJeffN4JB4FZBGxNqzscJQVbrhvDOEfas8wikhLjngW8BD\nVeXhk6hAgzrqU2rcaV8pqG+QWAAKRQ95mwUbl+vlZirPq/F2mlbxy2Kq1wGa\n/tLcqrM8aIUIbLTJlN/He2XzQ4Z5auM963lOo8+KoZcZTbRwLOy6wnl4THAy\ngMbMjSFQXJ9ngKRAVjTXAEqi9QXTCjHnk5fGV4THJlay1UtCgnRGOPC7kube\nhGQFVGqO6HNMzRDUud84tIJMHFBynUOFwpZ+9fx3iXxM6aEwSzTo63QzguPC\niRotVsVwAK/nG1DTeEnIqO7ARNmDc7lpIto+k5w49AOfXbRa0f174fy39x/1\n6eBUe6kLWokFbs5QxdVu/CBEy7OAKLpQ/u3xhfMLMw3QQlS/P9oLoRVcVCeS\nkGOA0uww1enXSnf0YXOarN7nlfpXmHvvbsH+3kpZe7y7Lk4w1ufvSgOCNIwA\nbDCS\r\n=NI7D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.554c71829.0","@material/base":"14.0.0-canary.554c71829.0","@material/shape":"14.0.0-canary.554c71829.0","@material/theme":"14.0.0-canary.554c71829.0","@material/animation":"14.0.0-canary.554c71829.0","@material/elevation":"14.0.0-canary.554c71829.0","@material/feature-targeting":"14.0.0-canary.554c71829.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.554c71829.0_1637079579859_0.07341741819329606","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/menu-surface","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.3ef470efe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ec981b2ca18aee6f0fc1f26de1f052f4a0e0f72","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.3ef470efe.0.tgz","fileCount":37,"integrity":"sha512-Ed1Wke6ylVUyFQvkLAULsTbf6j2aO9t+eU5FeZ60ZDFfC7CuB/+Lw5pIJ2DSpX4KfNWrWBz++ku5oog3lKBUgw==","signatures":[{"sig":"MEUCIDAUtG+dY1zhO3O955IP7BNTXtQRENhdqq8qnHv9E4cOAiEAjLlJcTtLbg2Huh6ZXGMmgHbc94rpJlJ9CWcf/NPJms0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9s9CRA9TVsSAnZWagAAkTQP/3mTHNuOpP913UkdlRmh\nwXI3fRLmKZGRVZsk48APzrhw+J/ZGMHztxUTjBmgfYvlHLH7CcJrfW6m72gy\nFHQS2IUYuS+abyD7wuI0FLC/x8l6fnf7bXxTGkcuKnuMiHNmvomTEphOpVsx\nt3oY8j70eIYKZW44cELF5lRYE0HdjiPBjTkZwH+4yMcAxM6L9Y2BbjoamIu9\nYNbFLedE7dfhk90km3ByAxj92d3zc6mNpUM9DfEgNUW5QfWDaQtzyBV0Pffd\nZh6CN7fAksNGvmQVztdMXK2iOgFXTMRcjjqwJL/Swf7MPq3rxEfflssSbfWo\nOP/KKQDDajLWY6KfFVgVEbG5SU0rRuA8XGTDjwGYcnTVv7ZDNvqwiEUmkAvK\n0bgtxvq+wYFygiZy1uRDWCG3vtkasdaeO9ZrD9PbHqJPzgZMEjLaqRiVXDxp\ny1HDxhPzY5H2rY0+umSVA+nFxR2Ns10qg3U2UZbJjmHel9g7zh8toy6sjzby\n4o2RMelr1GuE3/2aJo4vP1uJnM84w7/RqB20l+BhQT18nlawaGmLQPZ1kWrN\neqVQACESxS7/DVJnwWsrVeJwF/pfSSKZwHaKOCSWFRPtRmxSqCqAitq1ZE7S\ny71yNhGmo0k9hILmIngHhWDuGUlpei+LLmfw4vlF4g9pSOF/ZWz0/CC93ucF\nmapJ\r\n=vVlg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3ef470efe.0","@material/base":"14.0.0-canary.3ef470efe.0","@material/shape":"14.0.0-canary.3ef470efe.0","@material/theme":"14.0.0-canary.3ef470efe.0","@material/animation":"14.0.0-canary.3ef470efe.0","@material/elevation":"14.0.0-canary.3ef470efe.0","@material/feature-targeting":"14.0.0-canary.3ef470efe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.3ef470efe.0_1637079869508_0.8457554677664365","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/menu-surface","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.61a28b2b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b9aa4cb986d3b032aeafe009925cc3f7ff88a55","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.61a28b2b5.0.tgz","fileCount":37,"integrity":"sha512-OCETSTPMD0Yh97VY3E9yk8In9vUxUXkubvUBVlbrDutzI9+HLblxBaHCK1YVLuoDL4P+bwq4klk2B6DxWWArGA==","signatures":[{"sig":"MEQCIHP7FIb3pId/0qtjZWp2SB1dQMiy6L81qqxQfm5u36MXAiBgRKTX80pcVMQqdwbhwqS/JSPr0OW44T18RO8g+WWqRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVEXCRA9TVsSAnZWagAAc0UP/0shqkKcjHNGOgzAViPv\nuhaRSxpRFBbExXrf+AJEBkGKlKl9CGpma4fX3xC3XuVpKFYq1wiiPPuJhJg+\nDART6vvCGuF46vrroQOkrcMZo0ACxjAh7XUENAcK5eBtCztYHY72yHg8z1P5\nEKLrI5bp2s1upAQ8f1KVCD4pQbo2j0CeOYkwRJd/+0mVfk1vChBzCl3X9RNg\nZYyjiPUvHCGCfiOB1q9q4HXeHjseHWYkI2kMdOi9c5kWhXN5mukQL4oLUJu+\nuPniTNxSu5/f7p7/eb6zQ+Ui+6nQLP4kaaNvvo9/r9vI32f9gVNPi+9x4CTr\nXvWNFPrfRAHCdOlUdeU+25Khj6BtBsz18zuUnHMkQLsDzDtRISKPKtJllKwQ\nDpWywxfeFKWfr1mrKAgVeSgh2t+itRc6/qnCfHzmFWTRRT3ZY9yfMz5HYO0v\nPYw6s70AyRP7P2rWlyZQoGMn6aFZoNAQudixhgwVwvI7nFW6VijwR301JAxx\nebL+q0IpUriRYBin4HtNXOzMsEf3KupQqp9VwIOQnzKRig5R7e3bchrwwhMd\noGCWspgIo/n1HPt8bUjKsnicryv0PiGvH35GLD1E8ijX1jVtcqvHiDOmRU5t\nWNg20zJy++MUSpjcUPPcrV9XclU97zcinNxXZOF8b6rx+uTuIUDkMNyz4O7D\nkq7j\r\n=40Xm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.61a28b2b5.0","@material/base":"14.0.0-canary.61a28b2b5.0","@material/shape":"14.0.0-canary.61a28b2b5.0","@material/theme":"14.0.0-canary.61a28b2b5.0","@material/animation":"14.0.0-canary.61a28b2b5.0","@material/elevation":"14.0.0-canary.61a28b2b5.0","@material/feature-targeting":"14.0.0-canary.61a28b2b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.61a28b2b5.0_1637175575374_0.8130692355045335","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/menu-surface","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.fae6c652d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ae22c9132a4545f6d9fba47d987196e8d55027f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.fae6c652d.0.tgz","fileCount":37,"integrity":"sha512-6aOJpBVEgzNoG4R2a7dE0/NqzayGi054Fl7KFwdbXyGQM6A2uC9SQw07JLlesRTrbtqmYap2Xx6KmYz8go8OLA==","signatures":[{"sig":"MEUCIEqSEl675BfaQIyVfyLYnyflm2dSWKSPLGVkbXcH3yiwAiEAs3cbG9XR8NIPnL6HMkrsfEa3WMBRrMlKh3s/lqTKpHk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln5wCRA9TVsSAnZWagAA3LIP/3EGqioZgtyVB4XHJFsd\nTcSPyCCqtGZzpCRgFdDlYZ/PUV4NJkA/hoM7ljj82sEEpubdOJLkry1ruOVS\nuSFCsEy0krloW7X+/EQOVJfKpBH+4pgbMOqm64I8YTCRxxKZMn1y73LUOw5S\nhBC5GtrkjFgt/xHy3pxELLEwETLuUc+9+4OXzVGoid4SLKToH+EsuXhUiULf\nnyXoQGcuJC/oynbh+F43I5tEww1PuwpuVJ63qzQOu38Di6WfYOJMUJJ576y2\njEfuTyCp7b7Bjtxgn1g8SrWSg5X1n2cQBdeWVEs5K8ChYHGE3XHlmIroPzEC\ncRsa2ci52IkmVxUpOOZzSeYgQx37JX6iE7mNIvb9doEffCAzEeB075a07Dcc\nTuYwOQ5ltxmTM+yfFZk/mOg1C75qaQSH1Qc+zMTpN1up4nIiWI3qxWmAUnsR\nPTxgBoI6zD2JJgQ46PKmZ4+1Bf8fF3sIbKSLUfuOypuG9alxNG74u62prM7x\ncQUH3WB+TP3yiZwKpgvu1fAx7ssnc2L4uZ1q7+6vC5ExELOjATWLOe1gC1aR\n0QKPeyTUnXJlY/YyfBK9/O2JsKg78152NXN5AlH6A468JXwTnzINLkrmL33+\n42hZFR3bjB+17AGtsIrHUOp5BxiXB2xII2r/V5XR+j73etlbiP2K/Oii5ghU\nY2Ds\r\n=Hi0H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.fae6c652d.0","@material/base":"14.0.0-canary.fae6c652d.0","@material/shape":"14.0.0-canary.fae6c652d.0","@material/theme":"14.0.0-canary.fae6c652d.0","@material/animation":"14.0.0-canary.fae6c652d.0","@material/elevation":"14.0.0-canary.fae6c652d.0","@material/feature-targeting":"14.0.0-canary.fae6c652d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.fae6c652d.0_1637252720130_0.9582862613683676","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/menu-surface","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.978a3b5bb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c445777f8f0dbad27754c0a3b9e059c70d7d4c64","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.978a3b5bb.0.tgz","fileCount":37,"integrity":"sha512-UGJ5+LK/OwDlTU+gg6xvERN3pYku0trzyBImae6ha1JD0Qb4c5MXKjdn57khxTt5d6FCssCPDv5p6f3wEpcS+w==","signatures":[{"sig":"MEUCIQDi1AmR30ngY4AQ3kyNc+6Fy9gr+llxbA7+ldjJR14OaQIgSNGNJxG9QkvUbmYRq/fo3m2VQE3AnaBUGkyxsXQdztI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/18CRA9TVsSAnZWagAAFj4P/jATPEtGv3dOohyIZsVY\nMN6xdnLsF102FaoqzOZzPRCGS7re3J9yXL4Vl7286RfLnWHPTCKX99pKts2t\neTVI7ogxDZlEVuxSL/YWBbcCVd9qCg0puz1qR6q78Sb1IVMSx10foNtuQXF9\nmiZygreJlEj+Ks5Gz1Z85Euewiwy32Dl5mNK18c+Wa9QevUc+1ZkFY+2LXxy\nt1v+Z3T8V73D0sp4hXLT25KjAjlqE3mS7SfX0eIt8dXNPRvRe3amf1+msqqC\ndp6089G7bj7IZd1J8Y5JYI9yI44M7okXFBKz56oteR+KpFzghqRyp4ajd16k\n2f3sSBZMMgF3WN3VyD/gft080jqdm8CVET2x6jvePTzZoKo1dad3de7RXHEj\n363cZ5xT7BbYIvSqpU3vv6uiB0ZhgZmVsGS6trU7IMOex5osJ5lJxYgU73II\nR+Q9D6+Mk9v8I8cdvg+rO2WT4Pdy5vyqQphwAnckFZhHGR55oNb/9Bjn+9RT\na+c94hGE67UTv472oQYYj1F/rTp8eoipYfXQWOifQ/IWEpotPFrtMbzoHprl\nUFTbn/P6spmYlfeQMs5l6Ol6dPcuBU4WMWwkvW2B1GuOzmtKWjBwcf9Pg5rq\n7OKOed1Kei/30+Nl5SvtANxzedsDI4V4UBY/Tg6yYvtg6VP9pKgsqKY6wGAC\nK6nY\r\n=s0tJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.978a3b5bb.0","@material/base":"14.0.0-canary.978a3b5bb.0","@material/shape":"14.0.0-canary.978a3b5bb.0","@material/theme":"14.0.0-canary.978a3b5bb.0","@material/animation":"14.0.0-canary.978a3b5bb.0","@material/elevation":"14.0.0-canary.978a3b5bb.0","@material/feature-targeting":"14.0.0-canary.978a3b5bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.978a3b5bb.0_1637350779980_0.5132534883312359","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/menu-surface","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.e6f43cf44.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3263aef45db6f56d862faee5fa8714af866991bc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.e6f43cf44.0.tgz","fileCount":37,"integrity":"sha512-1l3HecOTKwLq/de08UmZrIIL96kDSLql7qG9fZ8TwpxKnQg0xOqOJH1phdvH8c559YWU2ryPFxeTy/Hs9Eu2yA==","signatures":[{"sig":"MEYCIQCAzAOqUlvfhgl5Xw54uyVdu6xwjoYnzC0NuqPQ1VEO7gIhAMYIldGONTYsJFwRFuNGpLrZR5QtNg2ynB4bGQKEDXWQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9TjCRA9TVsSAnZWagAAbsgP/RfaLHxFK8ddgXC2hhhI\nG62pKwU+T+lURWY+TNtxTBUIVKpIrv0vmNXA6TgcLBRM/J/n0QnZIXYXLNJX\nlrd1PCdnZtas5V2Sf2v3CnTkWFDNUdBZ8xe/cSAoWimh17wk5Q6YFu1QNzUm\nHqcs12K0/vl74sJiO+6CPF1zY81X02kLJ7A0l37ox4OZ4z2sGyTVBbpkRITU\ncspTMilfmIhfZNhqVsir0A/Eh8OcqhWIybzhg4fz28M5fWp73JVFGwkr+plT\n8aouD2oLNsc/j1YWhpE3enkWNh0QNg4pqaHKirBFnXO3LQYuhMwNUQNuopo8\n8c2sjAiPYepPNMf/itpoNS6TA62t5+RzQMFVmyOEJYV8ZUprf5lM9raHGKjA\nrG9c5M76C9IZT2oK3XuQHv0WcqFny7KPdwb+4jM+5Iyofdx+9iwKKUP5HKYh\ntXHWT2bVhpfpVxpXyyuw/63HeKsElvxr9KOCrllj/G5+mR/sVqjogIgHd+xN\nD1nBygYU/F8KDzinmXl/WcLJSgM/5Mog+BQVvbr39lHgQkPISSil1vTcGgfs\nDX8eVB3mmHgrwt9qFlllDagyDTfgi3V+lI6p9uYnsz1HmjbVtvOET+uf/3LU\nluyg5olTIlm1LT9IKYwVoPg0SrdYdQ8FSEi3EJ6pA+qWbIbImJSTLmU1vRSY\nTOrh\r\n=VwW0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e6f43cf44.0","@material/base":"14.0.0-canary.e6f43cf44.0","@material/shape":"14.0.0-canary.e6f43cf44.0","@material/theme":"14.0.0-canary.e6f43cf44.0","@material/animation":"14.0.0-canary.e6f43cf44.0","@material/elevation":"14.0.0-canary.e6f43cf44.0","@material/feature-targeting":"14.0.0-canary.e6f43cf44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.e6f43cf44.0_1637602530903_0.4468687086724039","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/menu-surface","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.39cf14bc3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77c6fe9307cc083ce62c1aa496edc75ca229e3f3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.39cf14bc3.0.tgz","fileCount":37,"integrity":"sha512-0ddAcydy2rEIlHhLr8XxPin/jCX/SttEi81NNjVX1cNFISfSaQGnBTzsQxtcd4hq3xHBnC/pYKtpobf1AEXdBw==","signatures":[{"sig":"MEUCIQCdlPq7V70ut5q4ECzuVHlO6RBRM7kmeLxX3/Uy6Y4VcwIgATyAePMCQ2dMNUjAoVBgGPnPBMBbuYpAYGfD7Xlxbh4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCIWCRA9TVsSAnZWagAA5s8P/joxFF/iMHuloR+R4ZOc\nUAols7olQHa+tl7KZUMfd9/3XlzK5QmQMfvyr02fM1U8e7+yuBhQ9b71DK/3\nQaCD8hYYkBbE3/8iAT6SzS3FH+GCoMiJ7ZHiVoemX7Mev7cNIBlzrECmOtgG\n+9NUSU0mXqGW0F1kFV2ErW+l4ayzl1nZ+aP/Hgxw2Ik4g9nJrlbSdfx5wT9X\nrCinxc0g6i5z+ZJgFybIsDe7dwFQf9YpahFVb/pdaxKyJFhXS/V2w8wVYxrT\nYrToqdvfRDGdcKHCSuj4GJFNq0fmsPFtyGs9JvA9rmqDzOvIiqGe8W8jtRy3\ngbffGpj/P27H1R5XcI14NHZ4HSGlGc2U/xRX1Pzu7Z5zAwyHkj/lkhafHBGB\nongGdouVSJNmU8f8vvYbNTtrDKqqLJJqSPcj0OgmP7nX7FcUpPj4JMChR3gW\nqEoDER6zvYHfQFrZEbxe2XIDp7iHlOgGmP0SGb2m7QnIbFz284YNQQgDmtqM\nT5b3KvRuzmGizwsyXKZ9m3wu+C2k9z+gx1Aiio1HPTfXzBbo6AXrrVb7cRTR\nvjC6rBsnpYDQa9nWi+TM0ceWtz2yXwo3yAYIzmhoq3/lGeKoV/Ixq4xdwmM1\nbAXFqOEQh8c0EzIGEJVwrW/uCBnjq571ka03wyFnoOFtzsUxKLPdfiLnHAcB\nFuKk\r\n=mH5r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.39cf14bc3.0","@material/base":"14.0.0-canary.39cf14bc3.0","@material/shape":"14.0.0-canary.39cf14bc3.0","@material/theme":"14.0.0-canary.39cf14bc3.0","@material/animation":"14.0.0-canary.39cf14bc3.0","@material/elevation":"14.0.0-canary.39cf14bc3.0","@material/feature-targeting":"14.0.0-canary.39cf14bc3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.39cf14bc3.0_1637622294151_0.9870312589420103","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/menu-surface","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.93134d453.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21bdb709be7411332ad3f76cd0c948ab8a9d7413","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.93134d453.0.tgz","fileCount":37,"integrity":"sha512-H8lJZW1adv7FLVzAzf4ThiKW2BZebeFFny1atTwu63X8hnJIZiufrMWuy+pqKRt34bXw2ndyIzvx1T6x5M30mw==","signatures":[{"sig":"MEUCIQCGdjs+P0N8g4gjMSS1Rsy7KWKLBJ5kiodvaN5LMiijvQIgPgXJtoQjMDxtqH7j+lwS2JfmWI/xOcdT0zqmv1m9GQ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQsyCRA9TVsSAnZWagAA8kYQAIK0erncKpYdWUyNqBvm\nUFJG95Mqh0TLU+vQWJ4m36mzYnvYt32gK2/3i6vqmJHN2Qfeocdhmo+mHHmG\nNxJPCpViREVR6Cn0uS0EJGrTPgY4uuklkMGS99VSJp2WPXdpWhXaOCFqWx5l\npnUnrgl5OXWQYP4rwWYlcMjzfqhjExXBdR7poI5t6IXTOPTfhteEg0Q/X/xc\nK9pdSmLuI0WzbQPikAxdGyY36htjdK+0HrXJhiszvIghHHzqDIavZqLG5lcD\n47l+x1gDrQpYjXBnCQQ42ogUfFHM8g9Xe/fpnc+A+WKcY7pCtKIHcryHWBmB\nZgK5nmVqoFbLPiEoP9lR6YaZ7k2DLEc9ORMyemA2rbwEKwmBjMKmiAE8hVkE\nLoJb+JUZ0NQJngREKxEbRoEBcYgxCcXlaA9UYqh7VhfXU0347HPnPKcJyZar\nzFDq5Vx5lsfFdd+3f2/DMdB9qy/i9O1YfxtxlLAQtlj27g7AcliR0J8OsBsW\nJXUlINwEO7nBhUwW7fBFvrcfzUWZ0cyaq/CZybE1BWXLsMZvwjQRXtNgYNBM\no6WB7v/qT1uHt+gaLXIyhOQwQiUMqLrcgz3+CW+LTsjL5CV27Jbsl+E/rZ5K\n3qRg5jU549MHqQM1oX0se8qfru3fuIxvhN/5ptqhjfltlyL8O1imM0LPBAFf\nk8Xl\r\n=hn6j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.93134d453.0","@material/base":"14.0.0-canary.93134d453.0","@material/shape":"14.0.0-canary.93134d453.0","@material/theme":"14.0.0-canary.93134d453.0","@material/animation":"14.0.0-canary.93134d453.0","@material/elevation":"14.0.0-canary.93134d453.0","@material/feature-targeting":"14.0.0-canary.93134d453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.93134d453.0_1637681969921_0.6467117333223795","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/menu-surface","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.bbd11268f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b034edc5f72f584651f3fc027af01027cdb421a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.bbd11268f.0.tgz","fileCount":37,"integrity":"sha512-KeztXqeOOeRbOZ5TFdDHUQZXfhnGTltrgKaGuhW6ei0qADNMPiy30/pdzrP3l5hsm+6ZYXu804SFeSCElOVCJw==","signatures":[{"sig":"MEQCIH2XnkUeSGUBDAQlXv62lqWclYpFGTwYt2h0Im5Gc4P0AiBJy9KIP8syvekkF2PljAqE8Rh0HzrURSiOHGUH/xXmgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWwFCRA9TVsSAnZWagAAviAP/jcOxE3E/bVzZMMQdAVZ\nd1KqdE2w9v2VAHpF/t+DkjtruuYw25kC2vtrizji5cykHkW+Wt1Onl/IpNOn\nv0b2aHF+QjhxJA6xu1/2O+uz5LSnP24ivdnp4BQr0Z9fe9APKXQpyL0kjAGh\nH7u55oe5Lie67/k0CsMWG7L6RmI32018CUeKBSjaDJwc6XCzxHnW6w/gaWyF\nvkiPPU4KOIWmvMCTUzms/9DxgdvENDbjpwCsO5oxL/DJ5tz9ahi1Xrho5uyN\nPbvB1snXja/JlsiahzajqQgqODXcPa/Nrk+FC96Uw/8Ov1vAPQnrICrYcuRv\nqvIovouv1DruMrLYReKSXjLQMWeRNejcnFPx73cBRYv/cYjlW8YUmNup5/O6\nUTAhUozPqGORPUkBasoahPBkA3pqwZdPGh0xWbMaIzKyZCIyLJxWJ4ijmDuT\nDTu9Nf3ZBuwqENIUVmdm9jqHAiva1zYI0sjxOmrW/7Ke5Xpa5Y55K64qZkn4\nZomA0MbuDGSWfIqZhzxCTwSV+oFPC9atIac2rMLVXObRktIv5v7Y3NozEdwN\nr9DaT3g05dT6YMWk3PirCpFYExdgFyGrRxDu0sD64Kx7++W5Qv1Y6Ugfaxe8\nfSRVql/1T4WZgy7EEx6OIgfjGEwuJyDi4hzj4+Ue6IPVN76W4jtvOpdO7P0S\nAL2B\r\n=Rzq7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.bbd11268f.0","@material/base":"14.0.0-canary.bbd11268f.0","@material/shape":"14.0.0-canary.bbd11268f.0","@material/theme":"14.0.0-canary.bbd11268f.0","@material/animation":"14.0.0-canary.bbd11268f.0","@material/elevation":"14.0.0-canary.bbd11268f.0","@material/feature-targeting":"14.0.0-canary.bbd11268f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.bbd11268f.0_1637706757112_0.7161458804325216","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/menu-surface","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.3db9c4d3d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3b824bb49c69b110e01b868489fcca2c8d359a7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":37,"integrity":"sha512-Wzf22xc76wS2KlAZ8gaejSdTrJaEPdLKjn5IvueRpDM4qtXpeHbbPNpzOwRunyVUfCRTP3kVdI5Ze68NOlXE+w==","signatures":[{"sig":"MEYCIQC29vMgmT+j31DZgfZQUNfKT2Dnsl3Yfp3/yfuOTYQSFQIhAJjTm9InTAd5VGxgvWdgtcOI7QgSoH+Ao6r8zxUaA37T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlxJCRA9TVsSAnZWagAA5o8P/1vt0+MC5bg+Y0c+FICs\niplxSyhlu1ppXYsHKxu+o+AzmzrGbEF4UzLrywaKkbEyh78JuFOzy8i8yJf1\nwJrQZW5zKZyWIZ0sDY2HVR12znbXLzxlK3NVJZnuVnTWCq1eS2HBJiAPV90d\nmCPbZaGTFqClTXCywMtak52vMKyzXbrU/752kMQKlKutJl6unvRU6b3eaOGU\nqu3y8fUGZqEWA2ZFvjrR0vV55LNEE7CopDKwIOkIoJvBt0yJrdKYMDr02DHh\nm2jFJi/cro7v3ruHFb6YAnl+U6vv472Bgj3T7nIn5UhXNguEcOCfhndyziJY\n1iUQ10NC/8/8QlcLuqb3rdDiWiS4xXlN0myNvsnRr8Y5Mjt2AXUBs0gsOMAE\nyva7Hnd5qGFIs6nNxqQBcA95otNUuFOmF9LzCZlFbTNk0EA9rjJMsGx16lik\nP4U7CUrNamwB2cT3ax/+DORUNW6bxr6hc5S7Rh2A2c7bgKTmIm+U4QXa6yD5\nO7pA/F22A/zMGWfXCmRAY5ZuvBV94r/sYzAWhdhrdeRtUHkPTfdcRgNdjrju\nWEKBkMzQdgVSsumE5jIv+lEZfZ2PE0mxBOwBnfUZ+YR9SIIX5B2OhqXL7Dcx\n8aDkpbs5+RDOuAgDOb2Mcay7EMwlYhxqkqJTYSSQEOuH+Cra3VGZYhWKIrxw\nJ5Ma\r\n=LFs/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3db9c4d3d.0","@material/base":"14.0.0-canary.3db9c4d3d.0","@material/shape":"14.0.0-canary.3db9c4d3d.0","@material/theme":"14.0.0-canary.3db9c4d3d.0","@material/animation":"14.0.0-canary.3db9c4d3d.0","@material/elevation":"14.0.0-canary.3db9c4d3d.0","@material/feature-targeting":"14.0.0-canary.3db9c4d3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.3db9c4d3d.0_1637768264849_0.8136191175341585","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/menu-surface","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.78305b6d5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05b6af082d71aac0b155b2842fd689ec8c58964e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.78305b6d5.0.tgz","fileCount":37,"integrity":"sha512-He2bmZZWpivKHm66yKqtG460XRWaealpG2wZFX6rsjiemypjGbvHOS4olTAPI0GPgPtHLA/wueLJ3FrvpoyIyA==","signatures":[{"sig":"MEUCIGsEwwGUIOFpH4EoEnwIje/7JSbFocTOKEp5xsmw5vDjAiEA5YpHRB/0rmxm0Jj1sBdIGJbEKo9q0HAif8XstLAjDyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpejCRA9TVsSAnZWagAADFIQAJVqHzj2N0a6YokaOZQK\naXaoqwkEDX8Pl0YCrKqJ6l3LQWJFcfR9kgXLrmvCMGGeleCahR0lxSaaeqgI\nOHich8SeaXwHOgi9qE9B/9Zlw1eE+E4CJ54g5RJd1/inJloaAR8sm8UtFVrY\nvkGpVL48WiPKdqnqPypo1i4xvskpFoUTnFHF3Sy7/++3a0E8Mhg1BCdwRyZ/\nBUXf6hXgaT4lyrJ5TkjBltMBXoz7MMD/vmemjV4Vn2zbGa2nMtPxuo/FEMam\nlChvClXHQsULuKRDcc4+sHe6tVwuS+wnial1utZMJthEre310peTR98THxiT\nnX8ATOrdD8kvG8+KEYikhNSadflCujaUH+l8sBRs4ElSzqvqTcoK6RIoXyv+\naKi9A/BhOi8tFbnjW/npuE6HKOqdZ46XZCNvauhnCuU53XzY6T7+Ad1O6a/c\nnhkjkTpNgfgJyo1S4oWeo0NGj/Uw5hnwnGtANCB1RpRuCN9vH/auvEkBgLXO\nUWcUft7Aqg8Xb3GsKjFIDV+S9b4Hmwm23LPvlASDOLhSF7iOCfrTvb8edhlM\nE4YzjcRKsI4sbv96N7jwaqIpuLt4Pby9mkryICKkX21dSkpZGAkrzeRr0MsX\na/vprpCSMmVrpNvVlaRrX8rDWobEM0k7KGuWuc3j9sqfJZxbs8+XcFR3+ezl\nP1ED\r\n=xV/I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.78305b6d5.0","@material/base":"14.0.0-canary.78305b6d5.0","@material/shape":"14.0.0-canary.78305b6d5.0","@material/theme":"14.0.0-canary.78305b6d5.0","@material/animation":"14.0.0-canary.78305b6d5.0","@material/elevation":"14.0.0-canary.78305b6d5.0","@material/feature-targeting":"14.0.0-canary.78305b6d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.78305b6d5.0_1637783459524_0.3220556359467135","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/menu-surface","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.43d08ba77.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7717acd74b3444a46b31a3609aa7ce7891c914a6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.43d08ba77.0.tgz","fileCount":37,"integrity":"sha512-q80puSG4Rl3D5pviGmJEmMAezE6fu+llhZXQZkIgevzhPgE3L8PUSe7xTIYdig1BU+Rz0k1UlgsaaMqBlNe1VA==","signatures":[{"sig":"MEQCIGFFA/Fo8HfdBGsxAJk0IeYmMs/T88b5Z+0tkEh0yTcuAiAF7TrPjSW+Zar5Q1wIj30AuFP/rCZL5NwHZeRf6+gfIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqwYCRA9TVsSAnZWagAAEyEP/3aUu2+DPQYKY9PTiHMB\n3Vof39wBOlwI4NdNipj/iwDgWHwmN0FQ9ZbLEXmvkFH9Ewg4l20FF7fWEyfz\nAlA2Ayq42eUZgXnQ336RNBm6hOHQaFO0ZJqdqJ8A7G3QAvFmyasHUNcQopB3\nR05+YsDeBo2iyATox3t4W8QoQAJxRtGelrnZXouC3vzTpl2PKhsZzuKbDemC\nDOQDMAXHgdhcLearJhKfHVAO0MOLahGuMls7BGKyBLLnKHaRk07gAgwi3slZ\nwth1/z78bHmRHj76h6GTOXiDNFUUzhwg53uJFi2muadbBc+UAAH0dRxRIQC7\nk5GfcVMaK0JjVD+x7TWrxcY6HRar74sfliF6tyFYhEE+qnBGwfYah6msTsuY\ngvKMbmCxtzBSBJP236vEY4wS288Jg+oDsI25/Mo+ip/2p4VClZhQctSPdwzc\nUy01tKRVwOyc1xRRbYxkEOb1N2k2uFtzpgYNUQIygoX1bST8Al/UfjIxqK43\nndhkQxsJwd6GKaVY0MU2ylIux1+XRuy/mt+DRzLl+7k1cdSXw1UHx+Rjg3y+\nX+fI1Ruij8SI4jzqriwtyOAuhIFoeF5HE5m+Q26oRNtM9s7/R7bMFYjGCI+a\naCmWENEPopokcuXQCRehmYv0V3qtg4mgNsxl9untbPnvVT/3cwU1lJQYMcYX\nyIGb\r\n=m0lU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.43d08ba77.0","@material/base":"14.0.0-canary.43d08ba77.0","@material/shape":"14.0.0-canary.43d08ba77.0","@material/theme":"14.0.0-canary.43d08ba77.0","@material/animation":"14.0.0-canary.43d08ba77.0","@material/elevation":"14.0.0-canary.43d08ba77.0","@material/feature-targeting":"14.0.0-canary.43d08ba77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.43d08ba77.0_1638312984616_0.3418912968421488","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/menu-surface","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.17a072535.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86deafbed815804be00ffb49e9a2bbc29083100d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.17a072535.0.tgz","fileCount":37,"integrity":"sha512-zSb5XHfo4geUFXuLnrEClyLN8/GCC7NVNVvMX6xe11DBhxpzgvOjaop1LFPIvqapjGAJp0lC5SNs1HrE6mT8Mw==","signatures":[{"sig":"MEYCIQClijYGI3RcAqGSCQW0CZU+33Bqjvl4QE7Sa/gbkCfkEgIhAJGc6WT2Fjifl6herKCvy+r38qAVPkShG97npHYUgGO5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQrxCRA9TVsSAnZWagAAxxQP/R0aN5xTP3I/BztaQdjh\nNi5yctscDwcFhgBGv107YX9ldHFGAdeF8FljWGjqvxu1qQR/ILKycGndP5iN\n8s7lwYmYIgEzp7pqhuqzyCgd9m2Mmkbr9NRUcpO9mM7+Cx6GgIz9TH8mNTfX\nS3s8ONqPSSRzIxn83BH4JMTh2XmDACMMJIC9jQaTyWSCNqLFsds8gstsmYsr\nO5CPwV0K6aEyQ6mtfAK1Q7+ODK9st2qfWXHeGKWE33iMeP9a7w/XVnrWEDM5\nlz0ffF2jT/Hmd0Ui+AIQrg83DKVF2XpeuVtfSjgKdTCUaRDbNxivqxY0+fTz\n445ELjgC01nj17NcrXt2nTsabsYDmNz8QoxHrbOhgH9kx9z+R3tKAf30Nt52\nBvhGSAH8WVdmP9ywo8Jfr+gQzj4zWqa3TXHxvoJwieVfTfpi7V5jXgEUEGS7\n0+84FgHhOysJcyOFKBg6CWpMCGuYdKUFoAhoxK4Jw4lNTFmOC+f3NaAkdvda\nFOFN6v9KlP+KBGka/BT06+TZGVvnDbc2m8+BQ/055fIkAak8Q8tVaKESjD+j\n0Fzm9eemqMQAB7yiks0yYhC7I0eyS+e2c1ydNBzTlUEQRsqetkHZfCae9wXP\n/ilCDwdvf0VusoITw+xX8+Ci0fiC1akoY6qu3f9kQT5BDLvCnta+RafR4pgs\nPZkx\r\n=o0O6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.17a072535.0","@material/base":"14.0.0-canary.17a072535.0","@material/shape":"14.0.0-canary.17a072535.0","@material/theme":"14.0.0-canary.17a072535.0","@material/animation":"14.0.0-canary.17a072535.0","@material/elevation":"14.0.0-canary.17a072535.0","@material/feature-targeting":"14.0.0-canary.17a072535.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.17a072535.0_1638468337496_0.5021764119507961","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/menu-surface","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.5d809696c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85f330c7d0fa66bdfbcb4104ea4f30dbfd96de85","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.5d809696c.0.tgz","fileCount":37,"integrity":"sha512-Ql9uwCxG+pqmFiT9YnUj8uEYTIC6w2wYenPXIf+VYsf/NVEIBQfzrG2yRHRBVq7rE/ThV7jJEfJcb5CFcgvymA==","signatures":[{"sig":"MEQCICkeFOEIMFtlT2WyXYnQxCiHQ2v73G/iuwzmcDDfen3sAiACuiGef8V0zLoN26SKYfFeRaQFyiarjO8b74vCY84DSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO8OCRA9TVsSAnZWagAAmZAP/iZnrqd7FfviFlpViYnM\nn3ixUfuT//Fds0VfLAnCa2Sxb/sLgzKi2SxM5zfLWsbAvNFXCf0ayMCAO+5r\nA9JM0Y0Akr5OPAeKTLE5YuF+u/nwkkDbJiG2UKvmd5z2NW0Uu/rG1C/x0z7L\na7TUJoVpLkLgQ4dTw0CLIVdY0bWRkpvG9SFuq/abuIClVmhMnL7cZV1vfSOr\nP6UHq2eP2gxaXNvYlTC+4AVzRKoZOOpZlTXtVoMTkpOwhkZjO6lF1GCUzYUy\nlLWfGe3FOEOcVlT4wYuQY6vaiN5vPZVJndbZbE2JZamhQWg96c+3POKeM7Wt\ne6z/C/7JcGNeQ+sLhwE4stmWeuKbUF1NwNKH88+zJs49I6pb8FHfY+qZEJ7h\nq7tMMGEOT6WWFm6wghfkNQILCrixszW4NqH/wam/MZNBfizJKkOxveUwmD2B\nSfgg0SW+t1noZtYAGJp4aLjJMI1vV8VKwjoxrrkLoKmsOGbckxz1k8BB/akF\n+lniu+M9FfGnVK15jXgnzsvUdeCjwStxArR6q38tpAOorwFZAXyF6dyg9fhX\nMS8p5jbupydO94dhFxb+mZWl7bfkH9K+UIaB3WYGvxg+QnjC8Lur0n2hSTJK\ndUFtdQ74uvUQNtQvopj9r9hbCmI80xfrvlni1REsIe5rDsdwV8SA3Mv5bjTZ\nuHTd\r\n=IgOY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.5d809696c.0","@material/base":"14.0.0-canary.5d809696c.0","@material/shape":"14.0.0-canary.5d809696c.0","@material/theme":"14.0.0-canary.5d809696c.0","@material/animation":"14.0.0-canary.5d809696c.0","@material/elevation":"14.0.0-canary.5d809696c.0","@material/feature-targeting":"14.0.0-canary.5d809696c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.5d809696c.0_1638985486711_0.8495301362159238","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/menu-surface","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.b6510c8c1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ac24cde803409f8b123fcb7ae37fc2654ac5f00","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.b6510c8c1.0.tgz","fileCount":37,"integrity":"sha512-XpJABGxLJNhzX5SvIKJTwbTLw83oLnEBIyvi6TUKorC9G0EyqyDzk/LjcY+g52m12Zp3DB/TstT3Tq6zv/g5gg==","signatures":[{"sig":"MEQCIHm9X0KuKYg0MqZ8LyF/qIv18kZ7YyvuEDjfoid2YZQBAiBwASc9h33RH3vA3PHOaXXyOIk6s1YKKriaU13oRrSKLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPRBCRA9TVsSAnZWagAAuywP/A4yeqTvjyKvMV2WQf8e\nuPIRbf95nksx/E1XAHu4fdEH4E/gl9onuStma54qkozBNlwASUaXHvdsQ5lz\n5GnvXGh4W7eAzitlVngeuTPdSepToGQWgJ/p03Dg7pKe+dLoPNSY5BZBsclP\nKVXKjL0oTgDxfsRwT7nYdXKVsuy6MnSfGR5AoUYIItflK5AZR//UbRpHdWPz\noy+IEzW+3cj8cUe+p98/2w5V/gNjDPqMWz1JBBGx1L0U+KVER5bccBVALIkt\nBwBgVKutTGx//mtB4YPnlzI7gQ6AAVe8VHU6E1bea+BTsqimzH+XTYwqfJN+\nWPcfCm2hV88yJoC956tpscZpYMXFHdy0/6zpAKt5F2nEAMkZrfCkbbiW+a1q\nCLCbcjqL+oTerSahYRqiYBuYYHoQRMNCy/Zwx6DJiI6VPE3yZ60UYWXX84b1\nCJh6LdYRFSpsbwVDlUw32vwyNGxZNUKj0ecH32sbc6nO7Esuxotm/bBl93LL\nypF1eXJw1MnZpgBkSvUoz8oGJ9/nUa747yWgLvjpi7rA7svXjPyBcCYSgzw0\nnWlARWV9yHxCAIvwK+igfZlNLuOYTBmRosN6Ljjt2zFCm5ieig/acliSMxgi\nDPJLK3iT9m/B5NskcH5Lqy51xmpDyiPvYvNhNDjg0G194Mf6DcArlfz3lqZ7\ne2CB\r\n=h//d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b6510c8c1.0","@material/base":"14.0.0-canary.b6510c8c1.0","@material/shape":"14.0.0-canary.b6510c8c1.0","@material/theme":"14.0.0-canary.b6510c8c1.0","@material/animation":"14.0.0-canary.b6510c8c1.0","@material/elevation":"14.0.0-canary.b6510c8c1.0","@material/feature-targeting":"14.0.0-canary.b6510c8c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.b6510c8c1.0_1638986816962_0.5669322183248249","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/menu-surface","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.f460e23da.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e07fff9ef2ffe0629a08fec8e6cc2fabb47255b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.f460e23da.0.tgz","fileCount":37,"integrity":"sha512-Kur7jaCYJz8wRyLQHhK9e7OEoO+6NmcFDuCnZhWQk6R338GjQj5QZMGnFYiuBZctIh5yt8T1UibCnugoohVrYg==","signatures":[{"sig":"MEUCIAu5gfBVcLbMd+38WF9M+ccQXJfRgdQAtf9YLLgYLRAvAiEA0s6vpCbg15BCPYCAClqgOBfYaFriL1IoxbZz6e80Hd8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3F4CRA9TVsSAnZWagAAhAkP/1CB1SG5Ua0pZhJ+2yen\nGJ+TsSpBkM3lGQlw3NZOnOqyHBRD9/XOLeazqw8I7zEQnk5GTC86aGL9ypR9\nYeak1ugEbB1YQPVAjNrH2XumuXwJ922vvYWsqB1vhM18qqHGBmgONYOsKE8z\npZm1Mn+ILRS+ZiwpyuBfIGdT24DV12PR6Omxf3XQrhdXal3f52ZJo4aB9AZY\nQ/78e0hom2QOjz/297ty5F8srYpj4zrPbqQqmmzPwVicn8bJspB0tQZccq63\nQp+4PjymvmOQkr/08HP+3JWAccJbXhTgK8IvYk90Us9xbk1Ih3ihkeow/7Nq\ntlppkYMPRdqxdbAv1e41SXmb1RQtRCgcUy6ooNV3iL7Fb+aoHq1DLwT3QiNX\nQPyLrtgAgwqUW61Em72+Op+nO8FFKFmXiva/fd56tX9BuJMAljmPetpWjiLe\nNC8p7R13tKHAsHIzJpW5TXW9pSQ+KxrhRqwqD5JvOKcpNNzKSoHiQcfYUany\nuJLmYzeP/FPvs8bPxVJz30PcgLixyHhN96uy9WGUVex3GMApLQzGZ/1V/iAN\ndT7CIoKSG01qsgQYrQeQgcO2sZPaP/yWIi2EpvSWsDza63pmbYqF/VJV/Zu/\nOJ1Hk08PRQmkef4ReTI8kLnwXnP1H3NL5UTU2fnCg1+f9zPGCQRO0Ux4Taps\n4bZ2\r\n=jPbF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.f460e23da.0","@material/base":"14.0.0-canary.f460e23da.0","@material/shape":"14.0.0-canary.f460e23da.0","@material/theme":"14.0.0-canary.f460e23da.0","@material/animation":"14.0.0-canary.f460e23da.0","@material/elevation":"14.0.0-canary.f460e23da.0","@material/feature-targeting":"14.0.0-canary.f460e23da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.f460e23da.0_1639149944014_0.5689181441225901","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/menu-surface","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.7d8ea4624.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e68574df425d3fcf68f298fa672a8ed67d88ef5f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.7d8ea4624.0.tgz","fileCount":37,"integrity":"sha512-HZ5Md/hg/cA9mnwp74BDN40zb2EYexWuw7BGQrBykbFZlOt6WjxbAfzajJqElUhgHQ6KiXcX2rKTm4Vtmw1gjg==","signatures":[{"sig":"MEUCIB8qfc3yzDp1S/1eG2gbS31Lh90psp2Jd1x6O31ojYeIAiEAmADwHjSME7rs2aYC/uZZpBswKiyNPMtdvPfCscjlJvE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6qMCRA9TVsSAnZWagAAaM0P/1cv5mzeS9/NrvkgQPOW\nZGNkrIB+k4HiV+VchRg/Ua1/NdZTdQ1A9Q4RElKgm51SUEtEHCzoun605q3b\n/H76fm+PPf/j/8qyRA0LqIn1c8awuq9pxftC/18AK8KoD/u38gl3C+dEAdQG\nhpeGmVNPd3S549YVlJFJ7Xx0uez0yZQd8DAGu508Ku8o7SlVvZ8as0Y6Wd2f\nCa0sGWuUspm4yg964uLHqYihbN+mbu6MnLNAu/oIEgsK6Jth44ZerdehC7Js\neUGu1DiE9hjvZLOZACytJIlKcCc/dCv4+OOdJcCW5B9y9UgR0uxc5WmROBqH\njsg3+WeAOFmJR5VJXHOp/I4cu3X4Nq8Y5eNisjKWbsJy2zUWLthvXclnE93j\nQWp9AfuFX/QQukcXonAi5RzXowcuckuG18CmAJ5hNsYXej/iFJU+MGXwccTj\nOKG9LbFntBlnoHhncRk5zDwdMcdtK0uml+/h4mtD6sWKAZ0VhqrG2kQvbCf0\nhSgzqY1lek1L7+84hg9RXFl3Q3uKYmFVdn8K+II7u3GGJaKwJM9P/yteg0TB\n+NsrnhAE2XSVD66trIK/e1KwWegSKwu6IEHzfqDUQSaP3oEw1tkUew1v9D6i\nc1na07bWGFkuFuQ7Ih2ojcz6D0S4PwPKrt61HxOU1dpB4TJlAgBtM+Gdp8ut\n8lsx\r\n=9uev\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.7d8ea4624.0","@material/base":"14.0.0-canary.7d8ea4624.0","@material/shape":"14.0.0-canary.7d8ea4624.0","@material/theme":"14.0.0-canary.7d8ea4624.0","@material/animation":"14.0.0-canary.7d8ea4624.0","@material/elevation":"14.0.0-canary.7d8ea4624.0","@material/feature-targeting":"14.0.0-canary.7d8ea4624.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.7d8ea4624.0_1639164556119_0.8200188552735488","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/menu-surface","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.8fffcb5dd.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5f01476535b17d6e16ad776b4d0863fa1a4c4ca","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":37,"integrity":"sha512-beGUYdZTADPTJidZ7NMhWyNj9aqM1XxVt7euOQrOr5Fs8j02GeM9QImTCyipQ/cdH4NDCfJe/9yIg4Gb/kHFLQ==","signatures":[{"sig":"MEQCIG5Z2q94HXXAlUxlqUE9TPWoTdizKDrwNa85r54jgRM1AiAgF5L2+HXbFQzAgIHiOl7gf5HmXFgDKahxaQWM+yS66g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFwBCRA9TVsSAnZWagAAPSAQAIfjpIpuX9fwqP9FPWfM\nHynQPeOsIzIjcUwJo5+7Wfg1PKvvE46sYu5lfIheaZwG90unrvuCAEL4scPz\nGJWBqdreSmdRFbjkv5Nskv3NcYSvf20RH+kcEBUDNYEzprOCF9HRZ2g7j4Op\nkgcwxvZ8J+aBAO70oFwbIiawvqE8b9ospjb9AtTJv5sBCqiaO1scvWTsD5WQ\nIJL47r6n24TwdqfGFbnu1iGePJaV5xHEs0JyUWkjbH2AKOq0Y6kROcHZyFAe\nwSvgJ/rOHILbrSdxd24TtBnutTxyXrmMiE4M4sHw8KGmS0N5tLR2WBnxwlAP\n8R91ZLKt4BTmN4wnGlf1W8pNNNCKTH5XuJme/nJCee8ZwQOMWzdba7Y+vk50\nDQDZhZ2uhIJx25JUuERd6m9q7tNptUaM5mB3IX4bbrzQUBNCtkthCcRE4OPh\nsVDIfoMYp4kmYbiaOnz863C8Qs85qashEaaihJOaYiTpVZG+H6TK0b5S6C0N\nS9Maj4mTG+8qlylL49CiSxrJWOyYuh5ubulEbbjxHTlug1QCbZOyLQejJMYp\nk16gz0R9A98nXOgLpf5BlIzf85EiFA5r9qgEigv7wbaqIicZTFHR9UQGQDIV\npfIuZdC219Ancd/EqK5nMxEWo7o4fJaKYLGvWjLQx7L1WlKR+ngKIfAMKgqG\noNzc\r\n=Fry1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.8fffcb5dd.0","@material/base":"14.0.0-canary.8fffcb5dd.0","@material/shape":"14.0.0-canary.8fffcb5dd.0","@material/theme":"14.0.0-canary.8fffcb5dd.0","@material/animation":"14.0.0-canary.8fffcb5dd.0","@material/elevation":"14.0.0-canary.8fffcb5dd.0","@material/feature-targeting":"14.0.0-canary.8fffcb5dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.8fffcb5dd.0_1639472129316_0.6361858069249089","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/menu-surface","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.21e1cb9be.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"743a78277d6321e92ef0f9264d7df267d04feb88","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.21e1cb9be.0.tgz","fileCount":37,"integrity":"sha512-b7wAU6GJZ4ID7aIPrHgJYYiloeJlo73jBIq2BwrqkHvK+9RF6U2SyaaqjXtDx3xbtVTdfM6LA1i3P8Gg9FcLFg==","signatures":[{"sig":"MEUCIQCpiXUWpBSnaHgyd33j+bizIfeNJ+ZVVJf3ZJtx2bal9gIgUXf6YKY237BVPlN5sMzWWf0MBxstV1+W6kKTHwsFIFA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPMbCRA9TVsSAnZWagAANTsP/2p0dd1IS2pYy+8/PVKn\nkFMuZ3TaPinLgguj76cLPAS2RpQqAh0woo9iCJNHRrDAIomTB8JQmeMJinmE\nPiuggFNseA403fAFdI/MzOi6cg/8kgzxJC0MAiazorrWYoErTiryGphPgLTa\nPZ4fhu9gcKE56QnVZUHf99xE9jQFrbRF6GzYtdSTZURwySQC1u86d5gOQ2gG\nq/v23UcgJ/BCoSGHuSaFaD0RJotbNBv9BbDYU2ThkrgCDe/1g42Lcwiaw/rc\nvK+rBQfsgHpDdQhtM3l1WqwTKxucZcQgtWcC8S9mu/l1asdcnw4TsWvpd740\nZNMz8iS3kt4R9WfLMTNdB/wV4UtgBjX9ux3NuPMV5Xz1hELcBVLfek/qKPgc\nZ8NNIV69MwSAIIe7dzyr800EiURbOBBXGyYdH0oq5/hx55AH5PWtyQULn0cT\n+wAprHN34UrcTolkyGty0b35CjfaEKAr7FzxJg1rzMvzCVx+UZBG6rb6jeCB\nZVEWb4NlyPScXdkZNKxVRYyIR7/T75BwHAvrKMX5Ttdr7zLTbyUqVZJouLNr\n1hUkDFMuUXqC770S1JrK11Pn3Tt5RFUmNyLpCNgQkUqIjG2xKxJoOlPG8oix\nmchc0d0pGxEBqcaX4snGgYvGRMylkxeTUxzmor74F5tUAZOs8lJTtdP6EaiL\nXwr1\r\n=zu+F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.21e1cb9be.0","@material/base":"14.0.0-canary.21e1cb9be.0","@material/shape":"14.0.0-canary.21e1cb9be.0","@material/theme":"14.0.0-canary.21e1cb9be.0","@material/animation":"14.0.0-canary.21e1cb9be.0","@material/elevation":"14.0.0-canary.21e1cb9be.0","@material/feature-targeting":"14.0.0-canary.21e1cb9be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.21e1cb9be.0_1639510811070_0.11306180809733557","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/menu-surface","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.ba78e8724.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a776a11e9bfb22d063a124087759fb78947b4ca","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.ba78e8724.0.tgz","fileCount":37,"integrity":"sha512-3PdgwwXhRx0SSF1FPqSvsm9TXs6NWBmGdtNhlUnPBmhSfbox5hmKXdqxg6Bhe7i7g1gSETBuqrV3zRtwEYSR0Q==","signatures":[{"sig":"MEUCIDkAi/wIzUlBIfWFwdSZmz8VTZ5oVSV52yg0Xb5+BJcxAiEAlLyrCY37LGGyxIJh6oHADR5PLTRNE2N86ly+A2ZcAEQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumiACRA9TVsSAnZWagAAwBsP/ihfov/KKtW4QKIF2ylP\nf2f6dcVvkeZKy072iDGxQT6/Ia53MqKCyqjFnlOwKblM8Hq6w3yPfFnKyKXA\n5k5C7we+WI7AIEGhy2i4BR3EdrKxPBuRvHxDfdIxgmLtnBAL4VzNqboUEX6e\nr5rYnoBXaxbEBFXoPiA1es8jnkuXRlqwLqOAebnmMXLxI7w+sKtVWAO7pE23\nBm8TqwlocrVegyKZgQxQJ9gCLWeSvmkXh4HtM7PpCKgtWrmZXDDLAsa9PBQJ\nbhpKFhii7UZv3zBnpHjYkWnGdLno1xkEKcKyypNnSrpqiSY2+XsszrFT0NDf\nKDLX6Qmz8zotIrO8Xm4n7gmLWArDADcZqObJd37NtovzDCCMBFUP5ztcPb+l\nTTbraQnN8VKqt4+aZEhcFeQOzJq0JP9jjhd7gdYmaztBAIf9qjOFdBlLiHBB\nYTIC5ouw1dxOU3g4ikuCA9uQObXrdE6OTV9PB784+o5hFl/TvX2+PZdzm4dP\nc95/M2zAzoZ78T9+u/2NYCljsAA9xzvqJ9fn8Eqj1hPD3CwGVbXvRlAS7zzy\nQh/nsIWsucToUJZ7mhWM4vIpM/jPAynw16J6qJ50lrm0aTnY1GcomL9i2svm\niAo46udP/5TazY7Id79oNHMmHrRl/CoCuPmxmdsMXMJsPoJ8AopPE5kKzs7Y\nSyiE\r\n=+C7M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ba78e8724.0","@material/base":"14.0.0-canary.ba78e8724.0","@material/shape":"14.0.0-canary.ba78e8724.0","@material/theme":"14.0.0-canary.ba78e8724.0","@material/animation":"14.0.0-canary.ba78e8724.0","@material/elevation":"14.0.0-canary.ba78e8724.0","@material/feature-targeting":"14.0.0-canary.ba78e8724.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.ba78e8724.0_1639606400018_0.7565265935952863","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/menu-surface","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.e3e073c00.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b6c1886dd4807fee30afcbf34c44b9c41a068fd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.e3e073c00.0.tgz","fileCount":37,"integrity":"sha512-p/RnDxuSvTjVU2nkRZPi/VL2siB0+7QDqvO37u95VsMRsINcNI1FXRVJUaGyjpxTK/wESrW9JhR2xhpxZOzV7A==","signatures":[{"sig":"MEYCIQCYnwnqYFE1iHqHdww4MV2k9b94kK7sD3rIpwkk0VeqTgIhAMgpyUhT1L/Y5JDhgCK99CSoF0LbtyCPSRlEqSWPNFY6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPEtCRA9TVsSAnZWagAAxfUP/jUkfX9Nonxwm0bYVa8G\n5dIty5efVe3uwxnj5Bc3B0mdDRSOC/0ZYBc8m0PT+3hHP2cbLKRfOWZzvfNg\nZ5VtI6jigewqtoRoS7An/VCfPf3vDlTmwHdYwKKn3BkawRbq0RoSpcHzFDkO\nK4PpJIk25XNOesWBf1YnoanJc3oJ6pFeswVlaZCSleAihbaWUelt/HLcVZWF\n7UHMD//k7VK/gSn5obgy3smheXCD22WnqT1mp0Lf0gGOMYYwrSLjl+clzdXs\ndqoM4TYbwUsIt5zEd1rxcpPoUva2wfMvjbzxzb5V7YjWg3uuh1utbdE6Tvl+\nv2meWeQXOSkBCx4V4IOwbH12h/1Z1yxaZXztA6KvyKYDr5LQJ8+ODJKdSo7w\nzo/Q/wQOmPKU7vglnl/XjlOzrkppif07S6pnsAA90TRI53YwOhtKslRnqyY2\neR97s7aRsXCL/FP5GbZ8sRlsrSkgiEQyPvGznUTi5EFDtCieMzGxJvgOTM/w\n2d0zIK0I+a8WNel0YE3++IJiRDJ7p4oyLnRN2umEOGJFs9vCNgYjB8w2t9GL\nQG9/WHgpo2kCk/C/1ulMMqWs8TzgQ/z5MNKfTIIDyWkUyWLxrS1RyrUiIB+J\n6zfRFUgwpmgrMsVMO7+KYZqRQ39iYV0Vqhap9KKI/1z7M8ivWkvrlpXWq7Y1\nFnx8\r\n=tVan\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e3e073c00.0","@material/base":"14.0.0-canary.e3e073c00.0","@material/shape":"14.0.0-canary.e3e073c00.0","@material/theme":"14.0.0-canary.e3e073c00.0","@material/animation":"14.0.0-canary.e3e073c00.0","@material/elevation":"14.0.0-canary.e3e073c00.0","@material/feature-targeting":"14.0.0-canary.e3e073c00.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.e3e073c00.0_1640034604876_0.6741745828515056","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/menu-surface","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.3366a71d7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e27e72fe07b0a02a5892149ae82eb5cdf86d8867","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.3366a71d7.0.tgz","fileCount":37,"integrity":"sha512-PVuIjuhkipPwYNvjhVG87xDpw2bZu1HKAH5JeJpKNLjCtE3S92+izKExZJuhx2VKGVgEfKg4Z9y6jcbrOMVtQA==","signatures":[{"sig":"MEQCIAGJXuPd5Xs1kSBAWZpN3Sq4DDJKbo6aslMsTZcs1sTRAiBYguF37vYNfCLFd698YmJ5Pg2hv3YziNGAtZpTyBPRIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxrcCRA9TVsSAnZWagAAsiIP/22QVZxQN43qqzcQvgGc\nj1hz1Zwrf7Dmbek+3z5fuKH+3tpuUJVFaLG9GLSFlj3QrbvutIF04BEuMB5L\nrqs0W2IFXR49C5dBj1nrXTCV8KwrXTlavZy0F1k/Vro8l2xvtrgOfD5F7JJL\nlboi3fJKmeJqLE/QbJo5LlwzXYulKDUW9YEVUDBU2lo+5w6O3n/q/sp4uujQ\nI4ygv5WwXhySa0mDQwibF3Y7ZqdkL6kRhbgTNeUZHYN5EBxTGEBssRHSbpBr\n3ANy9L8EdyA3rYMXMQcuPL6EGscGaPU4hbWSccBDIXgGT+P7G4UPp0mfFklw\ndftNl1GhSFF38qIGUQOSMik8R8OZPdwrF5xmau3hjh3CU6cVdO5PzcxXwEvU\nDJrvqx6JDqQ/rhtxJVwmXe1y0YDgLQ8lTncDlQ0ZzfebxNMYX3A0S6oGxeic\nQkjShW7iMcfyY8TCUQ8i0yHNtGr8/OfOgLUV4pmez581ahcajE8RpnnRViXY\n80MFf6f/lLjs6Z4F9mo25g8ProwiKzhuIxyG8I+1J4826vF7HWFZV5/nzA+T\nxS+ctEjDBv+GoG1IyrkugLHSfpo1HHKrhS1Cz9mqdDLSD1lq9pmHOIgZ818O\n9i14rphlYT542Gg/SayvTGUs52QeG9lxlMQQBCFbnmZvxpS6Grt6gwE6N8tV\np9Q3\r\n=cvM9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3366a71d7.0","@material/base":"14.0.0-canary.3366a71d7.0","@material/shape":"14.0.0-canary.3366a71d7.0","@material/theme":"14.0.0-canary.3366a71d7.0","@material/animation":"14.0.0-canary.3366a71d7.0","@material/elevation":"14.0.0-canary.3366a71d7.0","@material/feature-targeting":"14.0.0-canary.3366a71d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.3366a71d7.0_1640176348145_0.863653868090668","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/menu-surface","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.c047f7c19.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4c25a30bf2b72aa26dbba5efa3750e5f717804d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.c047f7c19.0.tgz","fileCount":37,"integrity":"sha512-Gj42G9PILYWX1KV7DVRPX1327HVLqVhkU1q+cvANfb5oDmXtmbBuOJ8ab+OwpZsVgzTUWryBHmKuXyjLdMHQBQ==","signatures":[{"sig":"MEYCIQDrTtelm0Dn0jf0SBNqiZOQTYlgfLDHyo6yklfA0Hwy9QIhAJQDL0+eTzniiubbu1w2InssFeXJjXfYSPuWNXcUlNMa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1ctXCRA9TVsSAnZWagAAaWcP/0SpENvwX7XmiI/uaUaG\nnywtdyb1Lez+ubhVMLSLkwiUYFk9joTpIwZFe+fvSaMkMSywO1i9Pp0gn7mR\n4E4782p59oEAmjXSnfrdHGz5hcSCeSLqgIP1Xkzw2bEz9BDb/ljRrb9ED92G\nhMmBUcf5aXFXfauO0IXEjJPyFAo9+wlncUd4lR8ixKK0+yafzNO2B9g/Ie0m\nqeNUxRsVpGT7WVRyXbsDQejjyPQCkMYlA8yu00Tpfj2nGXUrgrs2brIN9BMP\ngsO2wnMHIpa00Og3iOi1FUZ9Y7kD2IXG0rRSsjP1Kwz0upNNJCu6S1k8Qg4J\nWPpbGRJHujpRWhahKvutRlvD87YYYy2V0v8dYH0XwsmYU1l4PaSoB1u5Htn9\nu6+e0eQkA13K1YL58SB23L+cpPTY68Tgn5PfvbEW/a33HMfhDhkUmG5fiKBH\nrfE7jCAeyv5mxmqlQKhQ52oLRkH7AXH8SpqLYbqgDSBqPscvYt/ntCUToiKM\noY5N5bQrwsiAXLAvMQ0vD3LPR0MvowWfQyg8m8ku7wz9WIOx0q4NHJVnwFwz\nreWFM1HwoMS0oD9JXv2wUiO1hGmHqXJ9928pW7D3d4aB4VEsOZcT7cIhtutX\nk3Dy4a0mfL6wYXJ7EwjOKvBrFCjymXtKKiedFN7URBQ/IvgvjwWxopnp0KHo\nMKAB\r\n=SRvI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.c047f7c19.0","@material/base":"14.0.0-canary.c047f7c19.0","@material/shape":"14.0.0-canary.c047f7c19.0","@material/theme":"14.0.0-canary.c047f7c19.0","@material/animation":"14.0.0-canary.c047f7c19.0","@material/elevation":"14.0.0-canary.c047f7c19.0","@material/feature-targeting":"14.0.0-canary.c047f7c19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.c047f7c19.0_1641401174948_0.4197568488154966","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/menu-surface","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.05db65ec0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ed0b79609792b6fcea376cc6a58d6a59c65d7d0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.05db65ec0.0.tgz","fileCount":37,"integrity":"sha512-B8+qRyfUfrfg3QSDm7Up7kXfnumUN6pSPvoq28SpJ7kW5oWJfKdgyhiGp/i1w1AMJin6OrTPunWo+itU6W2tEg==","signatures":[{"sig":"MEUCIQDCRkrvtr0ERKEbv62IQ249Yu8wXEXN2XFgsbgWiDgTCwIgKGXLr/Aa1K1V96XcmjY3n6VJrl5yI6lFLjgKit4nQdI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yN7CRA9TVsSAnZWagAAlKAP/j3M0onLoo0WzGyQjMS7\nI7G4TiXmL6sPGu8QglJfwF4VvqEfcoo8cW/2Dfd/cljhIJIL0anS8+DbBxH8\nrFrGc3HqRya+Au0tJ/OmLr19JR2wYWGSkl5x/zj6o2JWaxjG7d8PC3tCGkn9\nw+y/LWkH1SbqAbGeBA5E5zWKh8jqDu7M0xl5ZtC7tGlB1vRVKOxfr42eClRp\n+dkdgLRDCUOB1TAh4ejBJSRqw4Hnkcvt4cdnXZyvehsjeoA24LPXMHv8K/B7\nsfloPI0nH4D8/WGM7u7nM7/qiY+23gGq2sFclgJzIZcERqhdiRo/TnJ5U8bh\nj99Yjid7gAdtxJcKBU6xFbSOuPmWIBpwQxLJ0JVcijbc7FkTjZJBbAgmjKYg\nmkkh+W7UxCluV5cXfInoST580BkxbGBV/4TsVFX3uHoDdmAY5QvRn/ia0S3Y\nHb6cDTQLgEwznQ7yJKr4JrzDuFSdkBiuGyntTZ2E3SgW7W2E/FTzDhA+GHP2\nIPYpPQDICLY9v3XHi1DcXxRjyJ31gGOJ7/fEODLxjhNm6bz350BxCk8akq1d\nxtVvAV38WHInAvu79TT5VicRd6wmjWkC+K2AM8FB1I+sTDeAeA7MGCuMyUsz\nDBjGlqx+jxI+8za2mjda11Tbia/d4xHhZWztWlf3csHmllRYNFPHsStWllAc\nonss\r\n=umJ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.05db65ec0.0","@material/base":"14.0.0-canary.05db65ec0.0","@material/shape":"14.0.0-canary.05db65ec0.0","@material/theme":"14.0.0-canary.05db65ec0.0","@material/animation":"14.0.0-canary.05db65ec0.0","@material/elevation":"14.0.0-canary.05db65ec0.0","@material/feature-targeting":"14.0.0-canary.05db65ec0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.05db65ec0.0_1641489275642_0.2308973619930874","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/menu-surface","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.6ca8b8f85.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2269a0282e92e94abfd067bff30be8b0e92b2e7a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":37,"integrity":"sha512-7BsRMy2/jlkM8TM1NCHp/zaGcoc1vhjgreZIu85tIZkuyYu2xbB8p93O1Yz5/pXz0oDqiaMm0QxZ9DMZHvN2tw==","signatures":[{"sig":"MEUCIQCB93EeyAIEzYdaqHRsnCz/JTh7NMpcSwKPpwsB+7/btQIgQH8jEDNZ/1c9KMglQ7SnT2UPfjs7Ee9xh+TK8B/tQOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GPGCRA9TVsSAnZWagAAQWMP/ikZbmDfJB6Ts8kX0P2x\nO+rFwDKF4WrFLK0hn9wBrfM5QLms+7YtEvEZKjoslKUL0BeejlUAmFloxmhq\n4VK3M9H8y47ZchRGSRn7nd5B7+55hPuAdnubvcnjYTsk4NEocCnVjwu2o3pU\nGMm6pu6RM2/wjq1pPstHZDWodsf8VjkPMjJHCRALnp3IwDlM69KrEY7lb36q\n19HebcqDNH2irOi33YYB1oJY95M4aA5yPa5GA5jY+JA4qGX8c6B0/c/P/9CI\nxqUhGADvtUlCs5KQYEz6MRV0Sb+JaGgpXIxRF5RsZNx3U5CRnBBLyQGUVzbz\naT2EYF4rMzib/dLrE8lEQ6qxHRXl+ysu0WAdMKOvN71vWF8g2if8vHWdne1X\naw9PPyup6xj07NPrQHv6B1lpwAR1v1dHv9pd3frT1WAWxP5I3QgWfVZ5cVWs\nGDAgWEcB4XTBvt3Q3b6P0ZdQxTUWWa/WDehgfii+a5SYy5T3njZutJlfue0m\nDxiSVs041CAAcSm8SQVCTCZJmjoF3vDm1xgXEW0014sRoeXRDw5ZACxZord8\nWP8VVB0NA0JMiNdBgQ4/MxJcowzLmit/TYZda2JnSvgby8MegJtQWnuL5yjz\nUo9LKEeOxuxi66jy0SC+yKuY8ODAbrlD6+pUHC6jw1oBPPj0PGifhXaOBbjI\n+Q4x\r\n=m8/A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.6ca8b8f85.0","@material/base":"14.0.0-canary.6ca8b8f85.0","@material/shape":"14.0.0-canary.6ca8b8f85.0","@material/theme":"14.0.0-canary.6ca8b8f85.0","@material/animation":"14.0.0-canary.6ca8b8f85.0","@material/elevation":"14.0.0-canary.6ca8b8f85.0","@material/feature-targeting":"14.0.0-canary.6ca8b8f85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.6ca8b8f85.0_1641571270480_0.9326639114969482","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/menu-surface","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.173ee7a7a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9c711db0d5c5521115a67f98474b53a0fa2a25d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.173ee7a7a.0.tgz","fileCount":37,"integrity":"sha512-/ICREbl91UQC+gesNwwdIJzZPSiYKhmkyztZOo9eAH5ZAshMCPLKID4Zm96tEuboIyATkzsxt80/W71ji2/Mog==","signatures":[{"sig":"MEUCICvseZUqzSezexQpIxTyYezWWcDnJyIGbMxb4RL2J3vDAiEA42xtLgp4TG+l1vJJoAlj8KLJ6o6vUCz3yHPR3ebAqKg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GTPCRA9TVsSAnZWagAAz3MP/jvlQNX2dJw/L2i0UPkL\n1ts+v3w4BgFq0ukYicqGHocxpvdL56xBVXM6FYx4pNDJEzYoVbkn4eEnp/io\nsuVvufGHThf1v4QkdNmBJPnaNKzqkB0CVCOnUuE0zXRsmJRYz+c1ksryvDDd\nYPN5Yer8Ytl0JjdV1ROkPXdvMutKK6AUdcY+25n2nYG9RD/7++iQKyzrG/Eh\nGJt9SsxZqNJ5RZGTO/bOc08BlEUhmWeY/iNRMdjUtgOVIL7geU4qztGKz9Yd\nr57988ebNn11P2N1X03JX0KueXUjupcHMI5zRTfPTC7xUA9C4OX577gilRFv\nLScCFKAwx3uSRs2pvpy7cnkDmNPj0pktKkHUUvEBSdOg+b7SmfU+6jeuxr7z\nUytpAllJW9lr56v1dricPo8epgmqBp4z0ohAcacjYN3Y2tCL1rvraTAQhwxO\noMI4ygjSg/5/A04hAODgJ42IFH3of/5EydTMMpbY318lKfpjymIuEXoYNiOa\nzDOh/JSSL5PwLgzsHOOq7+qlGCLHSGqDX3ukCJNw98P06IbBdz5+a2GNYsc/\nUu1ORTHWvcMd4GVKy3zq+5rjMfL91H+2y4xRisF1Jv1VYG7quBdKa8lfbXP5\nshj42+46k940ZQnzHrtXCjxl9te0wUF4F56OtWzhVqUFARIhBYAWhk57JHaU\nnQe4\r\n=Ck6S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.173ee7a7a.0","@material/base":"14.0.0-canary.173ee7a7a.0","@material/shape":"14.0.0-canary.173ee7a7a.0","@material/theme":"14.0.0-canary.173ee7a7a.0","@material/animation":"14.0.0-canary.173ee7a7a.0","@material/elevation":"14.0.0-canary.173ee7a7a.0","@material/feature-targeting":"14.0.0-canary.173ee7a7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.173ee7a7a.0_1641833679456_0.6275530116709012","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/menu-surface","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.b704e4dfc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5db53bfa5da4f820881f39c7dd6d4bed65411c98","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.b704e4dfc.0.tgz","fileCount":37,"integrity":"sha512-4NbRoLbMc+HyfL+YL2X3uif2Z/bQIydRl9qpBJlXkNATkWhqz7nfBruPT80ogGJjNp88wpvOUroE3gFaLNx2eg==","signatures":[{"sig":"MEQCIDEpczA14FKLf2MSb1UtjtXc+1or89niGeKBk1bs9qU2AiA+qeQOkBZp0Ama73rDom7E++/ZPWvlIzVQx3ov25/K5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3Hv1CRA9TVsSAnZWagAAD1wP/jo1YGjbVBZBAerKvbKf\nGgD0WycZOOT9fvaGdD+ifTS65wCmu4zF4MvMUrNch3VZfBtMwiu6rld+/DK7\ndKf1os8hH1ka8sff5ooQ4Bq35q4JePmej65vpU73hVSim3UqUq7+aFCv1a9T\nAjVRw7o2IR9CgpxJCzPl+iIoVhtYuA5TQTGsoGJc5Y5OwKgOjS9IQqoLLqrx\n89YqUzYJ4A95u+JyHLKJnDBLOFzy914Y3OAQYYE8iCc8JOi8nHBVVEMswHUN\n12dPGmIe5ELxr01o/TsYeUTGhIbsPlwqsXR49J6qEd4dqihLHeoM1xHypbTx\nTG4iwCv6xrgRzkEO67QWd6Jc3m7XC8++47C+huuydQ8wdNtj2W02IZx9DXS8\nWepuQFuEHj4HGiy+Xdww904rjbg7IXdJjrox/UFY61ff8afVHlKeYvSHmFOn\n0Ij2S1rIwxJHcVmVCoU+qDyPFQZ2410xx0ZM2bs9yVXDHpvVvl+RpossYoQG\nNlv1PUQ0Jh5t7MzmA4Ip1q1Gp2+GU/q1YeFIZAknxKaPNVt9KwYVGvM3BT73\nn+IWR8XGH/ZXdOmiSvCSc9DwX2/rBisZUeZB7uTAE8BCt1LXwVj+N6+j7OR1\nQxgsOh9zwGscOSWkuVYtuglqeL/NTm1wJfY1xK8dGrz0ab443fED6XKJaT3s\nIh3s\r\n=pvHf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b704e4dfc.0","@material/base":"14.0.0-canary.b704e4dfc.0","@material/shape":"14.0.0-canary.b704e4dfc.0","@material/theme":"14.0.0-canary.b704e4dfc.0","@material/animation":"14.0.0-canary.b704e4dfc.0","@material/elevation":"14.0.0-canary.b704e4dfc.0","@material/feature-targeting":"14.0.0-canary.b704e4dfc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.b704e4dfc.0_1641839605413_0.7074890272867331","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/menu-surface","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.c14e977ee.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d385e6ff37fe82e32c1d201a3510c631dee1a73d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.c14e977ee.0.tgz","fileCount":37,"integrity":"sha512-PffNHzEyJ5ys+kxYBlDilJvhYahhHH5flusoGFdksSDTRup8H1tV677FCHg1eTpbmbB6IcCSRVNBrfNV0r6JCA==","signatures":[{"sig":"MEQCIFyZlKyukanofysH8QWhkDN1lJaGYtiZmjJFm2JMOUTzAiBpLteQwTxRklVBRwLwRu0DBRsM3L+pYFoDyEood/TYdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3acsCRA9TVsSAnZWagAAJIwP/A2nE+rwA5kYgX2QG8Qk\nMQkUBrovKGwn0Luk8DRpFT8beRxC2IBhwvzZJQZM2dXMwfDfUt9bcTdOEgAP\nMNQwa+xzhxhJREIwQ4z3rkkFyl6o4f6ZPWThySYxzPh840Z4NqjHFfvAVyG5\nAalnhC8kXFgSaqXERzo5VIrBQ/qiO1DMlbExU5R9ZVWupkEHBfsXtt6qi30w\n+VbtC3lokEN1NEe5KVl6ldf2QWlJuda6FUDcaIht4aoj44LRnVknLby0q9VW\nwTtbwRif4qHSPwlkuRGLj2chsd2t2qS9dwEbEbQh4weenWHG87CNf+zoOrL3\nJtP4kYVucSHmsmW1qwDETNSEzpfM5KE0TvSqMhZ7kv9KgBzvbjL9Ayb1Jnbj\nF1knxi9yFujylfzDl0l+JEwTO1sGVy+lwd6tRwCepterhwT56Ir/ACHJkJkI\nLysa/KwoqIy6eL36un7k+VlWegJGHBiCeZN5XqH4FrOgMDQxMcViYnf7wGsK\n5F0Z8xYUVdALGTepGof+2hFG/IN8580KvbmjyXhwvttaSmDx0IvUl1Db0MSP\nRoSvwBS0YAxZ6s7/qSSrof6b7GC+peamK3DLzaPeHkR0Jewcn+jyu2ZUws9R\nOQHY6AX1I0lAkS1XM0YmokzSOVNgQKjWX82GzaGJngEJ7lzSFC8gM18QrJdg\nQkAp\r\n=/2LI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.c14e977ee.0","@material/base":"14.0.0-canary.c14e977ee.0","@material/shape":"14.0.0-canary.c14e977ee.0","@material/theme":"14.0.0-canary.c14e977ee.0","@material/animation":"14.0.0-canary.c14e977ee.0","@material/elevation":"14.0.0-canary.c14e977ee.0","@material/feature-targeting":"14.0.0-canary.c14e977ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.c14e977ee.0_1641916204773_0.8594939482658386","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/menu-surface","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.b094eaa4e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82944bb9119574fa9081309ab83e42308275daa0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.b094eaa4e.0.tgz","fileCount":37,"integrity":"sha512-KGpHprc+DSSICuzQk/++aSWvWcPRwERYoZQXpHrX7VKeRpGOHAozCXzUhwRdWdg641FUq3+Vrs0rX/FkjqSYFw==","signatures":[{"sig":"MEUCIQDSPFCUGDvUw5G+oN5zK3RxSLR9Ad90556rOK8DQgdnmwIgE/QBYdRYQB2BoAhLaHP12XaCOqfdtigeFRbQsvGSBhg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cQiCRA9TVsSAnZWagAAec8P/2jdbellIU4mbnraKk4e\nTJXbOn1mYmrkPXVaqVe+oYj7wt7ZxdOeTWxe0kBgNspcRT52cZ7ojRoK5A9x\ng4TAWzGisT2VPKksauE2drwuNXKpWIrZBZWKKqob1t5+kore/yC+SDNCSbCJ\nzv4yh2ceK9tdvUn+zKYVxdRtDzD7dVP98kdn5hUGQ/EfsHkx1XeiG27g3ccw\nFOruXnb3KMu0YMEfiTFVg7tYTEvfUIO5A78PpzlYNWGiijR9M6tiGAKTdg9k\n7vlThRHqkhZlyU4yJTBGmAwGKIU6kpvKlgj97xqEmj76MLQ435C8Z/NFaETP\nsz8S22W/TtQYK6Qiur6ATRIhwHKkoJe7SZteny3xlIFXHC9iU72yYLA5ebR6\nwuGovCQ7c/hIkQcGU2bKQggeKQb3Gx9Y4KbUn03Kw1AXfXpzDDvcR9grVCod\nKj9vSt1mAtBn54Htkf5ux8mA0UtlTNRdao9Q7wq3JzFNPAHdZzgRGgAlA91Y\n9Jue7ZaSkepcYHSbwUG6uO/UoDwECHaycU7eXgvUNVNYxfrdVAydWMDKqXS4\ngqJM9NRCW+CfjRl7+bLJWfxXHP50wD2MeNnrvQo+akMsAAkooR+B1PsNjc8l\nTYfUn70yeAVCoGA+KFPHSIv45Gsgc+KEGkzsUwkyN7G12duwM7nehJuBSaaB\nOLnN\r\n=agdt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b094eaa4e.0","@material/base":"14.0.0-canary.b094eaa4e.0","@material/shape":"14.0.0-canary.b094eaa4e.0","@material/theme":"14.0.0-canary.b094eaa4e.0","@material/animation":"14.0.0-canary.b094eaa4e.0","@material/elevation":"14.0.0-canary.b094eaa4e.0","@material/feature-targeting":"14.0.0-canary.b094eaa4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.b094eaa4e.0_1642185762506_0.8517423300432134","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/menu-surface","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.390220e42.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae48a0762344821822cf5276817f000e1d1dabe9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.390220e42.0.tgz","fileCount":37,"integrity":"sha512-6zYK2iJKrZ4TlKKFd6xNc+etp6cTffyeP7p4ZWLW9T+yNw75n933XexM7h1i2Ub+IJXPHO6HyXJwX1PM/DFlUQ==","signatures":[{"sig":"MEUCIBG8AVdWYZGqILdZFzxt/c7txeytG1c8uekWOF5202mpAiEArYYo0m1XQxkgnnIXWVBnrEUGYNCLSAmi4FkRXyLE1RE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z1sCRA9TVsSAnZWagAAEcQP/1mT58tuAMz39NPq+mUL\nNRP9m96FNPsKLoZ13VPLo2zlwiy9MTLI87dnXpkKBlrMTrwoSnHQv4um36zA\nXRxYQ/LyHS3w9lcqW/AQ2ehuiKtEM5rYL947S5nSdH+XvPlGCdhzEQbiaWM6\nGBwiZXGw07ybJD867NXSov5DIcacssCFIEc0BolzuxRRL36GLYGfxOAOinIb\n//cWuGnx4bRz/y6JEmUJJ3kfSz/i/L+FUiYj89dScYNQIZBkWa5WiQeeA4oD\nnSngrP3L1mZqF8UQF3/YyE31y5lj9sUkj7JABYCjyUI/dY2dS5dtSjcBPYMT\nAVEoV2oqfNC+79Xn3iitpujl5oDOOnRlshZ2lLqMiVcEQEqUsVop9CI7HMpv\n9CMhhyol05j+TzRCR7VpZeKaBIxmp8maW95moihOaGIgx6Bp3kXvjEKb3QtF\nH6L4tdJLiVG3v0rN4n+9rB5azF6NFiYAeyldu7Jl7B98vlqKaa1tSKYfmrcJ\n/J19TB5b1+tXC54fW8alL3byKhwpP6DQTY3nB8bceFMFBmniP6KzFrhQ6cXB\n0jQ0KNvKJ7ch8VMjawdIWdfzgIvwYQS5N2gWH+rWRpQsY1rLD6YhK5A8XVR0\naACHGVohfiZoI9h/aboLZnhcSxWchaDpM9yMOD+27dnof+i0ZHnIz1ywQjc/\nzoAW\r\n=zTaC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.390220e42.0","@material/base":"14.0.0-canary.390220e42.0","@material/shape":"14.0.0-canary.390220e42.0","@material/theme":"14.0.0-canary.390220e42.0","@material/animation":"14.0.0-canary.390220e42.0","@material/elevation":"14.0.0-canary.390220e42.0","@material/feature-targeting":"14.0.0-canary.390220e42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.390220e42.0_1642437996022_0.4823095571532352","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/menu-surface","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.4b5391f8b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d46d9f2e5fe50e629ded8e67eb00105422e84c0d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.4b5391f8b.0.tgz","fileCount":37,"integrity":"sha512-tLfdEHu1jeLD1v91aJ7oTrntXOxXJNCZOyNyOXwnJ6wvI3yrXN+Vhq2F1DHPIkb9ffn8fQPYrtYcv70+0ixoDw==","signatures":[{"sig":"MEUCIGYpRd9qikyR7FkgGCB8obwLNrBJ7oyyaNSfOkXmtzTRAiEA8DbnXpHWVt2FTVOdjlay7BmI3WrfmEUVjPfbN/Fs1Lo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KRkCRA9TVsSAnZWagAANVEP/1juvwZVbY3QKi6VX31o\nL8zQoVBY4TBfS2bSxEz2TJj/E3HlI31lTwCzI1hpEKDIIn8UMStRpldEd7vl\nq6/t5v4AXZERGNRywfFBY7K6KmWjZ/clQOrUgOHThoTS8JuGWyzTcn0IXILe\nfnoylD+YWoFCtxi/oUbCvXpebKApYtBdpm/PfBaVO0xcEKzTwVzTot288VH6\ncBUOeApQibmMsvympTm0FEoB2JZnrcxh9IfEsRA/mTKTeBSFmZadAgzCAb84\nORkWAbuWhcnD8kt5oALiBGtMHGVfxpBpvrb4xvFd9G+mwcRGxNNB5ikrlN+W\nNOCKcwdVplybYfboD411NrlsCrIIKKEa8XekTZWgMJ3EekmGQBEWb35mHImu\nAkbnn6JhMuGU4Hwu4M0mrQMrnio2N1m2/cO8gkHHqcGND1ppAwji9JQ1En4c\n8Gyumy8Vib8UWK5nJazhAr0WiC8GJ4KLsG7L6VQdy9p9AyRdY9cUeAXxSvj9\n71wvC89oFGjKxpsUMax6jtezxlZNkGb7gYSrtxrdBTQLOcxbJsWd2wSbFQFi\nB3WiYLcn+1FIxOCSshuM7QoBCkX/r+3fvrvLJD+TFbAZTlaIvoXHMVL5HAj2\nq11ipH0rU79suymARWzZN2M1EtkeieI0Wz+cXaYn3aaV5k9KkbpkRXmf3LO+\nQZ9S\r\n=p0k2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4b5391f8b.0","@material/base":"14.0.0-canary.4b5391f8b.0","@material/shape":"14.0.0-canary.4b5391f8b.0","@material/theme":"14.0.0-canary.4b5391f8b.0","@material/animation":"14.0.0-canary.4b5391f8b.0","@material/elevation":"14.0.0-canary.4b5391f8b.0","@material/feature-targeting":"14.0.0-canary.4b5391f8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.4b5391f8b.0_1642636388576_0.37666657238409806","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/menu-surface","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.cef6bc623.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be03eb841da0c2df9d89b4eab82bc95414be026d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.cef6bc623.0.tgz","fileCount":37,"integrity":"sha512-+D2DZUlYsVI4PLNJmm9wBuTzkbtx5g0/6G6ffPBUk6oSLqqPYygpinOWTD4bBhHJwLsXnPkfHpIzY+vImaCtHw==","signatures":[{"sig":"MEYCIQCWxfqUgb+2wz/RU4JyHwuzR1zpeWDiNswENv5gHlAhXAIhAJRrjNFBZOrgqpWh/kdi6gyACMT7MqCOYixI5OWG/9Ev","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KoxCRA9TVsSAnZWagAAjMMP/11QI1BWqIO7h+X3SItu\niaJDe64bDTyIFwqFfrhkLOcvuiXZEsKVrocgwwoiYPgGABFrPQc5O3/F0UMo\nzLkPrqne1nf1ny/BRrQOn67n+FV3ayACaObIiqDORRWXBB/FeFks7bpiiNPi\nUb9JiLfgsoc4lB2QKJ69j3iUcAoJ3y3gQ2AgOtnHFpu6BLxoRGvOqXfIDH1/\nFcISTuhwV9GpBXictMmX5envfbbTKNgioLWcrjqFR6tm7nernu+LKob8jhkL\nDbSk/1Z3NCNYUBGGTVa+uG4lPPWHEUhFZlQAjn6egjYo0v01QzVSPhcZlo0y\njtCO8Ho/KNenQDDQw0lU0OaiVbjq8wi5UkhnIyU4lKLJx8atxB+XaqE4tn/T\nJevS9/41fs8EiDZlBPWJnzfoN/8xsW1klVoE7y4xBnUQZctGRLo7a4LiQF5N\nxf4XGmXtM0lCbRgKSAxOpYZJHsZYajwBbZz4eAzU6+cCo8cVg3kwXHez8QOv\nyh7fOfHPVuHv/EswliZG0OaLdHLnTl19DCqul+O4dCVQKX7MKN9vPr6/y5yc\n9YHhvKm/WvtvLsAPFLFC03VsKq8Tn1sTkgYrzkSIS3YFP5dyBmctX4wybTd2\nMhIMcQpQZrGNVtq3FkUal/Lv9B0yXsV2IEuByznYfKiuq5dQcD8sui1ZkbSJ\nofvd\r\n=lXXm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cef6bc623.0","@material/base":"14.0.0-canary.cef6bc623.0","@material/shape":"14.0.0-canary.cef6bc623.0","@material/theme":"14.0.0-canary.cef6bc623.0","@material/animation":"14.0.0-canary.cef6bc623.0","@material/elevation":"14.0.0-canary.cef6bc623.0","@material/feature-targeting":"14.0.0-canary.cef6bc623.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.cef6bc623.0_1642637872995_0.7323338081542918","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/menu-surface","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.0379179c4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7740663a0a5e86db3157ceb298f25b563cdfcde9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.0379179c4.0.tgz","fileCount":37,"integrity":"sha512-ENEhA0fVLITHtDeTov5OVMhpNNlq+Gt6IdtEoNpYk6hEjBGduxAiXLQqL+dv7wT+sxyYMTwnrJ0ccFX3WKCt7g==","signatures":[{"sig":"MEYCIQDsVTScgIMviaBbXQWToWxsiF/iT47SNEZii2Q2dQkILgIhALUD+NJlsFdSATCm4FF+iAWUSmjOjBLvShg+PEfMXg/B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6a/2CRA9TVsSAnZWagAAO/8QAIDaMSX4/w8Tm4e70FZd\n9alC4HoA7RVIaLHT8X96t4r4FLXM2gvUBMVbfCrte3+yRW41YknOaYi5e2im\nt8tuOkwEppUjqZFAy+eslIicKgTDTGuLoRBtxIxUFolaYuO8vQjEnVoWrj3d\ne5E+CDGOtV1xTFh0+aAPic63ziedS2P+yKQZkRTDbdVstmNqbE+ZcrQBiXmC\n86T0NxXllT9JO1JzNSeIRp0KBBjqBtPvBNsA1IDVJZgkvy4HDt6ieYKyAlGi\n6/I56l01TYxwkIZEpC/KvVc8POwAIJ36hbrqt3XnXJmW7L/c2LLGFCjJJdme\n74OjJZ1unoeg8ddirhS9sHLl5A1kwyLhn8/tUrwubCG2Of8Y5Rvu3ftCybJn\nV3+OTwzgRX0A2WAZ/3Jkjg2N+gGqdRBvdiWvKJhdEtNu6AVJkIL3PMCl7a16\nYmMhC6BhJPIY7dkD05RVoQ8VK7TP+NDHFf6h3dDigM6x12GASjD3KemTLbEG\nBDyweG2QuHthWg+r7gOhtgBC1Nuvf3STXvX9DXhRbZIWpJ4G3GwvuK6O5top\n8VTrZSKdD7PtCg/1ayEb4KgbMwWTxtPq7tvajqEOwgZji+K5lF7m+wCCQASV\n5QdZjFYUR8gRpLtbDKjKaWSHZmSZ1JVNaz4ahRsuuxWKytM+KW2787EOcqBj\nHGCF\r\n=Ks8r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.0379179c4.0","@material/base":"14.0.0-canary.0379179c4.0","@material/shape":"14.0.0-canary.0379179c4.0","@material/theme":"14.0.0-canary.0379179c4.0","@material/animation":"14.0.0-canary.0379179c4.0","@material/elevation":"14.0.0-canary.0379179c4.0","@material/feature-targeting":"14.0.0-canary.0379179c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.0379179c4.0_1642704886167_0.5347959395685844","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/menu-surface","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.e62f3dabf.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0c7574166f283f4d04537236345ce7aa5a47c26","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.e62f3dabf.0.tgz","fileCount":37,"integrity":"sha512-G26vTtsJBQhQkc0XVF4ZAJupOJTKwuF37npqOj9g5Ypq9tUv8k7/l0cL4FQEK59d2k6wPbyvneA1V7bJ2Eht5g==","signatures":[{"sig":"MEUCIQDTnnxVgrn1Z7RKcsWeA32+y6BjoKN4mj35mFR4BrqUpQIgX7156d0ceZ4BxfH+bXJ2JbBryYBycS4Ox22+PJNxE/k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zvRCRA9TVsSAnZWagAAOfYP/2qfaPZBHYKo9OpcuiIo\nsj8QzZYftYVqnhBn/D/EMYiNaGPCW3hdtHNeQDF4cYJ+rOXUCMzEXD21ahHW\nwBlwYgiZUdPa6Ldyey14qJ2X+UkYdfqbNgsqjASxXJkbMRrAI7c506cuS8rO\ny+q75fEMYWS5F8A0jdsiAYhIvuDMRATkbdAa/9812svCF6sYh33hKAv2iTXz\nWsa31wJj347QUyBs6ogFN9s+P7Lby+pEc6GQHRCy7ho7SXvcqtOqy20JFrN5\nTHCAIu3N+xdakn2OdvviZYl+2iGeC6+683thDTSgzB1wm5ALsMWjtLnOpAJ1\nfD3mjFnV8IzIFUs8514jOoKwLbVl1WtIge9+6lxSL8agkruMwJq+nFo20z5d\nVSbKrcVvNBiXaK1P+jHrcFfdj+5oxxBy0yefxHPH3WyWbXuYjZcbYPAKS3a/\nsVj3TS+50Dz28UKiJLxoAc7tJSWgIF796ljcHXV8tyRpngxJdoYv4d4GYLka\nuJDlhb14HWS0z1uESHc0HXN+wNeHVw2+IFUgz1w6I1NRowrt6X90bq/1iG1a\neu3UY5s6XrKM98QxDJQWehMpIPQkBnGV+MWb9FKLlmce29rDMl7rAOqpj9j2\nvQvhLsgCj4fEkn10jkhiG2wh6nX/32g+RO0J9e7VPMsZqFA+rIgf3RmEGu/I\n+2lL\r\n=7jgg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e62f3dabf.0","@material/base":"14.0.0-canary.e62f3dabf.0","@material/shape":"14.0.0-canary.e62f3dabf.0","@material/theme":"14.0.0-canary.e62f3dabf.0","@material/animation":"14.0.0-canary.e62f3dabf.0","@material/elevation":"14.0.0-canary.e62f3dabf.0","@material/feature-targeting":"14.0.0-canary.e62f3dabf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.e62f3dabf.0_1642806225261_0.27883785841236963","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/menu-surface","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.3e20c1de8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54a09f0d971883f9b53d31d2e60a3aa77c7fe871","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.3e20c1de8.0.tgz","fileCount":37,"integrity":"sha512-Nl51YjNjxi0aemA/ni7DBSGxLIBH2NPBn7GaXOzO+ubAjvz9rZy0X+QS8ea5TBWwE3AJ3uM4NxOKy03BWuOKtA==","signatures":[{"sig":"MEUCIFVAp6doUkzvL1eKRc8kBGLlo1bPMR+noz3OKxy2ihbxAiEAj22qXfSi0IkCIq08pfCBriBzr9zxQlWx4Co2oWgN7t4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8BgDCRA9TVsSAnZWagAAcJ0P/jV0S9QPncRd8PvPUxw7\n6sTjqbu8rNpfRcO5sHREF0jJaBnh2HHbs5/UnL/8jmrJEf9A2W1PJYaTKk9e\no9BcAEkXfiU9cr/HbqNRTRABNdzFsN+SzBPnBn3uoM4yG0mPExrPhwl6RZrx\nKRVllM7OC5d+EmGQqXX+CpYRe0nVMRQm3lyq0KUn7dOIn64sGa76tynC0SWO\ndALHtNByRTZyBoiooIgUklCbdfBo1ubY9DbVSfeoTO3llPJtVRG/v/mfDXeE\nqgcjEPPOlA7MQ2ExFJwTEg/bx0EyCxL3+HUJXr+pMrH8nkfmtCjtwOEJgAyY\n7Hiy7RRUSinilV9XCikESJMjKWzkMXUl9QuqWairG8XqEN5+OoUNveefF6q+\n4BP5Dt8HBzgUZvMsswD6T8im0orrL2SAQTxpVs9PXSA0b69jePRCNF/LSd6l\nyjUKpr0hcM3Xbtu/tKw2L9jAfzz6Wju+IDTmJSfxZctpVsB7v6hFH4zyC/aw\nz/YoHx34ja4t4DkEcElqs/MNI949shNwNIpUXIdlLT4D31tVjw7PSJZUYGc6\nZHy+OT7XhjKss+IyyEQb/5KkwV4Uiz749W14WTVaehsqsEkrudhXlnF3qqT5\nnXk7/nR7xn7k3sAEB3axSIt+bkVtvtoB7sMWIrHhj9AHLDvkhDF3WObr3p/Q\nu86/\r\n=qAqk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3e20c1de8.0","@material/base":"14.0.0-canary.3e20c1de8.0","@material/shape":"14.0.0-canary.3e20c1de8.0","@material/theme":"14.0.0-canary.3e20c1de8.0","@material/animation":"14.0.0-canary.3e20c1de8.0","@material/elevation":"14.0.0-canary.3e20c1de8.0","@material/feature-targeting":"14.0.0-canary.3e20c1de8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.3e20c1de8.0_1643124739483_0.025730028857687604","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/menu-surface","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.9f9d928b2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"757e3cee4cf0a62f83e042d01e96823db0b4c233","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.9f9d928b2.0.tgz","fileCount":37,"integrity":"sha512-Oti7SU9L/Rq3xmPLqQdptNIJ/stX4R6TMLPJFVeQz3VcqrfjXAH25KuzD7VcuYcyiRQDqDbqDbORDB+J9TRY4w==","signatures":[{"sig":"MEUCIQDnTi1lZoEqg+dV/NKAeuRyPbh3n+XciHFk47uKXSNC1AIgJz1WpSTkvtwgo+LztW9tducC2Qgh0jZz+v2eKwwab90=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uDOCRA9TVsSAnZWagAAwzsP/0Z44SlyfacRRigogIiA\n2uZEUSRji+wULIaaNnUhFuu1mu2c6u/jrxmlhSDuiu3Ce2bzQoMdNJXf4dXQ\nEVZSAOb0igvSKSXnwntkHsD+upFHkMRBlVwMvPTsQ/ZyypJ8PHoYmWGltHDe\nqCH40xrD64d4Sts8Pby+lwNphlBjlzjOzN4gMgHp6Q7uuzSH+R9c3Sr1jNhZ\n90iEYfBOf48hKec/SmY/n6nzgPfYMVB0XOYzrLGK1JTM5IHVZZyYX+dGXjaT\nFq6DpSPSzZIOCxZvvAP2I4hsHAClMdYxNnnTp+6ZmLxvZiZVZSiFQaD/n6u2\nnhOgABfirHsJhu9whv+CoB3/YzuJmzWJMXtJBm7DyB6nJSdkJSgLrPrURcig\nygsLOxAkbcnCZkCFTvxfVwGdNgr20HKbAUlIIDK3BZAVkLoLjSztczOn8XF0\n1vnbjQTLrPA0ZX6R7mvJR6daLxdeSxJmyHRDH35iVAtomcid2SBKHo3o9Uqo\n6v37CjH4lR9twid4fPIfvWfGPsFncJ05r6kiiKrU64HyPFq9aoX9o9D4bs1f\nUXndIlpCXZNAayHaHKRJ0Nl+NbMEbx5vIOV9x3ftY0qogxd8YmqaStbSsLSl\npCJi5XqdbthIBgO2gOGrk+lpLadnyVeOOvtwb8Q5vEm65Jr8qbhNI88Kujfa\npwRe\r\n=UZhx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.9f9d928b2.0","@material/base":"14.0.0-canary.9f9d928b2.0","@material/shape":"14.0.0-canary.9f9d928b2.0","@material/theme":"14.0.0-canary.9f9d928b2.0","@material/animation":"14.0.0-canary.9f9d928b2.0","@material/elevation":"14.0.0-canary.9f9d928b2.0","@material/feature-targeting":"14.0.0-canary.9f9d928b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.9f9d928b2.0_1643307214352_0.7438348614617207","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/menu-surface","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.a2bcb065c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5216f77258f273647abeb80cf72f0d5a89fdfbed","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.a2bcb065c.0.tgz","fileCount":37,"integrity":"sha512-2rRzMuGOamswK8eGx1y0kEPEaDFQGC8g626EtxTz7UEZFXBMucQDdN6LA+Hs1WMTbreWd1uHjmkYO9jCm9LCew==","signatures":[{"sig":"MEUCIQDDzjKQygSoG9yDfGMDUgT+Or2zOLD2nKzWzQof1Y4IIgIgFZ5+3YIq/H00z4gtmnkQ3GNMdDURHK3tLg6cB72IPdc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EX3CRA9TVsSAnZWagAANcIP/1/XkiyCIvprW5CojW3k\nQNITHMMeCgNyNwvlVWihVHtqMPzd01tbL304RHOP2ZPN29vUftDB0EQXRxt8\nkw1RojHDV1BUgdTJ2feeZMstx/HH8MVgTW2RDicHCmDu6r3bwcColAtlOJUo\nbzUNG/QtsgLJUjd+c1ZR1lvwckpgWGR3XXOQnFU5N/hrtFoEHS30+xoAAvq9\nb/vVtsWQz3zpR+n0D/LlqfYE6Elj+zQnjQypXdBk0HgWN+5PH2/4Xp2MY8yj\n1EFd+CFW0jhGD6StyEdZD1zMTFx045Cpd4D1pU52R8lzvVvR3BOHGO5SvIsV\n3ElSvYqJRsniyk5SiNqEnhzQFdZft7oMUKGzGvTVe4BwW5TdfIYa8/SRNRJT\nxg1LuJJ/qySGs9tMrQovLijW1p2QinZir8g0HvdkeiGhSKVO6FTXygI3nxKT\nmkv1X9uiSKskDNCSODh6V2cBvUS+pwJxuIGSW3GbKxoL9cpkKbovWdwj9SIj\nAXcIRdtBqaWYcbhE/CVYaUsX23MPbsHoANvwif9GO9kkAN61kiddwwR3mD33\nDnjKhRNPnAp5egbrXq8dLXQ9OWBePiebqaFD2SCzx9SAMZ0vjp3krN8/+VA4\n/SnBt9xmHbkR06ROwPV5ee5wtSgMRC2KJ9xDfS+KmeuUAMbV7QTCdr3ABvE6\ntxNY\r\n=5tdm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.a2bcb065c.0","@material/base":"14.0.0-canary.a2bcb065c.0","@material/shape":"14.0.0-canary.a2bcb065c.0","@material/theme":"14.0.0-canary.a2bcb065c.0","@material/animation":"14.0.0-canary.a2bcb065c.0","@material/elevation":"14.0.0-canary.a2bcb065c.0","@material/feature-targeting":"14.0.0-canary.a2bcb065c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.a2bcb065c.0_1643398646978_0.5615059633498001","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/menu-surface","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.4e66fb2e1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cf3cf9fcfdbfadbb9cc2290dabaa3d7282fe042","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":37,"integrity":"sha512-ABzFO6gZZyod5jVDbi7v8dQ7mPsrvIh0nDE25SERiUR2+indpw5B4YIqIQ2UQHJrp/sp/ZRQVesdtkdIMXxkMg==","signatures":[{"sig":"MEUCIHPVgjESpXCZWodEr3lc+jVL2ZeixpkuMHISkuqUH6LKAiEAiF5VYZT3H0bKW4q7E7MmFTfEgvMd+hFngvYDkF+dMqU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Eb7CRA9TVsSAnZWagAA5LUP/Al4n9eJnuak40MrYmui\nvbzH2Q3bT2ppxrTri6lUWQTOoj5KNpHwwd/jVo1J8oLmXCkKI5RjZjGRuE4G\nE0PCtJEintHki92iwR/DkURdUJdOSQtAHnp1UTl+Aln/Hrl7BpDxsT7IuxPx\nGb3bm4ImQrGV6t50PbwIkoadUJ9eGO22sSgn+2IKNKz5ePDXo3F8leyH+Glc\nfTN0R4JSMQrkMnRsm3v6gz3nNW0dtmhHEF/gwmmM5zyGZkJPhAxZbK7D7i+o\nE2xR1hbDmAGIjUvH/2pLj7U/NUrgNMLslZh+FlNyeqyDQSQpz0k1V0JutWyI\nTPvw0JtuAWDf4hhvzKvID/5u1jv8F5K+lCs1YBx36/qnpKuA6SE6XrobctHT\nHl868fnGx5MUgVsj6Nxc4eFMiMHDlqFhVUf3rGVsDV9lgUyfWvi7HYGEHap9\nn+GDIjoRdpgjWztGFQZIU5UjGaorQQ8Ac0qvbLOh13XUjHOPhI9Kovq5IYx2\nDNqQfR/tZdSxyEw1CwTT9bGRTFpsXZSFRqJ63SsDNgCy2Niii5GnBdWXGtoB\nmsJed7NK0iuIhkpLFuy2FVTRcp47zO6t/cubD7Xy32BeVrP+lGlMhxc0nAUu\nAeAEEYrvCsn4gja+rQkziVkz+qrGwZ518zypiO4hYHI0wfFs++gqArP5bfvq\nvoeh\r\n=WMt6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4e66fb2e1.0","@material/base":"14.0.0-canary.4e66fb2e1.0","@material/shape":"14.0.0-canary.4e66fb2e1.0","@material/theme":"14.0.0-canary.4e66fb2e1.0","@material/animation":"14.0.0-canary.4e66fb2e1.0","@material/elevation":"14.0.0-canary.4e66fb2e1.0","@material/feature-targeting":"14.0.0-canary.4e66fb2e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.4e66fb2e1.0_1643398907403_0.13252373666751582","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/menu-surface","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.9736ddce9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23c92612e92ce11425f69bfca093e62869162a39","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.9736ddce9.0.tgz","fileCount":37,"integrity":"sha512-oxqcoHbdOjDRmaY7TaUO1baM15xw8Q5rNMTzg461P/RQcpRVgsyw7KTkoavr8+0PvIB5P2dZcuixWZDdg/864A==","signatures":[{"sig":"MEUCIQCGUI6Q4w+SjXs6hQlt9F8f4LG/t99+dqvjI7dxXbBvBgIgYsSXuHFt6TgoNI2r2bWd08jShYqm6+3dfpM/lcNHOD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q3ZCRA9TVsSAnZWagAAa8EQAIMYVKKiCdZ850iuXwuY\nIy6cx++FLDJhFx+deFrNWAaAJsT7d0vIUt60KcVeUzKwy/F/nBCj4R7C7B3T\n4numRRL+RG23Hr2x86ZbyyKLLkRyKK8MqqsN9JYmetEbdJ8bsnRB0tkOyWHR\n7kLtT2+6SpjnD9u2dHbXxlaisdsPnk+gDJU3Vcqv1pk8QdZHGpqMQlUkib0H\nxH/1VB04j585mSFDZ9nqI19mdmPUKNnl25nbZzGlIxRe90OifkBh8sgacF/N\nMubi57u/eEsqD6K2BMVUeXTs2bs1LzGrvNOnVgAJalWUktS9v3OjLPD6zyRe\nhgDd981WzsIkiom42RzZC+ZEwTJ4mRtUga7ftyCbfoRXjxyH1XIuQKHnEMV1\n7kQhVMUcsARnI1+oRipeV75BL5AsPKcdYRdWo3op+EXN7g6Qcmz37FxDA1H9\nOrAqa7agxWYmwam722kQZQP5oNOPg6pq5kvTQxvad7nZcxH9Hwrmtqp6xsR6\ngMWfSQeICuGvsHzRknHhJPudhrqdWuS+c+LkW2iL2Pd03/zJKNHDdryry/ri\nHDkRehakzr7B0lgv1E8XuV6QGlXcWbNOIyCN6wanoeu05Z5PzwmOWRixCKr3\n/n0nmeLuXQ9jqiDAyBGnoxp4dezQSwAKdx0YvQ9ODpBxwqhASHcC+VaftjKV\ng1XN\r\n=ehBM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.9736ddce9.0","@material/base":"14.0.0-canary.9736ddce9.0","@material/shape":"14.0.0-canary.9736ddce9.0","@material/theme":"14.0.0-canary.9736ddce9.0","@material/animation":"14.0.0-canary.9736ddce9.0","@material/elevation":"14.0.0-canary.9736ddce9.0","@material/feature-targeting":"14.0.0-canary.9736ddce9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.9736ddce9.0_1643449817207_0.6033261248755868","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/menu-surface","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.cc4ed13cc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aef29cc62c688a712957f3babd1e9530d2253d13","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":37,"integrity":"sha512-+tFP05NqWv6loztdRGuy2OTDg8IzDGrX4GbOee+F0mXzhLOki5QI5XeE2HK6zLZLxWi1E0txQPoQmBqmURmQAg==","signatures":[{"sig":"MEUCIQDIwBH2YaNT4h5cW431a8M7EssngLYZdw8mj6tI3xI1egIgf/+MScj8vcpEgg4dWVE+djK8z44keHPcdaD6FUT7EUc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W8KCRA9TVsSAnZWagAAtxMP/RvRH78vfmkqTlEgheMK\nSU8szwh1y6v2p6bB+SqDCQMhkslqyhBBKGu/8s99e/O27junVHqE8BtcAx0C\njkQrSKK/wEHdaHhbFk8NTgnY5QPLKyzBpbqlCEI2/VGjkZhrD/7RGjSX1Z4T\nJoQACjMl/hDegf7A3TVt7ADSvud5S7VNWwjojl6//lWcL6OgernW07hnPWas\n2Pq730uUQC5MXPgULw9KtOLcxsv4eGExb8So6joo6iS21kmLkwb//9HiuTz/\nVDWUFCk5n3vM69bQKUIaKWitFk1k6OazWW+MmijfN/BRxwKXm8c7eIZ2lKrK\nXr22glqDkSDXMKiCAOMoAb0suJf54l/S/a3Ny5YzTjlH7E/rXzCCGV1j0+o4\nE5cvthDCyn0l/q55FJh/gmHbaSfc8qYpJqAIDv28wBekH7i5Ppy62b4mB0NI\nDYiilas/uR9UBKGbPoY7sUxNy+dRFbrs1KZwmI0EnwQ7wWadcGwHql0p5RBG\nQ6dnJylfCTHt63ITWNyKOCs8F0lx2Ctnr7bfwcq7LLKgySvdSB81RgJNu+oA\nefV+W32GC13AYszFYLuRFx9yt+O0tGUuIC9umID76e/Hs1skPuhmtn1AZqZO\nPiJ4Z51phL2jTPV51CSoSDOrddoQb0CsXhUTylez1lZKbIJglrobWE2MUYP5\nSn0P\r\n=Q1P9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cc4ed13cc.0","@material/base":"14.0.0-canary.cc4ed13cc.0","@material/shape":"14.0.0-canary.cc4ed13cc.0","@material/theme":"14.0.0-canary.cc4ed13cc.0","@material/animation":"14.0.0-canary.cc4ed13cc.0","@material/elevation":"14.0.0-canary.cc4ed13cc.0","@material/feature-targeting":"14.0.0-canary.cc4ed13cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.cc4ed13cc.0_1643998986694_0.9718612413856438","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/menu-surface","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.dcba26fe1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed635b1f17d43d8807189839247e33c175bc9aea","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.dcba26fe1.0.tgz","fileCount":37,"integrity":"sha512-MvfdPUxDiNt1U2Z/tTJpdyWOwFgBuzlYd7Rtryz25GQ9YVZHZ3xrB44Q9vklqG8gqkCOkUL+1Y8jW+PAa8OvTQ==","signatures":[{"sig":"MEQCIDKtH0ZRTIR/3OSdFwr4VpDOQENCp4z3wtzyrA5YLBjqAiB8fLzjcUHpwOlgrfLi7u/I19kbhaHoYhFB/eawHORxcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aFPCRA9TVsSAnZWagAAqWoP/2r3av6gV9tHHr4m/my4\np+B936cVwSCX/kTIE0xYbktPVuX0tz1oCerVRz15p9Qm26y1R/xba4Yn9x7y\n0OWrkWguQ38BdlkxDjcj0YDSaTff43NuemlRO7D5WXifFC43w0BYwqPPywju\nm2/hlEdqXTrxokTO5q35059ozDU0g1bQulZP5jPiDTmAjEvrgVr7UDdwNcty\n1Nj+0FztkCSz1niCuh+ydQh/hxKirm9DrPZKTFFIuqzD+ARJUSY/b0wgoZwU\nvWLZbifLELeP1+PK0a9HA5sjRTodbDx7yApCDt37izmO20HyxPTE+TUNYSQn\nnGwgPhJX6qGmjwKvfdgdEl/qomwK1zah7h07mgxxHTWMR3wBDfNxTzzsP3Do\nckQnjrAjvIZPMMe5nCPe2mH9scIxLyp4NFGtCzAffP5UW2ZUa0kNc8U4pI6F\nwHPd6pqFkEtxkQl9Cyyyx1twrUunacUUvk6NYyB3gnkeA/+io7ZVco9oUM/j\na9YLowjN7XxavhDOb+gJ7q52WrAZdhu9nFuWVjSz8tbNmh70PkPVRWTQlD+Y\nC9C9EOEgijiOX31kYu9FY9pCAZGF8m+ac1U7PY4Vimn1La3reh7iyx5OdBQ8\noZ13YE/+JJTIb/vr8P3DPX6QYmnDQlmOuEw6rL5y2LcaerbJ7CIjCnjmumxo\nltbg\r\n=6VuW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.dcba26fe1.0","@material/base":"14.0.0-canary.dcba26fe1.0","@material/shape":"14.0.0-canary.dcba26fe1.0","@material/theme":"14.0.0-canary.dcba26fe1.0","@material/animation":"14.0.0-canary.dcba26fe1.0","@material/elevation":"14.0.0-canary.dcba26fe1.0","@material/feature-targeting":"14.0.0-canary.dcba26fe1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.dcba26fe1.0_1644011855510_0.3917775669886301","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/menu-surface","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.ec54d9046.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ea3d23ea4539fb8b9a4cfe0a689f10989e49916","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.ec54d9046.0.tgz","fileCount":37,"integrity":"sha512-+EXoCv5370Nj0XoN+gciOh838FEIMFaygu3oS1kLY19VQb0rdOuXc7LXZIHk3RmH2xMAluGjgOwZUrAROQa4vg==","signatures":[{"sig":"MEQCIAGvopGJ357NYdJIVuIsgmNmWe7KJ4PddOpzuC9363gEAiBXlgYr0OKA09hE0RO3IZiS+XBF1MPDGeEgml8QhGytkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT79CRA9TVsSAnZWagAAhcUP/i/xt5vi+BBpPto9C8UV\nBscdTdhMv2E6Mm3xUcZcUEoARXUDo4nOPGdMweoRqayr0hdtRUpMmnBv7Tbu\ntNS7BOHXmHrRMlpGSC7V79dUF6itrayROokZNzjQoVw9rFAF/C8OL5pcPe7y\nrxnoVL10Q6VoziFuBnv7xafnJjzt1ZOkZC/MO/mcxDMFQQZkqRlQaYstjT1W\nSQ0xNBHiJZN+jyTYh4ZupV61boNTQWxkoIygQuajtZJgCjUfZ+/5Me+l0THJ\nBM1QLbiJ2KVSjRN6zmKvDAMGZxbfmk51j6PKEe8UYeGlWFWyFvk6GxrEuqGW\nHrPsJkGo4zOSvI09t2pnLfMY4cXU7bzaVKPv8kNU3GhsDfdS+S7eVqdwmJKK\nlcDnuyYqZa6+1I3bmtqbk9r4IOk+3ZMnmJwgyOea6fULQrAwIP6MonlDcul3\nR4A0Phg/OGhbYitNZDCSAIyWrZdLsy/stLfUTvnOVt0LtA1eEO2yMBTyLWn7\nIpPmv2HZ1Y0nXLU9hK7LnXck560gfm3Vl+Yd1iv1w9rmKZdbXXxIb8FBGcTk\nHvMrGPojY3Le9tClGH9xP8FqC7xHEEtnAheN2DYLz/Q0LXl0h3DNLiqyGv0p\nHJVOkHLH2XmGEMwIBEOWxSI9To+6R0lhPG25j9NcILg0ifRYa92DvBUQ+rpu\nks2V\r\n=ZoDn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ec54d9046.0","@material/base":"14.0.0-canary.ec54d9046.0","@material/shape":"14.0.0-canary.ec54d9046.0","@material/theme":"14.0.0-canary.ec54d9046.0","@material/animation":"14.0.0-canary.ec54d9046.0","@material/elevation":"14.0.0-canary.ec54d9046.0","@material/feature-targeting":"14.0.0-canary.ec54d9046.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.ec54d9046.0_1644248829451_0.12096799633293775","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/menu-surface","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.ea9b5b463.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51a99452500d41f9f30e56fc300dc71e3dfad7cc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.ea9b5b463.0.tgz","fileCount":37,"integrity":"sha512-4K3A/pqGV2nVBrXV06tm1AzqLmoAyiIo8qTgo6d8hmY5EwPnHEjF6oL9e9dvjrd46SMozHEv98rH0Ea/Fm3dbA==","signatures":[{"sig":"MEUCIFgUaKBK3p2oiwE1S+/CuHV/gkbADYOAPZOVITxzE75OAiEAxMKqqu8YoAsuIl05zf3DX0qq28zg9pIX8+5s98EaIuA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA/++CRA9TVsSAnZWagAA7gMP+QCkZ9eJwNAhzhpUVI1O\n1bvCJpns/BDuqpZmt1P8XbHWyJ+8Eo8gW5pA0rqJGk4CDqBZE+Z1kBPdJFb9\n98eXPSU8bRb0Qc/EgKwDkgQ0amhn8oIhEFdLidh6Q0be7+FZ27udGCd1V0d2\nhS+CWvbnNP9iILQZ3OcSXzy17Oyb1J01jr9lkuR/rjppS0Cys0XLK5ka9Z3R\ncx3COx67Lo9BcsxRX6Jrtk/l6K5P3bLbglq4eTWf1YPwLKCu9tjBMQnbaJPB\nNFKFUx7UmWldhqUHjMup/UGNFwuZXSiMW25/nL6CpAUS67MBsBLg1Bv7gJaH\n0tFRI+buGb1vcIknU64k4/HfswwobH7OkbnAz4QBXP2lNZZa05SaB7P6KcL0\nU3JEvH8rSFGK+BSNpKmKXkQPEylrzDw6Na2Kybp/rwob1NzV8aYYQRURZScV\nT21BAAE0ZKxRgnuTs8evJ1a9JyjJWuKKwgQqP+Hi7zg1V+JVIlHB3OA1PmCr\nWfZPbCGIUSNKipchIBp/Lx2/Y6UYYWnNtU5ATZuwXWX0VSvrq4mWKTRpQoYz\nY3ghJAq3M0DqiJpnrO4u1hmNAg++NHAHPLnO2++g0gutXG8VaD8R8VlukR/s\nqQgnrWp9p+jh4FgbZp7Q5wNC2GSfcs1Whuo8nHWVOjUgEswJaf6SMzWhEJ7Y\n6eVz\r\n=ew0z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ea9b5b463.0","@material/base":"14.0.0-canary.ea9b5b463.0","@material/shape":"14.0.0-canary.ea9b5b463.0","@material/theme":"14.0.0-canary.ea9b5b463.0","@material/animation":"14.0.0-canary.ea9b5b463.0","@material/elevation":"14.0.0-canary.ea9b5b463.0","@material/feature-targeting":"14.0.0-canary.ea9b5b463.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.ea9b5b463.0_1644429246122_0.6110474613663968","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/menu-surface","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.96ea061c1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"835e59fd2c853cad6dd4dd9444c19c6fba477add","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.96ea061c1.0.tgz","fileCount":37,"integrity":"sha512-1kOsRTz0Oh3ZGq3pWznt6SJL0IebjBFnv2AflBTI6qPu0ePu2KxsxBYkklDDH6YvOzDdbbCETqSbTJ0RmxioZA==","signatures":[{"sig":"MEUCIQDOSHZ9//WIj1P9QxM4H2CaB7HXia6DY0UH52q6ysBbXQIgH/sgRiC5nGDJLWazZQMd17wyA/8AmYZwrAriBAV0eSY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA8DCRA9TVsSAnZWagAA2VIP/14AEQ005xULf3rP37ru\nmPi4kr80la3uMwI0UT4STEP+D3UfyAZWcm9+GdsCOhUJlFV+LW+NqcqWZFDM\ngcgr3uDE75AtwHv48DDaLeMigfBudWcykPsAGPIyBp3FMQJFYLb4DKPLdbXL\nKlwzcSLgfmQHhP16+r6dLa1TkuOmcb9SrGtSfUQa+PBflbAE2xXkkX6WkPLH\n4o6eGdUL5K7ycA6I4J6i9eGzjc3mHK1PZWb7DqikoJWZ6LbSYYBSLuYaKOaT\nt5sT0aoIHP+Z2gK0zWA3tvhWBua47s/excPThkWJn4/z0VEwfhfL96MsJaR/\nvm8iAjNfaSpGtnXaLlPRCl8gx7pNKkRlIpamvrq3NaqXcbSG/SkulXawkBsP\nuidpfGzLnWJl58UslOEsaTo8poIeIuqD6THHrayaoaU5cZI1Ar/fXDTptTb1\nC+jxolY4QAxMBKDIBvyT75IPvCHpQAaRBNYPaQRz3h5i1GnflfqlKNQxsIQj\nKCnrt/8YcqzpiSe/BRz59qMBHaFRdlFVdOo7hwYvFQIiiX0+M5h0zPAPUJtD\nRZpK3A8WY9qFknm4ovr+TM931B4sIpKQAC2L4dJ+pe6i3YsjHX4RwUtCE7Kx\nPKx1rm2LHDPxPX+Wp4VmpW9mVagAPO8FHaB6qx+8lPSRQKFpsVkv34JP7xJ1\ngcLF\r\n=LmYc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.96ea061c1.0","@material/base":"14.0.0-canary.96ea061c1.0","@material/shape":"14.0.0-canary.96ea061c1.0","@material/theme":"14.0.0-canary.96ea061c1.0","@material/animation":"14.0.0-canary.96ea061c1.0","@material/elevation":"14.0.0-canary.96ea061c1.0","@material/feature-targeting":"14.0.0-canary.96ea061c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.96ea061c1.0_1644433155137_0.8585692078933074","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/menu-surface","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.e00181e59.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6e2fb57bd8820d87a3a148094ba6580725495f8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.e00181e59.0.tgz","fileCount":37,"integrity":"sha512-lxUNzG8v5JzD9WbMiTUDWdKiAvQCdpqZSZ/RXTv3rrdl3dyttEEUK+1uAjeL8VKMrmbJf0UFYJl0HIRgYkmUWg==","signatures":[{"sig":"MEQCIEyAPGhW03IXmaL7R0lzqjzL259I32b8QSoCtOsvBrDbAiAReon3pzyKN7GpkBa3M+l0ratrrOeeCYTFrU9l/DhtDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXBeCRA9TVsSAnZWagAAeHMP/2tx1wrKuoXwCKWc05t0\nJzZPM0oQpjIpnZ7gY0RJC1e/tEQhzooKw534GjfV1ydXNX89SXNys6kAafMl\nP+gHOdD2kl+lIQy6vK418F0vGpoQNjfrDTVZ9hDb7dvsWLyaTMrG5XcyBKbU\neeNa27UyTWRHDj83qDEDtExu8Rxo0mIpvLBx3TT7RQzFoFJBKXHV8TprJkdi\n+u0szw5GIs21U5c/KHjG5PGcBgSXLqSkBxd2LqpvEr3xiu4Ogzg0+6WWjxXn\nF772sMvCN0g4uWPorKK59aw/fu+QQAPpjKhjB9nkwGwx0hpnrEL0/Yh5THqR\nGoEGnlq9dJ6V+6HHgxpfSqyIkRKLajQvv15fRBa02oOtbjk+t+KY0psXO6sZ\nVU+v1mlNKdaTF1p2HyAM7kbCgMDEahfwafHewVIgbe04qpgv/QLYRKDBgbAG\nWsKHqqbMdrlm7B996LzROqZOmFTSgbbSYBtwkuTNwC+ppfVnBEnTJD4+V+eY\njNwk8p6Z265XqKIF14vcq8gNt1FapyVRN642+s4Rqbs3R/oto9PLLxjyahzc\nKB7HVmEUeRPqHv2RHdlTYw82u8sfPV8hBbjeAXTXrwFnilCH1PBjXXECjbIJ\n1hMif0m2HADu7KsqUNRKz5op8Sv/9bsJjkF5Q411A67JFWXfaviolsBY7krq\nb6DB\r\n=6pq7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e00181e59.0","@material/base":"14.0.0-canary.e00181e59.0","@material/shape":"14.0.0-canary.e00181e59.0","@material/theme":"14.0.0-canary.e00181e59.0","@material/animation":"14.0.0-canary.e00181e59.0","@material/elevation":"14.0.0-canary.e00181e59.0","@material/feature-targeting":"14.0.0-canary.e00181e59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.e00181e59.0_1644523614074_0.9868935186912522","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/menu-surface","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.037285f9b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c84cc7430a0c185ada5e00eee735463b411f8adb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.037285f9b.0.tgz","fileCount":37,"integrity":"sha512-Y2wFecynSHPYuN51hTfR5dJR4iNoFehCMWKjczV588PydG6LQgTwClJAphOIWzLEw5wa1Wj6vdtXBT3xmCApZA==","signatures":[{"sig":"MEQCIFwBcOoij61ATi89IcNKtmiv/XBVfMZyDypa2b98Ho0ZAiAOncVpFpVmwZenteuJio5YqdHRaYC8ReDmFwnBbuLRUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqsgCRA9TVsSAnZWagAAZKIP/0aOWKuoSaj073+z8woA\ncSzh7aEpnHVVnZ6ix4pTSntfiZQ5kanfUKGm5UeMJqhoCVOZ95aoFg6+Dg4X\n6DOxYzdBdN3IznZLUXSfZPBUP5U24thJELN01Lqm5GErRc3fkX+ZgK5Oe8Gc\nuJYWY0z+rfKsL6LaRbhlf9vfA7iR8R5pe2dRJyONPi0lxtzeEfnjreJQwpdb\nL0w9M63uvDLlK4BXi4LekhkQYilh0D5cg6TBoIbWfztdVZXLVhFEsYcps6TV\nLidet37ftUwnZC3380IL20w1Y3PAeRRU6XKMrlKfWg1/YOAxDGDf7CnBNogZ\no3mzzfc2hPKy+hY0mofxiwsjxUP3muIp2ozlVUGkh5/sKZi9eXiB5M7B7KvG\n04ISoujX1MUrVchNyQ+n2CGtoYoOMbjy+TA91mQq1ul1bKO2fNX9sTIBDpIA\nu1kCcYpjOLaJbQ/v1DESeQH96tOTWqpxvHg3jCf4FkDIEkEXIpNVtjvnRq+q\nMgNjtI0lYqQqzvJYqgAAREop9UE5j648BIPXP9rY7vn1M1BOzMYcOR26eETJ\naQRzPp8nNHlsiDTsud71/hqXo2vM4Q+IJpgAXRxdiPO7nnGRKK4kyF6zEBYJ\nN/IXky0LCWqu3C9Jgpfr59KTnVehl7dWX+dOYKp2oJKbhdf9ctqUE81L7oGG\nGfGN\r\n=/IrA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.037285f9b.0","@material/base":"14.0.0-canary.037285f9b.0","@material/shape":"14.0.0-canary.037285f9b.0","@material/theme":"14.0.0-canary.037285f9b.0","@material/animation":"14.0.0-canary.037285f9b.0","@material/elevation":"14.0.0-canary.037285f9b.0","@material/feature-targeting":"14.0.0-canary.037285f9b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.037285f9b.0_1644604192479_0.053624864832556796","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/menu-surface","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.1aaa68dda.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"feb19f930bee2387fd690ab6bd4f8ec78629dd69","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.1aaa68dda.0.tgz","fileCount":37,"integrity":"sha512-k2J/Ixhhj6FQt8S78wjyELJ+HH9eFsAF9ppLN6+wVp2/aFAC+n2r2mcwcUKTvVhJqy5VgFVcI82iy9kdngDa7w==","signatures":[{"sig":"MEYCIQDtWUv6ujm3cAOzMxHahsjerFUDAXRUSg2+eQj/0sb7IQIhAMKayERTQ5SbgAZYell2zCh+QlaVupPm6wyHhtFOkAbs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVVBCRA9TVsSAnZWagAAsZoP/Au+r4qaJvedxUMrU/QZ\np5+gc8AlzoS+bNufMTzXzGI5xJacULsHATD1ea6m9hcVlZl0kGlwpUYVTgIh\nmtDMvFhuGo42R4pUOxRLD7GEIXmoLC6F5KHZwYPQiJyrEVQrJAzVcuogTD3P\nU6BhpXQ/3UVErqI3cn0oiiABzHtnSixLudhOuZxH1FNChkbrDd3tEGGk9RIr\ntZ2eFkyrZsGVDjIxLeMv08L8VFsL/cyfYVYLB57H2o9rAAOX+1saCmNp8bq2\nOTrD7O1laNnPMEpCSvC7wkzWig3mk/eLaRUgY/Ht/JUbU2WJdc98lWEGdTqL\nuvGTzv3cpt0L/1D7C8WrVlMgP9+LwEewo+y/JDZgWD4PS7Gsy65v3roub5ja\n0OHzmhH3Ig8+U/8CgsyAtLA0IVCGvpZWjiAgYrpCVhRS8+KinMqLEy+Gtwek\nFgkpuzvc1J3njv1bU1VH6b9Dvev1Msnz5X47n7lqYScGWVTnUgThQ++VvHQf\n6mzIeLJvbgS8GoehC58dC3a0w5CzyofDIVEzfOXYJ3QLyYEGoHQl8sorWj5J\n3QbIDeFAtu9+CitixbQSx0kc2m2fBDE6wN2vp29zah9WNF/R+jkQZTt2R4T4\npj1xcS0F03XcEPNQKI9R+Hqs/Wx6Y7W8t/92R6qXM0gVsA3Ag0+wrcv7nwJu\n+tRm\r\n=S5wT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.1aaa68dda.0","@material/base":"14.0.0-canary.1aaa68dda.0","@material/shape":"14.0.0-canary.1aaa68dda.0","@material/theme":"14.0.0-canary.1aaa68dda.0","@material/animation":"14.0.0-canary.1aaa68dda.0","@material/elevation":"14.0.0-canary.1aaa68dda.0","@material/feature-targeting":"14.0.0-canary.1aaa68dda.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.1aaa68dda.0_1645040961312_0.6122310483981777","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/menu-surface","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.ab4aba1af.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85c37c7dc97ae7af0bd782f92c84b03fbdedb668","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.ab4aba1af.0.tgz","fileCount":37,"integrity":"sha512-QzZgywVRTrzADsBgefGDmRgrDaz8iTCPXyVa0tAnuhLByzHBRVo3MRmo/BfIn2g73GnN/dOyGR+BRxlHe+BsNA==","signatures":[{"sig":"MEUCIGzW6+5J9cvyVnbGHUCtvJt3xZgN3fqXri/JqisjkJthAiEA5KtIyah+BLWDxcghzOdQKm4wSuflE86wefXvuya/Mmg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpEGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWNg/+L/CJxEkGbEDV3n8sxW+u9PmcVpbYWzHJSI9HrzDOpwgLPLeV\r\nf9Skeka5T0Ar14Y+/iarjWTXDpV/zX5tKV9mwYyunwpGquwqsomEXtAThDt4\r\nuLBIJ9Ln0ajDpwXBPkZ/Mr6W5CkyTYtbBUbm7zhN3tGKQFsXj04oinFmxJnH\r\nYRSZsyI5OXi8jG/uPiXamUnhztV5L4ryUjcp0NV6TOgROICOMchKH7AFLMaj\r\nDaRO7CbqQmRpeI+9YVnji91v/f72mj4pn1X5dBaSCYN0GV3YDoHFDUwMrmoU\r\nc3olc89JasV0lfazXqhzMvOmwHtwFtxyFPq44eeFYGA9pnzO5XdL6MQg2WRQ\r\nUjZfTQDxxTQkGN7Sdc41mZnbc9hgUGlID5b0FkyM6X62kVSR4K7FyvXle4op\r\nl+LvRFGpeO7LayJKwoSCJtVriMBP0bJyPLYWThb2/wLGyGaP6DQ9CxYYiaKV\r\nAzVI8pZsh2yUL3Ex7P528IIRmoZ3vz6gfuG6QWV44kbIvzoM8Hz59IMm0SKs\r\nce3OOwCV2fHCKejpNshPMAa+l5nmQsBALcHlEn/eU9KHhPkZAWbwIX78GnOz\r\n6rYRfBlx67hRm3C7yls+A9YADescNXtaeArJan2niuoeL16hnvMieaSF+caa\r\nnIdR3O15kRuUmK6Kv1W8WcA1/EzZBGnRezA=\r\n=23UI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ab4aba1af.0","@material/base":"14.0.0-canary.ab4aba1af.0","@material/shape":"14.0.0-canary.ab4aba1af.0","@material/theme":"14.0.0-canary.ab4aba1af.0","@material/animation":"14.0.0-canary.ab4aba1af.0","@material/elevation":"14.0.0-canary.ab4aba1af.0","@material/feature-targeting":"14.0.0-canary.ab4aba1af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.ab4aba1af.0_1645121798844_0.5843622086327593","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/menu-surface","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.e58552c6e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fcf2f5efbe59ab14533f8991d03f4456b8000cb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.e58552c6e.0.tgz","fileCount":37,"integrity":"sha512-Xqk4rGdJnvOwkSB9kcky/dS3LmRe8GG2FPvxJ/2aPj9SHXmb+KhyFI/nq6oGoOVkmG3oW0xvwb+Mfte9PDCScw==","signatures":[{"sig":"MEUCIQCn0ozcT2T7iSw0Xm9V/tI9rHmU2g0XBvvweI/i034NtgIgGALbe+qI0/D1OH50RXXdl9GfhXUdj9tXbvnmO5wNrq0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD9+qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRPBAAoUzgvXvJQBmQTSX/J67uRPLJT/BlHifACoxZ/57VmC3JtWIi\r\nyWVGUaV30TE1AYv4Fy3TqCJxMhIhJXZ83a4GjRLzVqUkXgIhYCpd5u+8ZRKd\r\nz4VtXCaZxdmK3VzF6brrnhw4RCslA/qqufYkG0HwqzGwbvJXWfP+mZLv+QDP\r\n900WPW9ECeShehlAWrxnVHIXyTsBB9+A5VKFggEyA9aqcvBbOGP1BrSENRp+\r\nKVSgEXn0OSNrc+9Pt5/FFyeVr2/zrb33UPHWRotOAn0cJBoPKq8oAhXF1Ayv\r\nWARIgvNepQDORWz5VuANDZ9iUSwexrASUmslFZUqxd9v40w8JG6z9QvZGXHJ\r\nB68891muRcrdxaTRshFehxs0p5p/dUmFv1dd+VgUfcfxUTXOnKbHF5CaAK48\r\nZdu7JavmnkBJjF/nQikD3P4cghTrZAgYVmKOxrXOpyha2pEHfH4EJbfj7kM1\r\nUnryj43iwvA5ZtDkY83n7Zsd5YIJWGNSgXfh9WJc5VztTK/zyxnkDh1rqC9t\r\neeDvQx057W5K4/aWUrYVZu2o+/Gtw3BvkB39JnYVz9BcNAdXXcMJS06Sm1ct\r\nqjNdbVs1Uog+PQJvaVH8rUgJ0IC1ygx42cC02z34KvIpDO0tf5f9HEzx3SO3\r\n9M2ygWWujr+faU5N3xI+SygDPej8TyKohYY=\r\n=peJz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e58552c6e.0","@material/base":"14.0.0-canary.e58552c6e.0","@material/shape":"14.0.0-canary.e58552c6e.0","@material/theme":"14.0.0-canary.e58552c6e.0","@material/animation":"14.0.0-canary.e58552c6e.0","@material/elevation":"14.0.0-canary.e58552c6e.0","@material/feature-targeting":"14.0.0-canary.e58552c6e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.e58552c6e.0_1645207465995_0.4561622194742747","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/menu-surface","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.868793776.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ace9a2e44f3bfcbc9fdf835d23ddefbc0b18a72","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.868793776.0.tgz","fileCount":37,"integrity":"sha512-1mCUs/9/B9HhGZMDy7q8OcPEVfgaE6iW5vN+Y/6SsTI/SKL+9LxJbREff+RnaynU95XVwH12sJiTNwT5nqzW0g==","signatures":[{"sig":"MEUCIQDvDGJ6rPgtzUlx8N4Ypf6D/oMCUl9E1fD5QCPT7FlcWQIgISTnE7nlEb6R22p3OCvZcU1XXj62GxH7Sxr3pUrwl+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTsWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9Dg/+LWtFU5t0UDv+/y/bbl0/PpN5lrD6vwqlGmSi8Jjy2FV3C7P0\r\no3XbCykplEZO5Pqy8Fwvle4PH1t3oI8pEDGU9ADsmvHH6t0HgsIUFpy13XR5\r\njKWJNjhP+ry3ZiwO2KVoN0hh5Zr+/dcRBwYkYT2nDPSFNWlZk7rY3q0XAn0k\r\nxNtwX3Uw84USMTqXO7NrE1wpJwBwBeqL5BYs3Gka6y0UesmpFJULjr4lHE2L\r\n98R97VtmybsdKrEMVFYFZhxpgsIZ+8LFFunCn/j9BFUtR9FYw5c8cmr6C7qq\r\n9D9bwtWJKiRWZaHnMzFLF/4a4CnpAzQpAm3mD54FOJ5V/GSV6zsXIJZ+cl8q\r\n0zirAtAxkrhtIszOtDS8XaQI5+T9wnUku7LbsB/hRU1Bw/yfYG16xsm4vnkG\r\nR1gGBZ6/yUqJv8JxzAx4hPDxNNamXJVqRP5Xn11gYciJ3KknmMlxOrAk9H22\r\nHWG/AhVGZ5SbuVRlbV5LXMQNiQaAQUJEQBjU/EveMlHj2MHWKWaBLLGlgM7w\r\n2NxkxXJ7vS0HbcT0d/L20uknkLaH4fKYdkVeaFy++xN5dFDTFOhGvq5UBl8b\r\nvBf5RnEN8DVlXuynOE2EJcKvvwdQr7LgTqnumSjg8K22UJ4IyYIfecDeaCZP\r\nFVclwBej7+I959mDOXdmq4PlrdvVF+fI+/k=\r\n=ktfm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.868793776.0","@material/base":"14.0.0-canary.868793776.0","@material/shape":"14.0.0-canary.868793776.0","@material/theme":"14.0.0-canary.868793776.0","@material/animation":"14.0.0-canary.868793776.0","@material/elevation":"14.0.0-canary.868793776.0","@material/feature-targeting":"14.0.0-canary.868793776.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.868793776.0_1645558550729_0.38269138905277744","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/menu-surface","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.fdc37a445.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92bbdcb4d3ee3e4908120bca24507747a74e8f25","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.fdc37a445.0.tgz","fileCount":37,"integrity":"sha512-6Y0yTPl7vfnuaUNY1XoA+6g6WozxACuJ4XD/k7RPZXDj+XED99VuGqB4mMHF9gdX86ZMPdLIhqUY+NQVvmG0Pw==","signatures":[{"sig":"MEQCIBWetH7CNWU19LZLYoZ4R5AoyM+SK+DcaYfhPYw+NgOCAiBsAhKBfObtRgEv0dUpkKaabHbbkZIOUZGaSj22jLKNiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRiCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpqzg/+KnNi7IDxMgeHv++N8BJlvGxo+Yw9vHpmFBUSvWcgpOhn2g8c\r\n3IRAsPVA7ju9Jk4t63mxqxxx7uO9IzzFuzgtfKwOQh01ieOPdVVTx7AEeqEZ\r\nnG4l1Ze9mvkNrFyye3tgBksNqv8TaEXN3HuhJhi2UYdsoGhGBMbYMydmrokR\r\nhfCWL+oLfklqSm9MoXSzJDBpJFDE267PuH+dSBUAo/ds8GnQRlxsGsvB58nu\r\n5Gpa8bvMxmm3ZgutdGpdY8VDhyTrerjWoNgMu1r/hVP1SNg4M3HR5gR3TI3f\r\n1ayL5gBlvq+m/B+LfQRTOmWSbmo2QjikIuLa282Lk+cW6vPphtDxMquPQcLF\r\n6MEA1TBqXgqtZDRObcXZFhqpJpw9FWEoH9LoGpvLBr48tWZNVoU9Rpgmf/2V\r\nQ8j7aTMFmOMDes7CzLu1Wp3jekJSzVulQYC/lSQ41mTj3PNFG/IdlE01WNdQ\r\nh67VFPCMM9WIPFF/49clknK69hdCA5CiXZZknsHK7dAtmpdPQxSBiElhkuAK\r\ntOQKik50KSap91gFsDXM+ELkEcYqpOPIP758QlY9llvijK/HAngVCnP7BjbJ\r\nvHtkAjQgBHCr010PtCCJELMasKkf6dIz7t72qJ+qpIRHEA70duNT8ut/R6Bp\r\neKYDPviOe8qwpH4RmM8oE0LlSuSqU982MSI=\r\n=F5N0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.fdc37a445.0","@material/base":"14.0.0-canary.fdc37a445.0","@material/shape":"14.0.0-canary.fdc37a445.0","@material/theme":"14.0.0-canary.fdc37a445.0","@material/animation":"14.0.0-canary.fdc37a445.0","@material/elevation":"14.0.0-canary.fdc37a445.0","@material/feature-targeting":"14.0.0-canary.fdc37a445.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.fdc37a445.0_1646073986026_0.6647960082391857","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/menu-surface","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.43c7d87dc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1ce6ea28bd87e5dca79a27829cf65a3bc053793","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.43c7d87dc.0.tgz","fileCount":37,"integrity":"sha512-sRDY6IW5lRpTvLncx4ZY6qsLECdks9B5TyYEKwRGtyPZ78F5VriO2S67A9qOE7vruqIaV0NGgDOgDjw/0DmEQQ==","signatures":[{"sig":"MEUCIQDLnw/gNWjne9oBqXW+fcwpxgJKbsh/tiXj1i1SMPuuQAIgXsOQaK0Qr1nnHQYR8yLgV8EZYNOJn4V86l11vQcr7vU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjzGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsAQ/+JfFRZO493QFTHvj6iP6aiEtSA3GErMAsrjZBk7YHAaDIGo3b\r\nP16TjQ/5NftJMkZ9+WWxmIW2PViPKEluXSUDwUEjgmmJWdckHqLncAuJGP6a\r\nrQsyPxJaXirkJWS9arTH/pNFmPsg0Qv9qqGuw1ZeiwO4aGPVP6fJl7HZiAO5\r\nWsngqMZB62+zaAYCXrvdnQ7Aw067TcwdDthecSseMrbcaywcs2g6UdZoMbLl\r\nwNlVM9i5gV7yNHwY+clp13tmOi+2QMJjbu8dsy89oUogk682nNu0Plyie2/M\r\nrA6o+K4Vmkk/AYPnJYlrcfEC4KCCa7uZY2RZ29hqxKy/FfNgVsYOG3PKJc6U\r\nDpRDxPXAVt1/ZtrSogcuTI0D11sDdBcj29UrXoBNePo4wa6cIaoizckuHSOH\r\nfyev/Rlgnffm5IScUINQ/zqnp0uBPdLKerryy/6p2fiuIOJr9aBjlYCyg+fz\r\n4VtHk/fH6sYAZ0iqdxxC5TzPn16LVZos5wiGTpmj9QBc8mblcoPxgdT7K4U4\r\nG8rAXOt9e7eH8hCnyDiJ3Fz1AWbxor931ABI+CbVoDty9BgQqo3gnTltmV9U\r\nIF6SYfeDF4sALgmMUuOcj64wTBPkV7nWOP5opNcfvwKXfK/tOPxhP1kzLzDS\r\nca0JFOk5JEenWeZsxXhRr518q2uAp9hSQ3w=\r\n=YvOp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.43c7d87dc.0","@material/base":"14.0.0-canary.43c7d87dc.0","@material/shape":"14.0.0-canary.43c7d87dc.0","@material/theme":"14.0.0-canary.43c7d87dc.0","@material/animation":"14.0.0-canary.43c7d87dc.0","@material/elevation":"14.0.0-canary.43c7d87dc.0","@material/feature-targeting":"14.0.0-canary.43c7d87dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.43c7d87dc.0_1646148806326_0.3742999861003182","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/menu-surface","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.23043acd0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"385fafe39b77f8882adc9efacd970c0652c325f3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.23043acd0.0.tgz","fileCount":37,"integrity":"sha512-mXy84rV/jjq/zGcnKZ1SgwgW4qALzWKNWtVIK3NgA6JZpzSpDE9lJSopZP55eU3RNbmesaK5QThUJENuFcuRTQ==","signatures":[{"sig":"MEQCICmBctxmtezuXCwg8RPAb4qoGg5JHiOUPemz1riLJf+IAiB9uZDJvtX5S/wZk7shINVdoy763a99QbP1oXXn+C6FPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9M9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmob0A/5Acb3EohnBQ1FGrtZM53FLsIYP3h9aril55+uAYMjeSv4q2CZ\r\nJcn8LHxGFmlDXHd7jFFDkvhboVF/teGAJcv1KGFZRtzh2kBTPrW/Yv/9HcTY\r\neMNBypz1cdXnGPqBUPgs3BJAwHW+bix2BGjr6x7kPR2v/Lk2sAEgAEJ0xGBm\r\nUWnWyAzmBdnnoCW3bTLthDxukvP1T2QgEJDWDR4GOX0nQ4bUktEWNbUUASYJ\r\nn6WVOCyBX7KYY8e3rPsqiDSh7KFNmchuVLPJoDcAVpsGRNUtsPvECAgNlDnn\r\nI3rkfFdMxa9SQmE/MdsCOhfjE2J3eB6nSp5tiI+iAXRsSigYgH1XWyvoPaA7\r\nTOWM6nQ9Ok1iidjx6uB/L6zQd2iUZ7X7hlRVzhHa6i2hNSQa71TRYm+SvCl9\r\n+C1db4/Wzf6SrrSzTjRiN4RkTre9opJzIfy/sv+g+EiCxm6a2HB/SFQDVVMm\r\nJjeENuai5ZuFQfFBKM9BsIvixgY98U00t+XIP/BHup3tZGgpTi+06E6VmNfd\r\nCqTx4zqNoWOyVeOtCpS/9fxwX65aEyMjkUEpELHKm7SXS9ImVrSVMIi0iHCt\r\npQ+RB/tqNe9fzKJt/6ZED/gGH7WLA+j75jcvjdxWgfkofeaE1OGmL+GqVKVI\r\n1PYjJkxlg8zOL/KPxyv8MW9Uc6kr6xtsdEU=\r\n=C+JK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.23043acd0.0","@material/base":"14.0.0-canary.23043acd0.0","@material/shape":"14.0.0-canary.23043acd0.0","@material/theme":"14.0.0-canary.23043acd0.0","@material/animation":"14.0.0-canary.23043acd0.0","@material/elevation":"14.0.0-canary.23043acd0.0","@material/feature-targeting":"14.0.0-canary.23043acd0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.23043acd0.0_1646252861362_0.3609613123477844","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/menu-surface","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.6505e61c5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf7d1f6340514c0e80908fe1744043d688c1a93b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.6505e61c5.0.tgz","fileCount":37,"integrity":"sha512-2lE7LQUEK2mdvLe4Vlt7UoaJBHquxT/b7R9UAO0u86Euchf9mthsO2LGQ88Pd0lZvWI1vSM6kVDtcwxzNguXpQ==","signatures":[{"sig":"MEQCIEEEldmVpPIBFjwMVuDgrqMEudTZH769qrY391sAfgS0AiA0BPkJJbwY7WYUoQeDFqUDRK5VSL72W+o0C3XbFxjd+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR5zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoT5w/+NSXaA8LoDS7NDfa3HrI1q/br8n8u34qHd8rUQV0oOgZiNK6i\r\n4UEmFFMbQxhxjYx9y6CLgYb1ll6W7rgNxpjXOWx/yVcq686t4k6vzjIHGrT0\r\ndxjCTgmy7oXufri2oUIfJGxgSj5jQvKbWNp5V3SGTB2J7msWPQzTVlcTVj+u\r\neppXcChWBdlO1gIXpcZQH++51rqg7Osv5VLUt2gxO5Yr6cK4PjE10oFXVzA4\r\nxP0xfiIRNEX4AQQqcw7LdHslNHzENHtxBXz5l2QpXCazeaa7r+DAYBczmRGk\r\nCizWOH8fNzbLxSXVhdSB5jh3xA4b3RBJp2c1DXkXGIwWkXUu7RWBRyXNdCnL\r\n0DneN2gfrWURaPlJwDtlqrd8c3Tw0Zl1ycF5fW0VB8/Ir9aYqh20ANnaKe7j\r\ns9nJd9H1YtLr+Y98tOFeeyr1iz/WYK97XFLfRz/ZEVCnITjdSphJ6mpXY8xy\r\nyqPZphUMRSn1iKf46U+8Lo8qx2cqeE1f+nX3SUVyU5WuPRRJ+dbvK59TOeJ3\r\n29cYSbw0dURUvjk0fhFJyn8ZYPoaKqqM/mLCUXuT09DbHYSLSlUKcEQR6mH4\r\ntrajtTafs/dM9Hh+yPIuo30bpIB8ETXBNP1gz4DUzDm5Eu03en2HxNAAxdWi\r\nKCFW1G/EKFVs0mPMSxG2tg0/Lm1NOgICPVQ=\r\n=tSJv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.6505e61c5.0","@material/base":"14.0.0-canary.6505e61c5.0","@material/shape":"14.0.0-canary.6505e61c5.0","@material/theme":"14.0.0-canary.6505e61c5.0","@material/animation":"14.0.0-canary.6505e61c5.0","@material/elevation":"14.0.0-canary.6505e61c5.0","@material/feature-targeting":"14.0.0-canary.6505e61c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.6505e61c5.0_1646337651812_0.6611811131741328","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/menu-surface","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.16c166154.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74eb11cf4687e85e8b1fb2ea702afd32816fb1d3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.16c166154.0.tgz","fileCount":37,"integrity":"sha512-DuucmJ0etHUnUHHywfnL2mNDVCr6Q92PAAaThVx5/9oOuIWa8gMgR14hZD40aUe/qre61t5l9T6uM8ImnS+qxA==","signatures":[{"sig":"MEQCIEMcQEuYO9NywasUnuU1kgSpp8IU1vpBQvN9oN7mCA3+AiANCURAi7h64JZmWad+r11UJdU9EPYESMrNaL8A5wwB/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+U+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPIQ//arRWGEGUmz+Ri90BEf4YrMf/rrFkMDk1NvhIFm/i1+39E/6R\r\nbXpr7hu9Hir8YFLtYgPn8dfSsL8MJi2oMwxC0aL3K7ws6ArxkoAa15N+aCjZ\r\nQYLZUundgY9Rj3itNBf5l1lY/OrqVNbcJezYgsPnDMHnHjk8DLnCCqEVNl9R\r\n+S+TTCEe2DswQisep+7YgSA28kQgomAQ/C6nCtZBpBJvevgfYbFxfiGr6Ath\r\n91O3NP2H8AO9cXJR/IH1ib7obvXi6t6qUXB1SJ7Aem+VNyTCoAiwLnuzKHEE\r\nc8NV8hE4W6TkjT/FWfwlyc6GQFNpF9zlapi9gQvajBXfLSIElmvYFdF8tVfG\r\nMQo+wEmcA8+QAVujGiEYNVYSnzXGEbXT79qDrc3z4IkvstfC4iMSh5NMfT9D\r\n+qt79v/WntrtaomVRhfyYojIpQ8igUGyfYWEKj2K2pVLsJFKH507LIQnh/Wa\r\nT8UIVdE/GL6mp3k6W4JPBZf4pjm8WtiXxEZYQMBwVWQB7nHhZJjpHwbLF+bx\r\nBhTTgNf9Z2ZIUkBB58FBt8/1bHgkAJoadjlwG3i1yLG3TV58o7Cm1kruIniW\r\n+rCaX8LS6RLp2DHjhlCO6V74N7mMPK6hCOY+7Hj6b96fSci5129LRPlHXhow\r\nHH2CN8l+ze9XcGfX8uBAGULX5jj+Kqaci7c=\r\n=hCyv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.16c166154.0","@material/base":"14.0.0-canary.16c166154.0","@material/shape":"14.0.0-canary.16c166154.0","@material/theme":"14.0.0-canary.16c166154.0","@material/animation":"14.0.0-canary.16c166154.0","@material/elevation":"14.0.0-canary.16c166154.0","@material/feature-targeting":"14.0.0-canary.16c166154.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.16c166154.0_1646781758254_0.7480224638440198","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/menu-surface","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.bdf1d3771.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7a83040a19e3831e3d0ccc9113e07690cbc7a3c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.bdf1d3771.0.tgz","fileCount":37,"integrity":"sha512-Dc8yBTANgUbrUuBQpRkGF7YDkipZU5i3/p1InPvmTSi+vJ8cw/BO37p9XD8052OlBMb0im+5Q8PQSMHhV1aXDQ==","signatures":[{"sig":"MEUCIQD9CW+kP5j+WVF7X7zp8RlLioWKpm3yznOtTz+gHz3JhQIgK2es/Sg+yrjrYI1QNiBrMXNX1plvizE9YzojRkjruss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1EkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3Ug/+IqmHeD2LJDU7t4f40x7ncqgFzJHDVrUdna/MfL+G+cEStI3w\r\n+Q5pVKi6F7Z5P0cuManp64A/Jq8NiIdEFVDGLj/7nTj7Wa0T7JBUCHHjFfLP\r\nzVUUaxNs/dQ71dLuI2IJwfAT20Du1oiCx02uoZ/SWcU1Xn5mIreU98FxxBrc\r\ndmQacp85acNMj4w8sRbc7MMhRNhpV64pm9jof6m/Rnpzl9W+tgcZ2F5BRpGK\r\nB1WPi8idB4vnKIck/rzFrE8gCAFByn1lw9hFZ/HCtEOZOo9D/kCNjE2pjN/q\r\naIwzz0zCNrs9/3zFYXiB0vCw926WBrKBUKW3r9aqPDZDs3N+hIo7sfIAvP4d\r\njSiNxxu4+4/8hFu0zWg6O08+TjFwJhGYqw5vtl0qMTz0uRgULKvW2qWS9NrX\r\ndqq1ODn4Hd+0BM4nJN9bm2LPZSWO6V/bIpkcrBqCFhJeorkWL7I5tC6Xidvz\r\n3vEm8mGU4Q3ln30fa/LZJVryIMzdwS8rGHKxBWhr0TwxZ1QqNbw3RPLzP+Lc\r\nDC01F5ZlHMosQAfrlgrmkCz/IgAzIpHaEAjs2z+GkO1J8S9wPMveANNNft3O\r\nl6KPqXVXjew9MIzssFuxxqaY1Ab1xmyNU7U7qlOKU9+0JJz3307lFjD5ZXGX\r\nVntvgMWWRTePfXkE6wdGgUoF2uIweFJnWM0=\r\n=mUEW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.bdf1d3771.0","@material/base":"14.0.0-canary.bdf1d3771.0","@material/shape":"14.0.0-canary.bdf1d3771.0","@material/theme":"14.0.0-canary.bdf1d3771.0","@material/animation":"14.0.0-canary.bdf1d3771.0","@material/elevation":"14.0.0-canary.bdf1d3771.0","@material/feature-targeting":"14.0.0-canary.bdf1d3771.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.bdf1d3771.0_1647268132426_0.30036261300737066","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/menu-surface","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.cf4292778.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4256a1bf921160c4499f638919d973b52821628","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.cf4292778.0.tgz","fileCount":37,"integrity":"sha512-KD8ku9hBwbwjCMKg7XzVpDk/a2Bf3PmG3Hx5el4OcYyE+0zlCBhD4plbh9GtdJurpS2DDxk3CkcG7+piuaZhUw==","signatures":[{"sig":"MEUCIQDEAYJ+2g0zJhoez12oK/TgTyUUDA0ggi9hnA0e/q6mDAIgJTvhkWr5SJIQOlsD803qHDVboSK0q8l3vdC5evKzvtc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL93/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaPA//f5tgPWf9H2OXFkYR1btvq99F8g9P/RA/QNCKMu+2rWMK5bES\r\nuKI3VLUOo+h42XqqlbFSiXjdaqWXFN58vWOHVGmEzTd41jvf/ghA00im+YBK\r\nCz8Rm8KY1uDU0gW9l7/JH1ARw7aBWyhozL6uuOrRMTrLZwgTP76H/c3Vk+rj\r\n9nm3oPlZx8YXHsUcEDo1ZyvKG1u1xFFVMUT1QDB7wkjqVizmel+CZfMQN1gY\r\nKTHjE4y3XVQO0TxrwkuGPhp9XRfgoVZMb3HNR+uxoLD6QwKgc2TRKkCuGvHo\r\nrby5hIYuHIKkkvHYrNjvLKyzAUKfdpS2xOklWTGeOU/UdQd/lQsandho9DUl\r\nTfqUrmD3Xk9xu/ih7iyH9BMv1z7Qn7529OcdBNbAI4ZQbcwe3uYn88YtLa4C\r\nqHDivAwkZD/0ivK+nAiglbpskmq560ttKJLdzd5RHL3KHZDwaHoVY20xUI4/\r\n84AbQ35siPGaT5qTweEyPpN/i9Dp/qxFxFx35Z6MWnVeAgn2TnNcqGXvjHGZ\r\nTJIJaIWlnNSkcu5Wexrj/4eJNOsPCK4IFEtR8aN5K2vs8b2RH67v5TTicp4H\r\nQ3UxAGPgzjGtMCnk2TAM0dzV9Y1Qmj75rKLLPPTDKCiDFZAaQlitmrsr0mgw\r\nopvXK3s6MnrDr+fMzBGdSomIv+WAx3XL42A=\r\n=q4mP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cf4292778.0","@material/base":"14.0.0-canary.cf4292778.0","@material/shape":"14.0.0-canary.cf4292778.0","@material/theme":"14.0.0-canary.cf4292778.0","@material/animation":"14.0.0-canary.cf4292778.0","@material/elevation":"14.0.0-canary.cf4292778.0","@material/feature-targeting":"14.0.0-canary.cf4292778.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.cf4292778.0_1647304191319_0.2199652633412843","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/menu-surface","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.bbd43e0e0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a4a5970676229d9b76243f9144cf9eb72c69d59","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":37,"integrity":"sha512-Pm+lI/R9eN9lzLnoPqkmpqXp4HGV0dC8aXQp4gbNblcNbt7x/VgryIStKgi1SpPEdMoiYTFEbG/7TfTdDCemrQ==","signatures":[{"sig":"MEYCIQDygnqpUyUPH32AaQbk0jTDiOMCsEPbi7Rw0Q72Jj3rvwIhAJI8bHnLxN3aDGEPUVx+YT63xeNZMwPaC1uvnFKYZ4OL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk2LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2DA/+JhWR8SPXmQTG1zX/dgdgmnp5u49jJ70HwjH14zkZejnSMUvw\r\n30zSviHgluEVkqbaLkZQY8ja1XJbNixAsuBZWl83AW4Va00oPc+7T/QXp2VR\r\nIZy1ON+/zU15mhSKT8y/5d0vm9B9FYutGxaL9IX0AOvwSp8oZ9SMncVIbvHh\r\ntqM8qIV8k+zFeRBKpudVMzBUQcxZLW8d7UX/VxF+rC6q7U4cby4ll9iZwHBz\r\nr4rBpchSOuQPV5tAxCzgxazfDfTClRMeQYePXwjEnDvfBdEjvv2jwS3zW2Tc\r\n7nsbgxL8db5TcWPitgz/VNu0U0qaAuzsuilt/InBJbv51BSGu+a3gvVuNbik\r\nSJDw4roFlHq2USTz8F4/ikjJqKRm2rAspXywO2hsAA81taDoAWS8IPNvgvXG\r\nRlAl/dJzucVeoSUEe+wTT1DBN2TEo4FKCDtze/HYFfJtlza51UpW7Cz2Kt70\r\nAOM7R0PoYrDZha6F8j+ZwbG8+DKV9vUPdsj1t/xjLRi5MsjCjgYx3K7Uae4U\r\ntw9rDq/j5IbNF7PLx3pEbP+uRKXHjuczDB8ub0BRRnVGh6Io8Y4vaA1lNvTh\r\nz8dJmR1CB07HGWn0hqbPkJhngLFrpc0D1PHrqpq5GTiu38pKNvX1pvjh63XU\r\ncI8dQ800pvAGHUuhkSE+aYeJbIOe9msHr1w=\r\n=ggY2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.bbd43e0e0.0","@material/base":"14.0.0-canary.bbd43e0e0.0","@material/shape":"14.0.0-canary.bbd43e0e0.0","@material/theme":"14.0.0-canary.bbd43e0e0.0","@material/animation":"14.0.0-canary.bbd43e0e0.0","@material/elevation":"14.0.0-canary.bbd43e0e0.0","@material/feature-targeting":"14.0.0-canary.bbd43e0e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.bbd43e0e0.0_1647463819559_0.22238484879228415","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/menu-surface","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.1b6afad86.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7df0bea1904a7fc9f372aa6c96780af17b69e82a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.1b6afad86.0.tgz","fileCount":37,"integrity":"sha512-FqqiVpURg/NqeGvfu9PThswNw09fFs9VQYrv6ncbb3zw9gmhh1nLsQCyFrO/WVV7h6XQtfGNFPQmTZ7YCslwmA==","signatures":[{"sig":"MEUCIQDdpZ7qfnCqU4xtFGTUqrAVMMQTgZ4R40I938eVNNSDxQIgTSR+TMB60PhdohhsWh2d0SY+m7RvS8gFo/CN1yf7XJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlC3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8eQ/+K4gVgY89COJPwu+dlr9VFNH7eKXu2DSjmQGVtxh8mr5BEAxX\r\nPAqo6SaGyfvWpuB7aecMmwRlteLXbHmaNEjS3J7Qk0XJ0QsP0GEYPFu2t6vI\r\nSUTZflcXzPuwtYXAU3QcXM40G5oSZJsoWjQJzluB4r6xmUYzF1M9++tVpPva\r\nxW/IPtUfMPXs/FzHOGXvaIQ7T8Sy4M5ClFSEDYfkp+FvIo4Wvkj0sx87XWxA\r\nTadYoOBRt7dBUfYjdZYe6YB5IY7oZb0PuNF8TeiOyUPFH0QkneZTssY6Jz4l\r\nftB0yS1AWkSeUl7QXW2MnHLmkEvCyC6LnQsX4fQxjA1EeSvRpqvolumqxKoD\r\neG/Y/02x2XM/GF7nuAxX0nsXoIrMUwtO5oMiiN0PyPysRYfBdpGKfVuFc4+w\r\nUSuyx9LBNqtZELryEbVYMLEb1eaQK7KZ4Q67/ypNxZ4kS4wxfAgWXfFrGacg\r\n7jF4JZ+MeO6irGEfK4SxwiG/ru0LaOg6OmT0vo19s/Vn7PYN1q0iSgOOtsLF\r\npNQnbUPzA8IXxcQ8PlaERVrfHZ7tSFaVmMQj3WsP1wTpU27DD5mdNjJCBRTe\r\nTDxIOpEe2aeIYr8Qysdan1Su9Zq9Iavzz49JTdGkvuX3uHbzlt7Yr9j71LSz\r\nf/1Mpc5EpjeCaqEsdB1V8DPmFFIUSX22dmc=\r\n=PXXw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.1b6afad86.0","@material/base":"14.0.0-canary.1b6afad86.0","@material/shape":"14.0.0-canary.1b6afad86.0","@material/theme":"14.0.0-canary.1b6afad86.0","@material/animation":"14.0.0-canary.1b6afad86.0","@material/elevation":"14.0.0-canary.1b6afad86.0","@material/feature-targeting":"14.0.0-canary.1b6afad86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.1b6afad86.0_1647464631056_0.06947360668662439","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/menu-surface","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.bdf9d4af9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fa5e63a61708931e4207b20fda8ef00bf6aa373","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":37,"integrity":"sha512-147C2VZfLJpLtusWWsM1QfCYXIGgxzkKdhZDTFphWhwJI7nZsmDRtenwFI/1ZCskhiG1a96U+X7aqZEiZHJVXg==","signatures":[{"sig":"MEYCIQDAsj7NbzCrnE9e9YzTSWUBC4Gh6bm0IJ3LnWypzAAIUAIhAPwqVgjpFl+Ny2Dc7OrCuYMAOrboVwJYoNuLWGlNMjug","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlQPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4Iw/5AUM13rNnirNOONKvYvmT8XCoEpktblo7FRQdbIVBH8uxbV18\r\nEbjOrqwhz7tN5KojLOLfOU+ZRMxTU3dgv5AlLRC3Rr6pxv1RyZlY9T5h/JZp\r\nYnSB2IQrQgStDG9DMsz05aK2zsmnH7F9TPTSsYbxa3doxDA8BDwJtGgebQE6\r\nBhkf9B6wiTTWfdQNa0mlqIaC02nUj5ilqLV8yMn3Ly1+0Tzo4HkT7MWYBIcX\r\n78QDwZ6Vtta8Y84gLTBnQ1JOkTdDNoSs2yybJuAhESPz2n1iUU8D0crHz+2X\r\nONNpuMlEw81bmHhDVx74Z4JnfVlj6o1Fu32A193l1hSUhcGbeHQtjFeGVcjM\r\nR3SYGOEg8DVJqeWb2RbisKWSqSK4wIQastPkA1XR229LCjw7eZlsWoIX4Ikf\r\nfvAJzbkS6E5PgyprFLbdKFX2rXqHeFwMRDDqlE5DYUZRTp3tPHGhl2h7KBHH\r\nshCwLG2lbV2HmVGldhhCcO20j2vmBvnAGJj686F9+ZRxzkYNVveJJBlmuL9M\r\nLO3H12LX/gQrDZkTCbPbszUXZ5of774/lGJrqNyo7AVKuOSWmrko7O8qxk+o\r\nAOUBA6ZX6cAgWt0vP9O3f3+48ctSFFgoHheoUifK9i8zb2aZDK0BON/8YLSF\r\nJMCOINzgfsJbiArze6iI3hkq+Soe+tBvQ6o=\r\n=9385\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.bdf9d4af9.0","@material/base":"14.0.0-canary.bdf9d4af9.0","@material/shape":"14.0.0-canary.bdf9d4af9.0","@material/theme":"14.0.0-canary.bdf9d4af9.0","@material/animation":"14.0.0-canary.bdf9d4af9.0","@material/elevation":"14.0.0-canary.bdf9d4af9.0","@material/feature-targeting":"14.0.0-canary.bdf9d4af9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.bdf9d4af9.0_1647465487053_0.9759041161891389","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/menu-surface","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.32b391398.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4b65340cc3f0abb07bcafe22c8ec77346e7dd79","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.32b391398.0.tgz","fileCount":37,"integrity":"sha512-8/SVwFutOoD8auXgD95g7/FbjLI+6dj7tNLK8QJublFhnKYXrc2KhisCgLp1iwu0i/O45pC15hnioHXVu4cfDg==","signatures":[{"sig":"MEYCIQDzd6y6HCbjFP9OWjrE12dB9nssy1dSsyj00NLGT3GeuwIhAM624wObbDVMgJfwvQyS4NmL9DJoc/X80hpfta38tVLi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3cBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+9A//Y7IDlwJ9JCdozG86Ha+Yhy5cjJKPLS/ODFGP6+uIEUs884UR\r\nyp36s2z7a89GRUhvL0L4zzLuJe5+nJYORpylvDutjYpIuW9ZbTVOtHRLZkbJ\r\n0W+1JZUwQerqjC4NUXQP19K3JJ00J3sQWvmVrpF7ZZ2tw6hdYiG1aHFvC8AV\r\nOTgIMkKs3XdKwe+uKvAi0k1VNf5RF3lowHkIwwvejXD67OE9PAVSRweCyDiD\r\n0bhT5ZjcTtxGgzbK2OE5LpibfwI3mL5jeqnT0f+QlZQVrtk9kcHES91NlzIY\r\nva+EasPsLab4OCL5/eZ2hmvQqwE1hZnxx5Dkq13vkdsOWuCN5LRm2mE0wiC7\r\n1l7TxLMD4lVuNxUs0yFUJkU4hYK91wMQddsI2MazgyU6xx5riMMM1Z+Se/Qx\r\nmKaf/6hQqjS6DH2R3GWFEeFVFTi8mToUx5uh8sCOGh++Y4v3BalDe8Q4ueNO\r\ntqJvqRvBoYbipEwAu0IXuAPZhYQldjF+aoi4j9k/mzWhX5do4WujfOf5DuLQ\r\nSVu1U1CB8XOnVsQ9/2p8MmePf9TKSaih3jWLIJ0MngwqW+OnCW8/MB6JO3X3\r\n8TiMsFJpW8ww7CJ7sb0iGb22DzCzuvbO0iVWf6pbaXVdSiqOLH5OWjPJLev5\r\nKxEJsWjXDLpyYXY6u2fhxVFHksPpO7gznTc=\r\n=42lo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.32b391398.0","@material/base":"14.0.0-canary.32b391398.0","@material/shape":"14.0.0-canary.32b391398.0","@material/theme":"14.0.0-canary.32b391398.0","@material/animation":"14.0.0-canary.32b391398.0","@material/elevation":"14.0.0-canary.32b391398.0","@material/feature-targeting":"14.0.0-canary.32b391398.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.32b391398.0_1647539969394_0.0022384622340749782","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/menu-surface","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.ae8a6a3a3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47d98ccf2741165f3bdee8480f9988dd6011b5fe","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":37,"integrity":"sha512-zvoOB0hZd9XF0kXAzxIEsatuwfC56L+sikfG0DEvG7qbh+LpavXByQB5zfS1TS3a59dEIOH8XVw5s2pbPcxOpA==","signatures":[{"sig":"MEUCICx5id0AdyZuGgnyStAfdVpS4ZRq04UA+77wHDhUQ3QgAiEA+TyziaaOnT0D6DGf/sKPrffV6fbQETwJ95EFAgYcIbg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLXBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmra7Q//etRQ80RSi1fkEqiU41/nXR4fTTG40Qe5FGf9cEd2GnJxjXOG\r\n4EIQrrlxmaAOInwjCFYNOEzo5fbS9KzX7nl1TvS+8vGmwfjRazGLDEu8mYGz\r\nmKoNQw9pNW+PTX3dvy3oj6BD3QR2gHrlxOu/qppsOc4ri6Zvgbeoa1eMAcnC\r\n1c2Q5JmxbzE93dugAnVNkiwL5MnFA9CaujCLQrTYPwoXtFBAstSyluzFQSzm\r\nyRT+GCT3tH1nHvUbtP5RXhfn5TzlNOH85aBqF4OWnkYaypfjaj/fvZXWGbII\r\nOfawYN6Eb+G6Y+QSZ0Du/DwpDB3LNx3SgInFkQ7CBLTxoIaM9Xweob2Jy3lE\r\nLOCw6ygqNaGEVdcqwo1uvDNO/gd+u0hSB/AOfGpHJ7ZjbroIi1ZuI9GaD0vp\r\nwgm2UhMOWCDkKeUmZPBaUFNGPHdWJKL18oCmSUmWCcu2JSu/szlQ6+drRLzR\r\n0gHzUbgpM46/gu3CNOjyjq7HC37/Rpjagq8PixADafb3Ele9V+KmBFbNVr5u\r\nySOV+bGJPdN8G8ulGjdWQdMPE43NUparuaz3NXmEvVVrWh9c1Y4pqt0A18vV\r\nzTc8XZ6pKnzpWAIkMVIzCGCSqqMmtWUJ6Kxl++VElX/tjhh7oDiGfiBTDDXu\r\nEU6D0vywUvYwMkN021oKgNawaTv5I57DQDs=\r\n=8UoO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ae8a6a3a3.0","@material/base":"14.0.0-canary.ae8a6a3a3.0","@material/shape":"14.0.0-canary.ae8a6a3a3.0","@material/theme":"14.0.0-canary.ae8a6a3a3.0","@material/animation":"14.0.0-canary.ae8a6a3a3.0","@material/elevation":"14.0.0-canary.ae8a6a3a3.0","@material/feature-targeting":"14.0.0-canary.ae8a6a3a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.ae8a6a3a3.0_1647621569365_0.5794618748644993","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/menu-surface","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.cbd9358a6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8a706268723807306fbb5f60453ccdbca6cc07e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.cbd9358a6.0.tgz","fileCount":37,"integrity":"sha512-iCjXVvy5wCDiwFJk1MSrUZz2oTQlrEpWGbBZuGqGZa46dudUpTH0xagXMPyzkhv0RD0i2kzUZtqQnDUISiJ4BA==","signatures":[{"sig":"MEUCIFjESl7P/e1mgpTMRvnfjKlxN/aMyc2iBW7V89svT1JHAiEAl8PEF76wmPl/7P8YH702UbNEkGG9GMKmUGlNtDvkfqI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQ0fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpO1RAAkwC3t1Pmv1FVAXtYW49DGMLo0XjeR4TgxZ5Zo0lzsOayFzz5\r\nb5wIfrpnXISJFXJN0pwjK7YPWegocP+RZ6BrLIKNfjfcO9Z4FNPnqM21P52V\r\nMBY5bDiDGEFwyMma0et3j/NCgAMdV+SIgwJwnq8ONNPpkPIGRFl8jsnl+yRi\r\ns8m0Yay1BxJLTSGT6d4QCKcYyCzu5dbHV8WUPGAB46iu0eVtGP3NPvYTrkeg\r\nkzOEncG+5JjQZPXA9Wj4XKnhS6hoX+y9yhmcz76GgLEEiLV1NAdhSkRZ8LW1\r\nNzCQg93OYfmZnD4WO+lXYjDNk5FR8UirMb+C/6PG/JmxKhdgQU4pi8FfMmQO\r\nmbv83Ibq+fU5drDYGAIAkNqUo+WIR92ktEoRaPjtmrqpF3CTox1G3kabYLnk\r\nFKux4vz0aPHVajAmE9wBwgg8F3kVmMOkP0UtFcr07Im5sy8bhtVLnjP72VIu\r\nWMKWC4A+aiqOvCAe59fNZQoBuc7qnHf/laUSgOrJov0Xz/W86OIQ++MRe0LU\r\nYVFvceFW1HFlDvSIk76o+9QvV6rX7s7ZieKtx6rSllo0/Gv/jLwuYWw3Fb3f\r\n0ELcc0V30uvOIH2X4l6Lq8CIuHYoDmNIjeP8wTp5KwWDvLkECggz7F8IgQRi\r\naE4O2Ii1mIluFm+e3YIinviLu7Qav4TkoZk=\r\n=wT5Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cbd9358a6.0","@material/base":"14.0.0-canary.cbd9358a6.0","@material/shape":"14.0.0-canary.cbd9358a6.0","@material/theme":"14.0.0-canary.cbd9358a6.0","@material/animation":"14.0.0-canary.cbd9358a6.0","@material/elevation":"14.0.0-canary.cbd9358a6.0","@material/feature-targeting":"14.0.0-canary.cbd9358a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.cbd9358a6.0_1647643935736_0.9292438124300917","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/menu-surface","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.dcfe49c98.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4edbaa50ce6fa8c576e41ca60e6b268044bb7b95","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.dcfe49c98.0.tgz","fileCount":37,"integrity":"sha512-gkZrWt7idnHdYcifzzS5h1Syg630Miejuefe9Gk8PGNCpCqHEiK1oVQnrWZwdQusdP7IpV95kBZ7rL4Gfz4prQ==","signatures":[{"sig":"MEUCIA06oytCuWdEjsi/NUOfOCqrz2emUBZ5fieBpND5/aI4AiEAlGdM3HGjojjzeTYOQW4ilTM6qv/IIdyTuAXcuJBtSv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMeDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqg+w/7BjW2BU/Qjm4kWOauXArpRZVOWes/wIsA9AoOaKfRK03GTpM5\r\ngsWyrbfMRWBtZAkG6RMdgr8HfV2qa7GBe9O5pg6hGjsjbrUDAk3U4gVjnGHI\r\nzA4kCE5PK312GooXbZB8M/HgJs7IVxvvX+HRoMOd/TPA1/A6/LrLkd9gi2el\r\n9t5JXa3c6a8xp/VVtVlkMjuQDubwMZHvtu6KwXBJYyKnHk6BJvqbLvilThoB\r\nq48xA4oSqpK5/s2DsnJJGpYYCMykc/FYQoP/DJXNQTiqaBELdCqt5jQC7rFp\r\nI+aZUMMTFkVu9igbSANrijig5ewL1iFHGKVEm1xJuRSu3q26/Ng7Aq0KOToD\r\nxirUKPokY0yqTbZG2Qey9/Xh2T6femLv9E35uM1klQuHkdtlKO2PApwc7lUt\r\ngP5LwW8Dr6lGDeDRfpSMYcZBRPOh8NAybwFB8SacdulPQUOcMcgisG1f8E5K\r\nxIEcPRPd24m17NW7CLtztsjBCpoRfmjdG1eb4oYMLaRfHIH+of2KNPQRhDUp\r\nLqQUjYoKrQEhZDX8JgbVvaqCWzbdKMb34Z2Yp9SGyVGLRHTm0HUr/8S1d3BR\r\n56dg/IpLQ9Q/Hwp29jSmKmO75OCKcpRV/2BM4lyJZdZxkJfgsXPZCMonGGvR\r\n4m6ff5eGfGE+7rORcsJUA8QNTZCDOdvVmJM=\r\n=6+Uu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.dcfe49c98.0","@material/base":"14.0.0-canary.dcfe49c98.0","@material/shape":"14.0.0-canary.dcfe49c98.0","@material/theme":"14.0.0-canary.dcfe49c98.0","@material/animation":"14.0.0-canary.dcfe49c98.0","@material/elevation":"14.0.0-canary.dcfe49c98.0","@material/feature-targeting":"14.0.0-canary.dcfe49c98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.dcfe49c98.0_1647888259247_0.8938256969790173","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/menu-surface","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.f31a833fa.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45dfb773742a6b2d2a2afa19260d86d76975b869","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.f31a833fa.0.tgz","fileCount":37,"integrity":"sha512-WJi0KS0AjophWExzcKTOUkkvEcVw6gPoSTL4aEKDEQ8mTyPZnsA8cugJ2Lof2+141LJFhUgS3I6m/eyA/JpfAw==","signatures":[{"sig":"MEUCIQDdUtepvYHlxN/wW72C6vL/Wp/dNolxiSJtlO7Gy6A5kwIgFxFtZHah73oJ4UBRI7C7kHt80GNSLwcpVAT55SCfSdk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm72ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2DA/5AIuRuQUINwP5BQ5zhCgbaiRucAwrlKj46uK9wfKeUT8TKmXd\r\nuiEwodv3XhfoBrVb/9rgstDKn43rgd0QdX8N2XeMdc4mCtk0O3z2jRb8N5U2\r\na1sZErGUnVa+zCNrDheWVYMf7x4UOifNv1gnXe6/9xYybDS2kUVgg7kfJ2kO\r\nraY7fNBRUUE2+GlM3pEv4Kq3inX4btZQTXwIUQEiMttTMvPi0o8xZ+jhlPqP\r\nGN0tsLFyAmLytnZAAmB227lCjpFN55z5SWjlFs0UOhd5yrtYzA0Ule2UiMGc\r\nCbxitiiVDMoXjlbVShjG/juT4UP/yAzb7PiYad+AZ3RFV6XuRS9vF2xySb8F\r\nUPKZ4mfmf6Un1WoHP+FLq6oQQnLWdFscfbKJW4Q9LU+igTPqLJxWSXT+5SjP\r\nE8Rqy0YfwKYBk99m06QYNN9GqHYNb58iFnE/O7T4csyI5bKh1QYVK5orX6xS\r\nozF0h32AqxEtKIGZlIbQYAX8Xr+Wgequ8AYA1cOFBfNy8efBJ/OMKhFJwaRA\r\np4elm9kcS2K4Qg4eIeDJvEZhkhO+dpeNhsASaxwAU7g4+XWtOHKVk8j/upzu\r\nXCyH3qpkQC0z2uPh/4GMcAlO6zKEwG3YEtTEs0WbunxBXaNKwSntMGqHcK3O\r\nHog6o2rG7F736lWBYpfsFvPsZ7INeD7HIIg=\r\n=IZzW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.f31a833fa.0","@material/base":"14.0.0-canary.f31a833fa.0","@material/shape":"14.0.0-canary.f31a833fa.0","@material/theme":"14.0.0-canary.f31a833fa.0","@material/animation":"14.0.0-canary.f31a833fa.0","@material/elevation":"14.0.0-canary.f31a833fa.0","@material/feature-targeting":"14.0.0-canary.f31a833fa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.f31a833fa.0_1647996662433_0.6025743098997027","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/menu-surface","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.4b92e210a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e14d41257dec40674199399ed36b64836df9fcff","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.4b92e210a.0.tgz","fileCount":37,"integrity":"sha512-r7/6CedYzE2lGDMPxJ8mxowcZiv/RsONS3oi70p2fPS8TK+hqeK6J7k9lO+S9yumvsAumzQwW9R+lkJCvPh7Jg==","signatures":[{"sig":"MEUCIAJqhiBBk9zb6AuxDvJOwH4jzkvABJPPyAEkiMEqO36GAiEA77dGwVot0+JLRXHhXDuwv9c+HhDPWvPSG5ZmRAsfeM0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNIpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUWg/6A6pV4MsuVGLyyNORI3Xe/KTC4Pin4tmpBfAxe1f2suWkEmEI\r\nQxBO0Xw1Bb75wyfu9H/aSA2IAYKd/ANTwI/s60hltRMLVVLfkffb/qizEwHm\r\nlj2v95JvqN6GDDBflc2/K/oD5pWsTra93d/X+RwRdvRFHMT/oJqCxTo74Wnh\r\nne0NMgnGHiXS88NvpHcdovcvcIi3cd5C8zQy9f/kjSooYSMIrzLz6jCL95NG\r\nqnbzjU6jKNcKBPy8QeCE2Hukd8Bx0oAfDBM7Tlje7NbJYXidg96jq7PrBagC\r\n0uzbueit1dSFdXb5IxEl8NAUnRmknTbuY7bgxnRCUbtJudZsCZeXUwY4oQMZ\r\nmirNokD4GDUjFws7mFTUike3yrwLpxYcZa3rMQh8VMC6O3hNdMRL/qn4zn0c\r\nlGdHId4kKJBSG/dV2XZLZNC+UMia+HF7Qziy6SJTCq6WwGhOMNSSXMvKsmkx\r\n2+eq0QYicfKPWJxtJCDM++7cVNyQ6HpTWvVKrMhR/wKrr+OEXE/onPxtP4gW\r\nawkWMzX//uk3A1OjfjT8qEsUivGNLzFBNuqiVh7ny7cAROC3hOOL1UfXovTH\r\n/HK9I3wq++W9c9i3hpoHX4zkvBZzCbObZKpGlck7g9IhdwzTc2KVwf5tEjGu\r\nQMSNy0d5brDGcITH36rPSjbXVGVnxK4jQo0=\r\n=pkFa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4b92e210a.0","@material/base":"14.0.0-canary.4b92e210a.0","@material/shape":"14.0.0-canary.4b92e210a.0","@material/theme":"14.0.0-canary.4b92e210a.0","@material/animation":"14.0.0-canary.4b92e210a.0","@material/elevation":"14.0.0-canary.4b92e210a.0","@material/feature-targeting":"14.0.0-canary.4b92e210a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.4b92e210a.0_1648153129116_0.7246052590012537","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/menu-surface","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.a657abb61.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6bcd2dba9e604425d4539fae5d740c02952d97a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.a657abb61.0.tgz","fileCount":37,"integrity":"sha512-4k2FHyCuByjL0cyYicthwif0hxAWG5kMx2q2I+ze888RpLiJ3JSYRC21dcIJq2l1sIEQ3gnzBXy7SMSsrLwJQA==","signatures":[{"sig":"MEUCIBLVrRXZbBJmKMmLNtXQR0x1sHRLmhraYXA4pkEBAir3AiEAo1q1XwHm1IDCMxdvRYwhXPevNiZ9j+PAGseyrjXFh9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNcrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1jQ//XmRZvM4bq9ibv9BjAqenRmglU+D/xLaxV8pD2/ZmnJrkr5EP\r\npuJ1VGP4uJMY/LPc0qnDxNkHB5qGgl7PC+bNB1yhz2k3Lg9rqdztOF/kcOl7\r\nGfFdani5JCZs1ApSvl2k3XDUzYuTNbrTLIC5j09cuWTDzt5O/vZAl8T0u5ef\r\ne+gaYo/NCUGFpXvralu+BCZ1bOqvf+U7d+dE/PEBGOxcRQuzTCX4042T3glX\r\ng2PRnkZKQUh9RTd14q67mX7tDG5ytZMfyEXt3kaPrSLTFM50QU2/U76mkR3J\r\n+dKCwMZSciBscMzmVWB4QGz9umIY3NAwR8boMyLIdgp9G9Ilk4bKVIfzARwi\r\nBgS5SMV/BUwWvqDOi0lA+ACtoIPKxFIPO3Y6Kzff9b6VD1dXVcKiDPKH9U4k\r\n+jxECEbwg8M4Ck6tEv/eflNXOstulFKcGEsIsv3s51w88VxcYmJArfSmeTJG\r\ntUZs9gyuIJW/ywUDxEfUoWzrF2wghfRfzr2YTCIGFFd+c8350C90axS4NVUQ\r\nYzVqwTZmXwhBDpDfqgTL3q8jy1NPlInQ9F5Bn/TAVMs0VRICSad0zzajCemP\r\nT7gStXYEq5fu1y+/XqryVKxY9btWHZtssJ4XiJvnN9r0q5PoHonnUN42gCNe\r\n+JxLEondvKhhox2VilxR0GTL04lHSp3LoqI=\r\n=Ag5H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.a657abb61.0","@material/base":"14.0.0-canary.a657abb61.0","@material/shape":"14.0.0-canary.a657abb61.0","@material/theme":"14.0.0-canary.a657abb61.0","@material/animation":"14.0.0-canary.a657abb61.0","@material/elevation":"14.0.0-canary.a657abb61.0","@material/feature-targeting":"14.0.0-canary.a657abb61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.a657abb61.0_1648154411471_0.26455575191216263","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/menu-surface","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.443f63f50.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b49a5aea6e5a2ff70981dfa4326f7d2243c83c7f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.443f63f50.0.tgz","fileCount":37,"integrity":"sha512-6BWN7T0AsKkh+fFPreuRceW+/b0In5+2NxHoXMRe07ZkBRE4b/s11RSvsXgfX1D9TQiI2B8ptC/72zA8qmLQqg==","signatures":[{"sig":"MEUCIQCIZ0/E2UNT4ICXB8rcoKB7xFi851MvVDvEZ3J4dhe0AwIgBm7QKGuyIHjouCx2RAsGn4G/ggUl3iErQcazxoesBhk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkqTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrquQ/+PVshQ7CDwOjDsxsSNj14vDDuZDGXMAJNxrsy8+HVPNa2PU7R\r\n+SkM5A6U+u5PNHT3NQHqGbu3HLQlrw6+dM4uTzODTiNj4So2kamxTakwgJTT\r\n57r1+ccZ+uXs0gvupJ2Bad5jMt2Nspud2Iuy1FvRFayfaaFWcxCcIWRr0pEq\r\nGVuaL/A/fLM4cnldTOt8QsMWNOO4aY/CIVpMD0hUK0bnYE2F9Q+qm1WZeWFi\r\nP2F2MOxnH+/YT+b0PhhEjkm0YoIcn67OsTwLSUaKNhQVPlHR5yTdjF4YR0TG\r\nMUoS7pdGMtYd8QdhY/pQYOrUAWXG65Y/7lWgVeSjqg1U7Wneb95CZexnR1e7\r\nsmtwvbVz9l7MpTeufdg8d3HVKjiBjDA+navDCGA3h3vgbwxEGeT2OU7lVyRl\r\ntHvBIz95aLDj5kZf8zZgQqJls8kW2PrgJrMG8z0YQmysAVfNJ8Cwc2xo9nyd\r\nFYGdqUrsiqgBDoVvlcJmhI1OAjbhjpPDFyF38zEyAZ8bqJ3hdigOSLOh+82I\r\njtFI0d0YsH7WT4qorkavBBDr8UDk87kAdMdPt3dXSD/0s6ZHy4w2KnT/OJm/\r\nsxxMf3wT72mBr5sJN2PDqSL57XEVz9F7BcHPlF5j5HwPO7BgJuijk6BjLZ6m\r\nl0xlcLcY86FzLB5o3sP7gn2J1bg9xKd8NlA=\r\n=lf4o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.443f63f50.0","@material/base":"14.0.0-canary.443f63f50.0","@material/shape":"14.0.0-canary.443f63f50.0","@material/theme":"14.0.0-canary.443f63f50.0","@material/animation":"14.0.0-canary.443f63f50.0","@material/elevation":"14.0.0-canary.443f63f50.0","@material/feature-targeting":"14.0.0-canary.443f63f50.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.443f63f50.0_1648249491221_0.29164182964975915","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/menu-surface","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.eb382f318.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d79f959dfe3eec79ad961f06658a5d593bb0c40f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.eb382f318.0.tgz","fileCount":37,"integrity":"sha512-AonxBHxK+GYfC+iYuwp4q9HykUQmD2/9YG658/gQ3uqqBrek78e+QxZrpURloKAgBacwpbIm1eOY3PiG6lPcZQ==","signatures":[{"sig":"MEUCIQCU5FEu/78ICVh3TbIonzqlvY/LWGjFjWCCY00xMVkkiAIgfa2EO72+uYbdUds0iKdAx+vJUhYre4W0wFVfQYZ8tYo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0NPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/Zw/+JDzWTxV+pjQiw1a348W8xvGP9b1mKUtXL4W8il5bY5G91/So\r\n20Fi9Ulgq8TG6J/5wEkJrgNjGxvGUnFpVTNn9jljhRWncsZSJFsYsQQdmvEX\r\nAw+KI0DmR7HhlwUap0hCr+bRX6ouqDPkLN3a4ibcgPoYDOR0/5XtBq+blsRX\r\nJFfC+Z5YCh5HGw3QLlEwPUhefPRgVej4a5XaUN6gGXmu/kjZLIAbzx4ajCc1\r\nOiur3/79vYd8zxVfvJxX463O2onOFPHiri7lrq8RrKqQruryY3583mfRvw8R\r\nEVz3QqthZIvb6HatZWKLV9lDlviY9u6erQLuFAABfiXh6VY8jyZSglmSeMwS\r\nSbDSyna1DzRiXJ4u4QZMcj7bBcJeh7zqDgS/PJ2RPL45RapaxJ9/aQQWPi+w\r\nZ0waXWty+BuVc/QSXTVqeWAV7OfOGRl8eLFU1UT3ZSuQ+vpHVZFf4Dxu542k\r\n5O0njU0//Lo0TgYBuCDBBwuOH5kr8PlsAVDjBgOLBGCke+rzJ7/QfNqQHQW8\r\ndhxFfRHYb+wtJEq/9+UMHGJrl/4Ml9IAKSVw9dcZZMQggqcA1brQYUcnoPbQ\r\nkfyzoE5YKKCU70lVKN7HW6IG9/5ZVnzi47kjj4W9oh66JfSTDvcbLqEkl/1n\r\nHWlM5hGo0hN0zKG8usuShpbtP4yYF4yBcU8=\r\n=Y1X8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.eb382f318.0","@material/base":"14.0.0-canary.eb382f318.0","@material/shape":"14.0.0-canary.eb382f318.0","@material/theme":"14.0.0-canary.eb382f318.0","@material/animation":"14.0.0-canary.eb382f318.0","@material/elevation":"14.0.0-canary.eb382f318.0","@material/feature-targeting":"14.0.0-canary.eb382f318.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.eb382f318.0_1648575310897_0.5433226738031891","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/menu-surface","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.344d52823.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"035dad0430a601cfe682635fc9c09d35411930e0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.344d52823.0.tgz","fileCount":37,"integrity":"sha512-2Cyt53oVngUSLy2mN2W8+vP/BR8DKeH/XCyv6dF5/smu2Rj9wMNvwpb6ML8ues9Krm3xtLPxPD/O+vKHthElxw==","signatures":[{"sig":"MEYCIQD0vvhBfDLPKuOAhQ9YFaqpaaULukwI/xg6EV34qErz1gIhAKOaa6Xa/jH17qqbref3mJk5iccRn1tFrritcCBsEN4Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1NTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoERA/+OjNAsaa5gw9Csrllyr1pbq2z+5hYi3A+rb7vK+jFsxG5W/Ij\r\nZXmGKOUnMzoPBSNL3dOrwyHYLbDsS4E/5HguLw+w1PQchhrSX0cE7basvZwc\r\ntvkB9p3Zr/WITBq1AE21Qz9gj9Dk2onZITumDxpf7WYWzQ1XCQxmgJCkfXqG\r\nbWoETWCThY8rHIeZRmzJpI9yS+p+HlTWUo2sfIgrzbt0u4pMt6PxqHDeUQs0\r\nQjB15lhSdugZtC2dcIFiyDxjowO0VO2ai0qmkuOwWOxIZEmtpRYxWjoDi4Rf\r\naEzUqqXmh128DUIscBVC7LCoVi52yiS6UeEMRRHzKgxdu87beN8PCuCIkqpO\r\nArQV6bkWOmXhBmA8lGLvRgGS3b82XbRQh7jx99K4avIacFyLjZaOBMe8UunF\r\nZ4IKTOHCD0VJ9C27dAhEHEJBBvCT/N8hP6zmUEe1TPqHG8HwnHm3zcTABSus\r\nI+UtQ+lO9HmBzLwbZY+uFCLQWrdQL7ZiNnZXO9zjQzXWRJBbquOb4n3YD1rL\r\n0GjvxfMwHIzLY7PkVJ9tnPXS83BxacU1Acq0jlcKtY3CY8FPIL/hdofufU1y\r\nzoin1GTAGduMGCazHMSalCptZf6EiXX1Aj4FOnKAGWXAcOLUDFkjE8pfvTA6\r\nb+jNapBd2NWLS3Z5HDKeE8XAyFhoDPHk8j0=\r\n=8Idv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.344d52823.0","@material/base":"14.0.0-canary.344d52823.0","@material/shape":"14.0.0-canary.344d52823.0","@material/theme":"14.0.0-canary.344d52823.0","@material/animation":"14.0.0-canary.344d52823.0","@material/elevation":"14.0.0-canary.344d52823.0","@material/feature-targeting":"14.0.0-canary.344d52823.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.344d52823.0_1648579411383_0.7082265614498706","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/menu-surface","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.4e372fb49.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f07f248f5111aef1c7c9b37d82b00753bb2d299","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.4e372fb49.0.tgz","fileCount":37,"integrity":"sha512-HctAHCngv/TowWZpQOMVUEiZH1zE2oP59Nko9xBmUcpGic3TTtCQXuCdrWX3XbLmHj+/r6toQEfcL9SGmYXYeg==","signatures":[{"sig":"MEYCIQD5OfSUJf7uYv0peeubI8oBJJMzxM0tKHxUAz0G03cMZAIhAMT6SMmHuesrOs7WXNzXMMWXRl5JP9N3tuwBHtNvVtxP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0qIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6Hw/+Kb4ugUqemrnVlRPP7q9NQ0BpuUsLFDQ2gQZkISebAAFdh4uf\r\nFCxBHa3bNMguNKf3+lD/pt7ZKri8ipIwH98VfjP3M1OsiI1bJ+bv38KCzzQi\r\nyev4B8Ux5Zt3cpXzXtwWL9ekXSnWOB0f2RDu9WjkE35oELtj7Jnq/SW34NJD\r\nzbjKaMQ3dRHscK8OqhkjK+FQyMJFY4PdM2yym5YRzCLXcbeqZEVPtxAELEUr\r\nx6BCWJfNzPbW+vUmhweI/WKUgpSA5vqvR+ShN94Hhz+81G7/RJ7hBPFHDi2A\r\nBMzbuO53ss/oVMmoVdooGoh5LV6HtdtBz8WG+G52Q1w/h10I98CZ8P8zLFSP\r\nuPfkdKCDHWIZdYBrLBd6N70CQdjNSpF3HliHyYni7okj008FuO+0vV5JkHdX\r\n7Vu/aiNeE4aMfRMJcpts6VD3mcQ4u20N/5suqqTwNGWxrjljXGI6P4dmRxDc\r\njHj/1I1TDaWKSzW47veV3SGiNePYHbdXnOIvjPcpSPCGfSdg/tNPyg+LrbOD\r\ncFnXlzA9LbrgnJcX6jPCOhrBe7zWUkSlRtvSRKyFxpPX9FOs71YfxKE5mgvL\r\nC05mXZiL1o0/s6SMKJNrO1d3+FE7GR5jMorTHjEMJTj/ik47So542eoFqcxs\r\nJxt+zlWJeQwIPK0xvIMtAiYGEs27AmOHZ4c=\r\n=t1Cv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4e372fb49.0","@material/base":"14.0.0-canary.4e372fb49.0","@material/shape":"14.0.0-canary.4e372fb49.0","@material/theme":"14.0.0-canary.4e372fb49.0","@material/animation":"14.0.0-canary.4e372fb49.0","@material/elevation":"14.0.0-canary.4e372fb49.0","@material/feature-targeting":"14.0.0-canary.4e372fb49.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.4e372fb49.0_1649363591925_0.7568606187096394","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/menu-surface","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.3e30054fb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e00f6474a06d28c76be36a63982e990f31c8688","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.3e30054fb.0.tgz","fileCount":37,"integrity":"sha512-dVkAn88IH95mZH3i/7jmuaIBXNeBL1GOCqkfRS1MpMFkUlpANOfYMk+SrSXmVtzVsY+90riD8wn1L+wmKBZSmA==","signatures":[{"sig":"MEUCIG/dIZCiYxG8k9EOtUdKEo1F+dcn10y+Q+z4kOQsmf02AiEAjMleQuetYJS9URXdVVSswtb2jjZIbkDgqJQye8zf2Vk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0tGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqcjw//WpllHtDBCRo1ZDe8Z3VdaDpc/P1fWkkiSJORir0dZ0H8Wj+3\r\nUO/0BAVLXqj9J28uiCXDjqORhzHvEWbudKLMFcSdF683bKGK4B0oKyG4MSyP\r\nx9Mw3kfd8kKd7/9W9olK4kdHfViT5nZ5S8nzQ4e3yJhdRmt8JgGMHt5kl5dU\r\nl2SFjNws0RMNNFy1mwD5SIHUl0ryJwwvPfh2xQJIa+3jUiBPilbkk6P2NRlG\r\nywv7V5CozeWLU7fQDXKBLo08TWkLOYy5/xfWG2vWwA8kAwcMhM+ZoG46cc3a\r\nFTvP7TEDLASj3juVrq87qICSoCOhCnS14Fo6fEG5JIv2yf7upW59/+Kr/yi9\r\nI2lm6pXX4m0OhRt/fkXBwXa00p8NJUiJQXXgl0RQA0kU7pX/RWmciBj440Wy\r\nDCnm4hWZHaEyqUuk6SuUynJ/k2+SPMy0HlAxMnCdjGhVAbWJA2QsX5GDkint\r\nmmaQiL+p+KtFqKPXaX4Kp80n8xNK2dGQ806fhFEoxkTeFz3mpZyZ0uhlN5g8\r\nebdCloJXXN4wDD6BU5ISh/UUbOo9++Wnl4hzgtw985C0OBJxKzzUTGijqACO\r\nQz1V26zMCiz79HiJIqUm9PNPk9cXs9zObns09RqKe1KI49UVH1EhyiOX1DNL\r\np/2gA36Ep6uu7/S/LjbYDS0kt7BOh8lfnWk=\r\n=kxfa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3e30054fb.0","@material/base":"14.0.0-canary.3e30054fb.0","@material/shape":"14.0.0-canary.3e30054fb.0","@material/theme":"14.0.0-canary.3e30054fb.0","@material/animation":"14.0.0-canary.3e30054fb.0","@material/elevation":"14.0.0-canary.3e30054fb.0","@material/feature-targeting":"14.0.0-canary.3e30054fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.3e30054fb.0_1649888070727_0.6681540026351729","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/menu-surface","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.8c4da223a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44a26a93f900ef12f4f09101239e54594e87638f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.8c4da223a.0.tgz","fileCount":37,"integrity":"sha512-Ii8+LpbIvypv7/wrNpq+jrsOBSMPBNOg+6WJcNsqmCkYvOI48x3RLkkSFDzLKBfCDDl3o3hdxcailAt/y0+E/A==","signatures":[{"sig":"MEUCIQDWKWSzrl3z3bhKi76zOGsJURueY5rdFl5uvfI0O1TtdwIgGowuOR6Yh47JVibSPhzEv7f8sN1LGfkPpVMxOzRBY08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtQsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppnQ//ePuBmF7eRxSJNF6aeg4nnLR39TcOWitIvyyp/UAYnbFQKBaS\r\nmg8GuTgq9rvMFhG/2PBaZ1smNUjX5tpkeu6GHrBQwfH8qDT4Yv1D+EWqhmUB\r\nheEv9vtlM0h0L+wqV9uqcuvINEv3gjfZrpoFV5cGnFQPnXYvOfJVKv0nJEbb\r\nKn3G8CdVwhYRRj/8aJ1Qf9bO5QR2IS+ZxScsgWsG0+1epOe1ediCgYcIA1Sq\r\n+B8eawjEBG2df0uKVxZniIXOruE5P6Jg7VwK7q0WJvdBYaMERU6r00q9+qdM\r\nfBOSD627Wfo8G0ynsnO/J1/K7Qxh5XRoc880e7v8QRArK+TpEZB3nQlgV8nj\r\nMZAka1yATs6T+4dXC+e8DUFg8R8Fu/sFhU4Ak8Jp1UMErke8lOcrbSS0Kllt\r\nx0lC+7YfeUmaLuiNiwQv9WDqhZeuKMSZpggkruyytHtsiGWIe9w+AwhB7TQt\r\nslYA5F6+iacl9Y1G53RZIk2L1hi4ohA21xxiYQ8RbGWOQuRJ3AsudbUOeIlp\r\nHMFubNibNzVyqObU0NIzqZx4k8YxVkQt9gkNujq1KgNMXnlesCzgjZdFiI9Q\r\n+KVq14bCMxB3sQSC3zSKw5pr9y0ALsaqlNrjQYWK9kJMHezadJmbmYh0RxL3\r\ny7fGQngCbNVdTHoZyT90Yynxm7TzUdcl3y0=\r\n=SoMX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.8c4da223a.0","@material/base":"14.0.0-canary.8c4da223a.0","@material/shape":"14.0.0-canary.8c4da223a.0","@material/theme":"14.0.0-canary.8c4da223a.0","@material/animation":"14.0.0-canary.8c4da223a.0","@material/elevation":"14.0.0-canary.8c4da223a.0","@material/feature-targeting":"14.0.0-canary.8c4da223a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.8c4da223a.0_1650381867826_0.02446734343075052","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/menu-surface","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.7de8965cc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee53d08ebde658d3cd634b0ab401f12420b25462","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.7de8965cc.0.tgz","fileCount":37,"integrity":"sha512-L0KrPQeVVYwNEXzX9W8YiCnFl+/vJ42h414up/jFKEIm3uhB17Y1kIdxgeCeN7C/fGVpfzNy4XyE6nQtX7Fj6Q==","signatures":[{"sig":"MEUCIQCCzqLna3fmG2XsIHyfJAlr3TbsPBTUWEjtceQhPiyijwIgNKbeiY9xGUO8mkSz7HpgCclbKtH2loeCQ8L4XJzb5GY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxpLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPSg/8CJSQoGRn5fObkpNV/buR7eKhYrJq8pKAyVnCOoybRrKQxCSI\r\ntAdHATl8kXYEAxaINR+KLbROis5hlkztPzoZo5xLlYs1JcwyPLGM5UpolYvo\r\nMTWx2sHiilxB9LmesFglwiSUU/oonjiQ9a69WN94x0Qwx5wE2w/mrKM72ZsJ\r\nHxFGoHBuoLWdzzLS1/J/irDUf7uikknwbPvMIWzDXw+SzHg5fsm4y6XUlwEb\r\nWE7IVGI9Eo+VudTMBXpudfk1IatZ/Esj+aontAmqLvYDsKL9qfzNGfrlj/Dh\r\nKgr1slF0SAC0vrGUTfe+vvXltljyNAt4bHYMDT2Y7sq0ALqKznyPSpzk4FDu\r\nAtoJakFJ5Dta8M2E1CO6xqNJ/LJncq0t5NIZimdbdbbzQko4kP9ZE6xD+x9h\r\noBo7rqoEswX3M69W2OQznksrOPiPdRv9EojVw/RNUGhvuRSnq0Djijii2kgz\r\nZUkyf9srBX76Dx4d+tmDfBfAPgrVBy7TlG6xm6Ka3P9Xe8gioyBFkZ3XJdf7\r\nZsvC2L/y1GhjX6takteeaXGFeKxHj5D2fLVUBr5eoRc1nDbr3Li3jCDBhHxR\r\nkwEPAe9WQcbbUenuTmTFyznj8MMf0VxR115GORvhX5L55Y8MUutXi483Nooy\r\nV+vgqsJloEoEEoH6bNpv3ZhusF/LpCGsFWI=\r\n=dgWH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.7de8965cc.0","@material/base":"14.0.0-canary.7de8965cc.0","@material/shape":"14.0.0-canary.7de8965cc.0","@material/theme":"14.0.0-canary.7de8965cc.0","@material/animation":"14.0.0-canary.7de8965cc.0","@material/elevation":"14.0.0-canary.7de8965cc.0","@material/feature-targeting":"14.0.0-canary.7de8965cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.7de8965cc.0_1650399819216_0.7759630722560442","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/menu-surface","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.641ed0851.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c87c02325b34d59faee39a5025ae35d5674cc51e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.641ed0851.0.tgz","fileCount":37,"integrity":"sha512-6tN+nQ/gjAXd15vmdKn+UDFVwyNqgbghpeEJ7Ch8BvmDyMBAs9tVAZiygxoUMxwABbyIRqxvm+IxzW1sRMYPKg==","signatures":[{"sig":"MEUCIGC/QRF9y7O7KOA7oRCHmKM0Rh21ce5YNkEw38warWfdAiEArY9myRIqcG5OnakViVE7/3gxs0bsxlkDDgprNirfWaM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC9nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrh5w//dN8z931sHV00J9AodpLsX+WA3Z+kJz5CXv+qZbqcU7D/7lCa\r\nlArdH2YB2cmOM5qI/2qW3UbiXLlH7HbdRudqbDaMBFIRcr94B0MoVDjv6taq\r\n/7NNPTpVKmQbT3ePTkFTbWfFt8JNrfcxXXqgmeDv93I1/nCuAHbUOkv0Hca2\r\nkXYSH0O+BlN0PenXvueCdWXriR0Y5lIdsl+wTKi4FsoqIQFbmnqZgaumJolN\r\ns7oBWWUeTOSlM4PxsDoCyV4uqH/HQjwvg97c8c2/8V/oQQjUx+kGbiyYX5R5\r\n+shehUII8WNsF/oo6PwmtV7cF26KlJ2qc2dVeZ8y8Kof/sva9nIW+wvtr0AV\r\nMBtuHdv87K0XnRjzuEpHXvtfc6kZWxodqWzsTBK8NiUJLxPSSS6A7hYr7xtU\r\nwZEG7V4onj7EDVCiUktJ0EA79de5xHKvc0z2hCrhGyl5d9NLngsZgeNO0grI\r\nKe64Ob3NB62XZIRfWODfaNS+JdbjOJq/EGnHOWkeqfFRG5qn1G0rBxgKneSq\r\nI4Cl5asZPwh3edhhi/s/cOEsqj5vt1gI+dPVF6NnTrTcRHnT8TheSEUUL8GX\r\nW3LLQHDZMWyX/sSHBXR0ExOZ64lABw8PwOLX4kQ7GexALsMOI6RHy9gfDBSQ\r\nfIvhkKsTkXH3GMxvHcnULFVH08NMbqZ/Kh4=\r\n=wO1f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.641ed0851.0","@material/base":"14.0.0-canary.641ed0851.0","@material/shape":"14.0.0-canary.641ed0851.0","@material/theme":"14.0.0-canary.641ed0851.0","@material/animation":"14.0.0-canary.641ed0851.0","@material/elevation":"14.0.0-canary.641ed0851.0","@material/feature-targeting":"14.0.0-canary.641ed0851.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.641ed0851.0_1650470759182_0.5473610763991381","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/menu-surface","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.e88f83024.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a98bfeb2108681de341f8d70ece8ef6a6f9592b0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.e88f83024.0.tgz","fileCount":37,"integrity":"sha512-+L2TiGOSJDenyM9yQWIFen1zskH1c7cronPNWFszbW8q6SU+uynRHqiikIVFuKKnByZDFhvjfpkhbBVysuzIhg==","signatures":[{"sig":"MEUCIA45mYPDTuMjbLKLMsJtz7uL1kQfay5PtE95jB8GvdEtAiEA0Csg21TBgcKgK4APVxsXEqojM6FIJh9w2ydXhsU+DNM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEdNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHcA/9EWF7Fkzt7EQXNnGWF2GnK4Y9BrUJYGiVWn8EE3iWr1biL11c\r\nHrTBX98hyq8oB7A9HWaM42C7vftPNV9T9A8ntiY4q4As5+ikOXhygk/+PjMA\r\nhGAJAbbGQiAhwptICQ4NaSQWoSMCEhSA3gUfXa+NRbPaz0EHXQNpFk4pJu2Y\r\n0AwwlbLP2s0bQjQt9oYfZLCr0tC1ckQFonAtrCJeH0wCkvDWc51K+0eaLsYW\r\nPNsiAPyCnNYCbgayDeoNz+TRfDjBSwPhPHj9OVICexPwcaCkfcDqR4lCdCiF\r\nVicd2ZQa+T3TzIoTnNPL17fdlagyQcJRle34zw1CwvyUgHQ+eV/lRyOrZSjs\r\nhVc/ngf2ozWeH0PzvkQvbEVnF2n2vLwW5MAzBmntD5n5leqsEURs/ROAM2IW\r\nTuSJnwVShNe3NY3Z/Osju54rz8RKL/Zom1GJq//Rfc62+oiD0WksVZNmkmfI\r\nd073YN3SwY0GasHxA5EqH8YAMIzn2D/7RYX8QlDg+ayIlsaJ7xUtpL7vU1Mb\r\nTbCyivL7ZRjYqBr/WmeLNEar0YPy/J4bJgOrjjl4Vo8vONB+gMNrRkjHdE3W\r\nCJ+j/b7RHE8QfLuPQrrxiQ6YX6gwJ/CGCjWFfSwebog8NjznpawQQhw3nAQU\r\no25yUnY73oeylbB92GhCYyIcAreYxrRRWU8=\r\n=IGcd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e88f83024.0","@material/base":"14.0.0-canary.e88f83024.0","@material/shape":"14.0.0-canary.e88f83024.0","@material/theme":"14.0.0-canary.e88f83024.0","@material/animation":"14.0.0-canary.e88f83024.0","@material/elevation":"14.0.0-canary.e88f83024.0","@material/feature-targeting":"14.0.0-canary.e88f83024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.e88f83024.0_1650476877768_0.2540513928509285","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/menu-surface","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.7321d6254.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00ba9bfde65d43859bb3f7b0688ae7855b5164ce","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.7321d6254.0.tgz","fileCount":37,"integrity":"sha512-0H7dEcHDaB3gIoGiBiXEsGj8rVMgREiwmnisZxjOg7kppgM9H22xWRN1yc7N6w0qLLJmEfbOGncxaa1ltA2XDA==","signatures":[{"sig":"MEUCIQCS2JOCqpcbkv4VYOyq9ONSbBTWSv48a/lGe/mO2czzIQIgdbxhuy5LW+Kyv5NYyDmnqULs+dLvaVRFG09gXJHdrO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGjzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQtQ//cFzdmzWabnXJWyNY8U3ocuVgLtlKiyRoaM35TLQl7D2LuknA\r\nc5TomuJPzHf/DtD1eEX53yJq/HzvG9dsycpie0pLXChuSLkyWcix1UTIakYp\r\nxt8/iT/j5z4ak0laXkUaY0i1LIOoZ8pRz+9ZonnjkISurj8jge4fkGFm4kXF\r\n+yJwWsdB9Dvuqg8e3BOt2Au+7dimJQUiaLb3E9WRfiAe+GwB2wtHcLDZcuje\r\njwiYoM8a3FtPzRBDHwTQeZ4tpWRGiUEc2fD9b35/ZVsZYH5ID8O3Hc7+TG59\r\nk1mM8Hw7kUJKDyWz1nftCYZDnVYr46d4uxhjPDyczOcAJcmWye7GNl4uQeOo\r\nuDmhsvlB94939YOy8QSlicmItaHNqGTpEtvOHz3WO/6rRgpW31zLEawykwgg\r\nkKZWafNqRfLTZ1qnUunyhCa4wWxpEkwE1Mo1NYdip+pEVTYmMgeV1xpdPimf\r\n0k8Oc6yHXOsIiymUd4fdXCf6JTeTR3yknGBQ1J6e+mpoEW5DzykLuf3frjnQ\r\nUAg9GOAoMIhBX2dE4BX7WG2oiYfP+1YGcI/rGDkJaIrLvSUNgNJXILMR/tvu\r\nLDWQaaW4pKmN2E0E85kLDfsYCQNk48LRmQmh0Ryp/5RFSAFYjWW8O8QbW3Mh\r\n5pygQfIsqhiZnB8XbeOBmip/jF56c+FCiXs=\r\n=CaCB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.7321d6254.0","@material/base":"14.0.0-canary.7321d6254.0","@material/shape":"14.0.0-canary.7321d6254.0","@material/theme":"14.0.0-canary.7321d6254.0","@material/animation":"14.0.0-canary.7321d6254.0","@material/elevation":"14.0.0-canary.7321d6254.0","@material/feature-targeting":"14.0.0-canary.7321d6254.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.7321d6254.0_1650485491313_0.8001246659673522","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/menu-surface","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.3ab956515.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a88b02a2fc301f5bcd7526b2631a329e507f5e3e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.3ab956515.0.tgz","fileCount":37,"integrity":"sha512-/X52Ak5Sz2tpt3RPxySuF4VDC+qEZzI+9lYQHggg2hBe0K9GFbpDUt6L2B6NEUUs0VYwhVGJQYy6H65U+fHdsw==","signatures":[{"sig":"MEYCIQDzwDdyVMYKgHOjXaJV6cIKZh7pgEzGBV2MqgKLyjOPRQIhAIJPlsrt6jc1cFDA+oIJGDBGtXkGiVkY3xlFQThA9NHT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrfxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmps5w/8DIzV7VUzNk1xkBFcqDH+HlW9o9nEA8A4kN0Gf+/Rr6zXjNgI\r\nbi3UR6HHw1zm8T4CV3BZLSE8VrX7Hxl7JfhUqQXBBzoVnFhJSUcwmU4hvaH1\r\nXXLKB/cxd4q9Cv23IYlQBapZblRteXI6sGLFbEibzZ2gu56oKtpnPS6t+uRU\r\nCsEcX6Sx4fjoaqS+cqgz+YybrkaE9BBAqmLUtWGVpSllEIZ8B5b8u89bAJyP\r\n1BZ7VHhfVS6cdxMI9Tgy9jmR+lbU1nZq403tmKFBgVpje56I/QKuE02FeDVG\r\nZx4TA57rvGgGoA0pD+9sgsR8ZsZfIUQuH8ZRq9qLDVFbXiAW+j7EFXm2Nhbz\r\nLNAp2lFSD5tKMG6eiR8VsloYjX1zJZsCBZVY/g1X4KH/a5gEG1zMDlRsqwSM\r\nM2MzFHSPZeccJUnX3N/A+W5D72bhOydhFkkrsPhHSWRG5LePspCTdOxYm0BX\r\nKZBfMPefFrSL7rcd2rBwWSDigsNAkx3uuBm8Z2rIsBGqV6QVhHwM+QYQAM2G\r\ndoAoko0y7qU3uOgyYqJB526ip3ivHnn7InjmZazZMZOWkjMiOxnSt3S2MCI/\r\nZj555/vehPfHe7P1T8bYG/lJdptdzDlHsRzg3peE43l9fWuHNuj3TNLT10AH\r\nBvkqc80W4DGuylByAkH5yLvohOnzDmuL4Fo=\r\n=inCs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3ab956515.0","@material/base":"14.0.0-canary.3ab956515.0","@material/shape":"14.0.0-canary.3ab956515.0","@material/theme":"14.0.0-canary.3ab956515.0","@material/animation":"14.0.0-canary.3ab956515.0","@material/elevation":"14.0.0-canary.3ab956515.0","@material/feature-targeting":"14.0.0-canary.3ab956515.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.3ab956515.0_1650898929190_0.37729656523758814","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/menu-surface","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0-canary.53b3cad2f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a7f10135f11938d7cffda553289e4803cfc030d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0-canary.53b3cad2f.0.tgz","fileCount":37,"integrity":"sha512-IQWb/n15FpLnn+kHp0EqzLE+UoWSPumq3eze2QifiowvGb37bNFR9oSe7CaOzPMrHdkrZ5SBWnDU41wPZN5kOg==","signatures":[{"sig":"MEUCIHhlvnkPsHSUD+0eYBiu0iGeG29E2WMX80qf3YQZY4LxAiEAhh5GidX5V9mkGuhUbfKUElb2kpeVswtxj5e/vOCoEdE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTryACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5/Q/9H1vvDE/0GMq1IvNSRTXhzjkUIqt90tQ/v5WvdLGpJ/TNMdL9\r\nxwZSQXw9+WDNk5bR7BKXjzFAd/7PgkZgjA8Nxrm5/wHCtI5V1sZl6AuUcS35\r\nBeJ1c4yfTmbBm641A7Ov0knFuGNIOKbRYGIaJ2FOYdqe6jktFzCDWd6J8JGk\r\nSnzN/bJGIszqz93Qk5fFB9UJF/mV9gn+p34e23mU4LPEFwuiGgGEjDEBcy6m\r\nhHYv/3KbxuMTz/YZf1BvzkU1jrv2dDTxdyokb7nYhXnH2NxHOT5cXuAOz6of\r\nGCngapKZhPWppnDgjtX251d4MeIHPNR/chP9/a4hn/cNo8RP19AN2X+2clcO\r\nZJKNu3LcliT3a2g2hcY3Q7YtTPPK5ZTTz1liop3b5mhhGAk12+h04nOMBPF/\r\nNco5aMWdaT7Xiv2c/krwP5gzI0uiwON/emOMCMCGzJ0gl+MBcMBYBIthpYmB\r\nvWRMdQ+vBEVW0RHcuFtL8hYnjjyChRArQADnaphMDvBPB3zriwYiD5h2ATfx\r\nmQaksCZcZwIEwFh2xPdWC379/gxj/HLt6kspcpQ4ErEz31+HxnzzG9vJxB6y\r\nrI91JMPli9brUxAINiU8lffl2H5dgecjSiy6N0kkOB1qypQNC9U/LDP6C2N1\r\nyQy6yF/ZRLtuFVSrC5iLC09aPodbx8AYs/c=\r\n=GaNM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.53b3cad2f.0","@material/base":"14.0.0-canary.53b3cad2f.0","@material/shape":"14.0.0-canary.53b3cad2f.0","@material/theme":"14.0.0-canary.53b3cad2f.0","@material/animation":"14.0.0-canary.53b3cad2f.0","@material/elevation":"14.0.0-canary.53b3cad2f.0","@material/feature-targeting":"14.0.0-canary.53b3cad2f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0-canary.53b3cad2f.0_1651063538601_0.8578738334418647","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/menu-surface","version":"14.0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@14.0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cd264f34af42ec2450e7baf08ec51ec6c8c4f7d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-14.0.0.tgz","fileCount":36,"integrity":"sha512-wRz3UCrhJ4kRrijJEbvIPRa0mqA5qkQmKXjBH4Xu1ApedZruP+OM3Qb2Bj4XugCA3eCXpiohg+gdyTAX3dVQyw==","signatures":[{"sig":"MEUCIEej95qoTqwtHugw6pIAFjOFb2w1fauWZjx0SoLi8/ITAiEA8rL7usjLRLIAwPV3IUxWrcvYrS2t1P0eac0MxVCgtak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiascsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5xw//buM5MBvCw46JZg+YOjwMxxqUjFska2Oknbowj/+iy5nHtFdR\r\nhJt0vOnCbsmd0BWEcKaAvvrO2GFdhZLDCAwqytDlh3B8wVckgcb9/5miJLyz\r\nnLrFcfFibHNnpUaSuMigG7M4Aq3hf8JT8RABr2slYSPUZnKZE+82qB/Hby1b\r\n4I9xh63vbi1F8KF2YSSR/FXhiiMe7hueWUr8QtkY8Vd9T0PeBIhCo6l3YpmB\r\nnS+VtuE13csOkff1+znUCYwhGK71mUJzAwMY3qPETFmRl/1Iy3QD3CYrEg7z\r\nsmP3msUSvlQsZ7iYkjOiHnNq3PSCKXkfmTmXc7rJ7fQEIo/BgHIAkbwAPMTU\r\nTZkyrKXN3IMi9Wj2V7c3KobIUxCir2SH13oTd7h4QVh84hyfhdpVrUA+DkZa\r\n5eRT85fKq4l+3tKjEPCylMFOEqJxJSuE9Qi2qW7WQqqIow0EQw4b7AV6xLZB\r\n2aE9mEW+htmWu67l0mXlyfbi3sX273Xq4mSRQET2a5zM0tOhbGN2b0Hoznxi\r\nqMiqT+EWpI0uSvKQ22mi2PmJ3uBrdHH+WA6oL3ABMgN6/Ub8zNoqQmBh7lky\r\nDu7h80gaykwmJI6K2cCk4BkdAH5/ISlz/ffNtTJ6+8nvq70NRcAOOjK7S7kB\r\nB7X65md7kHFzQyMn0AuQU5+ZfihSIfDn2KE=\r\n=nlBv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"^14.0.0","@material/base":"^14.0.0","@material/shape":"^14.0.0","@material/theme":"^14.0.0","@material/animation":"^14.0.0","@material/elevation":"^14.0.0","@material/feature-targeting":"^14.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/menu-surface_14.0.0_1651164972247_0.1519538722805691","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/menu-surface","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.432c815e5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca9f0900b4bdd8dd44a6920d8043265e4c403802","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.432c815e5.0.tgz","fileCount":37,"integrity":"sha512-CmgvLcgEvr3/TNvYwN+Pcwrm8YcZW3mISjZpyLs7YamEuBsyuVoLH+b6ErnK6frRY9riaNuOGKAZ/QcBsbQLrA==","signatures":[{"sig":"MEQCIAm1nsGiOhvmG22UzVoxysFESpA+F2EugL+j+QL5xX8eAiA0BZm6n19jFWmZUDIjBGAqR8GTsbbXFtRUhVGmnwNtMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasduACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp39g/9H5UEL0l14ZB8xehmCfYrT6zjvt3k6DW9zcE1HK2ru52pFOKE\r\nyCOoihwRvn4nYkS6bzSFL4hJ1sjiu+Mq+gXFHNkLGoJ1vFfOoncly/UCK9Rq\r\nf8xxzUw3kCk1ozhAwu28flFM3Byviv634L0b616/oGKB6qJW+s757eeNra4n\r\nRRHLFbwUNDfnr88AsZb3VvlKyKOQxlk4aIaYEzxor8yoGNhGaK/CBRekr0fY\r\nhF2oJQJzAM1ME8aCVJqblr+L6TjKDCvd3+JCFkJQp7afd9Ij/AdarBjXP0n1\r\nWdNJy0mRbzxZd0/L52vkkkS9zdzoNWAdSXDPhZ7l+ES6g8h1cEJC5/0Q461t\r\nG1VVsRJwgb/lC/Dg1sMt94DMv3IQAL0CtWz0H4un+zHfwyKlL5ssD5eO+2oC\r\n0eTsqTICUhPrhoBtPIsbYJzP3O/ZWVehLE/0Y42OS1tOaj55DCFKBsrEgcO0\r\nmxNB6jAFkxf5MG0FOx4/om4vwBRWMBMBHMz7Lulmpwpm+oXrFV/B/t8TdpaF\r\nsQrAFfqE35n4SbLLZQkMufjk/es/xhhkyaPZUKJ9I/mXlNzdDePGfewOOH23\r\nCf9WDhnBXHEtPwrRJpC2QJSvg+9Anj7wDyHfqqKyfth4k31Lv3SBPn0pckEf\r\nvOHI2Q8aNNZQWGMgboE9SKhyM05BlLCsYBA=\r\n=TFhC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.432c815e5.0","@material/base":"15.0.0-canary.432c815e5.0","@material/shape":"15.0.0-canary.432c815e5.0","@material/theme":"15.0.0-canary.432c815e5.0","@material/animation":"15.0.0-canary.432c815e5.0","@material/elevation":"15.0.0-canary.432c815e5.0","@material/feature-targeting":"15.0.0-canary.432c815e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.432c815e5.0_1651165038172_0.931385865836845","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a0f01f669.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8fcc0949fbfa8aed2c9553c38239e6523363eac","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a0f01f669.0.tgz","fileCount":37,"integrity":"sha512-vMDWR+pE/WSgkL92AQ87FTcXB/+BQryHkRZjT9D7ToFHkU54+cWYRYtf8lME+TQh4NCram7uXZmU7EqFFlkb1Q==","signatures":[{"sig":"MEYCIQCMLLB+jpjNtC1X7y3BxeHkxp4+JtoJ2IJmpydzykQVTgIhAK7YDbc1WqSVTlpCqLei2h+vUSjl0MNBCHR7YrdtXJ48","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYHAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoYQ//fmwzOxKVOoEcLWiKgeT9SDbQfNihcQIVwG8I8I1iKJzzVImx\r\nuYZXUhrKs7QTmMJHFdNJaurdm2n9udm6IeHDbVfxibdhG2o4B02ojrFZqHtz\r\n91cQ0HSrH41NVcFg/1Xda5MVkb8V5iWthhWKxyYMD54oxgUusdaMIYmv3jpt\r\nEKE+yWN9c8vN/xM949r7lnKh5htixjtuJPAm2p2WZTgIkVhAdyyxTBhkg8P+\r\nkiXPPJzb5Sqpv2V8M0X94NogiuADi/WvRR5FqO5OK692CoSa/aIbOcwKUDkl\r\noGmMVxUF27DZI9FCEmwax1EJhqKOlG12K7yuuV+eHaJqvT0hs7PxD7LgPiBw\r\nH6ZE6jBGdYCXhgAVWYkmbKKUAZDYykJS064nZwqpOmbj1Q3FytqlDBFLwwOK\r\n5AvpX5p+KkC78JxF5E5MakrWHMVMYpfQDkI/xx9O8Iyla5zaU+KI4L82JXGP\r\n9o3+w2bKr5pcrnqjM8cI3fQ9umDw0yDqupdMx6jXo9wXz3mKLAEX0pHd8hJC\r\nXytXwKN+5S7GkZHlfiqaJAekPx1jPLneXrKYx9c8eAh7xg3tN7wLBD2CmJqh\r\nfJAvoKCwYzFqexYByOSGGRBU8LPxSxio/Eo910QiJQJiWExWaJ/GSzAHG9YC\r\nSsprnBZ2Xp8lMsQUCXsb1RDFH63FMe34me4=\r\n=1NHP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a0f01f669.0","@material/base":"15.0.0-canary.a0f01f669.0","@material/shape":"15.0.0-canary.a0f01f669.0","@material/theme":"15.0.0-canary.a0f01f669.0","@material/animation":"15.0.0-canary.a0f01f669.0","@material/elevation":"15.0.0-canary.a0f01f669.0","@material/feature-targeting":"15.0.0-canary.a0f01f669.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a0f01f669.0_1651868095847_0.7167241180735966","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/menu-surface","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.276cb39a4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56ca996349592f213b927bc37c46c3c063b0a951","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.276cb39a4.0.tgz","fileCount":37,"integrity":"sha512-/sJCxvcko4TiA2996EOaI8Ac8bE/2q9NTb6ewRniP18cVqzZO6ZSmFMlX7UuYjLTN2QHWwto2viNuRSZN3dwXw==","signatures":[{"sig":"MEQCIAgFFmExRWhuEtxsDUaXeIH/yHhkpWtm4F0ASdIdIKjdAiBNKbNEAiwO72ARopK+Om/DB+XaYkR5Hy7r1fAO9hoUsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZPDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/iRAAo1NoA7FQHvmgHI//7n19HQNv8xYMPrYxv/Gtz7KzEWh8myV6\r\nprJi1wyycuS6Q1KAQQpKVwDzcsShfXgtshE0rvZKJjLgdH+hdPKj/fSEigQ4\r\nY8c18vRVGsiCsV3x/OMDqIIzhwnw+Cfo2emCGVOp7EUGYvSE7mxJXWCObBAh\r\nENmO86MCoWJtanH/sip4aQuDFXcoXS3vwi6BlgEFdzogJonEJtRSX+4i7Yxc\r\nnBOCEv58GXuGq+7ImefSXtz2EIFk4/h2FAobSXk+iai6k3o0DbX01+IhpKOv\r\nrT8kVLL47Rvoo4M+B1wdU56wcna+pdhX3AHtCHdTMzYFg/gJNqsc37sfEQDw\r\nP/1zzam6oFA5fNHSt5VTs+EezY7b2PO4IXWLnh0YsOBNB8KFaMtD6GkZ6/Mz\r\nsovYo2tm05lIt+3WE2sBdvwBrnoEB7UfBLGMSYE2LKlBc/7aH8STFQbukbn0\r\nBaQlbkla+1tyPtSi/Tqm6r96IAqrhPyalvCqp/cq/PSpcHgmKNvKSUmU6kOZ\r\nsUDyeEiWgaD6dnf0uEiLIgYuQtBgio69yeC+mlb9qFqapbF1ah7rGerVbGSU\r\n18FaDH+lD5VELy/A4hq/FJ1xeujpcYTvNQI2tN1meLlsB5h5ieV9yhogbXLh\r\ngD4ZTjaNSDSe0tO7hPLPaPjepQaxL4ZwHZU=\r\n=Q/OE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.276cb39a4.0","@material/base":"15.0.0-canary.276cb39a4.0","@material/shape":"15.0.0-canary.276cb39a4.0","@material/theme":"15.0.0-canary.276cb39a4.0","@material/animation":"15.0.0-canary.276cb39a4.0","@material/elevation":"15.0.0-canary.276cb39a4.0","@material/feature-targeting":"15.0.0-canary.276cb39a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.276cb39a4.0_1651872707140_0.007835907586129176","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/menu-surface","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.4fe98ed70.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89b3524279348614c1b1f861f8db2cdaec19a618","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.4fe98ed70.0.tgz","fileCount":37,"integrity":"sha512-tBZwaSfaLrY2uxGoi0Q1bpJC+9DrHif6TPXVehzws6CmHTRLWKG5oNpeX0j4Y4Kbr8+674GMeoqufWYJZfyuww==","signatures":[{"sig":"MEUCIExjnHY95bp2kbQe8yVhAI3SfcxOVHwtOB7Dyy8LmUW2AiEAhtnJn9bN4/2xQc4Cbgcpr/qdmpUDnPZS56ohAGD7BwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZmBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpydQ//VccJNeTJIxGhyYpVVHQpgkr1d+/Nc4Ce2aUjiGaBqqfoCSy7\r\nA/LL/Y+RUWOZLEPIeTdrxSfDom30uHWDC6kDCRHLyzcT8U59aWlJO4mS7Z0v\r\nuzRviLGMB38R31iffi0EQPsvj5E1mRnwdDZuCLgbOyhpmWH+Wx8znNVK4Noz\r\nHC4z/I/UjJ8grpoqWUmpjCfE6Bz14HYYeQcQvsqswbppacC+DXovnOpSG6uy\r\nXxt81pZvrbvvQn44S01ZB9plQav2ERhZ9fTffYw5gERVgic21AtQZT01zaZx\r\nRlMM91NZA7SKBxUxTD/yYxiwI0yDc8jjuSymzlbvucZwzOYkpdqMMyo6SfHB\r\nULqil0KbISd3Q7hrXjEgDlyyt0K9KFmdacWiww8OagTokaWCi4Z1teqbtBDy\r\nKpOnmWvpNM0FCj//5Ua9sFyL8H8P2K81RrZeKpV3zQWABN4DpFwp9dr5BM8H\r\nqIp6aKrJQaWXrzsUovSyILyX8Xe+v97dJlBV9BmGfB5dDerAAOB4hcWqCPaJ\r\nvt1Yu2wV5OtCrXA0rscj+vYOGJcmRcU08LHEvJ7W2atAm60SHO6SyLL+mlgZ\r\nJCew7dxkmLRqxZa6bXqMPTpU+6Dp2rwvbq+ujY9nfT668UKTveT2wPB/fVm9\r\n7PsJ3XjoBEaFHgPpgWXzSI8OpWvAZfTbNic=\r\n=Kzka\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4fe98ed70.0","@material/base":"15.0.0-canary.4fe98ed70.0","@material/shape":"15.0.0-canary.4fe98ed70.0","@material/theme":"15.0.0-canary.4fe98ed70.0","@material/animation":"15.0.0-canary.4fe98ed70.0","@material/elevation":"15.0.0-canary.4fe98ed70.0","@material/feature-targeting":"15.0.0-canary.4fe98ed70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.4fe98ed70.0_1651874177792_0.41529998084345654","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/menu-surface","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.58b130a3d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9f37cfb7a20bc828a3f3a9a172e6eeeb35eafdd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.58b130a3d.0.tgz","fileCount":37,"integrity":"sha512-Nkz0AHQfqodjsxNLELZigKmSUxyH2yM5DjiAZCXhdaaoIOq8Uqa6WBL8LNCqNxlsFwRdHlPk+oxxN6T4I3si9g==","signatures":[{"sig":"MEQCIGAm921ChqS7MrJhzJkok5+qoox2wamG8eHiLk9MnNr/AiB3ILUPNOJcTUWgIMAbkxmFY0DcQlFD7PPWYVoWeQZf4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZoNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqb1g/8D2AYcw4B96ecaaydCsl/t72g/gqKC2DkjnkDyq738+ZrYO2U\r\nlFOuf02zZA2VmgMiOJt63VIL2O621eTIFnduSLPOH5WW8Su6PYtNHG9WvRyW\r\nVTzwpE7FGqitT0ZKdGDQjSQfPTxHngzF4CnyCDZ2EN0pVvpmXd71lbiMMBBB\r\nIcZPmH0TOS7FaQTPXajR1tcl73f0GrEafQqwhh3GFENSitl0TOb145lIfNik\r\nFINqgUJhDZM96IwiChfcU+vr5cWfTCUMACsHkaa8tRTya46abIYcuZH7PZWz\r\n2iZWXdFsM6AMIUPvvyEQdxaf3BLw4t6nB+GcMrvzaHowuuRfdpaUg2KmevPp\r\ntL+0XBIovcq33rUc0j0bT1tT6DY53JiVsF79s5QFX5zugo2IJG5IHUvbBinJ\r\ngRAYCvAW4p1B0FzfPVIseuOkoIZYhOJA7Lc32XnjIF5K7sBS4RdJO00iIa/5\r\ni8++YV24veCRBUq9UAmgotz+nF9STdQ0sJpIM5dv7XZ91/ApdFs+iHVsPHh6\r\nM1L6t7VDOy6jTkJ4RNKmYf7aJiDCkj5SQi9cE1Wc2tTV02Y9Q/R7xlXBUPqN\r\nV5mGwEv2891VnSGzD2PEIrFnstkDq30BIqXkILciOlD7SGqVm6C+1wH7ARrj\r\nhqAY9ZB+H6pJkTgbpMZfsA57KjGHAnYntJY=\r\n=E81j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.58b130a3d.0","@material/base":"15.0.0-canary.58b130a3d.0","@material/shape":"15.0.0-canary.58b130a3d.0","@material/theme":"15.0.0-canary.58b130a3d.0","@material/animation":"15.0.0-canary.58b130a3d.0","@material/elevation":"15.0.0-canary.58b130a3d.0","@material/feature-targeting":"15.0.0-canary.58b130a3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.58b130a3d.0_1651874317725_0.765593389058641","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/menu-surface","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.ae278a2fe.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c786a6441f0f87a5d2364d794a8654c9152ee8f5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.ae278a2fe.0.tgz","fileCount":37,"integrity":"sha512-e6cH0g5ikXsK+19MeyAH+iUBPdZefSueVoKV7hn+GZXxvt0jSHsDuQTigpmDew0oanJUVxfwM+CKfQrYc8p72w==","signatures":[{"sig":"MEUCIC07dHHVXNDK9btMp+SQVd8tj4oT7LPW7G3/QV3PFhZyAiEAigSCOzqbU3NilW4ddkeZC7zqKrSv6S2ewGcasabzWXE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTI/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+uhAAiSFUpkpAkvbHpxxXmL0uxTGIQFmQunGFu6kpeejFMwIIG4Mk\r\n9gt5izbZNLsoDvxs59iDNBgZOTjI+3cO8wIkXQ7+TuI/gjKgONjvtZ1jjagV\r\n3LPgpJrPE8kYYQejqg2mnO3s8jTlHoVy1fA1VAeDEVEGlp4IaA0G667U5Myu\r\nsO35eENPt1j1zB/GZiXL3yXihP8AaeKzMaiGkAeI8I2I0jdrUxm4Yt0wCxQl\r\n5JDOnrNjCMAhv6ouuDnIjyZOEhbFy/CeZpZGePwnw31lf/fM961EyW2zcoKw\r\nVEocgYCJatK9CT4uFVPuCjsuKwWP1D6oR6T4JNoFcVSmY7JnEdyvbRDQuR3e\r\nttHI3joccAcT9pPsomaZseIb1G8mk0ZEBMkWTMjgKaQI6U6hHAvk32+s3A/h\r\nmwm+UMBibsBXmtZJBfS6qPZGK4PMFA2MVgPVwk2u7mrzQ5C8WpCmtws0b6Sj\r\nKzWXT4LzvY+OW7fzRLJJd+yRLmO+XWtNdFo9eSYoXs3lcK7mHBqE9+7JeZ0f\r\nAfVss9NzbPiEt0pyA0J4IA4uWcnN+xCAz5zJiWMHBZ/wjRNGWk5QWYoTYM4e\r\nu1ZmvURy4DJ1D+0sFe6oWXTFMnEnJ8dcJUIDNQbtL478WErpXixjPGw+2/N2\r\nHd8yNtEFLGT++3qwLdFxSU0PDOgHbTUfTVw=\r\n=l5Y3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ae278a2fe.0","@material/base":"15.0.0-canary.ae278a2fe.0","@material/shape":"15.0.0-canary.ae278a2fe.0","@material/theme":"15.0.0-canary.ae278a2fe.0","@material/animation":"15.0.0-canary.ae278a2fe.0","@material/elevation":"15.0.0-canary.ae278a2fe.0","@material/feature-targeting":"15.0.0-canary.ae278a2fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.ae278a2fe.0_1652109887178_0.507490085854265","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/menu-surface","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.bebf5bfdf.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e810651b0c74d0e1a8ac134d58d839d0459c3e3f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":37,"integrity":"sha512-9qdfi0gW4X5Mve9nEqV8gLxfmDN68GBvnIf0WFWlp95hZKspEblSgG9FpAun0tuJ6IunUseo0fpy6BN7GawQBg==","signatures":[{"sig":"MEYCIQDqHtjLM19mD3cRsNolA4Rq/AfbeUt3fmPkMQkxp0ppSgIhALI1C4SnKWzE3oEFTl+OfUwWbGvnhYhmf0fypwvP1wYR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyIlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqTxAAi5jOSsMO6FtaV+KzlYdF8pAJ3T34EqhzIlRYv8hubfTulitt\r\neTvGAncMKiJgT/fCtJSPcZFMBT1WiiP8fD7ndOq6FRwgEacAcjzLLzHxoK6A\r\n+2gFjQFOMQ0Zb9Eml/ds9AE2QPbUV6JbHQwAcm9gyeWpLCzfKL7SzAJ2H9mK\r\ntW3/J9JfGZVGJQBln3Jh2Hr6Iqg5XUmHbl0Vs5oPPUP7Jfds9dYTKEeUFCy+\r\ntjdap3Hu5eupq1YGdHUvZlSeWTr4Bdim5NMqF7W5xT1yZQKU27iI766hVfRj\r\nkCzEgAN8Cxo/5/6hr/9vtKSgsPX0O3+Tqd6tiNcyENqY+tLzo1+vATY4D8F5\r\nbbpnTDmEd7Go+CHRCuk4fg+7ntJFL1lK3q7hgTFLc7r6bVPo5UQK7A38Qd3o\r\nTONOahQgvxoYLt2r64zyb0lMT4v+rUWXsuhbuVVDek798l1ynsrq9vOCh1oE\r\n/r9s6+7GutPwyXJYuMVlz25CrzAG2eJTFBCvrYTyjqZa0MbUQ1v2GWgEE66M\r\n2YKTNlRKN/f3mfNyavNmVRLf0nj/j6Du0Jsa9VufhvQGWfh3E1NWND8O/8v5\r\nHg4B1Lllj5YG0f5q0LaAlv1OUD5A+dQB2BZdAdxPk/fQyDdXUeU5q2yu5suC\r\nOKbcsCfOwPbF9mdo8/SZO+oYmoQyDi7j8SQ=\r\n=AFmz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bebf5bfdf.0","@material/base":"15.0.0-canary.bebf5bfdf.0","@material/shape":"15.0.0-canary.bebf5bfdf.0","@material/theme":"15.0.0-canary.bebf5bfdf.0","@material/animation":"15.0.0-canary.bebf5bfdf.0","@material/elevation":"15.0.0-canary.bebf5bfdf.0","@material/feature-targeting":"15.0.0-canary.bebf5bfdf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.bebf5bfdf.0_1652236836657_0.5640123603018752","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/menu-surface","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.e6072cd6a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f9300dad3bedbd79a2f82d8231e715a3e35189b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.e6072cd6a.0.tgz","fileCount":37,"integrity":"sha512-jU1A8U6OB3hlAxLyMkSXw+mGsNGByD0yQqJckuWcp3ZjI7j8dPCUEFEG4HNjsAd3R+Hd5VCESrfh+lEgGyxCJg==","signatures":[{"sig":"MEYCIQCEKH75fKTIOXJsBgGnHi31k+tMvAZrGqBCfEODmoyC9AIhALUPa+2LnVGjVAIsHwyNNujeGjseSHUVm/hl5td+2S8V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBolACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCFA//SnidQJefAD5i5NQqD0Q/qQLuV1aUj4yWsLBX6N13kBJA2DJW\r\nSYPHOAQTFNLGMg3tOWM9zFe6AldOCUPhVVMbz+OBHbwmxsClg66dbHrn1R6b\r\nVSfw+uaGZI5Dbi7TauYNxCu19OG5yURLuEPfyPTJHDN9tH3w3G25VWfa6ztP\r\n6RCfrHEdkEQVL875XIqa5nz6rtn2duDAxvklPVK0FBTfTNJuE5yFybC4f8N0\r\nO29XdCsR7yXqZtglxIabxBn3g2YRNEPaNNtvh8hIFVVCnYXHdgCrjdlxlSLD\r\n5HgRB/E2h7Y5Mf8bfiKk8RLuTgTCkoYBnfAPeb+JCAOfAi/ayr3Q9BeA4N0G\r\nrBki1bEAypK7Sz5RNd5uSVJ3v2ynmqmUrWL0IsGtNCs1dom2bVmQCjBVhsXo\r\nzDteMgUpf88bfdMvpySaPKDhJlC2bjzHyR1675QAyFDlNOZW6jE46UlFChaN\r\n5fXW8LxikbL2DddOsiqI7mVHZozqxu+v61hIlGTBEj4IhThVooA4d5883DTk\r\nxZQiZ5Fd3uXnRe/g7I++8u3ZUCEKhbbKxMTrmVtukTCRUSXzGBnK8XZk1J/o\r\nO3fgiZHKb0SAedKm4ZICfiGB0q7zi9wcPqgBfertUU07wZS/T3To4RD0oONk\r\nv50yejeCSANBuN7wrzlPInXSEC8TvUNntqg=\r\n=nx2H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e6072cd6a.0","@material/base":"15.0.0-canary.e6072cd6a.0","@material/shape":"15.0.0-canary.e6072cd6a.0","@material/theme":"15.0.0-canary.e6072cd6a.0","@material/animation":"15.0.0-canary.e6072cd6a.0","@material/elevation":"15.0.0-canary.e6072cd6a.0","@material/feature-targeting":"15.0.0-canary.e6072cd6a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.e6072cd6a.0_1652300324816_0.4139179318177062","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/menu-surface","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.5b40eb988.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96ec324ea069f9e4ba9b31edd4a64712cba91265","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.5b40eb988.0.tgz","fileCount":37,"integrity":"sha512-BYXGLNsqwUWU53mlgIN1WFTkd2xgBobn3wuOkzyZ0u5yG+713OYfLn2fpFbgvvx1XhIXXUOABz2/fu9JoPuhNQ==","signatures":[{"sig":"MEUCIFCrEMJU5tV4YS8iqWTR5TDfktzvXph1HiRLLS0WNxO+AiEAuaqwzqVb35ZEBR7zGXrumZXSQkb7jmMPNbK0Pn+txR4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHSPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQYw//ZxXKfkV7GlK5t0S70v440yetjsyHx8EDFstiAXKHX7GxOa92\r\nG8/n/qnNLbZiKXWFbUfRArpDDsfmJnnyfJ559p9EoBKZk11WwLIBx+CM7rkg\r\nkyiomnzeppI2q5a/mD4m4izQIaMRu5QToo+nk8dHGoaDnMp4PBJ2dOWSm1X8\r\ngpymn+N6k5GAv/cLgAw50IIjeiGkGB6JjxC0SmLtcedgi9RSu8G1GB4gYdpb\r\nLL6mqrbmHfvBvsLX6vgeXeRtBz8io2miuyAhh0srTerbkqEvA1AdMU2P33TD\r\nAKQJ1fGqCPKac5DouvyeEF8EZG4nqNiXHLL1rU1qKZ30yd/Lr+xnsKW+1lkG\r\nvXEN5hngBdBuMBDnYumwuLX1aRtqoOAXPWavoYzImWmKB7QEjAp5M3PvTP9Q\r\n2o+Ip8IaAkwZNb6yQ12UzOzH3beTVfiEeuTPi5PkMDTYahpgnT3wsx6J6xhg\r\nCVWhcWEn/+H/8cpMYplqwYnBZ7UsETQ+lTj5ibXeAfKMozs0odz46ZkBE86g\r\nkRrX8tOJtb1FK7avp9UtRO7oFuy1iVdJkawkgSvRIJpYEORO6OJTOqLqA0H3\r\nOYRre2lUTxpeCtmId2UXeJfjEaJccLZkFkTM1nx1RNE0OjDn64M5oXOZsI+h\r\nprNqntu6AmIEsCcfF3Y7EMjv5FNw1W7RrLA=\r\n=fCIj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5b40eb988.0","@material/base":"15.0.0-canary.5b40eb988.0","@material/shape":"15.0.0-canary.5b40eb988.0","@material/theme":"15.0.0-canary.5b40eb988.0","@material/animation":"15.0.0-canary.5b40eb988.0","@material/elevation":"15.0.0-canary.5b40eb988.0","@material/feature-targeting":"15.0.0-canary.5b40eb988.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.5b40eb988.0_1652323471107_0.257566587549227","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/menu-surface","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.6a61d62f6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a590fe35bbb3940f8ae444be9946d62f7412a49d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.6a61d62f6.0.tgz","fileCount":37,"integrity":"sha512-WtgAlJGyJwf/uWKd1ArHNTal91Ahff/IWM6GEYfSBOE4E7h2O+r1ZvpMmEEumxj9H5bPBRybspxChv30dBSLKg==","signatures":[{"sig":"MEQCIH1QGS3cZtfH3NZYwvLXFujaCYHr4I4o2xK3c0YHuLzsAiAJjVv85oy3/0mPt2mHQ+7d6dJXT53s5PLLPs9nxS/8Ag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW2bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLUw/9HTFri21sIoXdSLKuloU4+Y2rDKqXlI1r4COqq8GNkA3SG0pR\r\nyNPGdrOEQ696KYgZiYFeLyF7sKs65h8koPztHc9zma6h4PIYe6jhyW5dPsDp\r\nKNpfCx0UGFWTK3pH+Ad3Dpzgk+glOqC2cbCsH3ZMEgyQCRGocKGhpt+sAEk9\r\nDp0vU04I94NF4FLKaM2fHWXX6ETueTCQGv+QEYg1ebkhJvBoAL3hVKQR9ibm\r\nJTGdxxQE8axI8cQPNi0rLMA8L6Fj0LOHMFJI+ulJF8o010xQ8I++oxdvC35C\r\noT1XtM8q9QdXXJFBo6TdczKyUghi2/3vpvjvcEi2Db8B4BSev0bPscGTPdiv\r\nO1F9RgVYRbkt0mTK9Ben1Qs0N+VMbioIfHBGa4WR9yb1zN7Pnmb1+pIQi5+q\r\npitC8dbf/qALVkzd0KoVmi1X44aJyjODGWV71vGOT03HuE3lsXA+9Z7tNr3u\r\n/EiwpIjgxCaKjlZ8Ou1T9cEcnM5CEopBbw6Xl92wmOXUHPALzbpl43bItEts\r\nxVTZOdLi2ObgNSD55YngsUD1qFyCQ1BBthf45RUtmcEHhk2Y8X/9ROmlcHe3\r\nt59ozzimC2pretQlzvq1RquAtYAb3AKjoNU6cvf70TuPEjUJH2S7wa406YNS\r\nwrjx+H+s/pv9mBYMi22jL0Ifvu8lORKsxok=\r\n=oe5m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6a61d62f6.0","@material/base":"15.0.0-canary.6a61d62f6.0","@material/shape":"15.0.0-canary.6a61d62f6.0","@material/theme":"15.0.0-canary.6a61d62f6.0","@material/animation":"15.0.0-canary.6a61d62f6.0","@material/elevation":"15.0.0-canary.6a61d62f6.0","@material/feature-targeting":"15.0.0-canary.6a61d62f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.6a61d62f6.0_1652387227629_0.4147349006502443","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/menu-surface","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.05930a453.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3a093c310024fb51ff520670a031be6189409d4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.05930a453.0.tgz","fileCount":37,"integrity":"sha512-qaT/BMgbMXtaJpZGQ4jzMHa71rdf9ZG6b8cE0NL4EQ58lqFvhE5tVhTfjpepXAB5BzCrgqsYuSEkoSNfn/xYpA==","signatures":[{"sig":"MEQCIDDOUuYZanw/xDNOpfryd0ta7BeWt9WuHh8gFKGtPUKfAiAiBb6Iw0/dR5cVv5spfp42okIfXaMBcsHQYbnPQiDhkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqfQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmru6xAAlwYvoZEV9ryB2JMnMXNdUk/5iFQkolclVjEe8fFgdTkQ7ozS\r\n4meHTekOFUYcD0n+3R5Vrgwub3EX+F0SLyWmLelPjNG0sQzpjc1SZE2o/m1J\r\n55gPquNWpqQ6nRsmnzlECXboRA2chKc9zXHGo3mXBxq3b6oFvs4P/txS49w5\r\nakBX4JFw9Pbp5RrPf3NCsZk8ZU4rkmVKbyMe/z2SOHor/YphWCfeY0UMUFrj\r\nrwtpOGmHrESm2zp/qQ1hb3cLvVMH7FOO/1sfgRgtOA57UnSyu6CmHE7mF1KE\r\n9knotBnPwCCEgWJS9eXiUU4ft52jxiOfQStn6/NUSpI8TT1Rd3l53u8jz5JM\r\n3AmdUGG+tRYhA4nDvMyBZrAH6tcUgWiyi0efHlIMNbH5/aWaLPEqvmfj1mLd\r\nJvR+vwqUjj63HpnzMnO3kzhALr2h2byV8+yo03L03FgT8Oax6co3U+icqhrq\r\n+GyqLlDAMx5voTpw2qylyyl/Ac1mTGIbs4TYf1ISQ+o8TXG5NRmwHdkPVPGz\r\neZBEHYGI3ssyDdXxzyk/0JJYdr0MMzlvjQ0HUlQsQ/r760MFqLWReCfjIn0r\r\n7xTyeeS8ubkTG6hYXhj4LS1w4QNMzisHwSGoCzHAE3gkIg2Ls+21dtcvyHE/\r\nX0XE4rx/4qpYkDFXqBInBWxnIaokLFxfnPQ=\r\n=H446\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.05930a453.0","@material/base":"15.0.0-canary.05930a453.0","@material/shape":"15.0.0-canary.05930a453.0","@material/theme":"15.0.0-canary.05930a453.0","@material/animation":"15.0.0-canary.05930a453.0","@material/elevation":"15.0.0-canary.05930a453.0","@material/feature-targeting":"15.0.0-canary.05930a453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.05930a453.0_1652467664235_0.11294112467310913","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/menu-surface","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.c0a11ef0d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"869877b48e0054fa71a3d51abb0282794d25bedb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":37,"integrity":"sha512-DqZusNWgVIUR3GLMtSG98pBejr7kQbd8jd7Zr9vCf7D+bp4QU5BGyCw2GHLcL4wZYGSQkshrret5zUuWPPxjAA==","signatures":[{"sig":"MEYCIQCzF1i2RiuwTaRyoOcpBN0G+/vEBhZwHGaKBJY8GuEVHwIhAICP/mnUFJm/GHp2bfvuQXXUBQmynd6VrNcom64zwGYx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWyuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqh1Q//Wpzy2zs6RO422Dn2FG4yv/Ed5QRlLXyKu9EbgQL5RnxW4o7v\r\ncYjwrZEy8jAyM5dEZ1rX2QYm2oMyq7AY0etakBBov9rEIbEpWtfnPBwZqsGp\r\nMyRuleIKQcnIb6+xGSl+hFZ66s++P69bVzw11kJCksqCMJ1dSGMQrGXs1mlj\r\n7wygCsepyCc/qEu5azMeYkclNoAkyuRNw6JccPwcDzWfu3k636zadJghvMjZ\r\nzojkw79xyLGgmK5Uh9lPJpDqFYcRlNJ9SFVAZb2kGk7SbsJoxeNHa/PGf8xE\r\n0Kvc9U83anQHKWPY3LHiF7lD7JRyeE2KJyjVjYA4Ih0ZvUpmUWNWfWPMS514\r\nyuAQQxSnAMBQYZGcnI2nqLpjkf6eLcY5hAmPwbTdC1l0PXRcQWW+aVlKS1WP\r\noWOmYj5N6jIplh6Kve6JHNwpl/6Clgu+Omha7JLmWZc0ceEG3QMOmRZ8iX/D\r\nuYsa9kV/sjYgCFPsUmHieCAgfQ4vrM5dtq2QgVIijyk9KE9MVw8/TYrXDzyP\r\nHRbF3OX8H+qqJsOrA1+hDMDPNvAQ3H/pF7834SzpjWfFVpvrNYbDud/UH/fv\r\ngRZpzX/4GIvmjrYdxY9AskXxkXjWOB+HfmcwtWsIHDrCahEArXQamGfVAAyW\r\njBYXeA8zJ1dzKoplPnNq6tCv7wiNdBdVwlI=\r\n=SFlC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c0a11ef0d.0","@material/base":"15.0.0-canary.c0a11ef0d.0","@material/shape":"15.0.0-canary.c0a11ef0d.0","@material/theme":"15.0.0-canary.c0a11ef0d.0","@material/animation":"15.0.0-canary.c0a11ef0d.0","@material/elevation":"15.0.0-canary.c0a11ef0d.0","@material/feature-targeting":"15.0.0-canary.c0a11ef0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.c0a11ef0d.0_1652911277802_0.7612208272005951","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/menu-surface","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.2f9b268c0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d4dd30bcd665e894d60e75cede241aa00c81cf4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.2f9b268c0.0.tgz","fileCount":37,"integrity":"sha512-qUHXeZFnmujJa74yZu8O026zl47551Cm7f791ZtDVDczB5p+9ORReD9lfeBK0WLTBaYpfUzysaBEgpNU4SDRyA==","signatures":[{"sig":"MEUCIQCzDpITsBZqpzAFoY0by6Dm0FG0t0IdjNayn9EvdFdpBwIgTX8Eg9YGfvcanmSAK1qw6auntPjCBnpY6A/jez3nXLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+zrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrjpw/7BXlICo2r/KORwzcGK0S2Er0XHCKso/FcBv32FxEiTg2Zpycj\r\na15NPm0ETh9iRGXqSL5+P5rluHpTIOlEWqHV70q2rOaJqxjZEfijGwzwNsLA\r\nIFQx/ofqN6tROCBafGRW7T3c0/acgngpDiPRH9XCK8NHo5Wq0DKLJB2A3bVX\r\nHalbgdeJL6jkFxFUxvO6Psmr4Wd2g8u9KSACAj2KyFlKZ6BTDsUIwlMvr89Y\r\nW5btOA3dk+I7LOMFZRa05hvYGvv60ZWi1hSegOaC0dPIoTzTRcxT+xCfTEuJ\r\n15xFor3n3/mMPlXQbp4DTUH9xEiOfkeg9P29WI9Q0eMee41Rwjw56l0B4EK9\r\nCHOKVFH5IVFRn2AYKzw0qoxN0fNISfLwd8CFj6Hwq4/iwYiXzrQEZrqHKjC3\r\neKgbaiuyrtW/NJyZ2kjMwUSTS3zKHKTxSFFi7V1W3g++31ELZ6JZlEo2zCRo\r\nxyMEQKXy/gYhEYzm42+9aJitA2RGqfqKzSPAl+t48toMxEN0Xgwsmn8DgB4w\r\nwTBH6h0/9yDKiNMvAThgwOjdZuz53FMHkCl1YAWfeeOYxD97PcEw+Z2ZiY1F\r\ndwBekO7P7X4od9u9d4mEbGCt61Gx2Fi4AnchgrerKgSz3vnN6hDX0ED3envJ\r\nEkraGyeIWHo1YGjB8JT81L/v9XLymLj5TLM=\r\n=gdn8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2f9b268c0.0","@material/base":"15.0.0-canary.2f9b268c0.0","@material/shape":"15.0.0-canary.2f9b268c0.0","@material/theme":"15.0.0-canary.2f9b268c0.0","@material/animation":"15.0.0-canary.2f9b268c0.0","@material/elevation":"15.0.0-canary.2f9b268c0.0","@material/feature-targeting":"15.0.0-canary.2f9b268c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.2f9b268c0.0_1653075179519_0.07027287611253996","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/menu-surface","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.7741345b8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c9506506c92d8338d82539f6665d100c66e7361","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.7741345b8.0.tgz","fileCount":37,"integrity":"sha512-7VMjaGBhwdoHfKNYzOd8Wp33B+hQA+1ONeV782cyxKXjh3LKYuHciAq/3mBfOK5HnGflU2e3nbFNDZkHJ1ifzg==","signatures":[{"sig":"MEQCIFtMKh5nsV0VZrsbs6LXqe4Gdn1P84yQ/rAk0m4/zUB7AiARo65+ezh2BFC/H82XB5dnBWqCFTe8TvqLSJYXFiLEXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/P3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUMg//RbaVGVYN1/hyVr7TwfL+AsH+GJAEx8RlmNMEadUQwU9p7Ebw\r\nnx49Wk4d514l69qKf4LzlFwN8sEE2de6UxsKqPRHCmcZeIgsf9OILNgHTgeI\r\n00ZtI0y2mvJhJ3degBhyoFDIFy8Ay64bDVUJTdjB9oVengIdeSxZs7nJoFGA\r\nQCPze3xHAHby3WAYUDhv18vuOfEQZxCLoKkC9k89JPrrBPg+AdcsnlNSled/\r\naCYg4NfjpbwuWlLp19wjp58EwcavkkXlmd/HzKDi99r5+mQVnrQy9OlZOd+D\r\nUMafXxdEHz2xo4ZRG269plWrrFska5rqooM85Jo2gnvwgp91m/9tL6Nm4vZO\r\n9OOSF6itEBi+82Y0xT6TZhbRxD2CQ4GeM/pROiY0ABEPKAEouEnqSXlMjbxd\r\nkQTeeqol4jSoL4knXT9GPT1O5JtFQ6BN46cyCjrWlfr0VLsf8HOXjYWbBTY2\r\nmza+TafBaDgNqpLjOG2pIGeWSZfZCSGLScFnqKRTYpOYrRwEPEVtiJWFFv73\r\n8+qNg6nE3dNOytJZ4fNRyKPI2hFsCNh5oz91xBd/9lXoIGtvrXl9qPke0NUe\r\npjcEvY0TvUVpmS2GKB6HXKyImV511bUuX3sy1r7bdtzQeeFM9GEC4ij7KolR\r\ntr31IWcirKYILkmrZH+79KsW6znuOvlhLHw=\r\n=XvDc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7741345b8.0","@material/base":"15.0.0-canary.7741345b8.0","@material/shape":"15.0.0-canary.7741345b8.0","@material/theme":"15.0.0-canary.7741345b8.0","@material/animation":"15.0.0-canary.7741345b8.0","@material/elevation":"15.0.0-canary.7741345b8.0","@material/feature-targeting":"15.0.0-canary.7741345b8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.7741345b8.0_1653076982787_0.5126607371862404","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/menu-surface","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.f807e793f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27f324030a0a5eb08fff16d413d5b67bd6580cb3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.f807e793f.0.tgz","fileCount":37,"integrity":"sha512-jNCVNMyDaNha3BJ0dmxsEmC7jay9M8ixya10dak4HvIRBrri75v6dwkdWaECsG1PEeqFSGFbDJvH2G3OYrmwRw==","signatures":[{"sig":"MEUCIQCuxoYr+79e1pDvVNV6ZdK0JtAhWoDaTxzIYMRf8mK2EwIgP+klEQkua25eXlzsMpsVjBDBBKBJcZUACPyI7BZnoSA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBR9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPrQ/+I8NpGMAp6sFZMSEeNGzIIVdY7HB7dxHIHPtZkY8IL/q8QNlz\r\njpZCPdjK7/rGGsr3yphb2t/3FJnVXhefSa9W+xtpyQHRLHg7pdtIySthwAaQ\r\nz2MyzojWxR+3V/LxqjhYo13RICsEJIjgajlgECjhRtDfGt8jwy3w+rtHR71h\r\nA6P2PiSYkNn5Hu6bPIuGzZYSXZ1nta03UrtFhIKiH9Hi4lIP3bJRl3v/AcYu\r\nZqq6FE9vaCmFUuhNVUsd1z92OL754RmpMPU7s9hZ9Ki8Q+Uh5Bi00EYaFT3A\r\nuHEUjQEcUzhWAZUe5LLSB45jV6x837S370XgTrPhZ/W/nWoA0VOgzgD/q+bh\r\nkdTFqmSaBmiriaz35TETWK+BMKgMJwZPxOda9C/jLH+7C0oUi5SLhGSzqJgL\r\npf9nf43w2tnlfmKTUrU55FeHyRC0B4PtZH6HG5u9tyO4l4GuOMZ/Qb0WCVAf\r\nQSRxG4oGHd13TfIBcsdv7YEKaZmtImV7615wo7zh02MEmeHYfVWhleLkjjn5\r\nzB0LKWD+naYNbFuiMe3y/WYjSxioNKz5gqs72bQf9lvNFH4lf2wVOgiLXIkN\r\n+KgHHAdKZaGD9m81N1QJzuFMdUEL32LHI9lQS6C5LGRThPmkaBvyBnCbOzOQ\r\n4mTuYsM5cV3q8vTx20/2GxkL+AUAmHO8Fo4=\r\n=Ckqm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f807e793f.0","@material/base":"15.0.0-canary.f807e793f.0","@material/shape":"15.0.0-canary.f807e793f.0","@material/theme":"15.0.0-canary.f807e793f.0","@material/animation":"15.0.0-canary.f807e793f.0","@material/elevation":"15.0.0-canary.f807e793f.0","@material/feature-targeting":"15.0.0-canary.f807e793f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.f807e793f.0_1653085309172_0.7163653537572976","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/menu-surface","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.9f53d4a8a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4bb3fa24cb96417ba51e47d8a4068bf2d482bf5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":37,"integrity":"sha512-gLe22uJ1Hcs6JDtV7SJk7af/Ts/ZZXoX/FUFt+k4TA2F5XKjCGFdF7idOifPy2gNCY0Jva+xSuEQ8dAZIXhe9w==","signatures":[{"sig":"MEUCIHfZioBKlbmAEsWq12ryBDIhAYYE2KKlCqMSrl/MvvFjAiEA5ywodQvYyczpWTWuseY+Yp7fFobrqV3P0MyBzpasUZ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6D5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeEg//beTAE/o9MFh5P/9eTuvJNaehQNbX9qsmZtTwhsPOz1meSfyW\r\nOVq03SGonyvvL7qbMqukgg/znedg2w/DZVorY+pvmdHP2ZlxNvXbmwafSy2T\r\nLzBwD6jIZEz84gzlodOOfi/zVOtdY0+gdF+UiKKWn6O7JMsxWE1j6o1JNkgT\r\n5nPv2bwcjcOC6BGCJtg+fBsDYVwllUmo74gu2cASXT5YlD4Sw2TLNd7Rvvju\r\nlb4XpiNUxt+uchlCIloVxDQG0Vt7gW3chdqoGzYQ8IKXRFx11l7rlWXRFON5\r\nr1SVKYp7AXA7je8DJG4k/f8Ntu6NRjyLcCfOYjaaIZMqtl9CZ06zxnxoTRUs\r\nSkqgGz39TeMZJK1NiFHPZ7/CaQKiSGHAhvqD7aVlzM0b+CbLvv9F00RgSyi2\r\n4cJ17aaoSzaVdQmUeRfkO1Q249fxiIuMz4nKMLqnfthb7JUGoc+ULweP0Tp+\r\ns1mKeNvq82ShCJlip0k5NNUJfODS7qmv0AztOCVCthTq9lhOJ/8otF5hJvqC\r\nItTeD2eJUMrvWf13NoPe4kiBR6ZTC2D9oirABmiF1DykrljgeKl9xHXfx1pC\r\nMpn6oO0a5ZAJkOzkOQXSP78S1aQu9TbqxzBo2k1srBj1RSmky1qoKSVwQDKM\r\nx4PtbIgyRgzA/luv8qlK1A8EjvIdI/iOWu8=\r\n=eQ9d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9f53d4a8a.0","@material/base":"15.0.0-canary.9f53d4a8a.0","@material/shape":"15.0.0-canary.9f53d4a8a.0","@material/theme":"15.0.0-canary.9f53d4a8a.0","@material/animation":"15.0.0-canary.9f53d4a8a.0","@material/elevation":"15.0.0-canary.9f53d4a8a.0","@material/feature-targeting":"15.0.0-canary.9f53d4a8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.9f53d4a8a.0_1653317881281_0.09710351760154712","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/menu-surface","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.77cf00e37.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de07139bb2086c77ee65e24f05d2779442c63397","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.77cf00e37.0.tgz","fileCount":37,"integrity":"sha512-OvS0dy9FQn0nTwyymd9JMJF6LNXUNhz+Ub0O7D5IK2UgPf/nIe5hA+BLQ8fMd6J2ZX/M2qYJdV4eJzD32f8eOg==","signatures":[{"sig":"MEUCIQCzHpSlTg8KLaRy8FWpWGIIfXkGT3h/dxelHQ8Rx7TnywIgK5yeNlrmrDoSNpT+LzIjrCkOvD2hl88pL4EMxi3cNIo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillMBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuyBAAhYgJEEX4XYZbuDmTN/1Ew6V1tBmdtZFzD+Xtm6r4XQSLIzHz\r\np3q57URi1V7tTfLf64PSVdb1rqRE0pH9MMCk6BYv/kvrK4rq8vNZ5G7uYVRK\r\naku4a57fFHhYPm3A2WskGu3MEIEF844lqjn3cZoALNpanvWKutQvzBBJN5E1\r\nQc9w2P3QKADQo4aY5JM8hhkInIW2OwwDD4n3ZPVdW7TFGiygqOWJpNY7EsgV\r\naDAeocsFiuBuMm/JQzSkxQo5MYiGXe6br+JZRwOu6hnRtY0US9k7A0PyZs7K\r\n2SCP+78H8ukx+0mQSJxPnsjBg15TKYqHvTvCAxolJpB3flqePscXhhFfgsFB\r\nZPCWWuhjPsE9iOFPSZZmIkTXFEr0MLCHzPYff6sYYoXyggO8Yx/D1/Rd38uP\r\nZmv2RCA+N5i1jtuEDgcQTOIMvZwieMeYwHpZr01tiqIj/yiEnfV54YfBwG0V\r\n98z7nyTEtpbcWquaMUOwXzXXDvfYKGsk70elsL6DxjUrequWXPrQPPrOyBfv\r\ng/hd9Fy/Kz534zf1M4ecI4eawBIZxlFZePhQOlKpTjPCGMmE0N+YRMazNor5\r\ncSnjgF331JuGSdkd2DL0tJF1ZmpGYYDnb9/jASkubDhLeDRZlbZj35ail4u9\r\nS8VlwOCdYfDCywua2dviS78wh9fa8dZeySM=\r\n=MLiG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.77cf00e37.0","@material/base":"15.0.0-canary.77cf00e37.0","@material/shape":"15.0.0-canary.77cf00e37.0","@material/theme":"15.0.0-canary.77cf00e37.0","@material/animation":"15.0.0-canary.77cf00e37.0","@material/elevation":"15.0.0-canary.77cf00e37.0","@material/feature-targeting":"15.0.0-canary.77cf00e37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.77cf00e37.0_1654018817379_0.7254228174216704","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/menu-surface","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.3c7b844c2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ba342f41f5ef2838be65b7728ab2e1f1aac27e8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.3c7b844c2.0.tgz","fileCount":37,"integrity":"sha512-e7ljEUP3R9bQxvmKcxvGqAk58mWKOku996ts3FNaT1gdkGsyvgygVKXTVSqDWcez+uq68wcTpXNZKq8wDZtnUg==","signatures":[{"sig":"MEYCIQCn43dVGYUwy3Hy27t2PeCArtmXtV/4hjjt5LRfe0fDkQIhAJIsGZfvzKtIP/l2uE0u8/srvaJ5taeCeIZKtHnxw3aL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin89gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWrg//YXzvhmwK9C1GYyvrQtf9rDAZCJpV1JQk2JCMtxvrl5c4qO8p\r\nf1gAhPxr1jio9YLHsGWS+EFI5mcwf8oTXWP8Hi7EiCXJOFZIkD8NlSCRJigX\r\nghoKrpxy7KtOXIMf3MMIM3UjoyDBs+5wvcbhnBA5Z51+5VQ2xwPTXjozIrpx\r\nAxkUvD0hIbb8dlRdV+BifCHEiAIXjGhP/o0J9OMxoiB1wUjovwLipjg5cYGZ\r\nIKde1Yay6fRCtD1LdNWhwvPOl87VwSrIOkoP8htN7KJioeqTaV4s2k8W6yGv\r\niZzLzySYNOANIV0GPfSALGzUjzv26duoXot15128nQAsnT7epdWjMYp5U8MD\r\n8BOXlGtXcIgk95YoGKh75L7F6WpNlZN2Bzj0Od1OmWV9+JFLCZm5Y+DuSGo5\r\n5+fr4URBaLDSeqEFgPB7XWooj5RmfWxG0jaQAtg5vcd/531upJoTbL4vSikd\r\niSt+kBWUwmZtvIK4M9XQa5lT7SGucRmYh9x8bvQ2emCcdlJMW3wOPjAYJvPf\r\nLkz8rVwkT5AmHp6/njvAsWbVX2IYsDGj+tT3Liv3w2YIPbRvkfbUpqZSTGIi\r\nbXeFECd9bsR3SqYHpdtBIl08jjWlpypgeb+Eb9sVyZKchFyFTXW3oP3Fe76d\r\nB8nJVqOckGYxkZW3LjdKlLbZDM0e0T4Rk6k=\r\n=MLLs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3c7b844c2.0","@material/base":"15.0.0-canary.3c7b844c2.0","@material/shape":"15.0.0-canary.3c7b844c2.0","@material/theme":"15.0.0-canary.3c7b844c2.0","@material/animation":"15.0.0-canary.3c7b844c2.0","@material/elevation":"15.0.0-canary.3c7b844c2.0","@material/feature-targeting":"15.0.0-canary.3c7b844c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.3c7b844c2.0_1654640480295_0.6466050066075986","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/menu-surface","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.df47894db.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37bce44d402cb5409721dc1314fa068d4f19506b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.df47894db.0.tgz","fileCount":37,"integrity":"sha512-MflO1ygz3cwCYluziJl6J5rMFJdOiv3eixUPlJqy6reBcVraKjrpY3YwQoFVSF9Mw2SDT+EBWolqiizDPwYslA==","signatures":[{"sig":"MEUCIFDGowRgN0FSunmWvKDJsAh9MefaY/9H5msVC5p1KafbAiEApCtHhlmIETsjIkp1I9EOHIXbBANk9ZiOaFbynGULpVs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip28nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWThAAmnwg05tYgMzcriS50QpvDs5bjGt3cQjEKl2csar/Kt4gVJTj\r\nQmQD5PwiE9ul/xRp0VbJpAG1xecqYCmQTY9kglCe2uqGZYkQbf4PuU/tKHT3\r\n3wJPhbkGl+GSuZFj9i/jSjc7BIMzl9fEAtgNgbnpqokT6qmqDA/Nsp9haaRK\r\n/qlv74FC0Mnd1vNEaJLqJ57KAu9xHot0sxdaavJyTdGS/QHFqyJyNHDKw5Ld\r\nKyHI9kajs4t12uDYiFkl2pys69puXUFLhwjnK85JnoHK9D2EReg+jwindA05\r\n4aiDSdUe+NFByZ5aCsZVdsuz7pDgqJbAV7NG6g9MkycAu43kgwC0x0oZ4SN+\r\nDiSdSrH8R7hK3Bt/w04tXpSuzZr2G615QsT6BS1gt7Z5iChbz7btlOmkmuNH\r\nlcdjYTWO/1Jn65Dyp8LWxjcfyNaMTpdRtccpgi6OJG1P887HTjDE6iC5982E\r\njf6LD5RwqpYX7KoA4ugKuuDTCtdYZjn96QIfCgzExcdZn86BoRnlT8h5lx7x\r\nLKai424caQEM21Bezub3+/b8cF1uvaI9N6QIHT7bdef5R5TrN4BFWWyQ8xgB\r\noBfR93kBJUnt8i8QdvNs5HR0SlETTn9Usk6t/nM539qWjclmquX9gbgX9ZU0\r\nPuYPFnhMtsqfW3r+YxrmadjaaQNktgmROMQ=\r\n=YVOr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.df47894db.0","@material/base":"15.0.0-canary.df47894db.0","@material/shape":"15.0.0-canary.df47894db.0","@material/theme":"15.0.0-canary.df47894db.0","@material/animation":"15.0.0-canary.df47894db.0","@material/elevation":"15.0.0-canary.df47894db.0","@material/feature-targeting":"15.0.0-canary.df47894db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.df47894db.0_1655140135720_0.10372877809238168","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/menu-surface","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.b18a873dc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b027c0998045eba600e0b50917ddcdb223682122","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.b18a873dc.0.tgz","fileCount":37,"integrity":"sha512-CD6nCEYS3qMURwZn1NTpz9HVi5MWm5edvE1fphXZF6gK5k/8ntRfcH8CYCwk4gaAXPj44k5BPdgbJotBQbZlXQ==","signatures":[{"sig":"MEUCIAan48lVHl6htA2xRzEEmyKU6EmiPD8Wnjd/VPRztF8TAiEA2mULhFfRpULnl8ofMn0+V9qG2phEZD0JhrS4AWc2RNE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCrwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCYRAAm6f6tvmC1pOj7a2X0FIxMAAoGK57fpbUN//cWfxFY9RQJseN\r\nR+uu+xE8ZDI+4eUrNwDTuPXR8ubZbw8QaSPX7wBQnCiS7Z2uiigMu3cUXLpx\r\n82n7DT+EK+eGORVS5S9g/RFyDOxwH+hCEEofLcxpbcxo/t948kuHmb7Ye/Ch\r\nLWBuwHkcRswDoFDRA7bJ2tVDXKqwsaiPcaI4u3tAeRPEPMe4+/d7TlsdrhWi\r\nO55WRj82O+TmwIGm2Ai2Oo/9iF9Q1CLzf5YEy24YxoVFiuc6693eOHy8kGUC\r\nPoiQUYXWELfLSZ1q/p9UtvWuQGdeRUoKLyRyVUR/Gjh4mtO/pSsQIPJA3JGD\r\nNPNaQ6gAp3ylGLZa7+/gCTqRgONZYPP92J/GQdOT7ZROmHO4D2ToA6pKRP8j\r\nIe3snUDofvsOKrj5CsmeaUFs4ZZleUhSQpINnrDD3daPNaqcC3DwzN+v/peP\r\n6UZBwF0hetgM4tDv1TtLwBOZZ7HmWBArq5X4agyvuGUK2LaqlROIRcXRWAw5\r\ntmP/Cml1Ld1WBOZXO26qVknmrC79z02xd49PLBs0kYpvRhnGHHLcWy2msZmu\r\nk8KD+AgtzDHOZHWQb8Q8NgkRxH2qQkVpL+2hr8Fzse4t0dpPCEmty8/Hoy2b\r\nY8cFnugIj/qXbazpMVZuM7lbCGm95auK1SA=\r\n=dXqg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b18a873dc.0","@material/base":"15.0.0-canary.b18a873dc.0","@material/shape":"15.0.0-canary.b18a873dc.0","@material/theme":"15.0.0-canary.b18a873dc.0","@material/animation":"15.0.0-canary.b18a873dc.0","@material/elevation":"15.0.0-canary.b18a873dc.0","@material/feature-targeting":"15.0.0-canary.b18a873dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.b18a873dc.0_1655188208375_0.20310700665726555","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/menu-surface","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.ba9c29637.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13f2864e07672a7939eb27fbc8063249ccfd6d72","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.ba9c29637.0.tgz","fileCount":37,"integrity":"sha512-bh/b5slvR59OQbGDaQarkyu9NRi5hbITtHWh3A1NyrhHc08as+UXn8dx5vDJApev0OImng96CWpZuMuY0u88qg==","signatures":[{"sig":"MEQCIF/0gjx6TOfGCqkVXJnnnehz77D8M71tLudFuy5MvrwYAiA62C6HhxTyNsAKP8mypbNV6xi9aURnzH1g+BI5ZtBvUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNoqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrk7g/9FtQGQu9cTDGbeet20BIe14bI3wftBobOwC8GpHMZxAAAaCFw\r\niGWpyPx4w2iRKHbrWjRqsTXfpSwJz/zZmjdiBErFmGAyy9RVu0iyduYw/CmE\r\nefaDAvDW92arQDRkh2q49uvxGQRSGG8Xm5UyE96Dgu1XUdF3GPtFt7hvaCRf\r\n7A2dbb8zlflgrd8kCOeJYxublGkz9XQ+sDKi5kM7b0UVBV2sj9Ar94dgQUuM\r\nPWbcqv/ptXfxaMTL2SnRXOO7jCbEVyLsGZ0Q5rhOhpBCqyVA+enW5oZQ1YPP\r\nOUwxp/Dv+2NC5YpjLjPWo2wzpUULdgGzOMSm51cQOU50T78U4nazQXR6K5ID\r\nQ9SzQFLTlYGgK+R4I6/+JAyQUMVWzLzm4kHFYLTWR9LxPCWBOklWDPQPHStW\r\n/fQLhtRW2DjGr0cXP4Lv+kxgFoFTxgNokC+4Pj0pISoPDKynxcth1OHe2aMN\r\n83cTaaVTwSsgzhDSV1px/ouTJ9eCsvRuKDDc/daYJWz7LVySk5MHYsod3Ewt\r\nh/E4ioiVezJsOdo9bwjOac5ziSp7BZNQsMPSHvkS3dOfDKFw3JpjOtUbuDMM\r\nBjS2tLQ83fd19GarFJifVejT0MOeggWFHEyCaxMBQe1ixquYl5xfhu+UAvPj\r\nknXaZPnt39cWjmZiNeX5DpChR8qIHKuaL/E=\r\n=k9cL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ba9c29637.0","@material/base":"15.0.0-canary.ba9c29637.0","@material/shape":"15.0.0-canary.ba9c29637.0","@material/theme":"15.0.0-canary.ba9c29637.0","@material/animation":"15.0.0-canary.ba9c29637.0","@material/elevation":"15.0.0-canary.ba9c29637.0","@material/feature-targeting":"15.0.0-canary.ba9c29637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.ba9c29637.0_1655233065995_0.21852615460099067","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/menu-surface","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.9bfd12f01.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65b5278fbf311e6eb83e84b93ab776dd117721c1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.9bfd12f01.0.tgz","fileCount":37,"integrity":"sha512-aE3PbzS6SBYfHqgXEQBs3SgSAsZIYDhoqUOARO2ksqnc2dLbcUVP/aLyUGl2gYNjoZmRsFkz+2mAALdX+J59gg==","signatures":[{"sig":"MEUCIDEifxM3AEsUMqQzwbvpsNcB9WVW/Jqhx+pcFHpQgACzAiEAkvIJ0eX3Zruu+XlV2naMxFXqmqzLUoykyKqjzTe6U7s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2wPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcfQ/+PvA3qrhJpyb2bKsz5aXRyuflHeVRLQuQQ8CWX1nTb7j9KrQA\r\nx5nS3FoDHmUi0nYSTBUrWgNRdJMksMdittloCT0Mpl2qnIrRGPn07NJL0MHi\r\nySc73P22Yr0IY/MzF/ya4D2J3D1vkjLZAAwPbz9/KejVC/VeYJQf+V/AeFVW\r\n2aIK+vvvy/c5mkFa0o3eBeGyqdDs7h+VdbwzwIebnvHUfU3q62NMmzOIrIOT\r\niDDC6MKdByhBwfxy5SgbKDtHbNSXWvH/2W98207YtYSzXKoqVGGhCUUsW5X/\r\nE8SHc3WASG/ra8bcGbMKDCOjzm6/0eRd9ogfSwQLHX5S8Lrt4V5Mn/KACqeg\r\ne6s2pH8YSdOvqOEaVJtuNnkWjk5xA8k2suzlOhIeEeH7fGbMTtC2q/QIYxtJ\r\nDaK9gFK2oy3WTtTra8IaD1JmbWUPL0LL93W7nz0z9/95xrU/BgrvDci8Mr42\r\nb5JjWxYDIKstdMm3TQ8Rt/mkeFyuWywI/FQPMnNVRD6VwCD+zfWXYWsNeHAL\r\nh03nO83suZD2ttXB486EQN/u9oeiO+aJKI2yy8tJUjltsgNdfaFWB5RLdbQl\r\nDrBrGZSxxcYOxWJb26e5+zfY7NAg982HYxG3ppr5a30hIAIPN3k5NtDUj6Dd\r\nP25hycCQM3TdPpHB2AmV5qqlFQwWlSTfEPI=\r\n=ZJCB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9bfd12f01.0","@material/base":"15.0.0-canary.9bfd12f01.0","@material/shape":"15.0.0-canary.9bfd12f01.0","@material/theme":"15.0.0-canary.9bfd12f01.0","@material/animation":"15.0.0-canary.9bfd12f01.0","@material/elevation":"15.0.0-canary.9bfd12f01.0","@material/feature-targeting":"15.0.0-canary.9bfd12f01.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.9bfd12f01.0_1655925774985_0.4967344566973788","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/menu-surface","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.764de225d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0bcbb33a66e289f2344b8fb3057d914a5ab1b16","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.764de225d.0.tgz","fileCount":37,"integrity":"sha512-XAvzb3oQriqSm0ONRvnxjc3ReRZ/IpVFe8hyJBllEQ+mxNciKVd0KfDGGbkzxoLwSLLNAljhhzoSYHPLb7NpYQ==","signatures":[{"sig":"MEQCIGGqBsZb6wvW1iXEbLeYRUepgDY0EyhVady1dw6In9GJAiBLDy1XF2Gjm+f+MhFm+0vZKonp7NYPfjwzy6t+2zcKiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH1uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZ+Q//bDJJ44umP77TIHjpmgWCZCq3e8OZOsj+RMzI9IJbHyu5zsxK\r\nU0k5tPYcwW7ME0QJMqtR+VSWQiQDQVXFfg/dMD6RQhbWaGPhlBEvVvh6wtxN\r\nfB7tzHjil6OydkgAesiO/3BMpvTy/RHo16Kg/svL0qwr7GNIG+1lsYXyQQwy\r\neDjWjIKloG4/av7L3HScHIC6AlKuzHAfe8dcub1uedPfk5Dj+rie1yraDZ2C\r\n5XFWq3LKfrNQ+1zqcITyfiYxvlnJiS4S8pYvj4otkiptKXKQrlzRyXmbOygb\r\nsX8gDys8E7kSfxdToboLGXE8cbczFuPmnEMVG6bxrPdJy12UQs1/NoAFPoxB\r\nwO6kOMVZBiOr4ASyRUnFkleesvirgunBnsrsbTVW5ybVJLW7GGAiezzmjnrR\r\n06G/VvMkFSZH2NXyl0YSEyhIvXSw09Fr0jVOqdBIWbpt/U/7nvTkMd2Z3f4c\r\nmYVFGbGrFR94ONShgtX15G7HQ30nhopKMgPmKUKKfukxXoMjv58PsriboIjy\r\nw7sheV1vSNwAJPm3VnGSspwIZ69Q5KeF1R6m7qYj65g74/ziKXncKXeYBZ9e\r\nRpeKpi0iFOsw4dxE86zDw7AoPwjEAYyPbrKkmCQhH6bKTKUoUfu1pA7/1plG\r\nM2VbCdscUXSeM+63eX+L5eqj/aUj/1YXHcA=\r\n=QGQm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.764de225d.0","@material/base":"15.0.0-canary.764de225d.0","@material/shape":"15.0.0-canary.764de225d.0","@material/theme":"15.0.0-canary.764de225d.0","@material/animation":"15.0.0-canary.764de225d.0","@material/elevation":"15.0.0-canary.764de225d.0","@material/feature-targeting":"15.0.0-canary.764de225d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.764de225d.0_1656520045951_0.696421348037106","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/menu-surface","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.31e517cea.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"227e915f36f56ea2a98180b4b712e8de632b66a5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.31e517cea.0.tgz","fileCount":37,"integrity":"sha512-T90rP8zgzTK5qTRB2FgSOOxKn0pyD1ch9Z0SiOb3xRIbgudBmkSESLEXBG0p6sGqQRb5WG65j8xOsC4fS02BVg==","signatures":[{"sig":"MEYCIQDvkQlu5WFcdlhzh6T5jtu8jRV76eZREB9NsmDXLDlCLwIhAIp1nnWZwL5KGgn1pslDio59qyznFZLsWERAxarDW/X+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivzzeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1BxAAkHhZz0yTKRsEyippCUCSs/rC447DbNi4mFy7ksXKOmcK7v5N\r\nnD9qB6GOsmgLLuLKy5jfWk4VhjTfAvv4gllzmf3lDX9PvxqWRyP2mC9Rsl9Z\r\n/mw/Pnd8pOU1VvEwr4/QvFc01Vkzc25HWRllqkOdCFXN6xEYtXEAKcyUDb4l\r\nBa4wDyqSBkl1IISDnDdB93b3IsuENWzUDiFjACh8TB+DxiLsXcSS5QesAvbi\r\nV6mxajUjwpLccUNSB3gwTOKeniinyBRiJsqm1FlqA/lE1kt/KQ70bJP79+MF\r\njoWgw0y2VBmp6te191hvbJ85LrxH/Sk7370+YaDtwwfoK2hS1ZsYcIIyHgc0\r\n5tLgaPhNitAQR43sN1tu8RgS2V5c79ME7e2eyOja1jSwFbgbLr6pXkLu6ykK\r\nETgso739GrE9cuVuhKvJXZhpsmeQUFjr57kzBYGRfFOvbh9SBu7cX97wT+WA\r\nYSYpmW21clSAgn+3Q9kMN7mwWlG6At1NFS85+JxN3pWUT2dsHH7iE9497G0U\r\ns4L+oy+L1NlF7GAUWxFPTmFqGMFAm8mWmBb1BhjUUAw3CziwCDMgcBsWaJpf\r\noQxWOKWUE+nZUikT/twfAn5zvi6RV/vWoxp5QQ7kYwewxVT/Y1Zhsv2Oh+qr\r\nP738xyqUAmcl8wfhyqF4gydQDFjLYNh+Ezo=\r\n=i621\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.31e517cea.0","@material/base":"15.0.0-canary.31e517cea.0","@material/shape":"15.0.0-canary.31e517cea.0","@material/theme":"15.0.0-canary.31e517cea.0","@material/animation":"15.0.0-canary.31e517cea.0","@material/elevation":"15.0.0-canary.31e517cea.0","@material/feature-targeting":"15.0.0-canary.31e517cea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.31e517cea.0_1656700126153_0.26332308872981414","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/menu-surface","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.9ea4e8e9c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7d32bb093afafe5d72e5e541e8fd2092eb61439","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":37,"integrity":"sha512-yN3yDUQpW3/h4KD6eeoZTaszuOKLtrZcfiOwP9d7Vk9P/wLFqWvYPjMuDZlTmmKQA9+4a5RjBrYCibDugzaciA==","signatures":[{"sig":"MEYCIQC/zGjWfBt1JUD9EhD9K9/L4lw9WoaJ8XqR8b6+rtirpAIhAMjr8cI0cGlbypryOnjuXZOwcDRlDqh3TQaXRdmHOZmN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3tZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjEw/+M0dmcYURffnp+XsZaeyUO2LxzTw4b+ECBL3afTvw2qtVg5vW\r\nJEVcS1TmkWTq+LaH32fP1l4WkPhj0n1CHicE/WdY70KTSeobCcLuEdRLRaMo\r\nXX+SgulXRbZA4OTu2MTrLDj/BOOr3Db9WlE/ABKLicZS0UHGp3QtH+DeqSZu\r\n8s4RWrxxaolRWJ+Zwu4SFXaBTDIIS/0QOuExdewr700L4cLC3w26wd5RGb11\r\nNhTFsamuJh7dWM3OXKp9vPzSDaLGlMjWNnmXMCcETB2u7/CQoAb5cuuxdUMM\r\n1aNPEo/HWxcc3YvZ6cbNBQ38oeDBbluQIVlDZqkllu5RJN8ck4wm+M3u52GU\r\n7aM5YAvhl9uVH0lhNVwENkAlnj58FLfSq1Efp3F2m4E2QyXWgx5M6NAN/b4i\r\nJBpYguyFFygDasXXA6FIQi4AzkQRvgkDFIWsipGMqGAmgysWAakvgbVVQB/g\r\nfMBLYmw+dwFI6Hj7Aw2WjLwWF0GYTSEuhaPqJladVjvN+Sfye9rI+7BfCJz2\r\nn+Ars7/AzAt9prUq8fyEOA8tSuknKyl1gORjym/x5VdFUl1QsyGyPADxK1zf\r\nXpkCiyZ20mDcvVbPguzoAIIYyft0v136Cksd5EVYMgHQE1obfw+gziOtph9e\r\nmu4Kpr5XCWEWMh5Lgznb4a2mbr6SIyRAZr4=\r\n=Q/B7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9ea4e8e9c.0","@material/base":"15.0.0-canary.9ea4e8e9c.0","@material/shape":"15.0.0-canary.9ea4e8e9c.0","@material/theme":"15.0.0-canary.9ea4e8e9c.0","@material/animation":"15.0.0-canary.9ea4e8e9c.0","@material/elevation":"15.0.0-canary.9ea4e8e9c.0","@material/feature-targeting":"15.0.0-canary.9ea4e8e9c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.9ea4e8e9c.0_1656716121281_0.9164551510465613","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/menu-surface","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.cd5bafabb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c1a98aea74dd32a9be6a2090b3c28d33b5aa6e0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.cd5bafabb.0.tgz","fileCount":37,"integrity":"sha512-KfaIl979vzJSXX1M/pxXIsNogW9MVgdg0aOSdN85DVqO6fnh5S03EsLx+ByMGv886NC5815A/glcqoXlKnaW9A==","signatures":[{"sig":"MEYCIQDyZ8a8Cngqx8oMNUZ52fkGnbboh3osmtGwLjDsotOq2wIhAImcaxqURiQiEPrWCzjBn0xLSCDgCKP8Rba8gFTW4hEV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcxmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAWQ/8DzxiNoLDS1PIxh4CIHZojueXwWacW1Nq7g2eRTr+3VEqnufh\r\nOELVP47S3hpf226omZlzDyX0s9mgAM7tun88zUGk0JG2uLfqnRD2vD+rT1cI\r\n41yF+Xzce9oiDq8n/bbxleE4VsiMa7pFUaCBF0RAPRlflH1jsFdKM2Wq/BYo\r\nNQQWeDEBbU6lDFFx2ghthbvaENO7mU66hm2W2zRYviOP+8g+ph1bpERh/mgF\r\nkZ8Et4beOVOfwJ+sQGmTlTNiMyvUlvvsvprFXE0r9QWpLgPC/HpkqmgWJtjV\r\n8RvVo5iqdIWQ17QrUa8rZ6N/jbZGrQLooshrOhb2Xksl2UE49fr+i7t2mvJb\r\nMHwMrqNPlI5L2f+so82CJbadxT3fsePjVCrakhiXtPMU9qzR7YFxRbU308Px\r\nmLXa/4+xwCzq6Y3qaM9TY28LGEDZIecjg3rKS2l8a2fRah4kuYNY51qBxx09\r\nfU9YPmEbmKkM1W2E0IyguN6D7mXLONhk51ZHwew7aCSGY6jQbs7zPN6xSkt1\r\n9JhFgtEAEzbS4oZA2Z1C/D//RCOHj0mbPOQ0GX7CnYJ7xZhIEbZ9y2y0PB6g\r\nEsGaEJRTgkpdcv2MYIL+T/PovfQ3t6B44QO6YwEiKlnJnWKfdRB23qAcZ7hW\r\nFBIbwwY++t83UVtHtTeX5i+bzbMU+k6pAJY=\r\n=FxQs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cd5bafabb.0","@material/base":"15.0.0-canary.cd5bafabb.0","@material/shape":"15.0.0-canary.cd5bafabb.0","@material/theme":"15.0.0-canary.cd5bafabb.0","@material/animation":"15.0.0-canary.cd5bafabb.0","@material/elevation":"15.0.0-canary.cd5bafabb.0","@material/feature-targeting":"15.0.0-canary.cd5bafabb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.cd5bafabb.0_1657130086202_0.29948410832458605","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a02fe49d3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"261280d046631beb1ab793b7b044f09a27044f61","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a02fe49d3.0.tgz","fileCount":37,"integrity":"sha512-nMl3r8binCqOVqc75RCM5VZFeMDm9+w/DHvSv/mLIg8Lfjsjcf1Ni3JMfejPLyGJebgotBbBo87zxYFmm1knMA==","signatures":[{"sig":"MEQCIE/YEvBxgcjG884MMV2gAGAAHqQk7edTJDv4+RiaYaYMAiBF16dgbdSWcfBxy0P+Ql/aU8gYZbPhJFyg+Zn7fcnI2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdmvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkaBAApCj5dupvq8yr8IjUlJ/V3VmyLFwcC9aPPZ6i1bpWhB8Ab3Yc\r\n3UAiOc0e66h+33+b5zz0xZsyaSM4FMn0smzkZVhTU4mbvSRtCYIjARSjgYDI\r\nhfc3tpPD86NaBsaTdBsEg9ySoiNc/Su6aPoENu13Ff4l+CDpuX0hnjYR8T9F\r\nJEF4u/3DdGi5jp5mvE+4I94ObEXQfxFZ42uEq5CW71fK2Xaz/g9WTmQdq/BQ\r\ntUtuUONDENiO1D4C4euObK8vjCQfLIifHMHx5xObEJQiokxygq6yPOGjxx8B\r\nNFqaGF4nJKDxgQ/QEW1wb6qoAULUXGFnRuya8JuIIDPzSoNd0/lA9oO4mpxQ\r\nzM9JQHnwc12JYzykiqf1hKbEfnXZ2bKwDPGdvKkXRxKWlAlQj54ihnTJTjAY\r\nLICJ477T6l8cVOAaO8TkOOWNBzvMrUq+iTSaqKLHvJp5oFBduMJT8oay760f\r\nO7I5dhK64In2PJjrUm+2I+T8D6QTPE2Up7FwgPsE0Ovyxtgd5fFKI5vouGKv\r\n5qQDLmaiYJGrPhk9apESNlVlkjkNHyXtcCmTOZr/ZK+UcpUe8xMGJVpv97Gy\r\npWQBmAU4b2CjMUVzpint4pEtD/X1PABuFQWqby7N+QAhtsatJVBpXdrqvy3r\r\nYaF3muwHFfkBN7kBMiP9JLJAdQ0J5mu3ugc=\r\n=HuiC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a02fe49d3.0","@material/base":"15.0.0-canary.a02fe49d3.0","@material/shape":"15.0.0-canary.a02fe49d3.0","@material/theme":"15.0.0-canary.a02fe49d3.0","@material/animation":"15.0.0-canary.a02fe49d3.0","@material/elevation":"15.0.0-canary.a02fe49d3.0","@material/feature-targeting":"15.0.0-canary.a02fe49d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a02fe49d3.0_1657133487116_0.21827981761558424","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/menu-surface","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.826a3d8be.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95b05b568a5d305ac4d7cc5608412f483f0dcf58","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.826a3d8be.0.tgz","fileCount":37,"integrity":"sha512-boe8HTUiYfzCTLzl8eVBFcr2jkUkUmebfcUaQgdWScSzO0zqTUceBW0n7LVxaIupDO/27ZT4qd6YqWaw0N8qRg==","signatures":[{"sig":"MEMCH1sbhTiSthRCY7msN0UcU7yMC56xR042gF2GFuBbOM8CIG4olT6ir+vCSU/nshrn96UDJRFHYXFcKfH6HR1T0h57","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeMMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBNw/9FfOGKpl+NM+HMRkNAE9GkUGKbpOREaAPMZm3f6S+jO7PRVUU\r\n7Ypn52FcxVjO0J71FU3WqLoJ6BavRuncYj0e11CG4Jbjp65n13CnrlYm/lPl\r\njGY+BYPuCi252qkMmXcFdsaEZkA10D/LDLlHXt7eu/pY7wTDNy8mOaNOByn7\r\nPIQT5NaYsXHbcI2himc83ykxzWyYGXBHMoRcSBHeRPSlUlTTpx+0AzumYTY6\r\ns5WMNFAOl9spmrMRKzmZklDNF2lJcgSp1o7NGVj+dRetMtgaIXWSV4pFc2Ps\r\nrOpoIUUIc/EKt3nQvX+u7O/fNtqPk/ET7C4dkVLudhfs8cRYAkTE5oXSFyCx\r\noruiD2OuiIqfgv65AD2+Bp+9cvof7l5NiZ8YNijMhAfcFLPWzvEqtzy8+mMR\r\n0wK790/gIRNTPF/Iy/fn7hIGanvquXKnN6Y3XZp6WM0YkuRspdR2HNIEkOoS\r\nDBZs4kBwdGKpkA4nM4k35hMNAhRJYcZ1OQxtdg5DtAGVoRQPCQBD2X87yqOW\r\nLw7EEiqHRGh5JXB0UV3db+3xzdK3AmLErnWkKzH/gPq7CtNoFsfH4wSc/ZY/\r\nlsGUZ08/eLjooVL0PUBF1KWPVYBNyHcNbtd9+DhCw9+qnLM+WYuvlE/5B9/t\r\nJGyicSTfI3/Sjkz4bxO7DbK0UIq8jKyLDt0=\r\n=DepB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.826a3d8be.0","@material/base":"15.0.0-canary.826a3d8be.0","@material/shape":"15.0.0-canary.826a3d8be.0","@material/theme":"15.0.0-canary.826a3d8be.0","@material/animation":"15.0.0-canary.826a3d8be.0","@material/elevation":"15.0.0-canary.826a3d8be.0","@material/feature-targeting":"15.0.0-canary.826a3d8be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.826a3d8be.0_1657135884547_0.8158588143361676","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/menu-surface","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.ef276aa93.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2b87de59eb16c2ff6d64fc02662dd730e3d9c45","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.ef276aa93.0.tgz","fileCount":37,"integrity":"sha512-Nztbw22LQJ/flBV5g3IMMuPtkGMTyliP3Ns2dXjnZ667+1E2+4225J2BflYr5mYkM4dN7PT+TihCjC65skTkJw==","signatures":[{"sig":"MEQCIDE5HOVHA5vlq5UMZeinyjXbaHL5hwYQ1FT0z80SgqOWAiBSlwXu0fJIrdfwKIiWtaeg5IcW9bnIdvD9g3oM9rcDNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxHFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIjg//Szk0SC8VuLPm4tAzIbtFLDfUh4G0vSI3ycOkE8lOt5c+3nqn\r\nzthZnMmCAeUD8gk9N5ufVdoSXwQSbYbjqPpIMaR4Bu00WxPEy9BJIXBMoI0W\r\nHSmSDcD6UBM1xv2R2aUEavoWIfz+8GhLghNYQhIUQksZtn3smz0qmXWhIsJO\r\nh2bgC1mXgsD9Xs9kAbfdVtfXZRuHexWJ9wKmoK9jcbcCBCgd7DC2ZCNjWHDS\r\nKS6KApNqFACjgBGu51l9AWjTQbFIjSlL/KxayJ/frij24rcm0F188xqwFBr6\r\nbP0wYmF/zlEdK+aXUurXQ0cxDDdgZbq7Meo2Xv/6u8yw3iglKNXTD9m1gGk/\r\n6liDSxGB9Qar/IhZBwmjv+UlFNhehxOdDeDJJrB2Y4bGS9Gxn5w5agvLqhNP\r\nSEs7YD97G7znScXhLx74Pyc+b+b74Vk+TNh2nqV0nI4ninD7j/FFdpeeiju7\r\njXLv0Oe0FooZitThmC1jTjZP6QF6PXzxVZlIxH0CkgE9lzs1xxhVh+yBk5Ri\r\nW/3lNYn45IEsX8cbvlOnYlzAlYttdzMdN+UrjRCsPOfhp7vonx/qXvadQRIz\r\nZKZC+0IZSK58hIJa3cPhTqDWbFV8mHwDrqXezAGCpPSVlToB7vPYKlJ3Z8H+\r\nV5goyLT+3apkRXDG32Zz9tW/e3nEWyqwFiA=\r\n=ISWR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ef276aa93.0","@material/base":"15.0.0-canary.ef276aa93.0","@material/shape":"15.0.0-canary.ef276aa93.0","@material/theme":"15.0.0-canary.ef276aa93.0","@material/animation":"15.0.0-canary.ef276aa93.0","@material/elevation":"15.0.0-canary.ef276aa93.0","@material/feature-targeting":"15.0.0-canary.ef276aa93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.ef276aa93.0_1657213381312_0.14580769219311085","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/menu-surface","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.59cf61d6b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae18f4c1e73f4cbae0874c068ad99ddf9e461196","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.59cf61d6b.0.tgz","fileCount":37,"integrity":"sha512-Dde2FoIqEY2YLZXACVhrBOF8jK3gwOIBs5p3Abvj53h8ZqfndSLBLsUpfjYuKD1Y852NK8om/s4fJtGup4swYA==","signatures":[{"sig":"MEUCIQDj2pnDMoUGJvCdq1oE2uaiKJ78wEAbg2IP9PYwwBtB8gIgHMXuofflZpgHHiLXPPY8pHXsNft+fzDqNNv4MoLYe40=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxiDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppjhAAh/m4VdiwPpTnwrOv3O+BzVtlv9Js3jvksgYa3V7n9jm4jhcn\r\nrcvstItsvgystTEpkqAhNYAnA9+ZlR6S7cwfnAlfURE6Z75hy/hFE11/GAIf\r\nKDVrkpGTb6LmnG3XXYZpDLv0hr6ZDGuQERfG7tBLb6svnaUKrlDMpUpc4SKc\r\ntE6cbGzFOLGfU3mjECkSFy0WVP/lIHpozFoKPIPLixnBUL5Mow6vgr2dXylT\r\nwf5FModeFexzsOqFWFk00Pne4ZLfp6N2PUcsM3WiWnw6I4rZ7R16QYmTnuv3\r\nl+yBgPYe8QMAEjFmz3y/PvnHRe35Ad9DZ2Jf5J+F7Pa2Ql8sNHpkeE6XgWoZ\r\n3pMTIbvWMRWQiJIsVh4+fKX5oWwk2kIKwamLJkEGAa0lS/uqJX7R7CUCiJtw\r\nn0dX/heg6ZC1umRW8e3agEuW0XSVMv0OjK1VyP/MiD8GdRSlf6pZm4ifwhgN\r\nhV+bTeFjLXg5c2Xsa/pvlvfEOMf3xggHnt5eXXPzwauyfBqVPw+r9CJtNvvS\r\nPm9EmZ6v6U0x5kS59/NKv888/Jr1IV0p/IwfAiAg4pFv7dHsn1hgSc8lavTx\r\nr5Bi9rksn7x7oWEyLDQWwIqJaqzRQLxRhyeYlhKxwkMUwTVq55VoQB3HWMKc\r\nmNTW4hBqvGyYnV4LFAsBrzRYXX1n3LRdtMw=\r\n=1Eoj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.59cf61d6b.0","@material/base":"15.0.0-canary.59cf61d6b.0","@material/shape":"15.0.0-canary.59cf61d6b.0","@material/theme":"15.0.0-canary.59cf61d6b.0","@material/animation":"15.0.0-canary.59cf61d6b.0","@material/elevation":"15.0.0-canary.59cf61d6b.0","@material/feature-targeting":"15.0.0-canary.59cf61d6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.59cf61d6b.0_1657215107211_0.01923936295675266","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/menu-surface","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.8647092f7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae022bbbed3d908630dfe350158c2b46d29272c5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.8647092f7.0.tgz","fileCount":37,"integrity":"sha512-KoYAeVTQKZHS5mSCK0Jr5WBwlCJc5a9ngF9LTI0S1kbsdXriPtqwcMKH+blrjwZOlbWpdFwqTXbPcm7NpdhcbQ==","signatures":[{"sig":"MEYCIQDSViUhCHXs/4yYf/iL/DVGhRijIqp26UUZJ4ialSFAvAIhAJLq9wM0CrH0/4xvojYzJVaU8+PTz/dL8l1AeGqpTgVP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0RlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTLw//TrC6PMiDK4Muwo28iadAhQ5j11g7j+1+niZE+0JCoVd5KRSe\r\nDlu2UvKFSO2OnnkBH2thW3PEFEb40ztJTiKppAdQAFMIhkkAAboDNDlrLYux\r\nlB5ti+JRzshT2EDZ1i2rv2cLd8I9yGwEGnElQj49I5AoEiPiKMyjJEDX8Enm\r\nEL8UR04mX4WxPORJVQR2TT2Jwer5ZcluuzJtDkZJw/6lKlReeSLvMWQN/ByG\r\n9UN0ZLbe4r69ZwWdGYAhgP/9cP/uY5k67KVqx0iz2G1ljS7zBQSVgCCFARj0\r\nKjNBZKkV1lY0UudKseTvefab4owgx1tAmMJC2klNaYfLCyNTHHooj7jHmAHs\r\nIb1Bq5xt7WHOh9CMU38tURN7vPYrfRNqbURrblUAMdbcSB+KNwWHwPixka9P\r\nIQDq2a9JQqcgIQaqZIUevaRJBKhVEHPyihN79M3eRGMLuHZnUU1KKtRSyWrv\r\n/cSCADxNZRIx6g7D2WKJz+7JxhIX0DED8VbxwtoWXG90fp8s1uTs3Qqv1TMP\r\nRY1tc5/9laVLvqExx168VrPx+TRKPaxORnwI2zRyIBeaj2pJ8io4aeFf/xl1\r\no+j3XaCtaiZbKczD0STfzDcuaZFjtueHFN3uuvGm+HuLplqQVHvFjjrXEAUW\r\n5gsaRbjCmnNad28oRLrxlx7gPuC2fQaTfA4=\r\n=LQPi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8647092f7.0","@material/base":"15.0.0-canary.8647092f7.0","@material/shape":"15.0.0-canary.8647092f7.0","@material/theme":"15.0.0-canary.8647092f7.0","@material/animation":"15.0.0-canary.8647092f7.0","@material/elevation":"15.0.0-canary.8647092f7.0","@material/feature-targeting":"15.0.0-canary.8647092f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.8647092f7.0_1657226340893_0.9085914068861003","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/menu-surface","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.02ecd4d85.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c958b6bd109574f02b2eb40239d38fa48a630d08","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.02ecd4d85.0.tgz","fileCount":37,"integrity":"sha512-Ei2E8j59Q713iT95RM99B57DBhhotDwYGGM6U1/Jes8RLBBoeWrobx2AMZ/Q15PxexAyI68t+JDQx8lXyu/vqQ==","signatures":[{"sig":"MEQCIAf+UwaOpG7obj5nPwl1agu/HI7cdfX6a1oV6bI0qy77AiA2AHjzy/26TsQA34XU7AJc7pgiVT4e1kd5uk4ZbHmlHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFJNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpkcg//SlhYEAg38+sjn0Xxt3pnhujpc6crlUIiz2P2nx0ZcVbJZzIm\r\n20FAP3Xy+FAQO/4xeY+qH5x/1N+0XI9voip92g0UkOzER3XwHfA4QLrZOyk5\r\nswrXZsvXJZ3w2eQsvbjRGTlZVgAYlpMZ+OAfWfSngFVnaITPaUIm6I28q68Y\r\npg9KfZTpUojk2S9BJA7V59E9xXtMbtZQkN2Y8gKkUvplADHXRkBd5mGVeMu/\r\nBKz1w1LWH45DYEmbUVVWSBDMWNHn83FnuLDDGDDb4CamePtAoS5pSdconwAh\r\nz7jKwhI4SKALWzf4qLk1+Vi4uUmxJU/uvFeRcefZ/fdvwUXtn0287PuMPTdi\r\n7H1/N3hI2fefXM/ZcXUihViJ19qyhqp5/OBllExpai9qFWwuVTfGAJH+xJGV\r\nCgvJK83ssgL/sVYO8vbzbg9EY03rEiDlybd+OHjvrhz99aMTuB+8UWls4dC7\r\nFviNJw4nVNXpzf0rrzGPioV5+KSWwH3iYhEfPBYh7l/wnNLbvJVaJNEfBjOG\r\nKIi+buVaslRxUaupLcOd+qQzMQjNsm3b2YgtzS0UcAwxjApvDq2VgmOYHig8\r\nIcGx3hAzJSmLQ80ziydSwrQOi0MXPZDOcKmG2FL2s6hAewNSelK4TviAZhvi\r\nz9Esj5sE0QrnCY7Q48/VlPG70hHeaJfnOUY=\r\n=NPh8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.02ecd4d85.0","@material/base":"15.0.0-canary.02ecd4d85.0","@material/shape":"15.0.0-canary.02ecd4d85.0","@material/theme":"15.0.0-canary.02ecd4d85.0","@material/animation":"15.0.0-canary.02ecd4d85.0","@material/elevation":"15.0.0-canary.02ecd4d85.0","@material/feature-targeting":"15.0.0-canary.02ecd4d85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.02ecd4d85.0_1657557580911_0.723279629170456","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/menu-surface","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.63d3a146e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc66ed0e219b3f6ddabc080cae21e071003ef12a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.63d3a146e.0.tgz","fileCount":37,"integrity":"sha512-IlrOTn1t1dHUEVV5pDMvh/htOZOT+F8hMA8U1K9EqYZ/QnY80JQCCNCLbYjeqmP5eI3QzVnlJBJV6jjeWw333w==","signatures":[{"sig":"MEYCIQDJNs3uxSaGOQLkQn6d6gO9fjB9PKSU80KC8/d1rItHzgIhANa6x+ABXsopR/AMgns9RZME4X0enU1NgfbKSDo4cBzr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizVzlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdEA/6A0KtJg0IzOuHPgitKYo0JdlYJxvWoOJr8rrTCJmd2K4w0OiV\r\nLUutWV4FfRGteQXeoPmbtdESe+6rMIc2pFvJAhiCGEQfZM/t/IPb/8LInGa5\r\nu4Y9Uztv2XFxJSqRUjyua8gpQewaokq3yskNbDx3skqd3hZZ5Mp3QeH75ezm\r\nvvDI4YlZxtk6KneWXZhaN0H5vcT9RwQwnJu0zUv6MuCVh8xIq0owljQ+eqRO\r\nB/pqufu+LCiJD0vhsEnmpp07d+OakAXzREltuyqYhwP3f2v7GEWXTfbvAf0z\r\nRGTpigG0CKfWwAAJPR1W+YR2yq8EZCLWRVIQaMA2nJcloy23+g3jIsgQIUvW\r\nWs2seIt4B81dworEIZ6gMwEQh7i06erqd4qwfzB/Geo9jtT602Q/TpmIU1SC\r\nxJY2kny8ikzmlsqSxPUyEalbFvtG6qakQKuOBWLjZSqotewLajaRXjJd3YDa\r\njTKGMIP6ZOYyoIaPVr5JQQGEV/UQTB3LqyEaPY4/8+sMrRELvPGGNLgzaAE9\r\na677nCr7Rh1OHUWXkFc/G/7nzbHnoo2uVAvhzqizAy8bZA8wtrmCoqvNwjS2\r\n9tAmlSsgRLvMQw+6nUxleqyqO8P1AP0giooLdRJsU4DtrmwSvtY39a9+O+iM\r\nzeKtH8x53XucrpjMNiofMoz4pLg/UeX+vBA=\r\n=Y7yH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.63d3a146e.0","@material/base":"15.0.0-canary.63d3a146e.0","@material/shape":"15.0.0-canary.63d3a146e.0","@material/theme":"15.0.0-canary.63d3a146e.0","@material/animation":"15.0.0-canary.63d3a146e.0","@material/elevation":"15.0.0-canary.63d3a146e.0","@material/feature-targeting":"15.0.0-canary.63d3a146e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.63d3a146e.0_1657625829118_0.1264407723376093","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/menu-surface","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.88db01990.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae1804117817c3b635c8d6f7852fdd7b43c4cad5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.88db01990.0.tgz","fileCount":37,"integrity":"sha512-95LIMLj91LxufD+6+TU4wOWpN8LM0mBlHfufkLmygG0OUQljCtSBKrG/2pPyTO7T0m+x0kC+Ec/oefZ3ifen0Q==","signatures":[{"sig":"MEQCIGBewy2w8NSOPx1IaAgTJcz3S9p90yr6FAcM/iqpm7QFAiAxNhzHn5vVwmcIxOwr+1x7JSKWA6fAQuTsjtfu8AdhGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV2qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbsQ/9FejPBiafTGowD7780Ktm2/1CIuSqUk1CrUKoEAw7W46MZ0Ct\r\nB7/DMirN8X+skkQqmJWLqKQXaZABmD5dcyINysaNVP5XILBJ7n15XK0d0iAN\r\numygsQcARIBuhZqlt9fioU0fVbT6JiYCQXbRBBhcV4Ep69eauxYdhtEMRxCV\r\n8di2u7g+KInDctqHlR6uLbeYBfblnIdomn9UFI7t37oqikdlMYybX+aEqEwP\r\nlgvnIMQT4ZXvK3Xu1PWRNJOa4fzSpEOkYfC9hqtNNfmoeAgku7VGL1HEcTWy\r\netMhLpOaXyhco4LAOavZBDflLho+1B5Qv6T1UlzfeiMekKvEHSsQ+CmzDnUx\r\nqEZMUtRzopTAD7o9ypdmrBt14WSqCQv+gws1SYBxNG+D+luIVTuyvEYlimVB\r\nfJXDnolu2nkpM07WhnrvhgLtLTd9rJUC3NJJRINVO0UV6WC80n551gnfrseb\r\nj79ZqfkaN+1XQA4xDzb5EIGw/lzwS6w2T087Lmo06bXAwWtZeWlA8FvaZFQY\r\n3yAXWBSopJojNaT3ccZDTBHvUaNvb6+pjZLAW+QKD/8BwWf06j3kXcESuHGS\r\n2PCB/p5l5xc9lTJ1QCeU0SPpwKlr1crdcIUAv1ULyCswtv5CK2r0tguz/iWa\r\nWg/LkO9BmDxznrlaCCyKQbCXvbFZeRbmZOc=\r\n=6BCc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.88db01990.0","@material/base":"15.0.0-canary.88db01990.0","@material/shape":"15.0.0-canary.88db01990.0","@material/theme":"15.0.0-canary.88db01990.0","@material/animation":"15.0.0-canary.88db01990.0","@material/elevation":"15.0.0-canary.88db01990.0","@material/feature-targeting":"15.0.0-canary.88db01990.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.88db01990.0_1657626026161_0.9042502369751131","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/menu-surface","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.6432d8fd7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cbe4c01ca379be59b4a91b6f97c3bf91b5ee8b7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.6432d8fd7.0.tgz","fileCount":37,"integrity":"sha512-obBigOG0sRicJ9v2I8iV8qfd/iu98iA78VX5hweZKMjhCZgljbkWILMmdcCcoLOf4ssZsGKUxquOEGuKyBPXIw==","signatures":[{"sig":"MEUCIQCQoAk3loEgeDbi2fcUWTnsRLbHcJxKpRSCf7iIFg8P6QIgOEWLQraux9O30gvMDMsVk6jxX+buGXe7vRZeSWQqRqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8XPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrN9w/9E5rwgLxvkG0txYLHSxxukOUFXSrZKrwKhmQv/tRntEE6LwkI\r\nMwHVIH5wacjNH3TtREcyBqg5D+DI6IFRZ4sfU+CfQyB5uuFpJNIommrT2Xct\r\nzUAslRwprVkFgS9swTaKve7ukYSsivitsEbea1lvJsl3+eQNXMrpDWoDaNkj\r\nIopzUdFav5vEFXonvmDrNnF/dfMXHcOl0SRW6faa9pQyqW96lQ+sv2Ti82Cg\r\nSQFKgPhssz9tZqGXavU2wS7MxcZW1N8mvlVfPEepCeIfSpOq/ODUWDPJz/2m\r\nrVIAQHnCTNY3YAxNJcV0lUFEDZ9uLtd8RL583Msz4JMCGNGVXdgSFB8EclyA\r\ng9Mp1PITTo1ItVlgwekHC5EVt7bdFeG9Er59nvyxLIvWA7Z+D0f7N8iY51YP\r\nmfHZaJjyFjEcgo4Y/8Ylr9bQ2pJGSL4shvmqFBCWTpNhQZaR/GMHg8BvLg80\r\n92+33wEAlwqJmz8+WLM1o+wrY/3EbcdSxPGQSscaM4XzME2Q1f5PyWoMYHvQ\r\n/mqaPjdrJ63hz/nGiIiocq7lbFX2D3zz+D9btLL2jF3btfUdc9fI5wIJSoku\r\naJyZQMOCPS0+oNOpiMTpyjbWnCHEaAor8/zdfbDegMkYA7tMhKs6X0Tkxvcz\r\nFGeGni+vyBiiwpU0QQdZEPqK2kFl1kcpdqk=\r\n=k4dD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6432d8fd7.0","@material/base":"15.0.0-canary.6432d8fd7.0","@material/shape":"15.0.0-canary.6432d8fd7.0","@material/theme":"15.0.0-canary.6432d8fd7.0","@material/animation":"15.0.0-canary.6432d8fd7.0","@material/elevation":"15.0.0-canary.6432d8fd7.0","@material/feature-targeting":"15.0.0-canary.6432d8fd7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.6432d8fd7.0_1657783758742_0.591671602483955","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/menu-surface","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.085f9b25c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6e61d067368f5e946535e18ae0863aaa09b47cf","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.085f9b25c.0.tgz","fileCount":37,"integrity":"sha512-A4tE6uuch9dLI4ENyI8G6ryg53ZophZFeqCwA9OBuWpLWCJWLAMjV2GR4bf4PbgWGnZd0c7HooLKPeGyvt5Iog==","signatures":[{"sig":"MEUCIQDVzBRoLkICWrP4OxTRmrcZvo7dV7gW0oGmuI2Y6HLLiwIgGTxJLXYmzS72oRHJcd0UqeNMuYplnKMHq/Ukif9xNxk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EXJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWvw//aVaAwLHrihpkJVQGYAGyKZehua0QNFF0uWbPRaiQb3aq8KeM\r\nVu5TfJ44ODcVDfGsuVhJweWZMd2w4UdT+7hqR+UoO2YmveFmHRxcK27EhscT\r\n1HJJZqHxhK2yvYkNleRGcJUh4nEMAd4ZBSpDg3X+VxDi2epLSs1bLyiyQqdb\r\nYTEw3tfrZ6pRZ1JdhC6JN0zFluNZ02clwB1/YcOsNx0q+6AclzC4pYKPkC2Y\r\ndTJvboARtT8mLjL3asY/t+KsRz+8XxLPa1jIum+5YldeO7EyCViNjk2GDFe6\r\noY2dlQ7qxykDXrvp8u5CPuXPWWa4ds5+b+p2aQ5ixWrk6pDjrfemD7ClvPXE\r\n5Bhv+fRzK1oQj6PncxSf/hhKa02GCj53qh1+jAkWsENzGIskUkifiaCWsUuj\r\n2dWjZ75C4qzEGeGtYb5dq9+Mo3zljgHWlP7B3ZTDWhUIV7hcSmPPhF2EOTnm\r\nNJoPtXEnlJdy5ggP2R/RrxhHUw9EoC0AtLEOGYjLCUuruEaoQllKWXsWHBOr\r\nxBwvwbW3msEUL89+XKHaLTH8GgUDpauHuBEkv9FyBlOUKYkVYAIu4J9YcxcG\r\n6ACrUB0pS0z94I7s6nik0wIpZb8s6O14nVj4DQk9ll+/JVJ4OzYtnazm8ZR8\r\nxoo5bil6OBrrM16OIyVp7EWOyXxWJMY/MiY=\r\n=9plD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.085f9b25c.0","@material/base":"15.0.0-canary.085f9b25c.0","@material/shape":"15.0.0-canary.085f9b25c.0","@material/theme":"15.0.0-canary.085f9b25c.0","@material/animation":"15.0.0-canary.085f9b25c.0","@material/elevation":"15.0.0-canary.085f9b25c.0","@material/feature-targeting":"15.0.0-canary.085f9b25c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.085f9b25c.0_1657816520891_0.9449473110937818","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/menu-surface","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.39f9424b3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"571a9cba51bb740c6539c7007cc19b010bc7374c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.39f9424b3.0.tgz","fileCount":37,"integrity":"sha512-31kNceaA5r7iqXkfH0VhV6XH6CUp1dvIAkZSOPfg/04rabo2mVZm6jI29+kbgx+X2HG4WGM9o3DI3J6SfCiA8Q==","signatures":[{"sig":"MEQCID0KbX+CaSg40PdmCUASQsJ24/xvB/+foHDN9NYCsfD7AiBSkTibzrMCDOAu4Lo+q8RwPekR01xDCCDEGWOfAVIvtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EzjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnAA/9ERTFjLY2yJc1ggCogOHx1azfm1grLTdTsJUg8al4SPQ8FY/K\r\nCrceDG42qN9ZbCq8oRWrt1GI9lPiXnnXBi7g/NsgfttSMIXw0HLcRiWSPJog\r\n4mrjinsmszrdWW/FRdjFTVi7/t6H55rd/SeVn9FHzFZmUcF2JieTjbq8gUXh\r\n+plTGeIQeY3De21FYhFsmk/A9XY22pOOV6vB4e4F0fl3nh8k0ggtfsqkn2Ot\r\n76pQZKs5G9krBhaqe2vnALzEGZb0cIjme6zM13ZB6Jdl3h2Z4eB17ocb20WS\r\nQchH1gZv2IBy+kUN+2xOWd+v3ZLnII0OM9Ap/LKDRSdbKIQrfnE2/75wUk/1\r\nPMhKE1QVg9XKYvQcXE9cZ9D1k+gmiu8uqXABc9C9uE8SiZMiEPFl2eRG915d\r\njF7ekNHcf8jnhiLmIOfVOUz1GVKSxXuXLfjAevmyGVZ/1qux1S++0fryzCzP\r\nPM3PJ1wbDf5UxBtdBMpquKpxRh4BIvMvVulVft+1pC2UijrDbC/3l9TkNjw/\r\nnZGkKj+1gZ2i+mqG8gZGj+dVaS/sH5qkhH4JJqoEgBEH3hlHsksMvisy0rpa\r\nr0jHPGO0fUItA3M9SBxkHeAQ04VzOLjB92jCLxQr79HKBHXTi46p05BDJLO1\r\nGiZCMcLR3d7AHtG88CU7HuivhhLu1fmsEl4=\r\n=BLz6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.39f9424b3.0","@material/base":"15.0.0-canary.39f9424b3.0","@material/shape":"15.0.0-canary.39f9424b3.0","@material/theme":"15.0.0-canary.39f9424b3.0","@material/animation":"15.0.0-canary.39f9424b3.0","@material/elevation":"15.0.0-canary.39f9424b3.0","@material/feature-targeting":"15.0.0-canary.39f9424b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.39f9424b3.0_1657818339013_0.6260795906590235","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/menu-surface","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.ae9fce587.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a23d35900a0d2ef2318cce9df0091c5f4191d920","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.ae9fce587.0.tgz","fileCount":37,"integrity":"sha512-+HD23Is5+7+pdzL++g1xdT7s9K8+ygEI8U1c5t5n5jmeOIYUuBoj/mXR1Wimnw1N1JPKWFHsggBXJgGJ4uD4hw==","signatures":[{"sig":"MEYCIQDYgozFZsmNXc5HO/0yV6AiJ0tNLQXHimS6r14589ly8QIhAOtQz4Ean8GK3NZp3dcQcRskNXQmphIM4FT7hHt4LFH5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0FucACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9rA//TTqmOYQ1vzbLfdex+t+rrCjAyHRal205jIoF5TrHLLDFtlem\r\n7Aqd1zc2U1LUDgsah8Q48kOwEO7Uxn+KaFgw6G/TrX2XGIy0YM/FNr0z394y\r\nkGWxtz2rCsDIQDJ4ekSGnvxSzFr5OEK9iI0tjwko0Ne3Wo1VHsg9bMZwFRTq\r\nbarJe6Ccqx1fYi+B59uvJPLvryzCsb/YOh2my84mPFipKJoqvn2utVgxJ26e\r\n1lsh9OqqlKTEyy8RYzpgPK/fMjEA2ijeBLGYzQir0qpEu2f+HcKX12+G3Bwa\r\n1/oJnAIvvECgEHbZ0Wv02bh45SoWoEIzZTsfm3BIICm7gstPlGo8L3XJIlw+\r\nOi3EIQLIIVb8QPyE1FnfBc/Vx05DvAMWNGyLfn4Vho2t652f/DCUJhsbctkS\r\neKH+plKLW/Oo/QBzxtUVpJgxeTCCxZhm8G5P3NfK8V997JhVHE+QuFqoMtFL\r\nLi3b8ot/TM9r4mH2whSKCNl3ub3a3+fi641TrUeEXHx2cjl0ks44A8C+Ibiu\r\nsf74oLInFzDe6Yy7IMsA9ULoun6E5PJPE07ed/2dYcZKidFF1uqbizm34jZT\r\nXhEGhAl4rxVvIIwwaCXGJY9QKbMxZ5OGJuO7FtRqD5maLW7Dy1RWQfkMk/Lc\r\nVRx36qnQZGO91qu2FOwuLlx9bLp5Xxww6wU=\r\n=lXI4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ae9fce587.0","@material/base":"15.0.0-canary.ae9fce587.0","@material/shape":"15.0.0-canary.ae9fce587.0","@material/theme":"15.0.0-canary.ae9fce587.0","@material/animation":"15.0.0-canary.ae9fce587.0","@material/elevation":"15.0.0-canary.ae9fce587.0","@material/feature-targeting":"15.0.0-canary.ae9fce587.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.ae9fce587.0_1657822108612_0.6780551034755273","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/menu-surface","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.1ebddc343.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76a8629d838706bb0ded33e91885572468b6ead9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.1ebddc343.0.tgz","fileCount":37,"integrity":"sha512-c8yep8YsyaPCcpCLdDwyvhzO19r/4LYefkzVibzFXKT7fRYFLu7cl4EPi2QessBp+3O2D9izYXdMPFGxXWAIWw==","signatures":[{"sig":"MEUCIAFZEcN24nYFudYnOZOTWugPCPIGMwlVVzxzGqfizR27AiEAoPemdmf2GwFnO4QCJ89GbWdYbgAaIP4Z8ODomXjaqdk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0SolACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrEBAAn88NWLYMuUFh766STbcmaig2pOhuyNMA8gOn/swILabPHPPa\r\nZBiPirs9KiRgFpftpJ7W73euV8aZR266Iiu8YDwn8RS6rkDXMkXY5XGzXeoM\r\nDu+8NTB0zusmt0law93IeCijcV7Jr7T7tgLD/46/gHcMrXw00RhnsUXDQnQ1\r\nLfinIOAS+R3To6m3iJjmlxkvKlalJW2L0S1R47a9m6AkU06tuHI4LYdQ4OVg\r\nBw4PImi6uWSXGrEB4SzhwrJvB+7jG/JJV8eR/G25Sah/faEgk6Cb4ys0AtB3\r\nLCFZxVH0lqGsNAfGCr/eqmTa+n91qjcz//NRnIPL+7wuN9aa1p+QZONHH1hi\r\naAwzUsaCDjnrwsOdfUuUPhRp1i/Y14dGmtM6JMJXLqL9TBZhWW9urQ39lCK6\r\nHUR2kq15Yi72Sm77tF5bl/fam9sFkQWSrzmdpKUqOtCKLXICIo418WvV26TP\r\noCRgb6f3Uz8DOh0ngM8Tc6FZUnloL2Bb2TjvRgzGD+rScrRpM9EpvVdb8Aow\r\n8aZY8slPll6wBJJN0cNU1rsvH72TbkR+PuM3xNtCStcAIncQhxzqz2WamgqC\r\n+CwVoAIRlyIHEAE+saSL95UYcIMfcZqfaTNdWl5F9d7AvKcLfnW3iYfdJGSB\r\n89z408iqUXgWnv3Nq/xJFXf3xJH5iO1+O9s=\r\n=5vwy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1ebddc343.0","@material/base":"15.0.0-canary.1ebddc343.0","@material/shape":"15.0.0-canary.1ebddc343.0","@material/theme":"15.0.0-canary.1ebddc343.0","@material/animation":"15.0.0-canary.1ebddc343.0","@material/elevation":"15.0.0-canary.1ebddc343.0","@material/feature-targeting":"15.0.0-canary.1ebddc343.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.1ebddc343.0_1657874981561_0.4610424311891037","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/menu-surface","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.c5018840c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f23980be4f1eba6a66d3f3c64cdfc508f200f647","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.c5018840c.0.tgz","fileCount":37,"integrity":"sha512-APn4IUb4OxI10hE9lJPps4n8StPp8oFvFrPLg9pzLBAJ3wah6u0LslLnTRd0sxny9ZUBgF7rYj05ff0pEBIJkg==","signatures":[{"sig":"MEYCIQCfvyu+3UB9zHwPlxt0PSlmu2wvwwqkzGvsgAUY7cGUWgIhAITk6gcqImjGHaOGquUQ4ZbOh34PnfFxrQ9bELQ6f++O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1StDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpShg//SE9BAYDmu/rZjYO4X9TVcNUKhkp/peRrT618cuT6OfxQ7fdn\r\nZID0FsJh625vWtw9l9m3I7fYwaweYW+uRevp1j7c0r/phuSx/0pf3mHANkFt\r\nBYid0vcwMv3x/aJoc3+rQ6xEjLfjMmQKoTAXOxPupW7sfMQMoSY/MEGaJm68\r\njcKDv0H8Mmo0TAB+NQHWyLL7senPs9UkVPWlRXKsBECyBt92gwX9FWfAvtn0\r\nK736V70VugX4OgLSiR7C6v1QXauH9wLm3d/F7RTut+u1AZnaPdsbM+i3yOp+\r\nHNHawnDq2X4x7HFDXyVhMvaCMxK/D7q2pPH7aE21cqtGPoycTUpRyU5450Yz\r\nzMCBCxzrPWJ+s0CHLLizRlhhLKXjIsF481vSY+dncRsqLQqwO/Tz8SX6+Nq4\r\nJqmOjvLPJTItm+V1HNsLXJFwxMiN4MFUwdYSvvDzfSOziVsjP3PlHsNw2iuq\r\nCw5VvzfCVAK3pN1AKNjSXOBqCZ4FpPV1jStSHhcf6OBdQax1u0zNCZJ7A5Ja\r\nUxcxQ8Pp5EmvtXDk2fe6B8oWrGBtxoYFJjStEnZvC9A/517pQY8lp1CVAwbG\r\nhYOf7MuvWH19y7jFiLrWBvjrQ9LBXEe5a+G3JGJh79/0heTO6wOujinZqoS/\r\n95Qbyp3CoLLoXZXwwLAUYfV4+vHWoWkhm40=\r\n=nzVM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c5018840c.0","@material/base":"15.0.0-canary.c5018840c.0","@material/shape":"15.0.0-canary.c5018840c.0","@material/theme":"15.0.0-canary.c5018840c.0","@material/animation":"15.0.0-canary.c5018840c.0","@material/elevation":"15.0.0-canary.c5018840c.0","@material/feature-targeting":"15.0.0-canary.c5018840c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.c5018840c.0_1658137411368_0.39602458191906775","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/menu-surface","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.551b40d18.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2df4555551c0e8a0b8d49e6233a573565da557b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.551b40d18.0.tgz","fileCount":37,"integrity":"sha512-8U2LYDmpecuQY6jxpKRjuO8VJNkNlWnnom9EyqnZ5s8jWA3GiK9O7L4HBlvMiphcrajpR1NJTdA12M6sG2aSng==","signatures":[{"sig":"MEUCIQD5TiQxgEBqVInbbS19WLeAH6TGDTNQ73wrA4l0gKSdiAIgT/bbjTjQqvpSDqOXlJ+vNlUbLu/32aVGdP/5m5FPP/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S9zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2zQ/8DZvjKUb/xj+qtMpqsfU96sGhNzHIqQ8yHyncqWoRqTVes4+X\r\nC1sZvWmn/tbnzsVIIkLkmlLZospq+08iiPxL17rfY1OL9xd3/9nDdeAdYz1i\r\nD9c9thWanICp61uzY961ONJ0YiZHuJom/wvAlkDSSR/zCr6qyt2P2v4xy/rn\r\nuwmu3RVbmZtBPhPba99qKe7kJSc46vzGfHh8MCNhj0+Mf7ESHt/FS+jH67bg\r\nDqdurvUsfEM0KmjUDOf631RnRiCXvZEthGwCMOWmYbucJOLEUvQnWBUhYwcs\r\nG7yWTWe3ynpYG6XAlpTK6odXRmE1yhn2utn6rKs/gXWztFXvmKzWZ+dtve31\r\n7lBcU0l77WkxBNwIZyrZwi7Ukbjpw5lnb3ylhPdkU27Phmq101phSt4sCx5z\r\n8uAMmLZwOq+tD7Ih6hhkAK2Z0zBta8E13T/kZ3H0xPXqmLurUuUicHk93uA+\r\niXgzvvlUCTI8yuap+519mwM24vvAQKpctiGL2r3jMGvy/gJbagD5jNZQrp4d\r\nS+QCNWBB9thSqDrUeMKkvTTzuwHIJ/g4xE3Tithds55qxmNtZ5buKo+wdBK9\r\nLBsOYJA3tWF/Io/htUN3kdpvqy7IJCoKtzRaVucL//CZnzjmP5NBQLbSUtin\r\npMZeCbjaJtzl3y//uiB4P6ke6YvYiwFXido=\r\n=MOqP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.551b40d18.0","@material/base":"15.0.0-canary.551b40d18.0","@material/shape":"15.0.0-canary.551b40d18.0","@material/theme":"15.0.0-canary.551b40d18.0","@material/animation":"15.0.0-canary.551b40d18.0","@material/elevation":"15.0.0-canary.551b40d18.0","@material/feature-targeting":"15.0.0-canary.551b40d18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.551b40d18.0_1658138483749_0.12386390780896028","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/menu-surface","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.cf9f12371.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62328a1b5f80fd23ae435f06a25c7bc8abd22b21","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.cf9f12371.0.tgz","fileCount":37,"integrity":"sha512-t4j0aW+qZJ80NcdsSypExN6OBqYGqCVpdIgbduWEn9Ye9QZhmZhRq0IXPV9Y6CMT/j+HGG+eZU5Hd7bII5Wiqg==","signatures":[{"sig":"MEUCIQDbmarj7gs/YTgornNRSDbZlAhhMsDT/LIF5ClzIlbu3gIgLVKS9MBzJaf12r7r/fkHWs7Hn43WCga1pOA9a9AxNWw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TBkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3Wg/6A+Z2B0KzVzQHcdFp1OiK/abyBqaaj6Hxmyrk3Yg7IWn7sH1x\r\nZRaKzXCvvSGRsY5nU0j8Jbxnznp8WXV/1wdFB8tNh/+hgy83yPHYGPu2kLAJ\r\njEc0Y3+WPcsdL7fsw+SvN2XDbZAxVlMqRCkJUOzxynyNNJl7LO+RLldCZ8vi\r\nr0OPT3hjLBSuB1nW7XR+hGunEKid2fotmrOkwEPv7eCVtz1TYBJqHEyTofNK\r\nIut77ZJc3L+40t5Z2DXNSxgfoN2ELVTwRTNZNEjUW3MhLKdDMWW4CemoYByC\r\ni7CNFOI4lQIEq9Qj32f0Hp7vpwXSJ5fF8TbfSJE8xCGyBYi3yg6z5FJdBgQd\r\n5ghYKlnUuRBcx8X6UWJ6Yl1mrAWvsr7ENBF40OKgDGrpBdRBwxkMCExQv+Jk\r\nRdqiD6P0PteQt+B1uwlu6sXRZSlA53F8bB4AQuXmsGohL/XQnrcRDvI4jluV\r\nAWomjK2qfMx0/lekvZtgTHvSu0rEsKII2/eBJSvu95XQyBo4eXC4A5vF6wRZ\r\nAiqdQZYwm4/5X8ROMBchzRvirKAHy46Pm1CfjE0L/V9TXJOymC2bC4qMlsO6\r\neqZ/xZ7Z6bVAE5wCSK7xEhIT8rPIQxG0Hv6W/zbmsPnc2IaMwziiU4XQtbSW\r\ntYMszCZb39H6H8hVaND4G1h50KrlbdKRqUc=\r\n=drZ9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cf9f12371.0","@material/base":"15.0.0-canary.cf9f12371.0","@material/shape":"15.0.0-canary.cf9f12371.0","@material/theme":"15.0.0-canary.cf9f12371.0","@material/animation":"15.0.0-canary.cf9f12371.0","@material/elevation":"15.0.0-canary.cf9f12371.0","@material/feature-targeting":"15.0.0-canary.cf9f12371.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.cf9f12371.0_1658138724267_0.2885149908830742","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/menu-surface","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.2797ff8b6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be9855cf7a6570bf51fb5917261e7ce0e8f7f84a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.2797ff8b6.0.tgz","fileCount":37,"integrity":"sha512-P5g0KE+yPzCwMB8VvHlhMBdMa6IUXMHXPICAFqK9lgDn6f4l6VK9zh5aJyiwHr/MapgaIK+v9rAvE/d6WOT84Q==","signatures":[{"sig":"MEQCIB/Jw9z41lVB/TeCzyFfmbvK6kJHxZC6kWPRi5z3b3WjAiAxPb0quihEHQ5DM+yb0/YUedr/qYvDcOgeFWeC60LTXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1fm+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKLw//XY9O1MeRqWyUMUOwfi1FHOCiknarPn5EY03KZFEumAmbsVsr\r\nxILROI6njP04OjKCUoCro/L/BzqG8SQEA6iiOtGn3gmaQYwL99LFu78qYLV7\r\nF0p9xbKYeiFKN7FV7p1uPKu9q7bmGd/+37wnfGka8cumbe5FVBHkmj0Z0awo\r\n1gZ0GaGbfJDPjloghUf0UdaX1yHyHb/ZPeuE559CVe2mjFeq8NqovrwfRM+g\r\noUBah9nWzr/syIjZVlcyZtrP8vaLAQA0vl//aPwLqgjNIirMXoQ75Vg4Z3cz\r\nZs1Ez5tcPnhNchoDQks6Oc54R6xDgcI112HU5XLeQGw9nr6bLD0vVU/Je/tV\r\nA8bCdS1P7Wa8or3ip5slTWd4Xrz9niQ43aEglqJey7RV88Jtqn2FpujnkHhm\r\nK1XUo6AJKCx2utL62bUkao/MQAbt5maxUcyuSB1GGzQTO1+aGeimH4Vz7KIn\r\nOa2CSCH5qTMvueL3TGgQcEaZgBDvJiJZ5LnGhtcal5v5Iiv9hd47t+Ftnp+v\r\npB6gsWCtoPUxqAYxDgm6GrFEoJST+cde23a6810OJNLk3/nCnlNEfVCOQW8n\r\nYVdQcScPAMs9o/+nC0SHqwys4QHGmOv90+uUNbdXrZ1AjmNGLcTic3coz2YD\r\n+UE07rgg40yS1CzcveR+1OxBhYRwDvQtTnc=\r\n=+oB/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2797ff8b6.0","@material/base":"15.0.0-canary.2797ff8b6.0","@material/shape":"15.0.0-canary.2797ff8b6.0","@material/theme":"15.0.0-canary.2797ff8b6.0","@material/animation":"15.0.0-canary.2797ff8b6.0","@material/elevation":"15.0.0-canary.2797ff8b6.0","@material/feature-targeting":"15.0.0-canary.2797ff8b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.2797ff8b6.0_1658190270456_0.9360069132614297","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/menu-surface","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.110fafa17.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f1db05d571e942eb8c38ce6e7ab03a02093994f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.110fafa17.0.tgz","fileCount":37,"integrity":"sha512-kA6hHbZadrJ7wklxa7AaDTJOyvrG+qjZrZPeSIK/dmbqlXigpIzyftQR0ydTpz0cY0/3qfztcPMUv19cIb5+CA==","signatures":[{"sig":"MEUCIADiByRXlqJff3VJWFqnWzMq9Eg4nDZvISGo1Uau4oebAiEArt/6I4mH+IgFBTftx9skGW5bFOOAiisQq0KaDkc/rh4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17L1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKcw//XRqWpxy5dIAhHMd8EeCI/L+btbS+bXHiR+tFSg+DBAbBvrwK\r\nd6juFudQci9XSpUlAwmEOKtt3lAHjqUaxUHD8Ddxd/sXNY1GhVdmO2FUSGc4\r\n+62ZUGTjWdfWR+efutrOeFMokllebNB56eIlJgkXTaMuomMfDgeZzsKkaNVn\r\n4uvc0bS0zOXVsCNl3iLLR5OHb01x5nR/ojn1Cs30H08RgOSR9QnNCMYRMV5j\r\nh7eDFSUtgTdYk11mjnB9qEuzIhbfd2BbADcz5ny784fJsDNhri8OHoHak5QY\r\niAE1A8vsdGBrXq4U8yexTDwfALMH7W09dIJR/atOumnG7Q9IoO5ZduP7KZ7B\r\n5NI8Fp5ToNdPrxiLoUlssZA2CuWSe4mFgQaD+faycW3REVHhzFd/iWNWFOAv\r\nOtKE+d6D4wbGxFeYEGtE+jAPntpl6r9e5s71EnOvTkXVIyMSz6I8r7rRe/TE\r\nqBWY8LdCjjCwkG+C70A7A+n4C1+W27jGBSwOrsnCrQZYN3dw3CX0fUnUlTaR\r\nosoHq89yKjsB/k1a5157dZMxbt2LFF382rG++d/IVNh09Z+LiRwwyZpZ36Lv\r\ntrHR95pC1K/OTLfLx5geeJo+Ex+xXlWaCO1VBIMvJF/aimDduH00PwVDQxzU\r\ny3OPpVOjwPGOZigQbUAk0EB7spv42lNKLlo=\r\n=IE45\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.110fafa17.0","@material/base":"15.0.0-canary.110fafa17.0","@material/shape":"15.0.0-canary.110fafa17.0","@material/theme":"15.0.0-canary.110fafa17.0","@material/animation":"15.0.0-canary.110fafa17.0","@material/elevation":"15.0.0-canary.110fafa17.0","@material/feature-targeting":"15.0.0-canary.110fafa17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.110fafa17.0_1658303221189_0.4260342912514923","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/menu-surface","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.386ef1d2f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d458ceb5611fcdec263b5748b5c24c66a01dc7b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.386ef1d2f.0.tgz","fileCount":37,"integrity":"sha512-tV5Fu3Z2zqau9hbRZ+LfeniFmd2wtcIrvHEbwQZ/iFghzJ2r7f0zaDtg+JuL8IdPhUV/rwwlsh0942/l9Hgr5g==","signatures":[{"sig":"MEYCIQCOp0NDQB/NIsY88fZZLUGPFGEcCq08frmUBYn6davrNgIhANUJQDieTPWPwu9YvlhGEZGXDu3uJQSFpiRJqUmXyQJa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EdWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZfQ/+PF6uHWq06Wds9yx2AgZAKEknoQZDWUxjtaNUHUSaXecGJuNp\r\nUWsSNeAH1ransxk3Cwd4KddN6CGqLYqE8aVQQdgwFqMSGTz+P36ZtgCK4EkZ\r\nZ7r9VnNpH9G2nfT0ZsUMQueSPrSsVu8lxpgUtE8bXEL4oKvK+FGczNLLv0KU\r\nnwEQD6C3BtD1yo/IPSccBk+VMQBRc3kiNwZonBGMegXUd7UtebBp+9fgLpdP\r\n2hgs7Fj/R35iyg4bbR+7tJ4rVLtrIKYoba9o7BymEpWm3qKkJAA4HJdeEGNJ\r\nRrZ2ncivAwu+MAMggijSnmEavKP+KPrW2bnv+l3wwq2huOqITtbXaWncyT4g\r\nDwWutSabQdlpesu9FZHuSCTTCsRaE9hKBMgMp3vr8j61eMouUhNSuzf5hsvi\r\nVPaDw7HV1k2CBa2qs5ZqKDYQ2VjbNjB7PuelUiuOUa4gCzaTu7kArHV9JXtC\r\nu7vo0C9HkXy+0NYD2jS52MUIAKmczuShdkzonD3nOQERq1WKnRyoB12SWe5H\r\nJ0tgywURaxxfhL54AGhpmVJcDMnpSYb24uEpMSlimgrNY6AIpP2o8A7Cw578\r\nePyPY45IbT+FXIw7EMvtLwv6OomWIwezkrRvF39Oj2QKAfF4u+hi7Vt2U/6N\r\nCxSNla8jO/euTFex7bfw5XPRHr3OadqLYHU=\r\n=6Pne\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.386ef1d2f.0","@material/base":"15.0.0-canary.386ef1d2f.0","@material/shape":"15.0.0-canary.386ef1d2f.0","@material/theme":"15.0.0-canary.386ef1d2f.0","@material/animation":"15.0.0-canary.386ef1d2f.0","@material/elevation":"15.0.0-canary.386ef1d2f.0","@material/feature-targeting":"15.0.0-canary.386ef1d2f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.386ef1d2f.0_1658341205804_0.9456621712837598","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/menu-surface","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.c3924efef.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e3a5b9afb2435d109b8020660f220b372291b91","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.c3924efef.0.tgz","fileCount":37,"integrity":"sha512-aKV5ybsdZJX7saqxlBpUktE2vAEspEA9sOTRBI+R4+AmGXpjrCB5hMm/KMHqxI42IIDxSz8irSxIIGJcgq4leQ==","signatures":[{"sig":"MEQCIBsUQOfIpsvrXb2GsekXMa7e2/nfnAAIsXXs+tW7+I8DAiAmnA8iZICsWI+YdEq+N8KJfxaCzU/HAmOFLUBRv6B5tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EmpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMKA/+MrHm9r9qUojrtwjZ55NVBdzD/GqapYGOr1w9DXDCOs3UGzDq\r\nI4NlWBZ1X9VMC2WBz4jCj6gu8vpxiWMelW6fWPbT9+pITmXREqM+nnZir0Ie\r\nbsdrlH7in2W8igRQjBcsajtBZjfKZuFJZhrsn0Z8EnvYqhGh35o5Z6Hr2XWS\r\nEm2im4HYcToGCyvbRCIlJcAW7OWf4JmPgn8qwGyFzzYYnsZWhVmrVkKpasTP\r\nmlDuof71ndrEuREZyIlAWEOtD6mUT7f3yNAYXr/oDgGjQz6p8Re5n0xavBDb\r\nUf3M1ufpDFnBxd1NAukhLWNzZqEcX08L0gJLI4/uxS9casg9xW4+riuo4t2r\r\nSlaJN36n4/DJxhq6OuJVGhV4zXQs0lroWUJKJvTM/H2FsxArCdGf7s+y9Cb9\r\npy16cSUDTMsItulgTE5/um5VfLBdNQ656JXpf2qMPZOq1loyAWyhhbZGxaXp\r\nGKTB8dsPUhqWqxSLjTVJBwu/lNvvwDFkpoO6MaoqBngGOvduw94mLATZsMmr\r\ncrFv6/WnYjhwf3jYs3nPJKb52RsJAhMqPgIKvYqQnWmAIdiRV7rHQjx4o27c\r\nPW67MCMZ8PDKai/4jds6wOJ6YHk/4Za0G3eeVXecWURO49+osBHcMizI2Kod\r\nu1hx0FGM7NJ5wrddl2r+sTVxvcANYSdRLyc=\r\n=x9nf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c3924efef.0","@material/base":"15.0.0-canary.c3924efef.0","@material/shape":"15.0.0-canary.c3924efef.0","@material/theme":"15.0.0-canary.c3924efef.0","@material/animation":"15.0.0-canary.c3924efef.0","@material/elevation":"15.0.0-canary.c3924efef.0","@material/feature-targeting":"15.0.0-canary.c3924efef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.c3924efef.0_1658341801345_0.5470182755719972","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/menu-surface","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.cf5c5907c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d83d54ef93d5d6dcb167184e7422ac80194b1d2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.cf5c5907c.0.tgz","fileCount":37,"integrity":"sha512-1TMoxikv5mRi9ZLYnm8pZKoX+vYQNJztMuV6Qt4jbpZrJNskR79HSJxDt9Nc6ou3eAB+9AUfps+L/U4KluRz8g==","signatures":[{"sig":"MEYCIQDzpOlxndUIlEMsdOD1nuj7HatPt3tu1I0EuyP57SHhIAIhANrTOpmT68nWVEIkCipLhPkAzeibVDyi65lfbrqKYKt5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HICACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXeg//SvYB3LJ8dF72IFFUIah+aFumNnDGBvLOJihH/E83VXeTb7nD\r\nl5k6l6kzHWKd0rtGoo7zOUbJGWlJnpqkgWyJjyfp+s9V5nJqflPNrXYDgJsy\r\nd+XdirKyEocugfxPVpywOLP12fqbY20qlshJQVAMy/iH8CirWzcn4I57FBhf\r\n20oiB3JZbxvVQLzfMCIYR8351gPjjghmqaa51K/H5KJu73zugsk3mcG9BTvS\r\nGipOFFTcskuIGOxzJ8E4QM+wMNCRRYi1Dmt/Z8VjgwqqQmBzLUGHwIaC8jlS\r\nFTHiRaxjhBgjzV7TiZ7Zssp8jvWQvOfc8/Hnz5zyYUJfSfHz3lw+hkYXzS+Q\r\nICVH82VgrRNzy09ymkqBh8IotU5CYGKk7S4Ev6i6Hl+Q89Td5+43uRS6/NmF\r\nkbPgEX3TlubJbBt4Q99KSMHTTlJcAWTJ5Y3UXaZZCbKAA+7Tmdv1q1TkPAJd\r\nGeVZWRmOs8uy/qKELngm492hxx50UVl+BfMTDXn+7ijhaKlTL1okZWV7wf4e\r\nO9lGsg5Effhm26rQk+kKhqQLLM56530mzi8XMdvXluYO4/lqQV2lxv2NuDvl\r\ncpO6x291a7a3l49MG0hAFXS1712xSHAH+Lg+PQIEk0tenpfmBJJJDeLiPg2R\r\n1w689N8DvcfKsR74+c83Sl0Hg3D8Nc4H7Lw=\r\n=Chju\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cf5c5907c.0","@material/base":"15.0.0-canary.cf5c5907c.0","@material/shape":"15.0.0-canary.cf5c5907c.0","@material/theme":"15.0.0-canary.cf5c5907c.0","@material/animation":"15.0.0-canary.cf5c5907c.0","@material/elevation":"15.0.0-canary.cf5c5907c.0","@material/feature-targeting":"15.0.0-canary.cf5c5907c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.cf5c5907c.0_1658352130681_0.21911243337237374","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/menu-surface","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.0617e2319.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c78a6f1fab70e6dcab86c5d1f13037fcf6d65fd1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.0617e2319.0.tgz","fileCount":37,"integrity":"sha512-EvpUwumHkufZw8UrpMxJNSLvvZVz6dJh7LPuGUvAhsMonOfzMp0YZCejuE1zlaA4NGadrUv3CH5N2uHD5rwYPg==","signatures":[{"sig":"MEYCIQDpeZHfYgxewojHaZOQMehDlgqS6FfYpI/uuJiME8SdbQIhAMnfsBXfKu28+MP+ZPqpSp73hUuZitFcaC00b2M3rHW5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HZLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqjrw/9FVEDDj0aZtnKCTIjHMvXOGOPOlX1ibE7H3+98MiHvU9g3qi2\r\nfsL3x9kjl1mPP03YHTPTMxR2E6Q+b31Hnl//LwuwygpcziXCrVix20+5jjwE\r\nhi9DGmAIXA0PH0OJurgz02IjTOPgoAKZlvxAxRfKD2cwG7WUqNk/VOvptbQ0\r\n7gWQDjnNA/FOHaKkpAGDmpDSQh2E4lPB3tEmAixJrJG28uIauBD+D71UYuht\r\nOyEQcCibxkezJJC3aIUHyXKMze9F6voEyCNZnBXAIUM0U6XqApHZ2nZgRns3\r\n+BN7aOGuUh3XvJAlN5AHAlW1SIXV6OORkF0fEva2zNpRcOpmAPTrVtOWWElc\r\n24NQqZdHuRXQ7nABMGQZgZGZoNOYNTID+K57Iwr4cfesh6W5XrbFTNUXl8wP\r\nmyHNE09xlCFGrASfuX7sLUQ3p+H+AcNrHu8WT8bl29MOxPcUGHPVLbvUBqyr\r\n940C5tFpfKGnVmxHQx2PvJScFtdkzWSS7z7G1GJw5r93Cz5uzTdEcfJa79ID\r\n+d7RCNUndkGhpCDr7OGl1nXGAjhOX9svrF5qgevZMxBKo+xvtWubSxtZEgSk\r\n3d7pyeGLyV3IjEOHo+I5GnlXZAM7w+Fxc10b660yegOPdYhDby3XOEjow1Ex\r\n93msD8/HGVZ+KKKYyxokxa8b+kjr2ZsRVsE=\r\n=hE1J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0617e2319.0","@material/base":"15.0.0-canary.0617e2319.0","@material/shape":"15.0.0-canary.0617e2319.0","@material/theme":"15.0.0-canary.0617e2319.0","@material/animation":"15.0.0-canary.0617e2319.0","@material/elevation":"15.0.0-canary.0617e2319.0","@material/feature-targeting":"15.0.0-canary.0617e2319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.0617e2319.0_1658353227385_0.9875192117623828","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a743b7967.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cc30bec1cdf7efa63dddfa536c410259c360f91","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a743b7967.0.tgz","fileCount":37,"integrity":"sha512-JMTrZqySZR5z9Q2+hV+4g/FdsKm6YRflzrUJYr5GFWmN2eWQTE/35b+5Ht0m7KY+rv8AHfrKihjo4aS+aIzoaQ==","signatures":[{"sig":"MEUCIGI6MrBOaxx5nodzYanMHF8rvgLwzCXq8uoZn4/Lb2dIAiEAn/fN1QXSFVYqM7YukmPGf3yzUq5iU/04AsyLi2YzogM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HpJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAWBAAlTP2rmii29md9sP6MrsH2fEEHBTqwl6KkPk6OAT65/mhbdoj\r\nj9+vw4/EMEPvkMsGcl3Kmb7mfjV9YNHs4OEicXte6ErS74g5H8qMQF22H0hd\r\nUWKdQh0hQGK8xpbsR3Q9WowIRSRmeg7OCTcuTvzOQCCT7sAkFmD22zDpmRLH\r\nQQ/WmduutdBKPK9Wywkhoqxu6iK40b7Al5n5d0o9K24pDZuUUvq25NGudH0J\r\njeXCQFmUJPWl/G1piRIvvf6g7ujYOkvFrwmjR+8Q3ifgssI/de8DExvYYoJM\r\nBgnvvQdbRHNulITHZY5+1kUTJLwzPjDmVX+extN2hD7tipYJTYCFVnRszOAi\r\n0xcIZ0Y5LK1+fu1UfncBMIYOGFvM4JJHwZvI4+nVKeB4+imC5HJAdLPVMZxo\r\nCOf94zuYXOOINll2Nj2DROHweIsWLbRz2AgSqXDGDTuWd1FCAORI0eZBO1/r\r\nxYmCaIz23UWGAJfqHSzkskFAVGDLBlWlSrtcYAbIfK5i00xI7GLp9oRB/M/d\r\nyIXcGeexW14q8HC1lzQ1Og/S0JtU9CVgEukEXX6iNeTlr4AOIINo01zKAKVg\r\nxk1ZpdFKDiyS5zrH3pXmxroUaCqXZvd8PMwHrBGKtmeIiqq74c4EajqU0jfo\r\nZDUG2yaa9xavi6SUA2qBxSSrp909JMqPnuQ=\r\n=rp4U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a743b7967.0","@material/base":"15.0.0-canary.a743b7967.0","@material/shape":"15.0.0-canary.a743b7967.0","@material/theme":"15.0.0-canary.a743b7967.0","@material/animation":"15.0.0-canary.a743b7967.0","@material/elevation":"15.0.0-canary.a743b7967.0","@material/feature-targeting":"15.0.0-canary.a743b7967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a743b7967.0_1658354248888_0.028702514550106084","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/menu-surface","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.69fd619d0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c065fe452c60270cf10d5ab2021332085b8ecc5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.69fd619d0.0.tgz","fileCount":37,"integrity":"sha512-WB9eeLvIqvJTgPC+lIHGVozTOxfKi6GMjFA5XquOn7L8Alf5Kk7VBZLWnYqKp4CBz9PZVBjhPH8oAN5FLVA9pw==","signatures":[{"sig":"MEYCIQCYbYEZjTbxgsImQqTDZfFnxB3YP4ZYUJrfcTDYwfZhTQIhAPs3y+lpMnGRH5sp6KITFNio4ogUTxDrVf1DeStygxa8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2H0fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrwzg/+I4p944UbVWKhqMgHBbMERrLSOpLZlrwYScM62IsusbtYSUyE\r\npbH3LaNE8BtGvu3jaW/u4qNUXPrIQ1Cy5v1sP+LqbD2APt73MRrWgAvXWfxy\r\nOikf1aJj5HdmCSkdHBYaUX7RswCYw3t81/bTYdVZ8JyUJK/8GeqVWpHp/WpG\r\nQWQZP3N6HwKvB3j6TajLJJ5AdgDLWMbhTDecWt9bTLdi9mcPliDbJUX0C91f\r\nqLCsajqu5rl6QWdoaOQrMIU80K1/AXZc0hNYN+vrRnwZ/Ha3nRO2/bDOt6P8\r\nwXuC5E776h2Lh9DymCPcK7oW4gfqYK+GXr+vD7g6hImSq3CStNi5UJGfB5fP\r\ntbBC74xZuAWTGTe8n+1gBer18BLPPOU+Jkc3iPKDT+24d8bR9sJhFek+rHZA\r\nW5tKi7Dd5+5Ng0+6lts7DaYQACDAjcKCn7b3Ai3bg6+KBWTE07NG1q68pcb2\r\npK/jCSifpebTw6J3cJ+2U5waNCiXLDqxEasRDje3amll2T7k41JOircYEpFb\r\nzo5W+s8RyqlURX3In6vGdJfph4kfzNiZhV34bawjFFjj+42Lp89E8KIrfucI\r\nTCYt4lbOYnVR7ucEAOEUBzgrfdJZSRNt4QFrM+cLiqVYgHwNnlUOmfd4jxiX\r\nBmj/uiQKqZyt0Vxwf9jHitPyy9H+7fTdQjY=\r\n=y8Zc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.69fd619d0.0","@material/base":"15.0.0-canary.69fd619d0.0","@material/shape":"15.0.0-canary.69fd619d0.0","@material/theme":"15.0.0-canary.69fd619d0.0","@material/animation":"15.0.0-canary.69fd619d0.0","@material/elevation":"15.0.0-canary.69fd619d0.0","@material/feature-targeting":"15.0.0-canary.69fd619d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.69fd619d0.0_1658354975089_0.9092742833973682","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/menu-surface","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.2a6ddc1cf.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"461679fd210ef81a3d39e4c7b5ba25eb8c77669c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":37,"integrity":"sha512-Vf0vA+q1jiQ4cHLwbTznCdfFdWQm/Db7gq9E0+DXldBGp75asjJYkVxOlHTWg3bbGbAV2iIB5pPvgCLHNLYfpg==","signatures":[{"sig":"MEUCIQCDDMhhiMxcs5xstrf9CWPSuSGCkXYTZeSgS42S3W1p5QIgMCRqyFeM2MfCCAID25f0dulEai9E7+5c3gYBHdEUJno=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AUdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMlQ//QJYh9SalYDnZqYoHlaOAXDsPk0UXijb+eoRnG+sF404ucEpQ\r\nBjNSo64AcU98iXUhS0C8niqoxOYK3XfOD9QDFwBR+y0mKxPq48VFiEO8tK2D\r\n//7CZhGlh9S6y9qyE3z5bnQEsWI/Xftqp0mvhY0/NrqtiObiNiIVptoleSSn\r\n+gH5+4TrAz3raJoxs21lcqBpVE8HHTbgUpiSMNepEpKcKLu9hq0PVtl6aotF\r\nykzy6KkaFSgDEbY7SRD/wUQ4LAbGCXFbgq0nengJs7glSTtb5xCcetKKFK85\r\nNAiksvL+jDmR0v7HMoT9ov1vHa8rlxqGBU7oG+Cmebm1/hxO81yi7FAfhF3+\r\nNOzVBIoKGR2VjuguD4CdqZu0cq78LtssZspHTQqrSEtaZOZf2N/xNOFxpEIg\r\nBSfi7+eIs3peJ3SXTI1X7U2pQIec3XKS7o/x2m6Qy+EcVawA6IdzogeSVytS\r\nlGQL27ruehZQe8DE9IfN1lW/S8WF2oAYSNAmUunWsVFvu6v9anS2FBHsW1kn\r\n/zq0+Pw7zWw6g3uPi/rwtUiP/hCAool4E68XDu2GT379A87DkzFz7PVP6UhK\r\noHnilwMe3L38Ca2RarfF0c2asHZj68FvKhX2vBjW2toyVPjBCH9qlBZjbuc8\r\n0+RYxXuOeiDeqIKUVkkyXGRjJ+3L2Ung+1I=\r\n=p0Ri\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2a6ddc1cf.0","@material/base":"15.0.0-canary.2a6ddc1cf.0","@material/shape":"15.0.0-canary.2a6ddc1cf.0","@material/theme":"15.0.0-canary.2a6ddc1cf.0","@material/animation":"15.0.0-canary.2a6ddc1cf.0","@material/elevation":"15.0.0-canary.2a6ddc1cf.0","@material/feature-targeting":"15.0.0-canary.2a6ddc1cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.2a6ddc1cf.0_1659110684824_0.9795144733993437","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/menu-surface","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.86efd56f6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf61e90564769ef4d848dad83f0a665d8817d3eb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.86efd56f6.0.tgz","fileCount":37,"integrity":"sha512-DBniF6r/+jmX0qV+BC2bmirRITk28XmArsVU3yyrRKSZg2qx3oiPE3jFye/ZZNTuRjdfLNLrgDxzkJ4kZd/6FQ==","signatures":[{"sig":"MEYCIQCrZVc7NdwymM7c2nvdpb8t3WpyDyuY6s6iCE8oK+z0lAIhAOVV8bM7BXqjH0z+gQa1vi5B3wTx2jbfrrTMm9xg9MDf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6TikACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsLA//aGBHhCZVIqohXMH433/SkZpsruudO/ab9V1ytoJfoK2obWf3\r\n9uanJ7PKuQwDV/I4s7um0LzCS/D/sfnC/vgg1/QJHPHKb3bnD1ob6CkriEn7\r\nCxG8zxBHEuguqr2RF/pPROb43o1Wyncu40Il1l+YQ1m2gp2NOaLjwTJwQPLW\r\nsQE+FLxAz6G1YZd1Fkt94n4BAO7bcn2k+1pA0spwirarefk+bzLGC2j5LKMY\r\nJ7VwQR9xBUU7zBR/R6foyC9R5nVNGYquQIY1kfVgsu83lT9SiuxRvEGyOxfm\r\nf1gEvManATys6eIn0bOhSws6O9vgBlYSUfykwh4nvvVoZyq3IZ8xzYyIJYyY\r\nTE+YQo1K/amLvCl3ylhL1oJzprXksSFda/LkMz5J7hQuiCnQdle6ic0LN1lx\r\n/JdQbChT4ItIrP5aTkl7HJgq4b3S4nGMO9jZ1znNk4A0e7sf6z1PQ5nee8IV\r\nnXNgtPV9OKpI41LQKIosj4Z8ZnjXo2HXqyLouKBCofJFW/4zoWLP+2Bp2YBi\r\nyHUkZZVa64HTsmmHDO3Izp8dNmZscmHm3DJjXo/bF+I3DiNFC1NLlhFCCTCR\r\nXHy09HKO5tIiYbPyjmZ2MKh/4QCgdr4+yo0ATv9HrBTZViSFHw68E3uXiteW\r\nLWa3iD/DGiql0nuh+ibUSAvHC6w4uiRrCVc=\r\n=W34j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.86efd56f6.0","@material/base":"15.0.0-canary.86efd56f6.0","@material/shape":"15.0.0-canary.86efd56f6.0","@material/theme":"15.0.0-canary.86efd56f6.0","@material/animation":"15.0.0-canary.86efd56f6.0","@material/elevation":"15.0.0-canary.86efd56f6.0","@material/feature-targeting":"15.0.0-canary.86efd56f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.86efd56f6.0_1659451556386_0.31469349006570835","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/menu-surface","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.ccfc24d19.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd5a443c62693fa827e6ca52844a42a9e3432f43","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.ccfc24d19.0.tgz","fileCount":37,"integrity":"sha512-Hd1dkyjrQB8BRSIJBkaZRd1hAxwMnpwMGfa6/aE8rGBCzkzD6fnBOI+3wvFX/ZJyDODxtqpW3DvTFojGGV36XA==","signatures":[{"sig":"MEUCICEaSiWeoVT1qMGgNRvlyp2nD2ULIvlPibZyT8vhJ9puAiEA1aZBk0pKignHsyOVsGIYL7VeDF0ssplnQrwDgDixPEQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rrhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNzA//ZImg7jalgTIy3vgJsSBdUwJpmqVHbp4u67wdRCXpDJeWZXDm\r\nYPCmCx0MWOBtAV93XvyLRp+o6b76dhP2bepm2yo26b1zutJpQDaaOCiA41mw\r\ncH8PJnnkXJI4ZBWVffyWR14qhix1Rr2xwyex9xD+DOwJ6UYi3epG2J2TeWYZ\r\nMPw+9KoXs0dSm+9IU4BWd4jYsvFrb2Uh2gFCZjbdnkKkBB3L1/f+9Z0rIbI5\r\nqImXKN1/StqTGP6kJ1C87l+2uBjszEoAcBSXJG2PfF78z+ajMX6vTwHEnc5P\r\npumUucRKZBRERV7KqdslR1qJKobhFXV5+apBPo6OasqnkJsHy24GSXfCF521\r\nOQ3QEKnXwoHulOyPpkB9vCF/ceQT0WpqZtVL27LPQ9oJdW+BdADyJxoeCz6f\r\nhazeHE6xoLk9HBQJekf0G8gR2ls0k9lz8TEDi1zERRri2It63BRW4aG6sQey\r\no7FR0KZWC4yQlTv0MKKAObiF62RSzX+UhMk4/ifij74YlFqnYpg31ri4EbZ6\r\nUhByccwhGIAhJzK6bFBRt0o3UUd4GAUXsZtJCtFt6TkZxoAS7TSBDuhVY0c4\r\nHI8qoL1TI+SNzLcRkSP94Fhoe9adIAmZjWS9Vt3Z0KhJI1Ah6w96Pw9HRKkw\r\n2fTAy4u0GM0h32uR9qdJj4bA0rddNzp1fTY=\r\n=SzPZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ccfc24d19.0","@material/base":"15.0.0-canary.ccfc24d19.0","@material/shape":"15.0.0-canary.ccfc24d19.0","@material/theme":"15.0.0-canary.ccfc24d19.0","@material/animation":"15.0.0-canary.ccfc24d19.0","@material/elevation":"15.0.0-canary.ccfc24d19.0","@material/feature-targeting":"15.0.0-canary.ccfc24d19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.ccfc24d19.0_1659550432757_0.28001037411122254","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/menu-surface","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.e4570146f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e61784945e1d1255937f2e61b23922b8ea5a6bf2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.e4570146f.0.tgz","fileCount":37,"integrity":"sha512-H3cNdb2B5LV7BR3DQFMMZYhCh5NTFNzdm1ppUHWZJ/QjSQYz8611CEcKIZ7aiTFirh5CEOIBj8m8dQ5CKdhBEQ==","signatures":[{"sig":"MEUCIQDT+6BUXAewY/8DLFOogBgwvSohUvqhRdIzqb0dT673RgIgN+AVUdkgyvDscDlFAIXcPRFyPDzfCLdwT9bqHpxYUw4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sE/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSnQ/+L9ZVpX7/ekqNo7JLKVZKPsiX0eBC43sDSRRfpzt+YiA04zuz\r\ndGnBbMNnzdS9yugb6Ofa/WzhuWNey8TB24LT5ztGmh+Qk/rVmmShrM917iJ4\r\nEEhXA19eRzmBwTsQeCjRuz+ndJdnL2OTlUba0J2Dgaaw+KKmfxVMwi0nC6OJ\r\nZnX3tY5+FIrLx+C7bwssd4ok7qDzbCiT4e4lIeIA7Mt7T/bnDb05iMfV36Rp\r\nC70o9/URV80A9LcaSKq2CDtim8ODWNVRaeF8xw8PevgGlLxCx825no2KDFu9\r\n4748haX5PxbRIHVCsiPkU3wSrZpjxBu331+oYRiXLicgdx9JETBbTjuqLB3A\r\nyEELTVgsk/SABLoZPTdO63kMBKd3SrM5ZLxFjcUpfgcyVzLFd+Vw07gYJ1r1\r\nCPtVBY5xqzLOvlQdP5DO/IzwQ5IrTIN+EMszaHAmLTPicmDWqLE8PIu0lRso\r\njlo3DUonvjyz3m+qkN2jTVllLaXyveanDJ76C3tQuDaDjcCqRV/y5CJ8Kch/\r\n6vRphzwXAKO3lHNMkIZDaKV2rvqIEb7tZ4NxV5EAu1M297y+OfB3rZXdLgQw\r\nvZopCtvd5vXeizhBVBitcpUJvi8ONym5aG0eMH6GRWO57S1XN9rYO8t0L4YT\r\nFnIMsbAYHQAy67E4JIvHNZo9d3bmgIYym8c=\r\n=GMaH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e4570146f.0","@material/base":"15.0.0-canary.e4570146f.0","@material/shape":"15.0.0-canary.e4570146f.0","@material/theme":"15.0.0-canary.e4570146f.0","@material/animation":"15.0.0-canary.e4570146f.0","@material/elevation":"15.0.0-canary.e4570146f.0","@material/feature-targeting":"15.0.0-canary.e4570146f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.e4570146f.0_1659552063812_0.13784520855920368","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/menu-surface","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.6683a36cb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6db4b053c488168dcc3e1b651f6f3563aabbef2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.6683a36cb.0.tgz","fileCount":37,"integrity":"sha512-Ltlj0BL0SLGqRlOR/KC1ADXj8uHNDQ3tZi3AyHKI6SpfJNm7JcaGKpVXmNbU/f4yr5qqGs17R/VC/thdKjwgyA==","signatures":[{"sig":"MEYCIQCo3Rtx8nUs+FJB80+ZVBcDcRH0QirY0oGOU066cGvbHAIhAOtFozL6LO23N6yHPdTiyriAJH15J13eJPfjfphSyccK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sqgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHig//Rp/VTs2Sj7eutFTdP0dzBxCa4aiX+XC6kdz7mSBcxDiAuAX6\r\nU0Ve3W7nwU6QEXYtizI/nF6n5Mw4ddBPV4m2C+jK+ryXJ+0hXpq/3+iah8JJ\r\nwEp4nkNOtNOpoOHNS5UWo3VQV83zD6tABJudJgE+0SOfjg5j4zCB1oVklnFu\r\nyW/7JctOFcOvgZAyPE/xesYBWska6vVonUbieiFooC67kBEMET1nbifTIjT8\r\nVkATlSbb+SfSfbW30c0VNjL6sm1gCyM4QCgFCpsBob73CTS/TG13usdN4jrh\r\nvqaiiGnBqdXEc+1hPV8meNgoMSeu5CQbDR+1pZlbUe4PjSQCWnr/i58edNqO\r\nzcg/Aygb5VkvhoidaiBwSG1QC37Z6aT2kqjn6+kw/XXNm/BQNIBfVDWxI6Mu\r\noM1ii4Es4QJXVLWCbgVwZ5KZT6MFhHaNp0uFQgUPUVlRBFiPPLU8dboUCYc4\r\nm44eW5R+j0Acjkc7/KlnXoFcCan28+t+1BA0YUZvQP8+V/LAahsFo4YyE7jd\r\noSEqw3V42pc2MICFakGouhy5bQw0dYwO4Qnvb7esYFG5ZcGThCCtamcW+cwn\r\nYkv0obFyOxKMta+1OvRGooys/QLEn4IfpuELdj6PWBFawh5GIXlZ+2IpFDrw\r\n+miU6QgjLonaCdK41pzG1kJ68rM4KJncyyo=\r\n=4275\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6683a36cb.0","@material/base":"15.0.0-canary.6683a36cb.0","@material/shape":"15.0.0-canary.6683a36cb.0","@material/theme":"15.0.0-canary.6683a36cb.0","@material/animation":"15.0.0-canary.6683a36cb.0","@material/elevation":"15.0.0-canary.6683a36cb.0","@material/feature-targeting":"15.0.0-canary.6683a36cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.6683a36cb.0_1659554463805_0.8068960711605959","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/menu-surface","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.10196647d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70ccdc5bc8fa10f567186ceadbf117163fbd73c7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.10196647d.0.tgz","fileCount":37,"integrity":"sha512-bVhGbX2k5u97cLF6DvBtWuR5vbs2p+v59u8HiWBwPeIPWUO9DLwA6IDlxR21OZzJl96V15HLjdUQ4EIOufQvPQ==","signatures":[{"sig":"MEQCIFNSK/rE77wlrYDj0D1EYx6glguXfhoAlIkQlPs/Wf4AAiAV26/KNJx4vsz8BrLxGTLeam3lzWXsTB64vAqDkgs3Ug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u5xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBTw//YshThMMdYrlpt9yiDV5w6L8xeO8zJlzHv8ioPakNhyIgNEPw\r\n8uN3ABA5xtleEfKqFV2EEqXx/bgpL7EKQQ737HCiyKSx6oQ1WX9PJJAjiJID\r\nQ0NnsVi18Km/h/fVmTUN1ijYN3D3WkXaEegma5/Ur4dp9eHmr3FWW02MLUDR\r\n8sV8vAVRsOBXksv1x0oTJBGDx7/sSB8peAZzWFQKRrNPHbddZZWTi6PJ/l9Z\r\ne4Q5DJFWNcr3WI8NETUR7Ee70eSDeTmy4J1extZIBhukGhlCZZN1BEOu5JBM\r\nQEHXbV7BtUFT+lFoxOANtvaEkrNGHigt3CZzUb4dIetG/OV8KOr9hLQJpwb3\r\newc4TSEZmUdDNickctZYptYxkRaCK+CCOohRW07W3vn1Z0kbFeU2AQMIBi4Q\r\nFpMgaa/+CMtfOFS3Zk0yerBIZsBS2d7sTc8BxZpNBS0GEKFIVlAJXPlgn1PL\r\nYMaE6+LehBpSNVAc+0J//pwE+vPXoMKzBrSwKIJ/ZeclXENXhvY/k8zE1tib\r\n9X9ffN6tUkpkG+zE5pPE1YU+6CrBhEODcYYThEZo0DcGfVN3s+PzUywKhS7X\r\nCxYgS5Ibr7wupVB4uQ78RyiDaU7lb6I1T+Q5lDcMXioEObENSAri8L0rWI3M\r\n2VyYX8PyuhD/zzssE8HfFwIcPUU6EHoJwNg=\r\n=pv4E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.10196647d.0","@material/base":"15.0.0-canary.10196647d.0","@material/shape":"15.0.0-canary.10196647d.0","@material/theme":"15.0.0-canary.10196647d.0","@material/animation":"15.0.0-canary.10196647d.0","@material/elevation":"15.0.0-canary.10196647d.0","@material/feature-targeting":"15.0.0-canary.10196647d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.10196647d.0_1659563632817_0.5583497246468403","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/menu-surface","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.b20d3d73c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c8ad1be23b021048dfa30bb2e03bc6c45735b19","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.b20d3d73c.0.tgz","fileCount":37,"integrity":"sha512-GRSeJHEP9ZAVqQ3Go0uSNZ2H7Um9i2rPamLfl9mn1nSxwOZyXdigdCyA4CbBNybTL3XbHorPtHkNS46ivi+LFg==","signatures":[{"sig":"MEUCIAXyES0brPeyJ2vfEgSAVV4RFCx3P647gy0KxG2N/AD1AiEA8CehCTCBLwI1xEIP6nqxo+mCSYNc0L8hZUCOzkUvqK4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7EuEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzaQ//Zw0AKGAeB18fqs/JE2fOpsWZiuZsrfoTnrml2ra9YaBZVy6T\r\nO3FIMThgxKC3uMpa9YYolBmSLa0kF8Zq1NnzLq+v7OvTaHtwe4Oz33bWKyYp\r\n5f7dB8p1QFLWQd0JuL43HO6ACShBVJDKvwsmRmiV7CDocR6b/N3VZIbHL3Yr\r\nWLaRkG4dVIAhxUzE/6FSVFNhGpfMoZbRjL9WIgyW1VaOebxxiiJfnVRCXOcY\r\n26LDX2Owt/5BYs6ELHBLQ08rOiGy/52hEjYVwnf62MFvcva3fvyuSjREKK9s\r\n7vJXF6mqvJiR/0qGY31Y78ZGRnuMDYuphM/tGTeYn8oqHpWrtoV3swjSXKff\r\nVr5h/4oIZLj4exjQXSV9EzZI5X7wET5cNEgjzP+K7vo3fD8nlIKEKiynCR++\r\nR1ah3i4o9/zJ1UCLW/0QkiXk4Yjm3IlmOYAjoeZQ4GFDyYd04PgGoG9HsIDF\r\nv/jAdg+iItXj290bkSEy+YiPDxTBz8jwWJSsge5H8Cak6hKuIwTwqWXBCnV7\r\nJbHxTSB/XgT6boDB171tHPWoj7rtPPaPVIUnrx4c8yR0VmsqcHON6Ekn8ofT\r\nuIt7Xk95Lo+UwIW01Llnio7iL4sH+vWOFuiCQYWciiOjB1kURUjz9MpM5dyl\r\n72Re5Kf6sytcv4bJb4+FQRtIhGNhroaa/wM=\r\n=ob1X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b20d3d73c.0","@material/base":"15.0.0-canary.b20d3d73c.0","@material/shape":"15.0.0-canary.b20d3d73c.0","@material/theme":"15.0.0-canary.b20d3d73c.0","@material/animation":"15.0.0-canary.b20d3d73c.0","@material/elevation":"15.0.0-canary.b20d3d73c.0","@material/feature-targeting":"15.0.0-canary.b20d3d73c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.b20d3d73c.0_1659652996025_0.18528948758956143","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/menu-surface","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.47c0c6b1e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"354b90abdcd159add1ffe250c9a46895fbaac1b4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":37,"integrity":"sha512-fi51XrfPz0Wsc4miViGeYHHD8Sey97XN3Vxb+QwoBbSgKMnAnwm6I4mQdlNOso/aIQOw7J5w7elHkkooE1MPGg==","signatures":[{"sig":"MEQCIB68cJgW33GKPBVXPI2NukZWJAH40evmyBsY3GYSI6BGAiBbhkGC0AdHb91y9u+K0uZCGBACcvpxRFMqWAprPGECyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8ntSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq69Q/+KUIPsX/NnXblaprOXmHIFUrIiQ65WaFtberxxkGdOgZMD3nc\r\nVXAY8iv7f+rPAgMtWAxgWjXQ+kX2/EKNeheharq/VLVroMjkI1iqDt0w8rg7\r\nbRBiNc9CAa0Asw6sVZkwPdwpPGNM1jnHlbhSMVPQEL28LQ2FEoiJUbnTE8Hk\r\nFBl5ELIcfSu2n1osCKZ9kPL76l/OLPvYTc5gaf6KCd6w5uycJzZbzRtpX00d\r\nMACvFzNWdGE2ZyQdotu6S9b8Gef6xggeouxfCjju7ayNk4MdJ/UySuSgeasb\r\n0bsERPnPkeAZnhUsVwwnKse6qpf3AtlI7wy/RtLC4FhtdUstq+4cXerPaQ14\r\njPXphTi97noQVEUe+hgdrLbtgLqnl0YHbpo3gbq2Gu7h49Vs9sCxbzEn4UrX\r\nrMome50PhzR04QHb1O5mlGfumbbKQzZ89WhufmubwveVhdezGfGmyMgQRFqL\r\nzatnjE8PeJ3e0WOxfHXtwPZVPrcLLkbZtXu+ASpakM+4MgiiCOpq5x5JngL3\r\nvQ/Z2JdwBHEmM9RYdKTQANRMUHPwb6Lv+CwYGwyNvj2MrXYvmyH6LgiEoUR1\r\n78exnspNiLMVyJOHjmSRf5BNl29E29A9/52FzQlqHkA4J/26Ledzt0fP/j57\r\nEWdsXhqXX9UA9ky8GTYTLojaXWSlxV5hRJo=\r\n=076K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.47c0c6b1e.0","@material/base":"15.0.0-canary.47c0c6b1e.0","@material/shape":"15.0.0-canary.47c0c6b1e.0","@material/theme":"15.0.0-canary.47c0c6b1e.0","@material/animation":"15.0.0-canary.47c0c6b1e.0","@material/elevation":"15.0.0-canary.47c0c6b1e.0","@material/feature-targeting":"15.0.0-canary.47c0c6b1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.47c0c6b1e.0_1660058450394_0.52521329737372","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/menu-surface","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.0e3dc8e38.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f51e6b358960f648f1adff2d158f9c3a92957e6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":37,"integrity":"sha512-VPRYCb/cAQYa+/P1/8G7vrEIlvSQKOo/OGwfC2NC49fcAsw6zpqFyohi0vFqGlURwrxC8Y9w9dHvN2UvpYQgxA==","signatures":[{"sig":"MEYCIQD7mWCrgz1f26WQwteke5gVG6CmhbOnlb54+kIGnmk0iQIhAJL9rwoT2Wjj0CJaQFTzDrHEbm9K5bTuwwNX4lS4HuNT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U53ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraPw/+LwXJFqT3MRcluGLThaZxcuy3+S45nU8KCUaKRJv1vsSjWOoX\r\n7GpAYtZ3ipi+ewKo2FtI9r3MAxszM8mk2W+B/OOGEL4yGHXXE8UboEJBXMYM\r\nO658U6bO/pCwY2p8KrG/VGoO0VkNv7SKUKPAnLMDiQbwt2B7CSAiVamomaQo\r\nVlSPvZQlvecKMe2LQLNTh80UUE6kpWa0GncgrMdX9qxg7PYXjJOCuuEM7DTV\r\nI4cssW4swvxEMsXHsWtK63GtqkiH43MEhsc1ELLcZhbI81elKleMGQHCCLeZ\r\nWW6rTp/bramSM/e0Pr3GWfD1u3LpzoPC4uBAk10HIGK3hRFXiT00nNN1lQ01\r\nE1ZL4FMV8djcUyJwdwKvO4wZwQqzsQNitW54YzlMh/s4xOXvaVqtFJuSkeMk\r\n62JKO5RMsLseFv96Rlyrb9BhFXiLFvp0lQf0Uv7acZCIYLAxRaMXHJD8QeHP\r\nJsVLi9gRwpoUMvz3qptzR7BCo4SC4rNnFKdc7aFPoAfgbAxhrUHoO/MagDlO\r\nf8nyViCLdG3vJZeRjIWqNPD7Xr8nRO1gHwY8haC51XUh4/aI7nCoQv8OpIiu\r\nnvXxDP8YA6uuO1G8XC/VnQp1+6EPgfjyOyoVjOph1Obc7sTxjmS7lEyejYCq\r\nEm2adLHdjX1Ak4j1UdOvKUxbJ363SjS3grQ=\r\n=4tHX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0e3dc8e38.0","@material/base":"15.0.0-canary.0e3dc8e38.0","@material/shape":"15.0.0-canary.0e3dc8e38.0","@material/theme":"15.0.0-canary.0e3dc8e38.0","@material/animation":"15.0.0-canary.0e3dc8e38.0","@material/elevation":"15.0.0-canary.0e3dc8e38.0","@material/feature-targeting":"15.0.0-canary.0e3dc8e38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.0e3dc8e38.0_1660243575186_0.7899376034989021","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/menu-surface","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.d5a11f1c8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21e813592d8a4f5366341eadd74bb460d6220067","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":37,"integrity":"sha512-RRj0dFLXkLLOJIEZnZCI4d+yik8WuaM+N6yyFctY3gUQVX39XlGLJEIYHc/e+mtTsjU0fM5pIvAvCSDp7ic1xw==","signatures":[{"sig":"MEQCIBJ5F2RFav9N9u6RXZnLaakdvqKhL4+gxNm7/NDI8BPPAiAtAzTw5pTEB57OvzBobJpOMCFZUlBDoBNFAzc1XUUPmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpbRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKkg//cN4AvzT94nDx9ce6CoDL3GDkrlEmY6yQkA/xvVfQe5MIMNNT\r\nxNGix6N+Hmx3cqcG0V4dpNfWTBE0s2nXJypdKHUhqO3jNzUwYGuM5WxlRb1K\r\n+k1bSKH6OKwBH7F1ckQ9IjcNG7IjbB+OBw3szTJy5ZqmmbdZKgdGYvHB0G5t\r\nLId/MgM8ffQN8IAI+VbBJZPn0mQkhLB9dQemRTPkRyUb9liWqfMBZ2HPFqQs\r\ny5j00PguWPan2A6HuNpAEnY6pyMxFOdDyWwQbXu0McG0VEdIM1f1zBVM5cAc\r\nKS/7FOsC5NVZa92Sr0yZGiMBLuWIfL1ACLp05gNvMSbVx6/VILbRqEU0MjQ5\r\nVpAlxv1wx180p4SyP5umscx8jR0fOjne6XxaDG4ay/UCd+nlFU1jckCmmp+o\r\n/T7aOHJ0FZ7rjcUCAU+EjOmVE4Ba0KKWsqi80/Tuj4HcpB3Z6dgs3EaLsXWW\r\nNs0Xq3R9Db/tSLy0rrr0jNKATv+TlAlXBQA+KONHB9hLpQujBP3hQ9dWLFte\r\n9NSaBjPZc1ybewk+K+3D0ihAtZvLc9yxrc/e9dTu7Ac94z+d201zuuMe29Po\r\nDJu5ET1uAuhCSKMrI5UKz5uCgu2Yb6kDAEeSvd/097+D2dXlXqYnskMKBLvi\r\nKDKn/kaGRa/e/H7FX5Wck20e5dHGQqzvuBo=\r\n=96yT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d5a11f1c8.0","@material/base":"15.0.0-canary.d5a11f1c8.0","@material/shape":"15.0.0-canary.d5a11f1c8.0","@material/theme":"15.0.0-canary.d5a11f1c8.0","@material/animation":"15.0.0-canary.d5a11f1c8.0","@material/elevation":"15.0.0-canary.d5a11f1c8.0","@material/feature-targeting":"15.0.0-canary.d5a11f1c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.d5a11f1c8.0_1661900497177_0.6445240337320388","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/menu-surface","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.bac992a95.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44e96add28ffee1ddd4e34d4763cd0425999f761","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.bac992a95.0.tgz","fileCount":37,"integrity":"sha512-gkPVxSRCIwWGkL5fhJ/7K1LTAhAArbMTrCap8G3dusCHMk+znMdk0uJQTbDCFw9bJv+y/ESV60mAtouGVlqjWA==","signatures":[{"sig":"MEYCIQDLUfQ+JCH5SwNabMBOINvSMEkak/H4XVZlpNHdRoZbtgIhAL7lescv4nEaFn7O1t+JJXLycAuC1ibAZEO2Ggj9LG/t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFnXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJ0Q/9FfRDtofPmdjbw+YnQ0twdCzUVFTn8Dy5TxiII+mt5gg7ZSK9\r\ni9JgA8wWzNYKoP1gbeqteaMj5meTU0Y/hQ1zl5slGMIUdVAVGnsPXuJmDrIx\r\nsXqQsIZ7MBFuhgc8X8wuj+vN8jf3VhmEoIceqDNg7gBfy4u4R0nP8Y3nWBDU\r\nCv3xg+xx2xbf8APhmPVybMvOFCeRLstiprDK04o0HBFasLbvmI0jxZc0UXEB\r\nqLmsh0D6F9bhocDZ9MXRsIkc01eDm4yl4ikt8zBhSZaLycL+FzsjfZOLE5Ky\r\nOw5dM61KP2p+nk/+6SXUIChcd5MhajMZJ9glCc7HAwjugK8/H9vOFBal+KJx\r\nFQjy5zUzxo9qhtWW7c1kVr0qTdjsGtuHq2KQgQAO0xMMwUTxaNw+ZufKXH9i\r\nRjjD2c7WZ/ypLmYDflEuRKhPKkGEWjecC9f/SEK2IiHJa0a5fjaj8Rpnlqxk\r\nX2iiShrCbi3bxUngd1r+cDslZTF04SetlzPtLFn9DFg7MhaDDKQ7QCWNqPHw\r\n1OQIGQCgICWpQ2RtrnWhJ2qB+SgEuLp2lU+CxLRydyle56UQIh/nk4ox6kcu\r\nzG9XBy9VUvG1EUsUgaD24c966rBOUPlBe+nLh+0ZAmIJA7T0VUhX6m9vR5ra\r\n0dWK7wV1KbPxoWkseU+GW838snaJCClDXcc=\r\n=W35p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bac992a95.0","@material/base":"15.0.0-canary.bac992a95.0","@material/shape":"15.0.0-canary.bac992a95.0","@material/theme":"15.0.0-canary.bac992a95.0","@material/animation":"15.0.0-canary.bac992a95.0","@material/elevation":"15.0.0-canary.bac992a95.0","@material/feature-targeting":"15.0.0-canary.bac992a95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.bac992a95.0_1662015959035_0.5886937870313416","host":"s3://npm-registry-packages"}},"15.0.0-canary.d25f3404c.0":{"name":"@material/menu-surface","version":"15.0.0-canary.d25f3404c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.d25f3404c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"160c31be9ca0bada1b806af5252bf089d945dc4c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.d25f3404c.0.tgz","fileCount":37,"integrity":"sha512-r5hNA2GX1/VFbGk2LdiIUN5Ae+cuSHUbwXt+S60WAsMo7NvtVLLdfxuxRB5JhbGwwFCQ7jwZ3U7ephZaJ+w6Jw==","signatures":[{"sig":"MEUCIQCSImPyyJIczd7bP+ttfWWSOegaI03FGAG8TV2CzJwkVAIgI5vSQhODLl6G+NFTZ9R8oO5AaStXXfHMkH3W3mgTVPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEH8MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDGA//eQl8Aea6L+ctSEBg0BRHGMc3Ghwin8bHQWMFDmNEZ18WIJSc\r\n+mW5nw8x+o/2a0G9XkhcOi4tfoTG6qVdszkhQjTmEYezh+oGY7gahDcSsOL4\r\nJL5YPi7OZKR/HMEgAjQnBcnXmCD7+PYU4E0V7uCqeK7+QiJE43znVfTjq5C1\r\nz8gxdROMLGsQNcVPpZ7as28M+4HfjbAPXTsjXLQu8ZT9FHwfzHgF4MvKeqOK\r\ncf/7sHW47CXq1TkGu7DAiCVEwkCl5NtqY6PcTlCS+n7XHByPlxvRlanUd1NB\r\nqshKSOD94+prJdihPE+BC324V+EHruZeveSUGdpPidt/IOCDq7fkxp7abVHY\r\nug1KabpWlYIblX2IhB2/8JhDqrwVixH2OZER9LYEusG8nHNGMlaHBGf13rbL\r\nH8/36/Q/z53Tk6qu0+TfZpopluk06F4NEI/VsnNFNKwmemiTgDiMBQVy+w2/\r\nozrqfEp9ZtqaE8smKK2OjcY3fM9gx+8tq4PQd4XpPsyDuiJ/A0a81U/douJQ\r\nD18EjDYQVPpVJtHDZbF3VZts8045g23prJnECV27G8C+IxjGRAPaVaNsu+Zq\r\n+zwRaXlJtqiei6ME00QJSZ4qcUfA8GFCIEVPYRO0kxbFHWgB6RjECtyJfJkd\r\n9QaVy8jIAT7w2gHFlIl6vY8VQZSe0JMwK9k=\r\n=o2vG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","gitHead":"cea256990068cc2248c9bed32c4a47fe622a3286","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d25f3404c.0","@material/base":"15.0.0-canary.d25f3404c.0","@material/shape":"15.0.0-canary.d25f3404c.0","@material/theme":"15.0.0-canary.d25f3404c.0","@material/animation":"15.0.0-canary.d25f3404c.0","@material/elevation":"15.0.0-canary.d25f3404c.0","@material/feature-targeting":"15.0.0-canary.d25f3404c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.d25f3404c.0_1662025484410_0.6151456500499666","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/menu-surface","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.920d8a79e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2eef3d167a4c65659c71f8121fc95a8f8f6ff910","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.920d8a79e.0.tgz","fileCount":37,"integrity":"sha512-KSXsXbgym8JvQVQWx8I6aBmVNzF8POgeWSWnY8YPhXx15ddEJZUxRWDa9MsivscDD3yRKIu2PDPYv65BaGaL7Q==","signatures":[{"sig":"MEUCIQDQ96d4GWP3zvZ5ooBCaARXmJWEsGpuDBs8VjvFt2AjTQIgOeZFG2qhUIEwxfO3YQBDY/sCoXexsjCXNW9cr/HDNa8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERQ/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4DxAAlglgYowbd9lwv37b4eQiQA15rRShtxs+pwsHxXjG7eOgCVZ+\r\ndHkP9sggWh9bW6kN7zNsCED1dbaXPIrCAnwKcOm7rmmWW/iixxgzoThZfgiG\r\nKgIjX3qZsjI40/eA7D/8ldi28A7SlUXw1DwcJoawRYDOcvLQPmtGTQENaIKZ\r\n75p+rdgXzP1ZNlNqJmxTAj2bpf2ea+mKaM4njJJaOB3sQyyaBGHzJiOkw8IH\r\nbHs84vpsUpFkQgaSRv+nMCYjrPkvyIyNMfSyO/0u4zzKp9wD3XflwmaOPC+g\r\ntIMTthPCgxSbh6wlQPGXXQQSE/QbY8DG9vePkes6Hb+7q8EMruMfQOnjFibx\r\nOAEn/PgxbG6NOpzaIW7hG8y4BmholZFB2O/cceD11gDSHfGa+zbDBDQn/9zg\r\n+XsjXl487y1QON5nR27EMlr7NPFAdmk6rH+I2ipOzTDG5N0Wcm6VJNlMIAqo\r\nq7Ie/+Uea/uHMyy0Jzp257zqI8IdT2MmCkr1GkepYrUkeAYa1IqfPr45KqqB\r\nnNnAb1xdAEnibzZ5pWnxMCCjBwe5JTjU8aadq7bLrlAcwNaggmDNR+WWjGxR\r\n6yK9O8k16IbG0DX0aRRSvwkI1GlXdiD0H9vvq1mzr8oW2HBujddF60RNJUza\r\nufkoUjV+Tfg13mZbu/QSFhsVX1A5nm/xWeo=\r\n=aR0o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.920d8a79e.0","@material/base":"15.0.0-canary.920d8a79e.0","@material/shape":"15.0.0-canary.920d8a79e.0","@material/theme":"15.0.0-canary.920d8a79e.0","@material/animation":"15.0.0-canary.920d8a79e.0","@material/elevation":"15.0.0-canary.920d8a79e.0","@material/feature-targeting":"15.0.0-canary.920d8a79e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.920d8a79e.0_1662063678905_0.49278255871276433","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/menu-surface","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.c363f267b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d96a8a5a34c7ddef9dd9d70d8bb9fc4d1d4d6f30","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.c363f267b.0.tgz","fileCount":37,"integrity":"sha512-L5xysjP7ocn2QYzNpgAMeY0ODE+4Klm7xXMSmh40w/NK5NuzeKZubz8TXn0Zrzd+yaB/hflKmSBj/5tzrQjymA==","signatures":[{"sig":"MEYCIQCHVCDm+bznx45EoBRwB31tX41wE20dt95KC5Io8bcCYAIhAN688frw+hBuDFb/AHaIP7gCwoQ/udASUzQkVjXoS32i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESGsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRaQ//S0HmTmhpbt6CR9XWrWQ8sVPmET9lkn8j2Oal/nXb8Px+NnnC\r\n/U8WRRmSFnvMsKF2U1C5HVZta+WG2nPJq88sV7J99nBfKbIZGfhDosjT/OTh\r\nX94PZs7J8JAj2H6Q4vjZORcMWL7z0mh7jcpZpxPkPAl3Tp3h0vDDkhPcyVuY\r\nwOBr8iEiroFNQU136QAXhqlNlCDRmTM1pn+7KN8MsqDp6fLhP8WXuhRD1tRR\r\nUs/1vWawoQoP5SzILkV2pZGupuejyCRqCR2guRGEt2ihQsZd+2AtyQokj5zI\r\nzfXYUmzzcpU5M2kM5Zl00k4qSo67B15hc5R28EjV/sk3+7pUwhl6IVtIT83e\r\ncKRULOMbHCimdWQajXzi7qVHXaAvgTRPJYcTIbpC4aP8s/34+UI6eUhXSP/z\r\nlsrTgP1TUnhWTpNjrMjizoH4RzkqSWPQhUxGbH7k+vOOqw0co0/ZrL/6lluu\r\n9s+C4cxB2Zy94hJtp96wDlI06La2lUKaXqlUK2RJGiDEUUfnfdg2i+nfhSW1\r\n0Vlvm0tMrtkP0Qkl6w6P6e9ZyFnnnM9JWhoZPYoawOqE4wU2tSfcEjbCL/ur\r\n+Ulq7F+v+Emyr5P83zfrGKQ3d5WgfVVsdIl+44bJ5p56wRuzkMxZ7uytm7Rh\r\nlkSEPew6J65su5Ax51g2Ropy5YeGUvVfn2g=\r\n=6ByP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c363f267b.0","@material/base":"15.0.0-canary.c363f267b.0","@material/shape":"15.0.0-canary.c363f267b.0","@material/theme":"15.0.0-canary.c363f267b.0","@material/animation":"15.0.0-canary.c363f267b.0","@material/elevation":"15.0.0-canary.c363f267b.0","@material/feature-targeting":"15.0.0-canary.c363f267b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.c363f267b.0_1662067115994_0.7443435759791095","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a4eb4937a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68e1a0f310b77c516c3598725d10c5ef5bf58cc9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a4eb4937a.0.tgz","fileCount":37,"integrity":"sha512-ot56zci8eLcB90U28l5JiVxQIi0KYVokTfgqi+YN/K1Lc1Iu2/DlIbb/dJGtTh82AyQm/ngh76T0eUIsFL6LFg==","signatures":[{"sig":"MEUCIGC7zHumyI/RnTBB8gHa5M1Z5JIgEIC0ETaKPuCT5qujAiEA3/5PH+U6EzomWTKUdoCbmyuuP6772N/Eo9AfDOZ8Y4w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF49WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkSA/8CYavCz70CpNYswRNh/DXSq9pEhKjSrTvGrAsfGoYq8nVrzw4\r\nK5akLWv++zM9zCRqzGGW0pX8YM4/Wjq4VMOkMWdSuh+rxTkAQ2ZUGbjytUBq\r\nIeg8ZEl/SlXkA3JqH7wiIexD3F9YHxRO1L+a2yavFUBfA7v2XiIDlx3NBU1s\r\ndGrGcXnjqndIeg+TW6ePX6Tzz20GWhtxTQrLkbfcAtVPb41sKsQVICYrtBWQ\r\ncqVmh2/XxepFYBSt9sA2XsdBWKdklqaWDc2xjj8oG2SjmGD8gScYDqht6HGK\r\n/aBTaQ7pBnDPHlAPCC+6QB1KQr+beYM+u9jtPlsSCeSv5oMGj8be+8KMRGE7\r\nD2kS4sweNvTJrbeVGIeQIzu5BwCTVr9tvfGOFAwNC3eI0pWYIf3bWPm5DVcQ\r\nv2CgIjqGs0gNQUINXZXt++kVraByRHyUTZos5m9prQBjt4a+qX3Tjky0pJ/x\r\nF1W27SuWSvuDMnsVpVhgnwf9oB4RnYWBFEfrqmveKxaB+lQuMB8gEVGWS7N5\r\nx4SjqBAp6ynKdWgX+ODy25haE2p8dXeTigfKDmqiUTsgpkoErBE0Y/wx1z2z\r\nSl8GGj1jozJSqOYnOdGX6c0dQrLYNHP8pjRZojA+8VUt4CHnNYF/33/lO7PZ\r\nIILGfu5rvFxXhlF3/eaVHaQvXbDLtjPACbA=\r\n=7vFB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a4eb4937a.0","@material/base":"15.0.0-canary.a4eb4937a.0","@material/shape":"15.0.0-canary.a4eb4937a.0","@material/theme":"15.0.0-canary.a4eb4937a.0","@material/animation":"15.0.0-canary.a4eb4937a.0","@material/elevation":"15.0.0-canary.a4eb4937a.0","@material/feature-targeting":"15.0.0-canary.a4eb4937a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a4eb4937a.0_1662488406465_0.010108849714617785","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/menu-surface","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.4299717da.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc91cc1d45d7514fa17c029164f099b3ce2b79e7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.4299717da.0.tgz","fileCount":37,"integrity":"sha512-Ge3nwg9OgUXzgSoSWdusVyeh+tX1/nF+KZ3CQCQR/kicEUCt2BELZqe3AGNv+BXL2uLHUPh33OUlMcDA5KMDnA==","signatures":[{"sig":"MEYCIQClBXani31FAYMmmFDTmoh6HR90Fxk8ishmlqDdJMipLwIhAITrRKLTPDfCWz58df5Fh53495JndjrDU2vGMQGuf814","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMO0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrC0RAAgEoe0y3HsdKc+w2fWSQNzWWpuUfFFjIeAH7e9MjWqTkJ3fXI\r\nx7d28xwhlVg+7rd/2OBNSxk0A/pZqp2Z0YvhHY6sJwwP3UFDv391R/u7GQjB\r\nKJki53TEgEihUbAAnbbyxXDe1GzTibhjXC7+pooWALX1ooO6CYnH8mLAU1a2\r\nxqYYb+pcp8NV5WxHVCohQSSpI35l7DiuLLCQdc7XL6D3BpETeit3/Wx68l37\r\nq6exatHcqfUO+f9SYwd9RnHN4qCmErpnPfCarJtHYZTONuE0QAUgV/yEeIhA\r\noF7G3rdAjyvGufD5UaTvGliSvCl7TCv5wyYs29nfp1WfdKcrLvtcHdGyIHtR\r\nJybC6dQ2gk1qtqZaIg8DoNirS7cVHkjo4XM6A7hMnGMfHFHiFSU03qParmf3\r\nqBmhz02CFZTLwfZfcs3tvnIOlQ7lbKHdgQquqJojkGitzqJRQbGYRpNPUM9S\r\naLNxO+t+VyI4ExrqlZ5sSoFJ7fEbOGEHkw74qFmdMWVra+0jffxk7AAaSfcx\r\n3vcfdV1UBpbWlb6PFBAgbYjwGVGcexQsc+AeMxlbzZQuA5WuibrMjKOuqb4w\r\nXHl6H11+b2WBPMe4cApH8MfVVgdbie89yfwhWV1PUhIoObxYPRZQe54ipLY8\r\n9yaEbxyGIVrkcPHYriu7DpeezBjigR5m56w=\r\n=1g1E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4299717da.0","@material/base":"15.0.0-canary.4299717da.0","@material/shape":"15.0.0-canary.4299717da.0","@material/theme":"15.0.0-canary.4299717da.0","@material/animation":"15.0.0-canary.4299717da.0","@material/elevation":"15.0.0-canary.4299717da.0","@material/feature-targeting":"15.0.0-canary.4299717da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.4299717da.0_1662567348542_0.19829735674099092","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/menu-surface","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.fa7d8d44b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8aefc7465df333ea64474e6ebde507563c5ef60","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":37,"integrity":"sha512-JR5uyOpqkW48MUvSHlj237Agq8c2mSUENtBvbt5+S6mdP5+vGpEslC+SbU7jfcTSADe+37o10kTy9vlyV3j/hg==","signatures":[{"sig":"MEUCICJPxhhh7o2k6zUrRldsvjdcTWpOan6FLFxbNBD0x6x+AiEA0/fPXIIHHEYzWn2N3PFgahGO9dqGgcBySmRbXN+DEu4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO6jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplsRAAk1ESJpPR6p1JyT/PwNCS0kZngcgS3rJ89CCbxXWJB4qtoxdk\r\nZbMK9P677jSjbYEfV+YPbX03bnviMCTreVpyrFXQ8uuY7tyyxbx/1pK8gdgG\r\nvcPIoutTYRrOiCUGATs7hp8q8IaSoLudiCIdM7G6mvgftvHp7FLT8gCJRFZd\r\nxyffn52qSSv0piLMNMeB4rcioaXED9dk969fDEP+sL42WxbhoJHM+BlsN762\r\nigfrNy7rm+/XSaxVEhF6USFzrRxPTLUpTerm1kZ4uA0HuiWd6OPPy92d/fzB\r\nYwLijzz8b8AXMv5YRYnbo2kRtP1DYwtEiGc1N4itnbKUgebn1VgUQENAHN2L\r\nXPuX0OQOq8lAzqLrNbiSDy+UTg5Lney7V4g7ypTxRN6WeWQYZayxJSm6uine\r\nJLVii17NtD+MQvNQAw+U0fluu74aoM5jQB3Nsa0CV9ptTK6QynuptXxosxcl\r\nX9DkZHeoITsXp6FRQw1sBwde5b0wczFhPIjJGIvSl23e5g+i0K3HVXVpfQ9z\r\n/4KmJk1QsRMNun+Zy7s8e6o34E5ExaRu9Yk7fQ+McKx7HCP9xbABAyq/3rUN\r\nTRSFTuqM5U3/0g7lbOsEXGf7e34ahxaYYkOeq1in7KmRFnqR4x7hUA90LJfV\r\nFZkCkzcUP5obYAW4lVKbtjL6LzEkJ90n2zc=\r\n=2YiJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fa7d8d44b.0","@material/base":"15.0.0-canary.fa7d8d44b.0","@material/shape":"15.0.0-canary.fa7d8d44b.0","@material/theme":"15.0.0-canary.fa7d8d44b.0","@material/animation":"15.0.0-canary.fa7d8d44b.0","@material/elevation":"15.0.0-canary.fa7d8d44b.0","@material/feature-targeting":"15.0.0-canary.fa7d8d44b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.fa7d8d44b.0_1662578339524_0.08495770303509853","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a40e3c768.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"643baf6baaf2758fc75223eb1e00e970671790bb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a40e3c768.0.tgz","fileCount":37,"integrity":"sha512-kN+Au3LWfw2B34tl0AJDqzB1B90Sh0ABTYPWOJm1a0g51Nvz8C7zmAuTWCBGMll9dDwJqWLAx2Gtsg4yDzZe2w==","signatures":[{"sig":"MEUCIDoGRwd0ZdnU8GtJXQs92TEmJHiwenfALqs5owUwKRI3AiEAm54YOWppJ/tA9B0NnSNxZmHkLI/cnLVaIgdPJk6tPsI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5w/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpmzg//emby2uwhTfWTLbdE7LY4fJcy6qNicw98Ybu9LVSH/go0UY+R\r\njsU4QIQ1YsIHUuwQRTWA+CvsUDP1GzV999Zu1DucKhsfVSFptjM5hfSYB/kx\r\n8Mh194nppSfnpPgry5kVJUQlm0XcttVpbz3sE/as4WzJh8s10l7tdYHZb7UV\r\nBsRp6uNecq2tM0VDpZw8+K4utHoXjB4WZ+mFjIDgHlFcTglc0El8CuuZe76n\r\nZtsYyNzNexKna3zWMEjCGEd094vWxfsSOesrZq3QR9O5YIszjW9iMcLg6aDQ\r\nY9lOlLNHOxYmP99FTRYN1CH6J/NDReCqygmk3yjz6oCYs9h872t+mLIOFo7X\r\nv/89/FH9CSdj4RMtqba/jCJqeZoSTlsZh+3856c7dB8hiQnPNBrfI9aAdf1/\r\nW2aiezKskjjiF6qdtvd4izYky7QR8JE8C6ZmlveDy8/o4qjWh+MWbyMh8jc6\r\n92FLF5KStfryFlA9wP/jfj3OQEfNeqThGMA7PKz1R4tnXR6+DkFsgbn2fBpr\r\nEzSmhSqmTpryQjZR9THvtBTTyQXxO8BFbxs4ZH1mo5fRJkgEE4asJNZPVXjf\r\nbV2bokNvqTnKchHWxM+jd5BEu7xT+6J9jy55CddJXZKV8YPpbZiBg0YPnAOb\r\n0eFobt+JnlZeV8SsUNl7zEXoDTPgJ4RK9PU=\r\n=lSt2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a40e3c768.0","@material/base":"15.0.0-canary.a40e3c768.0","@material/shape":"15.0.0-canary.a40e3c768.0","@material/theme":"15.0.0-canary.a40e3c768.0","@material/animation":"15.0.0-canary.a40e3c768.0","@material/elevation":"15.0.0-canary.a40e3c768.0","@material/feature-targeting":"15.0.0-canary.a40e3c768.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a40e3c768.0_1662753855242_0.19118116975293709","host":"s3://npm-registry-packages"}},"15.0.0-canary.18cdc9a00.0":{"name":"@material/menu-surface","version":"15.0.0-canary.18cdc9a00.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.18cdc9a00.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f82fcadc28d7536dde1ced3af0218ec8148aceb5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.18cdc9a00.0.tgz","fileCount":37,"integrity":"sha512-Y9sLk0nqdbCzgvt6rOj3tS2oVDuIJx95iZfe3bzyEvubmpanpQDLElEFIkvGPwVWZDp26+diiGnEhCW67YU41A==","signatures":[{"sig":"MEQCIDIIWCUBm/SMT4VIoJCUTojiKHKWy5nRZFtQqm5a2QV8AiAaPbA1pfBnjBurLcTwNYrGR3Snv8tWe0hkIfiUTJ1MDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjH56VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp99g//UUScBORJdoZk2rG0zk6TrRgE0uKcn5ohGXsay43VsBqt8uOy\r\nFDi95gnqhsWPFTtERq5RJqw4BqLvgiljkUjZH1at6xWWSkGVB+UJ/w0eoiX5\r\nZbB5MqtiEnLgXzzdjrub9QkrGLCzEm2ewDUQxA8GJYbgyF2zz7cQx9uVkBBC\r\nCpWSfg4VoXtoF7I5ePHVXlIe6UWQaCksdsT12Q+fymHew/4rAxERczu47/gq\r\nXYOZWMgIRn/q+BS7XIAVd7Dtpz1Sg63zC+uqoREYIIFS2mOsiD0dEdMImyOM\r\nNCbsA5+Dmalt7XYL9cFSeL3zbwF7ttZSPovf/mTnNlEvXURbNuIUzY4MlNag\r\nGodVWxDg/4zFbTbLQls21LPqiumGlOYvtRUtEMJU8kDcrkCMSDYjBuj+mNZd\r\nnVpNwGYZEx6eDnn7Mwe48kcpYpKQElGs7XxVw6ZnSlyQSorIv8oQvKKr2MOx\r\nw/nsDHRY/7TVHrp9VxTVTZzCkstLFzxr+a17krPP7v7daEjWHL5gyxc/gbST\r\nh1pU427oMz04XfLvauGpy88ozkRFVl0ksnAUj5MK5/IIDIWmcHBeHEjGHgJv\r\nsHics7SysZwbUb7eZN8joPoewMr5Aw+ZQfuPdQw3mfWsBYnDh+Su9r/Fe89w\r\nV08g1L/fkq7x1ZFDFfHW0e45+MuCe/vAB+0=\r\n=6tv4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","gitHead":"85b7dc2034fbd68e480826d635d6d061ba62d3ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.18cdc9a00.0","@material/base":"15.0.0-canary.18cdc9a00.0","@material/shape":"15.0.0-canary.18cdc9a00.0","@material/theme":"15.0.0-canary.18cdc9a00.0","@material/animation":"15.0.0-canary.18cdc9a00.0","@material/elevation":"15.0.0-canary.18cdc9a00.0","@material/feature-targeting":"15.0.0-canary.18cdc9a00.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.18cdc9a00.0_1663016597471_0.7855723889620538","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/menu-surface","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.7ab3cd3c8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8267b3ab227fde17e6edb32b7370db2646c135d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":37,"integrity":"sha512-o2xpSUSSg1rc2hJiWu4ocgLHH+Jdrh+RLrm+JR5gQN3AEJgWYXuDD1ScIrBz4SMWgfNLRue1U0fZSZVgdUWxLg==","signatures":[{"sig":"MEYCIQDdzUwkDGgN8bKJMnbjpnQlNCiy1KuPuxzwq/Ea4KUSzAIhAI/ZQp5oMDU6LkVh2SrTM8fgZryZ8F6RDdw6heEmMJS6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQajACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1Bw//aIaDb7iL9LCwrmG9+xPjeM/Elg083qoe/yv3st0qe0NS3cBS\r\ni5EAwANg6hRlYkKKq3jXlbQNpSc1wGYMsuJEvLTpIv4rNrpjX/BApVxBDOJ0\r\nD1JGIJPkGUsrkLg9IeV5BewgnfUkRLdOCQzEtZv5aceYS6v03C91cuwXdF2U\r\nNOaBh49VyII48jnOdFyQzCkSGh9Aq3WdpuAK19g/6sR2fBV8wFv4TBftp6BP\r\ns8olMlcsfFKCP1cl50mur81Mpl1AgnZBnSwGyzuRGwO/rbgXy6ZlYrgmR/ds\r\nAXq/n7EpN9Sclq6xYiWqMUp9zmicE7Ul1Z+s3WsYJjKlMHtTFdZXPWhQvtt+\r\nLVsHYkXXJj93NiNk3JNETM2fdIl+SLxjD8hnFSdJnJCOqDLtFXMq570SVrnf\r\n7zJyMaQSSDAvqAZeo/JUZQYI42um316SQJ3jemBNv3rweGYJUFG0+dmnQ3d1\r\nyPxE9GHWjmTtctrB08f5vL8RwulnB2BSe8/9NXGaC+jkOASVsBkRrdwBGT0N\r\nYeyyspx08Rmw5OLYUeDZxaPKbqpkklZMWhVmZWasyMkME9juC5Mi6JFpkXbu\r\nSnjap991BTh9PDAspWYZI87wxOF5yQZYd3Qa130eCi/dKkPcgWNfTIJkEp7w\r\nZZIvLebspZyylqV354kXl7Xd32L9SNkmvJU=\r\n=JEpO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7ab3cd3c8.0","@material/base":"15.0.0-canary.7ab3cd3c8.0","@material/shape":"15.0.0-canary.7ab3cd3c8.0","@material/theme":"15.0.0-canary.7ab3cd3c8.0","@material/animation":"15.0.0-canary.7ab3cd3c8.0","@material/elevation":"15.0.0-canary.7ab3cd3c8.0","@material/feature-targeting":"15.0.0-canary.7ab3cd3c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.7ab3cd3c8.0_1663108771251_0.5130676906762475","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/menu-surface","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.2860d244d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ce5969a13cea11fc8aa1ad0cbc001f365ad93be","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.2860d244d.0.tgz","fileCount":37,"integrity":"sha512-Uw6CmCIXW/0w8cpMArZJKj9okFK1Z+WDlLeTHqwJJtfSp4jzLKCBpLEWGODvihq+aHlBImZ4xaDfeow6f9mEhQ==","signatures":[{"sig":"MEUCIGokybcqBEPxyxmS1xxxFN1Pj+NXaIH2KqBMMng1BBaNAiEAubu69438MK/D/dJ+KmAKSGszIQfbmnRjhSpUm2rEZqg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP7OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6EA//Xf7paGNPUD3zW2Q8sfWI7hB8CWOLlMtFxAFELvaGSvcJggDv\r\nmEY449S7x0SaGhZY4/YPz5Zt2GFPP8eKWc0vscDUZTjB+KPSjeeV0N30GHqX\r\n34Qvys5p1hHJvidWTYLNchiD84pdBKWkZn7cwa19vLUdwdeg8AfjXLF9t9Ht\r\nQggt8RQsykd4/DM/yH0dL1YDTmw8LjoH13rEKqUuwF7plm7j0b7BHOszRG+D\r\nF7jO1EawnUgaQbk6LuuC4AiUYUP4sRA0e7G9r1k0vH5lyGCkY21b85nO5qeU\r\nJGhUBMfIjXb8JjWT+amZCkjBmSzck3rx4TT5CbPAmpg+xqw8ibh5O9dlHKW6\r\nIadrq/AOO81QXQ2T3a6WE41n+zOdE/8HXBM7jwQ7H1w1s0+BfxE/9wW8GKob\r\nr2aP0FPdN32/TYQKdj7ocNssy7AZkBM8kqdPTFX5mfSO02Mu3DL1Kl7KkCxo\r\ncqz7n0y6CE69ZAx/ehyefKivVlOrluSZV6zR6RzrVUyneIF2JvoSTzE/F3pF\r\n+NxjxDmLjv68LX0t0LTsfr+lIcL2jYigwa24TJ1C0urUJCPov3fMtjXVa+60\r\nzjHEn+Te/EYiDLRzirqOWeF0xDcIkuz3dKV8CXX1ZTUoh6fgxSBbO2YaVEBz\r\noUZRIZqYRVYvJLslI4A0PFgoRGZ5+PLBXmM=\r\n=YVVj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2860d244d.0","@material/base":"15.0.0-canary.2860d244d.0","@material/shape":"15.0.0-canary.2860d244d.0","@material/theme":"15.0.0-canary.2860d244d.0","@material/animation":"15.0.0-canary.2860d244d.0","@material/elevation":"15.0.0-canary.2860d244d.0","@material/feature-targeting":"15.0.0-canary.2860d244d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.2860d244d.0_1663368909839_0.3768391360415697","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/menu-surface","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.e8726533c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d62fea62facbdc30b609c136098801553b495b36","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.e8726533c.0.tgz","fileCount":37,"integrity":"sha512-hArb28VMkJrKrnhCgladGpXrGFWph+cWZO2SpCkssEP0U6vRg8qeM7mV9VFei5DJ9pQ1UN3girSiH9jsMFhcBQ==","signatures":[{"sig":"MEUCIAT078L7jYNDzEeTcBFnocECQtq9ILUpUF4JDAmuz97dAiEAhNu+h3/wBP5ZQGTb7/OVwqHabV2Sm7co56Bcx06Ft18=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKh/5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxFQ//b6Qof6yVzSgCn2t7xRCvFxvSHK79VV2YyCC9WNcHL88uZqDx\r\njGE7V8/gC2wmLrbCQG/dd9Len78+2YP1WXQVTGubYALMCw/yDdRJf8blfwdo\r\nhigZVpQFLFxp3gbayEz5bjQO8W9EbJRLS1qqaBWDGdIqY3nNqkZqjobuH37U\r\ny3sVdFFQb0AdOdZCdNmdieZbd+qRP3phmbOsAiZmt/wgKcDcYwgkhTRGOlgy\r\n/jJVjfU0Zm33vmvkcN2Lk+Ewfvj+pRcJxWXzcWnBbcFVocv4nz8DmhUMepbw\r\nXm3KizmP7c7hmL98b2j/gD9Sjw9tNXO/E6Y/rTCZBrGHBHGCVZieP87TfJWq\r\nkVg3NCS+iy3sImkZ3REVG+PeNji8ezkqGTEZR9F8O1e19w4mTuRQnaXeOUAV\r\nUafP/bXt1SiRgh3SKYFeRj56krgHdTI6CRoZJGMfklqF22Jq6v4rhVMbcz3t\r\nNmWscSGBALm475NUV8R+SyBGyyrfG1Oaq6OYLYbJ6ejujKHyC17ZiZMsOWFy\r\nXNnadJBrP2ftLxtYspx9fYF/C5PGud1lxWouolzTIjfSri0Qgej1PGY2sS8V\r\ntBKJO7DhJJJYn9YpAtjeKkJRnT2GrAKcfCBsJSdCCXt96o+KLakUDH6I6UB1\r\nKFEQ+1gRjMmnmgTaTFpfAK59g2MUgLT0xZo=\r\n=dOk5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e8726533c.0","@material/base":"15.0.0-canary.e8726533c.0","@material/shape":"15.0.0-canary.e8726533c.0","@material/theme":"15.0.0-canary.e8726533c.0","@material/animation":"15.0.0-canary.e8726533c.0","@material/elevation":"15.0.0-canary.e8726533c.0","@material/feature-targeting":"15.0.0-canary.e8726533c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.e8726533c.0_1663705081041_0.5322088127317162","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/menu-surface","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.00d8de0aa.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b053856dc6d1c98f07da549c57db053084a387a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.00d8de0aa.0.tgz","fileCount":37,"integrity":"sha512-YwCXe7+sagGO9l73WFbwAC5Hdrm5GgTkk/qqtTudQIHn7iBA7nVNu0cbhqTyF7+WRUxHwlQmgKEZnz6JFyQQwg==","signatures":[{"sig":"MEUCIHt48/u8Z9SR/53StP0EZxiaH7tWh1CC1bMel/Z/YTwKAiEA7l1b5zsAjKLZdZjrubl3F8isFxqKOJN20gg5UaoODFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKyvKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPuQ/8COy9GpdJ+p6FM6SOR5ONQEGUVCcnHICivhcy0DWgAiCrYe3+\r\naAAosQIw+YrbwXA59GE0B0YoJOs2jG8k3J3+eJYLTXdqg8jrOw2sJ8xGn12U\r\nXae0o0ZepTE6Q0esmrd6QWatdD7oFmvvHoQ/g1Uf5rxWCJxKGhlYjSZkXWM6\r\nTmrOz9g6YB+u019+VWMD8hvBGcQqFv6iYOTE00FD4rA7nwOxiC2EHMaBWvu8\r\n2dsZ7iXJtQkHJaNHeJogRFCHiSXfcxH4IIYlJ0oiuCvMbhxVoTz6V3PT5Ja8\r\nU0J/b8hs/bhMMZuBZOGeVlptdM21SKiMoI/5I/QUZ7BrgocrChZIfRqpoz3g\r\nsCLURORrGZud1EJpcO7T8553NKrkMmCvdtGBS75lZIIcXb/fJMnb/8LLAWU7\r\nZhM7Gebi3eDZXc8b5nTf2cn00vai5eUzXsaVH3Dn7BthGB+0Uv4wf3uOtQ7V\r\nv1P79pstElUdLRVL3sLj3JnszXO0tjGoD7AryYrZIkIMlcY2VbUKbcA51pKt\r\nG/L5df7gnsrGNOWqQTWmXHqgvHJtsbB/UBJakqHA8WG1DWMXYun/obYGmQjt\r\n7xcnfUC7mirLRKwTX19XiLpq7Xb/zN2Ac94I7nwTEOGGYdWvI9IN706OCUoh\r\nrksBFHyM/pXX2sDzmmwOHXitRNQ2NUnrgHw=\r\n=Z3mV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.00d8de0aa.0","@material/base":"15.0.0-canary.00d8de0aa.0","@material/shape":"15.0.0-canary.00d8de0aa.0","@material/theme":"15.0.0-canary.00d8de0aa.0","@material/animation":"15.0.0-canary.00d8de0aa.0","@material/elevation":"15.0.0-canary.00d8de0aa.0","@material/feature-targeting":"15.0.0-canary.00d8de0aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.00d8de0aa.0_1663773642696_0.8565830984581557","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/menu-surface","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.271aedc30.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8aaeff3c4894297a3bd8ffc0f3fe3fc143d15eeb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.271aedc30.0.tgz","fileCount":37,"integrity":"sha512-efyXAFCcM4MMfuYbyoQhljjosok6efbfKVucWPMR+KbDJ5al/LXKImLMoKpWOLMJDRREiTi4mUYZqFVeUlAvnA==","signatures":[{"sig":"MEUCIECa927KOnrA/75njTHSTW2J8bIa7p3AdGZ9bJHISrywAiEAt187aLtEe8GLhuSoyQBM1+IzpXVfWQK8IRstGXbzWYY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy9zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoU+g//UunZAkgOGvhXnywNhzer5sf6+Pe78u/st5F061OPJPQQJqZS\r\nx+1wzdqdK2EVG2VAtpuMGTGyiwgvO4zJHRxyYLk6nh1ptbPnfNn8LTqowXqS\r\nRzJYr5W3b9+wVBR1IoHkhZuS/a6BLUzu0PuNjvQQdqnO2QiWLyePOdkbYX5b\r\n0ju0MjWkg13x+5Mnutr9bbvHLRQ0gBHdS2Gj/fkcBQxy95Ur/DSjFgGYG32m\r\nts9nozT2gNoe3RC4Kps17NpDX8RMiUbzITFPNumqXFA4J/qy8R8k28XOTek/\r\n+QPTnX2hgOhNRVtmjPrGVtez4CS9+VoI5x9XxUc88udY2yma0V0/2+apr3tR\r\nbACarWHW+OB/6LMNGmZE1DZdtqp92Mj3IEeaCL+/e3UCzUHyril58+C42Psq\r\nNI6voIlSDjhSKoKj2rw3725DZYCiLe/e7spjDt08R3+gMYGq1fxrRiqt+QeT\r\nNg8aRn0CiWmUEBoQ2q1ZPiT3wTFMNOsBOcMk3y0XJ64r8uoLMGX6dGrc/vAp\r\nsdS3CcCHy4oMshPG2dc1ypBQJkzo1Iuc5DyjTE/HEr9fn7e89+H0kcjGuIl3\r\nHtEl1DiSKqiLEEVwJVGB0LUMre2sUZ5x+WmQzEDhyeAzxYGYxQUIokkw5/kp\r\nwesnfl/zccyd7yEczNKoIViZ2k9/VNH8sOo=\r\n=Gvml\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.271aedc30.0","@material/base":"15.0.0-canary.271aedc30.0","@material/shape":"15.0.0-canary.271aedc30.0","@material/theme":"15.0.0-canary.271aedc30.0","@material/animation":"15.0.0-canary.271aedc30.0","@material/elevation":"15.0.0-canary.271aedc30.0","@material/feature-targeting":"15.0.0-canary.271aedc30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.271aedc30.0_1663774579236_0.9451089196505718","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f17ff2cb.0":{"name":"@material/menu-surface","version":"15.0.0-canary.9f17ff2cb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.9f17ff2cb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3423b8155582897775fbe34bb85fd4b093ac14cf","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.9f17ff2cb.0.tgz","fileCount":37,"integrity":"sha512-gr726RqOJ+ZqhLbfQ/nEd6LZ1dsnCCWaVgEnR271EIaUCMy78XiNE+SceIurOeZqrOwanwYMU9gFPCdHd5rR+A==","signatures":[{"sig":"MEQCIBu/Q8I37aJV3fADVH3J62jeWa7JVbKmM/BduoWmAja8AiAJ25Xi5kWrPAutONOFKf8lDODsy975hHIWzIJIwDO1tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjK1MiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrckBAAmTx9PI5NEsit3QjA+MFaZFgJCJQSvOOSnv9qgexlV6PDJT/N\r\n6x6YMjadRqLhH6zyd9iBlUPwJMDseyxQN+50wF9MEdyghSGlFnhkG+bRfv9B\r\nv3+xjL8BWLpwdti638EqrD7mCYgLRG403aA+33Qc6x0ydhtMPi8huLUqKj2C\r\nakEanin3/L8zjAG70jBBLlnwSGAMAxOQdXeWImyYp9jSRrkjWD/5LaFh7YJ6\r\nlrMFMiivoRnow1uGV/7XzugtHekCloqWNnN+h5P9dc9olkLvcel+yKiMeKFO\r\n348W5+w/VZ9r8WuEz1MDrwpBlLgPxkE7TksFKwhuOj0bfb8+cttL+pz1gEE1\r\ndg5xFT6ux7l7alpq0sBQQDx7qUFjoyV+BrKLmYL/wekLln/QwhbemL5ejCiq\r\noX+48lNpKUDO3AjHmcYm+YAmg5s+ac14NlodnK+C2exm/o0gaPC+sQ5+wCz1\r\ne2MkbmiCWl6PKQwqfn8yz1v6JVDRms5w7bN2JqC1EVwASdOFM8R//lGe23Fb\r\nhGF+ZILsjFcC9mGadSRdKUqVdJdSU40QWFmGvu/1fHHwDeQFtmD7UWpHyzuF\r\n7+ZRKS0vE0Si2MWim8rp13PEL2m/xMu98cecBwbWWOUCp2W7HetALTOYq9DB\r\nAmW7wvjhJIY7MqKxo60JrbEJN4WsQudbeUY=\r\n=9Qd3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","gitHead":"34e73eebdcebc0a0b475c8b2f9fa0dd4a4c3397e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9f17ff2cb.0","@material/base":"15.0.0-canary.9f17ff2cb.0","@material/shape":"15.0.0-canary.9f17ff2cb.0","@material/theme":"15.0.0-canary.9f17ff2cb.0","@material/animation":"15.0.0-canary.9f17ff2cb.0","@material/elevation":"15.0.0-canary.9f17ff2cb.0","@material/feature-targeting":"15.0.0-canary.9f17ff2cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.9f17ff2cb.0_1663783714645_0.38828462479442827","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/menu-surface","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.d3344c16f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05c5649f87792b03f9f8095399280f5f3c269047","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.d3344c16f.0.tgz","fileCount":37,"integrity":"sha512-DLFycHXVpu9duhy9hWDe+KvX2hzmCo8aFSuHcoK4o21vUhm47f4W8yp8Rf5gokIaoG+o25lY70e97+oFW7wThw==","signatures":[{"sig":"MEUCIQDI5RIecYCM+hKVJuzIJN2BkBomZT4CLXfiwUOPUxbYugIgFUmx19m9Vp4+FXBvFczvyh0WLY4J1jxnSL9mV6FUCB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCndACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUkg//TlubsP2S57XATHBcmHX6qRu1yHHINQvd551v2mG5q3Iys0qM\r\n1lVsJQtLaem3Bq3xuXIX9kfanLk9keQOou1B7IlqiCw1xmJgJEaNvdVZrewu\r\n6fFQ/IuVkYAAqpR96MDG32d6FmovE6e/mHuL9lj62dw3KORVBY3zPhjuXwXN\r\nytHtk+0awsiLJT/J2IvO6qeOgQpxPGHgVweereq3IqdczUQxP5QxLZNwXueQ\r\n3kkuroXdjFuI8T/mFOQNC6Ny9Fc8n7gLCyZkPyA5AFUhrBpcdIDHKhha9l7s\r\n+P7Rjtoaxm9MYAYDzeX0LgU2dOKtwtbn0xBQfmOI5K5ZUtiFWn4cxWuj1kbe\r\n6PG2HirAqlSESNYMwqxQ9NadGVM5X/J3vy9EqJcm6Y/dM8enbypCcJCgWJ8h\r\nFMZYtK48ag+kYDoD2ZdCjbGIrWUb+CapbL4+YYXPlZGkDaQT3ys78VRD6aYe\r\nv7Ijs8cBWuakqpL6tm0dJv8B3s8JGfp+5CIxouPepwvTrmHfSxUdoyWuIaqv\r\ncRHWz03Ve4rinlcv2z9axx6BllKGtGEPC82e1eMxKQQZJZLfMisGScSWlD5N\r\nmHvxSL+M0LjjH0ZR8v7yLEkSswEyUh3c4nskOxN88T0ej3ao+/PD9zVleuTh\r\nXuKfE94Ek59z3TqtilUzPgg3ZblUgdgB9sE=\r\n=SoYk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d3344c16f.0","@material/base":"15.0.0-canary.d3344c16f.0","@material/shape":"15.0.0-canary.d3344c16f.0","@material/theme":"15.0.0-canary.d3344c16f.0","@material/animation":"15.0.0-canary.d3344c16f.0","@material/elevation":"15.0.0-canary.d3344c16f.0","@material/feature-targeting":"15.0.0-canary.d3344c16f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.d3344c16f.0_1663838685234_0.8375139628929729","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/menu-surface","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.94f20ccb8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67dedfdd2d639f5a0f67abb1b24d107ad1246386","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.94f20ccb8.0.tgz","fileCount":37,"integrity":"sha512-haMUPnAjJ8N2H7sXkdiyPNMDOZIyZF7qg06uSP2xWYtLw4C9mWJ4i5FUErPSR13LaxNB5iateBBhguGFv8Lzyw==","signatures":[{"sig":"MEYCIQDT3ANtD5XVIzWBGL0Uvl6Ulvk/zgIT++4bKWdzRV0dhgIhAKTZjl2Zu4+IbQVmZRm9HJoQ1NNE2htFElLP6TiFESP/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMoBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTaw//eVO3abwiE6851FXBiGn4a0ScPMrJTWBFn0oOGzqsifLOd8CT\r\n604GClZqtnFGPQWGkbmZkmT7YlW1ka62BEEv02rFElkYC625SQzIpG7wRpWL\r\n/LXRAyTpA3FCW6xD9SyPti2UFVcqZ6mVPVUPbB6VP+twXz5KJedgqUAWOQ8n\r\nKmDbIE6OOLQpp2f0/S/t/hJRkrgMZWkgiIud1fpDsqjMQEks8csr+GSyupv0\r\nUbKuofAKmmvZ8aTZ3QGbOhMsNZ68ueFM7SI7na0K+IQAXHFCtbOXPc0FugVX\r\nRToivi6VyeBjX80QSD0CiVfZ/qlcWg0nQyJoNDpNURutoGplc2BREvLzugNd\r\nkPiZEBb1qRPydWZElzylyZSEKDOgI87e1zjY30Juvfe8ubrL7l7Z0/7XCWLz\r\nIlbpcM8bdCMwLgi4F/Y4jc7ZzisEgtdej9cJiJtFF4AXGpcIzzaFkD52Jsjh\r\nM0Zp66agKIH6+Bj45dYNrt/rCaAF+r8HhST2/HUZSxjV6GgEho+d8tiWjRXZ\r\nBn2hcibXtOdADoYDNAS6D/aSMMoeOKUq/0dv4wu0ZCf7XhCY3OCIqRlcBTQR\r\nVGRwW7O01iteP70ovCQHaf1kOCHd04RcJ9EOnye1Kyg1xapOnPo221/YLA6d\r\nv8FzF05rIm8daHhk9TXXl5X4Ul6mXFD/qak=\r\n=UrAy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.94f20ccb8.0","@material/base":"15.0.0-canary.94f20ccb8.0","@material/shape":"15.0.0-canary.94f20ccb8.0","@material/theme":"15.0.0-canary.94f20ccb8.0","@material/animation":"15.0.0-canary.94f20ccb8.0","@material/elevation":"15.0.0-canary.94f20ccb8.0","@material/feature-targeting":"15.0.0-canary.94f20ccb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.94f20ccb8.0_1663879681463_0.8026651928892778","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/menu-surface","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.81e4cb7b2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c15254fde8a3da5e496f20c5542fcd8fdd3f372c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":37,"integrity":"sha512-+vzFYhIU1M94J3+DmHMpmXwQtNVVu7Y6T+TmAMzdf5t1IhDRIY9PhYf1vbA3ua7eMxB/94Au+1cSIPvABaXyBw==","signatures":[{"sig":"MEUCIEt3mOSQOpfmov6hLtL6twc3DAJdp0gbBqQWr8W/cMhBAiEAzgonr2pASahI2jfeNlWtv4iTOcUtkeb+FMFAN0KsW8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcvnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcihAAijYTGJrvnzkGiyPszIfi1UJuX0cSsAXHeOQmDDce5dfHbI1C\r\nStdTMulokhfXabByoiVCXQ6XyqBtswBGrQwqEjQZbT+XeNt0474jZT00JjH+\r\n9gPxbb4CcHpSX0pui/EO1MviQx7iFAt3eHUlcrwhP82zM4PlBJZ17Uk3L9+E\r\nrbxbXlKyd/4/qtYbV4DdGaqgAw20J6Gk3yBUzapKyPvHDmGGO7t94LG29Aeb\r\n1maf6uDEJHLcONT/H9qPk8N9yS2hDBDvKHfB4AXtqC7GLRATYq4kTqZ7JC4T\r\nBEnViVISzdU5m6e6Q5dE3icCzCSxcx4fGxqVxJLersPfb6FG9ie7p2yY0Jlt\r\nq8GWV/k8pLlurCVli+7Rd0PbHAUfJM6UA+r9ZYYiDY1ArkGsdyv2IVKOymUL\r\nj9Nzdt3XPBPyEGhUUgNPR9m2lYpyioAteDPMONubLH9RdhCQLkoNMU8laOYu\r\nfdwhQ62vWsK7PfB9raJ7koTGhnmntiIrIQhn3zQjF/akxgvoGd6HLD82kTUG\r\naSuJHD8PwSIFXllrEMBLHX219F1As+l9lPWWfu9TJlCs0319Uw8a9yTTqhqh\r\ngePal8P3JqiWhWkwpjp+uieWLJbsIOgVAQxbGCnTnMplGM71z2rQby0wQ2Vq\r\ncYHtdcCaoTtsiiZjVRUZQRxi9uhGcwHDi8k=\r\n=pKrN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.81e4cb7b2.0","@material/base":"15.0.0-canary.81e4cb7b2.0","@material/shape":"15.0.0-canary.81e4cb7b2.0","@material/theme":"15.0.0-canary.81e4cb7b2.0","@material/animation":"15.0.0-canary.81e4cb7b2.0","@material/elevation":"15.0.0-canary.81e4cb7b2.0","@material/feature-targeting":"15.0.0-canary.81e4cb7b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.81e4cb7b2.0_1663945702770_0.43729623835205444","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/menu-surface","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.aa85f9413.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25967dc5caeceec94fb5a552c0547dac9fe4f802","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.aa85f9413.0.tgz","fileCount":37,"integrity":"sha512-FRHmvIgMZNoBBxRXWkGFDV+FUDRbqGmizWN+dssFl1QGE+AykpfBols3BMuQ5WZzMVF+//cWS/hHUELtX5D1+Q==","signatures":[{"sig":"MEUCIAweQTJoTk9GOeI79JWQPNilu7jZ4oB5XlyY4VNU80NIAiEAw5CQi0MVOC94C4L1iNwb9S1fpgtTfOr/alAA2NFO6vI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMefVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/2A/+PWUAVVQwaIr28+nGMh4Q87DdZqnvpOFyzHT82jIHcZBq5mvB\r\n3cSBDtS1rVaZmC9GmfD2mBLSCl4Qk5lreQ8jhcja48Y/DnmDGVH3gA//pDzm\r\noLF1hR2nrO+xnjNlO5w+bxp++jKuBDkGNcj53xh6bt0gy5OrSIO3jKACVefc\r\nXjoqFJkverJtyivzrnAJexTESO35djKCzXasSXcvADJwvFC5lIf+L1QQ1/bJ\r\nTrO7a05vuVq0s0GXtqHcWzZy8BFqgEWmIztmTlgHqh2tkqSigcOYA5GrFdfL\r\nQq4HgQ0UWKdHJS5jmwKbHh/JGox3jruOFjX61mBDd6CS0q9eN4+6w9rb5i5X\r\n9s62KeDJYkt0mfuiJJ2V+OXXJNkcjYi635awX4eOKnQ93ObQCKBdJIACeRCY\r\n5FVGd1Ua5zJUt92ms51KBOik3cxHBj76DubU794OYxpNdegA3F9PcZOnqypU\r\nhTI9KgVcgzjz6swMr3cbDGrTafFins96Zmr83/xscBv6hfb1xnaEs2FSJikm\r\nq+yqu6o03tLAFIb8YH0nr8pRM1BGXa5qRGWNTrvgxPKGNg5KZ3Nt6tqCybcg\r\no/E9VjPQsjoYYkoC/GdedMOcRIm9ZGmw2N47Gty+CEgYMVTkbCh2x0zpsMaV\r\nTAr8juMX1tNtcqnhbsMayGRiG42RXomqLDk=\r\n=4bwB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.aa85f9413.0","@material/base":"15.0.0-canary.aa85f9413.0","@material/shape":"15.0.0-canary.aa85f9413.0","@material/theme":"15.0.0-canary.aa85f9413.0","@material/animation":"15.0.0-canary.aa85f9413.0","@material/elevation":"15.0.0-canary.aa85f9413.0","@material/feature-targeting":"15.0.0-canary.aa85f9413.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.aa85f9413.0_1664214997232_0.7073525359953019","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/menu-surface","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.7134a7752.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"178c5b9a7f444d534c44dd42fc418643672b364b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.7134a7752.0.tgz","fileCount":37,"integrity":"sha512-3z/Ja3g6eLEwap5QaSjVVfFg5oR+U8lqb98o6x9ZtdSV0M3Hqx5tNpKXzD/Jsg+nJb+fHIALLcbvNY7TcPPDyg==","signatures":[{"sig":"MEQCIE91nO4EZM5lBV6oDMqe9lwkIacZF0/haFds2Nm3xCfQAiBTmiurA1nAC2YZaHdVtXn3GgbuJk5VKX9UhVTUvtZfgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiBXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmow4Q/+O9nZMzDkNPtGe5Dl/+5jOiHbkg8gHvY1b0DhD4uXtoT72YzC\r\n1B9nFhpZWTpFCKL2dcpQHFRW7IwpPdeEzt7M/sPdrFyhlWAGvDaS6Ze6hR3D\r\n+y3zn7wvNnSLXQscD/mUBX2eO36h7b/sjGHk4FjCE8/aH74VOZ5MFpGc0Pka\r\nh3itwhCZL1bHSB4OBoBEtIgDy8geN0hazmz28alSPCfjzVUhYs5jFPOqgvKx\r\nXg/pdJGdsuHPZ/niKq1mvu6k9UjAV7th4SP6kmNR0mLspywIRO7ANs7hY7eK\r\nSpHCpRpiVs0GcBvdzWZlJGfYFOWYoXFeQEXw6ET4V+I73mHM6BXVkroDjMW4\r\n3cGSEpmJq1YN2fRXAJK6Fw4np8p6lbLLJT0acNoDtWlnvj/mYrWuWjaPC0SC\r\ns4f4GbvOBRmwTM7biSZ90HgDWOBZwPJmVZbHDAIUVnHJWH+h3gIE/Rg1EHhL\r\nCn3NKQN1AFD/vKxOf9PeTdKmer/m3uiqfGjgrKdMT5AnVz6FihdIunV/FoGU\r\nEc6jZb7stZkfyezlgz7QT+aPcWHqegmJ/xDxZ1+SPVK4JSDqYpFxyHBfzC5i\r\nSYf7zCS6BOy7Zg3IStELhCZlD2OknGFpIQab0p4UtDuV91JT/5Ozz2eUjFTK\r\n4mqmaTq2SzmAZ8QV3WX/+T6nlNCA0zoPRhk=\r\n=wPbS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7134a7752.0","@material/base":"15.0.0-canary.7134a7752.0","@material/shape":"15.0.0-canary.7134a7752.0","@material/theme":"15.0.0-canary.7134a7752.0","@material/animation":"15.0.0-canary.7134a7752.0","@material/elevation":"15.0.0-canary.7134a7752.0","@material/feature-targeting":"15.0.0-canary.7134a7752.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.7134a7752.0_1664229462952_0.6640436344848546","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/menu-surface","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.70b8ac16e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e6b5e9dd02f3fbe7442abe88fa5f5a29f8e4bf2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.70b8ac16e.0.tgz","fileCount":37,"integrity":"sha512-ovUaiiB+AufaAClmErJZ4Jc0vWt5slmtpfkWpJ9YU19o+78vonKgASaGvNgmrg3yD7eyvVxU8Xp3X0iXoVI+Mw==","signatures":[{"sig":"MEQCIG789+8p2D/uGvcsjX5DbkzS6gQ6oI3butjeVT5K4kKiAiBYzAkOrvqdDyNqkvyhZcuJWygYjBDmD/jt10dQRaDcWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM3zwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqS4A//e63CuumuJLxVj+FfJtL5tPtit6CfA7B9XweOBOtF6S6GeB6+\r\nnlYHhvJ4Z63DasG/kOkXStYopYTi1FkoJaP3XbFfTJAxBINF115ssEDj/tsh\r\npgJ2ePWvFnZybwUPkpkiMI3EcCcAY34nqKDRpFYW0KhFBUw1V5VNucRObEeH\r\nkAYzpQWc4DI7StC7/gB9LQqgORNTrKhwP1SB7LVrrlYSLNik6bwYMl80yL5Z\r\nDBGmNSTJv9OnG3IL6O51OTkTyeyEveBXGzI6q7TZoWRkWPabdpGzf8pL/Nay\r\nydQtoLc1jKBvCVoUAX2k7gs6cYs2+7LbYd+99teqSCq4uTB3a3yu+gmPBXSu\r\nqU/j822O7sMgI6TO9/RTS8LKZosbLs3KOJoOhok6e+cNHUY+Wqv/KL4+z/MB\r\nXmiH2XnBHkpCpIrHwlLVABm2GB1xvGt8Qg3qqYDSC/LHyV5uk3o8wUYiGqWr\r\nhn7a8gX3A5H+Lzvqrm0zcwc36oJ4xcoLrelS3rg3UkgYCmCMHwKGdEURnPgo\r\n2+rwISCUna1NHH4T4rCGPu3AyFVviYXA5kkkMSZclkrB+SBxyEjvOi357d06\r\ntWBdiP2LGoUO1jKKym8SWs9uU9m0enzDUY4rved8R/yGgS+vde3rPoBeKDoH\r\nw3PqLZNlGNDgZS8R52Hu07p/CkBd8yyLxpk=\r\n=Ip1U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.70b8ac16e.0","@material/base":"15.0.0-canary.70b8ac16e.0","@material/shape":"15.0.0-canary.70b8ac16e.0","@material/theme":"15.0.0-canary.70b8ac16e.0","@material/animation":"15.0.0-canary.70b8ac16e.0","@material/elevation":"15.0.0-canary.70b8ac16e.0","@material/feature-targeting":"15.0.0-canary.70b8ac16e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.70b8ac16e.0_1664318704631_0.44394807830911054","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/menu-surface","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.c20d74405.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"050484485cc04195ddec86a69b3d7f2fb7f8870e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.c20d74405.0.tgz","fileCount":37,"integrity":"sha512-EkUieuyEYgYPfXEpv0yjQLiIX92LXVH6ysXmA35IVyFY0j5Wlr6VvO+zqrjsEeb1jf4vBDlyPNUim6klLJG6ig==","signatures":[{"sig":"MEYCIQCHTa4k1yIiYlxHleedpCe7X8agEPSGjKeKpLkvhQdVCgIhAIP1E/2UlCkzp/vFMdKRUbTUsIA80r7pPHTD6a/kUAH7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4fOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEgg/7BXEYU0bfMYnCIAA3VXTpfn0yBh3E73VR40DbZlpCXevOMRYk\r\n0Zwk3KcSW3PpSToXZjnvS4zsAomq639CGETlCncKiTgkd8vUpg4F4mic6bIM\r\nxAmyWicspF12qUliLXqULIQh+xeRD3c/C86AIgUnxr1aBumQUVtzh7ik3i1v\r\nCYeDC25LBuv7cwyg9Iu1llnbnIWI34sRI2KgWIiJR2FquFXuO/m3LUL+33Su\r\nwIJcfrNrzRUs87O6MRdAWxZxFsBSOUpOVMRhQkYZ1kdSne5JxHrhB70acD6U\r\n+Za3Qw1LyHnrI0P7KQIeEqfgDW0ket7JlaHhHLkGSrPc0y9lKWYCaQlviY0v\r\nTEtfk8RKYv/ExshXxiOAn9FahdRiJEYuDT8UE+GkrRPck4vEkk0mzSvUnnuc\r\nTLYMC4ZiDfLxPgfr0EVIu+KX8JaJFwpcBc+aUj40WDeFKpNXGV9tF6Cv5aRA\r\ngV5gCUgbOvnpNpXCDDQsgEzOIpwzHiPWXCfcw9v0tQ5xfxAnl/jiM1v3V8/J\r\nMVQ8t1cMzF7u1L75zePY42j1A8ZP4x0vi3Zs39hXEkvdcifKzmcXtvu+58s9\r\nFMQhliJxbqvKlxsl3yhTYPsIKinbHBGrH9x44mUieQ3aGGJN6O5zKe61kcvo\r\nTAgts5npo7gnKubu9WflWFDQisUnke3TEnM=\r\n=eMz8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c20d74405.0","@material/base":"15.0.0-canary.c20d74405.0","@material/shape":"15.0.0-canary.c20d74405.0","@material/theme":"15.0.0-canary.c20d74405.0","@material/animation":"15.0.0-canary.c20d74405.0","@material/elevation":"15.0.0-canary.c20d74405.0","@material/feature-targeting":"15.0.0-canary.c20d74405.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.c20d74405.0_1664321486460_0.7481517441210177","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/menu-surface","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.f033fc8d1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc2a8038dd15944f2ee0e4e665452977130a0a7d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.f033fc8d1.0.tgz","fileCount":37,"integrity":"sha512-A/U+eagh9xIVh+nLKVBB5W/jAzSOYoGSsL80AB0m87Brf6AgmkyEF7yTUN2O6ATk+pvcDo4v8VWGrziLSQuViQ==","signatures":[{"sig":"MEYCIQClAhZpH27acXHVQRP4ZRSOTPJWcfjSAC9HqhQY3oOx9QIhAN2C9fGgk1lJkbzTfMXZAIoZXjvgwkHGa6TY5MSTXzGm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM43rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEnBAAlsk13liI2CT1JJiM/Pf3sm1SOFXF6bB5yzqpxFgme3o/Y5E1\r\nln9smAMF5pjBX1yJgpn0Su91j4J11geadCVttzlen4q78myuUPstRoeCt9ea\r\ncSL7n1VJKy3nnKG0ep73fP6UTLyXQScSRJDEN1vLQl4XIHaTGvG2X3r6nXHY\r\nAp6wNIKoBLtZIoR4GUxBex+zU4P1E4Du1TuvyS1/SSjenvDMYWQ4Nnz3nFbL\r\nzmcwwDT0bLbGCQD8hT3sODsdgNa66dw6jw7BWk5rxgQR3+ATeV+ox/WzhzAF\r\nGxldbb5bLF67NvQVCWc9fn7RVduGRiQq5eYLbB5gPihqMFbqepdGKFkg6NDc\r\nLTsGchhv/nm3g2zjvkYNhBtA1oO3jRwzi+jgVFPBw9gR4GOdJJE0ZKvqKFcw\r\nBbqeEW+yyWlhzXwar7MVtymoyKv397rrHC7qTlK48xRDk/mWgLq/NQGyaFgQ\r\ndUIt8b7rw90m/hg6c9NwN9+kGydT4zpwV3v8dcf8MjRKFsCxM2gYffuY2FLB\r\nvZCO8zT/oS0h/zcF+tpvq/zCjMqv+zx54/UEZX1sQ5P9t5ABgWuOmgEWAYZO\r\nMzmqCF6j4Lu23/RvkdkCAsKg5Pr0R80ygRKGbMuwwk4ciL3Jnqt+JFeJHfws\r\nu6/P3lfuF1zDN3fsOlD/BUocsugLQWRT9Zg=\r\n=mbeG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f033fc8d1.0","@material/base":"15.0.0-canary.f033fc8d1.0","@material/shape":"15.0.0-canary.f033fc8d1.0","@material/theme":"15.0.0-canary.f033fc8d1.0","@material/animation":"15.0.0-canary.f033fc8d1.0","@material/elevation":"15.0.0-canary.f033fc8d1.0","@material/feature-targeting":"15.0.0-canary.f033fc8d1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.f033fc8d1.0_1664323051650_0.4249314662593837","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/menu-surface","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.8d7ae912a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bc28c67eea2fd94b47a87bab66165f9e40d0652","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.8d7ae912a.0.tgz","fileCount":37,"integrity":"sha512-uXHgdUq8NMXxjEVNfCzpcv3kVJron5i8soQFTDwDwOV/QPeQitwCcB550utFx+XmXeRjzv9fzbbQZ9GSMsHznw==","signatures":[{"sig":"MEUCIEttxXcfZbmFggVq05KdY/0Qt9F14tF68Po6F4yUpMF3AiEA+VGsOuXSbNSvNeuKCPsyC23rvTN2bZKi/9DVf5MS7e8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/4gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkhRAAnSYzRQ14is4/YrCOKyiWML1LHKVejJ3xtdGS5gjrgDepG9gt\r\nrPEqiEhmbDGIbKdUgrG1I8rDvPf2UwlEHcbWWE9hq4XS2kX+rhQxBeLtJ8j1\r\n2mxoycZiMsWdO0zD2vuENwIm5r5jdTReb3mV3lcafXld3vS54JRAP/c5pMTY\r\nAItEpNKeQFCUI94tOT03MdmtLrTF2QMFiO91FunumArEq1flZDRxm+nyQED/\r\n5XTxDgoxzi/XuPdTWVHYKMVsmmfU2OeydICpljqgvBuHRS/sYQMjE4BuuzPK\r\nreQoKYV7WP9IjdkLbnqKhMGiwx6ZVBlsiLNCo/fIWy8QGm/yKCEVgfnlbm5Q\r\nZOj1pFuR50dswfcTO04W9s62gOqNyDnU/wMWD87+65gUhRL2ZqxBaVieCY8k\r\n2yNpXhwsD4nh0pCMWnDoE5S5o7GKatDLZ4HQvp9pyw0tJGuSIfNgx/qXYwiF\r\nf5U4mIhkIX6rjluHKt/yuo0oraFjYVwYMttlWny2/+d05PFp2o2hUaJHca8+\r\nETC/qtK5K1A3j9r8mpQPZXphhhDtyDeqCptkuho3VA+Kby7HTN2leGXViBH1\r\nmG4u03vrNuZu2+lOMm0cgvMl8dWjxcYp0e4qrZGolaSrazE0EyIHeey8UqWV\r\no3kDsJTrQtrYQLuuVzepdlyC6XsBVO8IUCE=\r\n=avqj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8d7ae912a.0","@material/base":"15.0.0-canary.8d7ae912a.0","@material/shape":"15.0.0-canary.8d7ae912a.0","@material/theme":"15.0.0-canary.8d7ae912a.0","@material/animation":"15.0.0-canary.8d7ae912a.0","@material/elevation":"15.0.0-canary.8d7ae912a.0","@material/feature-targeting":"15.0.0-canary.8d7ae912a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.8d7ae912a.0_1664351776466_0.0479311376677245","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/menu-surface","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.db414b864.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af9435e422eb84a57790c581a3c3eb38d6a53adc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.db414b864.0.tgz","fileCount":37,"integrity":"sha512-Z0IqWBX/wJkUCOP4gAFT+VqQ3YMNPQ31tCUOQjELMToy6Z1O4Y46QeDEcswS25J3OjXvZyR6JtsMvbd/F0Ez7A==","signatures":[{"sig":"MEQCICcJQlzYjr5+msMaRt49djpEpitg7UfaRjf9s+8Td+aZAiBAicZQHBQHyvxLpuInf0H1tMn/SQ03WBQ0sdTdPIJQYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNF/GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqdtw//SlDPLIRTj+ZFu5Qlvgfna+mE0siYRcGaiWjQSYwmArU/dmwV\r\nrTm73q8cJeP0LuTmipC2j8gSMSAlL0IaiAbj9j6UD+RONZa7ohKdE7uYXXgD\r\nmm9ciDpzCJ0kN7glmSqDywj+JDwCKE2uul3et7zj5kNpmcPsZhvJzlyMU97g\r\nf0sO8BXqJh7qFLhpLG3hC+YI03YB8a8Xl/hni2EQv+oCnhKanhqn0ubgj5Yq\r\nlOYId3jxY5N0k2bqqYlrPAc4LxVz8vKK7JfdSDXOEYG5mmW3/IARwYLUQuzU\r\ncx5fvcK/qyY0H0RrJmis+QhsqmCmroqI4xtYuR+XxlIsXuhbng6WQ3LMcT0+\r\noAB29clGmvnL+Qk/tM2LlYWYSpFWpje9vHdZlKPZz+VZzmrW/vaRu8hZ7NH8\r\nBr2Y7AKlgTjTuXLqLXtOthXqrrgmr1wVlGIB1eKr2sB/sD4NnzbIKBhpFLnn\r\nWSlhux3R1Oxyt894LJ52LJWL1QpWe+mjSnyTnPLWVtQtKWOdVvHibfNFym2n\r\nipl9ep5XuFxhL5Sd5AvDnzHpoBQbxWd+RSgu2TS70+QFw3CpT6BOAD3kjQBa\r\nH5y9TddKhReJtFCM8KREwhNkmaAPsjTE0bmKAUm33SijQp336ETYas1V7fBX\r\nXg+bnuNyySwY/1Z293hOxKXnNSM75r8Q3ec=\r\n=7occ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.db414b864.0","@material/base":"15.0.0-canary.db414b864.0","@material/shape":"15.0.0-canary.db414b864.0","@material/theme":"15.0.0-canary.db414b864.0","@material/animation":"15.0.0-canary.db414b864.0","@material/elevation":"15.0.0-canary.db414b864.0","@material/feature-targeting":"15.0.0-canary.db414b864.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.db414b864.0_1664376774724_0.10282903088291717","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/menu-surface","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.28cc6791f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a591e8423199c572e0dba4cf052ff75ac0ee01b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.28cc6791f.0.tgz","fileCount":37,"integrity":"sha512-8VwJQL8qH2flSl1kgmZPGuj5hPLJw1q6GZSF8ouTcXGXXM2BqeeOQaZ3lo4jP/Rdbn7kPE8o2v1+zXU180ukmg==","signatures":[{"sig":"MEYCIQDbPN/0DK6kJnAPkXlMQ+OETDFnzE56/I9EZKjez4qwmgIhAJsW9OeIn25iJCWKoJkCFBESqTKRX6g6eQwMEsYe0I1S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI1JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXqxAAjcF7wawxcDijxmLsvboAi0yRA94tDgrtD9LTBcMvLBEb4Onv\r\n4S+yOxkqkA8PP6H9Qc2oEvx+aLhk8QHEhv9MpSre82GuJikOeYsUfARH72IX\r\n6UH4iOgKFjUU1pGCRlfkkuscmagD/I2cm0hJTU7CI/5PXSealJ5WxtTdWrbs\r\nwMRfgIls4E2i9E70RANUbYznsbRaksz5bApuplfPvjA5rU1RHTwXEiYqFkuD\r\nHn9/JzvBm9ks9zrI2Ib+BrH6Pg5h7/OJaRys75uedq6K0UMhrMSNrBlPRzM+\r\nNFEIVw7YzcngaEQVIJoOh2yDpolt5iHS02o+bzSE+iRes5SGgh9QSZoTUtCX\r\nykSVfkK1WDqF4lA3tgahDBkOmyeUBCAhg6U1lQa6C3AmWXq6d5I/OUJG1bxe\r\nH2gmEBJihIM0ANgw61JYt+B7/jz64wnBFNalZKOM7wnpLZcruG2G8ENj/Pf1\r\nCHWe+KhNkLjama2Y24Ld9L39he7JBdQiqEkjdtaGrYoJefkFPJTOoxbRuTkF\r\niaGwif95h4BZbWSn6kq115cfo8T8UXh8SIdhwJSwkr1AgP4pODPiMfzZ/Opo\r\nrHmv6ra+bRrtTCkUWjtA+XcQatWG80p7wWyI/NnIrDd6r+wgUs02HtocDU+4\r\nEIj0/bDUBewDHyupnYfWdtDPmJIkIL76bvQ=\r\n=60bt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.28cc6791f.0","@material/base":"15.0.0-canary.28cc6791f.0","@material/shape":"15.0.0-canary.28cc6791f.0","@material/theme":"15.0.0-canary.28cc6791f.0","@material/animation":"15.0.0-canary.28cc6791f.0","@material/elevation":"15.0.0-canary.28cc6791f.0","@material/feature-targeting":"15.0.0-canary.28cc6791f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.28cc6791f.0_1664388425414_0.9689973757095498","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a515a2d18.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"016662ba0e148e765c28f01c4663422c177b7ffe","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a515a2d18.0.tgz","fileCount":37,"integrity":"sha512-xa58T8mcGXbZq4z/vlQZuK9ueCU3fwYYgMBg0v/n9mRWqGj8r9LzO9MmP0hSbf2unRl0XIAcPPzzRgY0kIfdcQ==","signatures":[{"sig":"MEUCICUURD4fGawyqi4Kyl1ssq+xvlxz3XUrRoWMu/mXFbH6AiEAsC8ontGpAMAIDxUSngggWW5XZpfO/6tc7j7ODAMw4Ow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJi+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDPg//RyPnGFn3/009cgbJE6aMsMdnayJn4EcjUdRrwkjkGZMJi4Qj\r\n8WaXJVRtrfLThlO/DHRk+F3dxkKSrAuWWHK3Bb7KrSM4WQ62Mnbf1APZDewY\r\nhDAD7vwP9KF5CLuONiyY5sCZ1geDy3jVntfFO7CR1NVEDl9FV8bnI6qdDleQ\r\nu95xa2sWbSkk0c54ArrC1fFTukbK4U82/vaEVdb0col6niWfAjnOz9gRPwz1\r\n0d8gHxqJBK0PFLdY7HbbZ4Jir5LJmzPVN70iPO7ltnGpRtVMe00kT3SpraO1\r\nBtVhM9HxJIrQwH+h6z7RVy8yZQ5v+OZB7w13JW9LyLxPQB3wWmUBKUobjSsp\r\n+BGwkoynPZx0+fBwm7D1ceytvCH0182Bgo2CnqlGsQIYCkqLkct+agd/uXCZ\r\nBZsWTwBoZDeZONPMICv3LclCjWMAZxAWgtxZjNfkwWaxjWVwRoqBeTXMwSz0\r\n0H0nsmi2CpDF3z0983Bb0hpd62AIQLY/CvsHlq+ohhHiG8piax5BpZP2auKf\r\nFX8RfuIlAEo27SL6paBEQAsjo+WBt8ogwdjK+zaAW3i8A62S/72WoT/pvehj\r\nioNBTAWSHJEH2sI/WVL7Yta+q8E9UcWCaZgXQlRNsG2b5b+nGw8wWh7y0rQe\r\nBkaTOZrKl0+JyPjFuUM0k9VLwX6hIckT+Vw=\r\n=3iln\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a515a2d18.0","@material/base":"15.0.0-canary.a515a2d18.0","@material/shape":"15.0.0-canary.a515a2d18.0","@material/theme":"15.0.0-canary.a515a2d18.0","@material/animation":"15.0.0-canary.a515a2d18.0","@material/elevation":"15.0.0-canary.a515a2d18.0","@material/feature-targeting":"15.0.0-canary.a515a2d18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a515a2d18.0_1664391358273_0.1708439138084521","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/menu-surface","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.ce9523167.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f129f78afaf5e62190687f05ed46aab3e8a1bcf2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.ce9523167.0.tgz","fileCount":37,"integrity":"sha512-WB8VwhZyIIDw97iwAp5Oxtgqi+qigMc7bol0Wl+9P4kOKbVbYeQ42f14m49SmXAZk9MjCj2QoiErlFNuO5L0eg==","signatures":[{"sig":"MEQCICNl9QtQoyHXaGll46zdtFjwOVm0sFG5FRb/8GawPSs+AiB8BTFxPPKNTMaMpFJWbBWwUPnEu0Pk5CB7HNITiqtlFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgCaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6Lw//R32E4sFZT89f7YksfDL4TeeXMWt3ILFs+pjMKoYNPm4fQSYu\r\nNXJPWczxP4VV6i0mhwBKarDhp38Fseij+fSdHq6059GhpeZO8IsZq7zEMgNH\r\nP6JuXJrXROPVhBbJ78q8rhJjH/r6NSCcgVNsYDaHu9dB/88W8+Mefk1GIreM\r\n8zg9ls68zxWVng4RLTYME/WJaZqAQVr5eQhtpaF2fAGSWlmxWrs8TxnYKVra\r\nHRBEEYhDsIbM2ziSTafyj/X+H42YleCAjPuXXDxUf/+G9BmhCGI7MnH/TDHW\r\nFTRENAaB0vlnnn/n5gzYbR/uVOfrl/Yjl8NsprTA/G4kW+STqQz0BWWV/Jem\r\nuoypJ2RZ1f13e+Zb9oH+YMZp2t/KjkVziLYJSbmqXHhhuX/w8QFNrfz0NGMY\r\ngAqWAfMAL3PczDXBXELB3BvP/4mIVJMkosUSvztFdROTCHWaLUGzegfbXCrX\r\nvZM3kCRKXcR87V/SaTcUpNP44ZdGDPJjtse7UefdWy+DCOcyId0V+qpfi/Yd\r\nS2sVw4Yrpo96J5/STW3422govjobB9aeij97c+NzSREsFWylRNuIYU9/Px94\r\nhuOzsEw6FI0rBSwVZrGoPWMDGeO+sHGqzJx67smYVCZufgSX6vJcgEhFzmbb\r\nHolIl2RwEwqJpu0Eg/OzUCF2EH7BB5HXRBw=\r\n=V5Rq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ce9523167.0","@material/base":"15.0.0-canary.ce9523167.0","@material/shape":"15.0.0-canary.ce9523167.0","@material/theme":"15.0.0-canary.ce9523167.0","@material/animation":"15.0.0-canary.ce9523167.0","@material/elevation":"15.0.0-canary.ce9523167.0","@material/feature-targeting":"15.0.0-canary.ce9523167.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.ce9523167.0_1664483482704_0.005279497076703388","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/menu-surface","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.b2310f7dc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"055e2ea51a5fc00a3179b161c4f4ed3c50d754ce","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.b2310f7dc.0.tgz","fileCount":37,"integrity":"sha512-LwBRSJNL8zfILHR+MwH8FEMElpaPdGTnyfxYO9lrFOh0xfmfBrb2446NVpKNttNUcHsINtkFHLLrvMyP4P5PEA==","signatures":[{"sig":"MEUCIDRA7FKtSAgUehkmeyJFKaTGOsxiZ/0nOt4tna8ut7FOAiEA3fhQzLaYiewx/10NKB+qBEm6yOxPzZa3QGW6LM7PlCI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjTJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJBw//aEkmcbtqYBCU5Dpr5ZThYVBY/KnX2BUxkz4sNYFlbYiNHFIb\r\nw4F97TiAJdCWZBU1HBQyJ4p3/ZDSI9mE/QTDyofF5yOaUVGxzqR/RbnSL1vD\r\ngzMSAbmYefHFwOckbeBAGab9+1nD5qptDDTPzwi24Y7lwy5jNlR0EJUtjXnX\r\nj2KA/QC/I2sDnkznRZgRedPTg1Oyxxh1ggfa6IPrJ6Z02SRDKMBkx2734KvF\r\nFvJqN0uB7nEYa1ppSplBK95df+0TIL1eRG9S+4bYE4/ciFC7m51+OyNdKk0l\r\nk3ubSasa0OmQr77JOLqYKI8TAF/ideQEF1dGuqFSLPqttbcO7jjceZq7U3Z3\r\nyfMharGNTWU27TZb46XqRfvx2bp3KNfSqLzvGPPEuZgFSJugiNAoSiXmL1b4\r\nc0dWr7J9DymZ/sl/p6CzUekApcpnHxJnWW5VWmyIByj8HBAouzUY/y05nXIY\r\naEeivRzLf6DDxHlwXE7c6CeaV92LyVNGwsJ4eKBRYRmiJtMwNCoHN33KOTZp\r\nYWMEne4lERpWyZnzE+1bjjtvb/zHtJvkDlnM/Oww5Z2wsfZe3ymbkDyt5s5e\r\nVRGJcQtWHcXh6AG4X4vkBZXFRKoZW5hFqoTOiE4fCyBDtCNmzeGbulaWjCQq\r\nkAkvh/EufVsLv2LE3hLtc3Se/kkSc4tmpIo=\r\n=bz3c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b2310f7dc.0","@material/base":"15.0.0-canary.b2310f7dc.0","@material/shape":"15.0.0-canary.b2310f7dc.0","@material/theme":"15.0.0-canary.b2310f7dc.0","@material/animation":"15.0.0-canary.b2310f7dc.0","@material/elevation":"15.0.0-canary.b2310f7dc.0","@material/feature-targeting":"15.0.0-canary.b2310f7dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.b2310f7dc.0_1664496841047_0.2316283807698054","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a44241e54.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e77437d9fc444dcaf41692a9e36b960211f20770","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a44241e54.0.tgz","fileCount":37,"integrity":"sha512-CPH+P6O98RlFtfm4XBhtQ4tATj6m8hMz2NDZuGf2Lc1EiP3osTvex65E6fjJof9gFnqqSv1o3YP5ANZyJvkV6Q==","signatures":[{"sig":"MEYCIQDJjPZZTtwOiKQUcLq6+QA7W4oNSchIczj+SxeoiMEtMAIhANB8Gg8HwPNzsNS3nyMPFsfVduMaUHHNqoEuJ1ITCusV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqb9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpz+A/+LqnGKPInrb01t4qdDiNDSDgD7St9XUtYX+9Icr2yGZLrDqhK\r\nrzqafLHhTcBXJqhM2WjkDnLxliuQCieSzF5P9gqjNbkoZ8zbgp4hTd73kvyC\r\nuleTDWfo4IVtcV3B9t7t7brG0pX3xKrusGyNVenNRDBQ+m63iLEba4kBCj6W\r\n+HoLJbZ7UCpnbM3FUeb+VMrwbt9EEgcs/CGDXI13gegUxpWZik6Fdm5Z8iu4\r\nGC3N5Apgle6HgPf3tjHgvwF0jBneL3nXTKTzy0ddQMFqUAswVMeoCxdD19D8\r\nEYq+CxTj95cn2gfQmAtfKQFnnU5LxvFcDCEThWBHb2f30Q+O/TQPyDMeSVFl\r\nzoCwF6YU4ZjgqzASTr9PxcOobRmJEUH4rF5TQzeMyGp+V0KJXkZuPN7R3QdQ\r\n7PbD4kprlfafYoifaikPtqz3A9Jo9q3OZdIViKHhZypP15faO2y8C8hqtxNE\r\n5z1c0QOI4KVTS2n0hsv+wVqygs+DnnGqsDxixC38BzqM4KH2xG+9bLLSSnFP\r\nzqhkv4Si9chUMxwW17FWEzQ8GmpaRCws0VqsnaBbeKW7imR7zS7pPpIymuNM\r\n/z8zGBY24NG8YgJaBTrtjvI5XisYk2gloplgM2TyKW04/UvP7uqeiJnxjFD/\r\nyohIVwjAHWhi9MvnRiGW8vBPt00k+Xeb3m0=\r\n=TsRO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a44241e54.0","@material/base":"15.0.0-canary.a44241e54.0","@material/shape":"15.0.0-canary.a44241e54.0","@material/theme":"15.0.0-canary.a44241e54.0","@material/animation":"15.0.0-canary.a44241e54.0","@material/elevation":"15.0.0-canary.a44241e54.0","@material/feature-targeting":"15.0.0-canary.a44241e54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a44241e54.0_1664526077497_0.48440903169194405","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/menu-surface","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.0ce81e115.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40540bcbdeafd4d527556f7d9059e70ea46b8054","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.0ce81e115.0.tgz","fileCount":37,"integrity":"sha512-VAg9KQwrytbXqpWvoSelTEmEgqNc9HOioP/4x4KnO4BmOaUA9oD8IxnWW+dIsX9tAOfQwAtzW5zWE1y3+s8Gvw==","signatures":[{"sig":"MEUCIQC1a5dp4haUSpiGCTnCbPHgPlq/xklgKl+YApDesprYlAIgbVaIkbZselCI1H+4bxcsnC+qYvszW/YA8igLB1XG8WQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzLmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqq1w//ZxEEjG6x+RiLPGgqjQPEK6W9LC4TalO2GZbyC2Bbh3m461/K\r\ns9Y2ZlJVAoP6tCcmLYGfkhH+hXQr6sLxsJiQetLitYg7qrvnBtEdTUbgwcnu\r\neyqSk2P9EuMESaiFOl7dB6afHzxQGBj23NmTOv1mOvWJlLr75BVL2Bagsdg5\r\nnyK8ujsihVNI564hXIOAm2c51sILhnGrppqkYFQoLuLMI9/mgXlMjBbH8Bo0\r\nuxFEfMx84fl+qEJlpNNIYXEqqrMPDV5ttFJ5V0uU6Abahhf4E4oNHM+kMTxh\r\nWo4YNqurI7QTPFc/BtK6MHOrU0o1F+Z/iLrmmEatxnA/Lz3UJvNBWTIff+VE\r\nXKh+hRYou924hoqx6S85jt+lST7qLZ9CZIia5hfOpzh0mJokaOFqMPNxx77/\r\n6xMZG60SMMBGJ5s7W5/ay+x+XMt1zgzeRv4xQg6U/RyPK3ET8hGXC6N0lB/w\r\nT8/qDcsAAwF1DFN4COod4qZe8iop2UKK83ZNVBabYxma8GC84r5CLhchMc66\r\nxTov5g/tz4wP3z8YVdVfxEbhX5W4xwwyOpoyHB2Y7cQUbamL761t5WsCIdI6\r\nDGp0hIGWg1Vfyvtyb5TV4h35ltS3T3Q8H70kO3f4mrmPLPcoSkatFsVJp8ce\r\n5SXobnbe9rWevyuDBw17QGrinLo9N1e3AsE=\r\n=PaBN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0ce81e115.0","@material/base":"15.0.0-canary.0ce81e115.0","@material/shape":"15.0.0-canary.0ce81e115.0","@material/theme":"15.0.0-canary.0ce81e115.0","@material/animation":"15.0.0-canary.0ce81e115.0","@material/elevation":"15.0.0-canary.0ce81e115.0","@material/feature-targeting":"15.0.0-canary.0ce81e115.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.0ce81e115.0_1664561894430_0.8442850379049607","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/menu-surface","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.3cc30f6ad.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb45f3d98ffab791e3b621939deed93981cd7080","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":37,"integrity":"sha512-A+iLmhcZL6+AJ1N3P6TEELWHW4SBCsZjwvv7RPLTQlnRBDX/ICWTR3s7iN/UFduzE99LEVRWmWDaS077qe/h2g==","signatures":[{"sig":"MEQCIG8WMq+mgA6mNA0UVUNctOLm0qb+j5BPeVAeqo1wxXtDAiAY+u1yJbhAUUJw9q8Yyyscqoql8eJpM4oQECZMyqN4WA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGsjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoO/g/+MiNBHdS0uR3ZYcrnRy7vtBNpLZ3y/zmMes1ULQBlWQPABBha\r\nZ3F2K4ruNCowBd16V8gb4nT88UfMhqN6qOZoajtcP4XcKTPbBDilg9j4oTJT\r\nJdmEYJLodLkgbtpdTrPN4dwvFWOVxr0liQKuAoN1jvGQUc6H85L/xfnVGK43\r\nwu4iAol7eTop8snlJYBKElqCXTzHAholZPbPDJwS5xbIKeYmUUiasaXWAcf7\r\nGo5WaHksa+7UaBPmK4MXoEQCdWTtf4mPKlTTSsqWfwiKVqmLwgkbV7NP/90B\r\nrrJLERpVLZtLxK5EppyfdnfoANbi5e/EwixFZHso0ejei3IAlb0P/+IB8XPY\r\ni9F7+d/wM+RtniRTwtdVWbkk3yGHuV00ro16JabhvQRvm8+MFGVrjZ9qjx6y\r\nYiooqG8ckyi3JeFjQkei4KHfa64kDpXWi8p3Q/RkFfVJf0bqZthW/zwmFvOZ\r\nc2J3jrvBt88kr9AdefJqand2gae0D+uQVFfyhHM8o9MWbFJ720MBb9/5ZrqT\r\nelZkb/Ifc0T1tPqYRvvhiCTXTm2gUzdhDK3wAgCCkw0a2L4cczJXHgM6lM8U\r\nrtziBKYC3QGK7W/Hr4LwcNaOn+3VdqkCbLopzSXMDT1UTC6ixhjwAuKOXGC2\r\nDhMTXMK/lshIexg7NAF2sgQOWNlzvFXmqjY=\r\n=bVOR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3cc30f6ad.0","@material/base":"15.0.0-canary.3cc30f6ad.0","@material/shape":"15.0.0-canary.3cc30f6ad.0","@material/theme":"15.0.0-canary.3cc30f6ad.0","@material/animation":"15.0.0-canary.3cc30f6ad.0","@material/elevation":"15.0.0-canary.3cc30f6ad.0","@material/feature-targeting":"15.0.0-canary.3cc30f6ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.3cc30f6ad.0_1664903970993_0.7436715646619425","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/menu-surface","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.d9cf98e60.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8359bce22a830cc02da6791d87e19b0eacd4dd7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.d9cf98e60.0.tgz","fileCount":37,"integrity":"sha512-5KTbCgmlS+hnJp6wjJpNRNm7ms0tfeivQg3lcBdDjbBJmgO5Iqqie8WOCR6zSgtsYAoo88dUt89Sqwv+sdE9VQ==","signatures":[{"sig":"MEUCICJ+5JvCxiTSaPGrRkDFi8E1sin6ikXqIFZL2vjtecqpAiEA8MPnj0FCPstGCGYjMxpEmFRftTFa39FB/Afd4ei8UK0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPIObACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqSA//WOdmb5lMl6YOK1w7GX6zKnvctuT40ZT8NF4Nj0yr09qcezoc\r\na28iByOijKPnD8vxj2YqfU+qoHEAAGgqE1lftW/HETEs/S8Zgl0kdtuyIt4L\r\nzrusTjxtBI6ygpbveALHMjud4c4NCELjnOFKGrnpjbWPh8wrkHuox25DDaS6\r\n65ooqdsBUvpzDm1+ItzHyvmz4TOyJ+ZSdCQxNFELkE7gdYWfkXTcWVOkmrim\r\ndZyi+PfBxF93qwuf7WVyLULDCwwj83mnpuqDaFzlSPcOXqwjGhwG9n5qBKu/\r\nzdZ/mGEwNNZivYrYuDta3cJWIFlzAS8hjxZgLsrvoiVobGBDn2URFASI9vzb\r\n93alXTtZwZ1vEh5/Qb5C2Ug/pkhgXvKAJD1ax6WyyVW/55dEPMTaelxigk6w\r\nw9XSTicXZsPO8AZEaL28hApar/ps5CNIieRqkkF46D7w7qVC92jl52i1bvgn\r\nhL+rijhyY5aHKHTnIO7kUGCjsj6B+waR0Hv7tvjwhs8DTHtpGxLy7m7bG/CA\r\nsmAOkFK0jUwdf7OPf5rREzgr+A+hheTuihL8x25GhOrAncNpJ3wNriFgH24k\r\n2f+A6SwN06GQuAWFGPudr9t9Z/JK7RygzFIHu93g8sEWbqO/+ioeksuhP9S4\r\nOJJyGfwuXwpE78inAQPiEIQ/FC3QXyg0xzA=\r\n=Osm3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d9cf98e60.0","@material/base":"15.0.0-canary.d9cf98e60.0","@material/shape":"15.0.0-canary.d9cf98e60.0","@material/theme":"15.0.0-canary.d9cf98e60.0","@material/animation":"15.0.0-canary.d9cf98e60.0","@material/elevation":"15.0.0-canary.d9cf98e60.0","@material/feature-targeting":"15.0.0-canary.d9cf98e60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.d9cf98e60.0_1664910234905_0.1879120850007785","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/menu-surface","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.d71935c8b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fa641374b466f58315cd5d9b7353e3fc09df164","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.d71935c8b.0.tgz","fileCount":37,"integrity":"sha512-T9eYF/tXhAz63bbRwE2LtV6k0EDhcmwQ4tQDXjxos5oh7k9szeGhY0M3IjizGuXMMSNRDvr7ew99oWraOsZIvg==","signatures":[{"sig":"MEUCIHVva2WNanYfXM5N+1kWbziBSQRb2GXjH5cQjFzXAnxYAiEA86CEEmRUVTJit/J9fU5ymUi0iN5PNiWa6f+CIvAHZGs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":366126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo6GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrH4g//QrePXE71QRIYTdl20PV3C2er3JMsRqwh0lWE6eJUpdNqsnWC\r\nkTUZf5NImNdP176IjJkerdQx3gF2sRALfjD9twG5GjWkfuU4YzRk32XaKxDF\r\nuSuUv0IjEc8uW90EFONf1Hh0K/gWmxpsd1AfGx7YlFdpv1e2th4Clw3kgqY0\r\nKYTV1z3/cncyI6LH4lwbtQEj/DVK20q+FQYLLZ8gv96TipTImQQ0nP5VYrVA\r\nWEjUInJRs1kkxzopW2WwjVWl9+fpk4B/Ku6m7ki/H71ylckxIALZ6GfcGCnu\r\nFrYjbglbnu2MKyHlew2tbGUl9gJ1GUACqA6ZBgAkYl+Kw7PuRQah4bRJVf8B\r\nUeIstve21pLJFgE4L0dXbsRgXimKnWgIExMLFBlOFjrMJXyFVQm+Sbm0dEAt\r\nRe1ahaIRezFnKVK6YDJbVdtHgxvNx3JZo5iWzGzmPLuPwKPo5/YGF1Ib7c4o\r\n+kAFiTYG7wEdT3y/jl9RrrHSwps/yOKFmFYCentU1IWh3W/jKemSrC2KCznI\r\nQ8FHpPerKzgK5rrYw2k+fbWsv4LaW1m8roM1F30m4gJzw/hJ99IzIwrZInAa\r\n+6R5xsW6lzK8ny53DK4r4KPQDoxf9Q9f7Jfgjd39v52PdcQ/0ddTrM9Gr5L3\r\n2SlYjlzuD9QWm141GFgsYXqFzhfl5AbEI7k=\r\n=7A2v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d71935c8b.0","@material/base":"15.0.0-canary.d71935c8b.0","@material/shape":"15.0.0-canary.d71935c8b.0","@material/theme":"15.0.0-canary.d71935c8b.0","@material/animation":"15.0.0-canary.d71935c8b.0","@material/elevation":"15.0.0-canary.d71935c8b.0","@material/feature-targeting":"15.0.0-canary.d71935c8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.d71935c8b.0_1665044102113_0.5907899729864026","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/menu-surface","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.49c56a25d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c572d9ddc766800aa961be2f70ce15b38e418cbd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.49c56a25d.0.tgz","fileCount":37,"integrity":"sha512-UD5j1xcEKdKLIK3bA5XZEyDQ4JbCPkK3nZeZpBGxMGqV5/iv+1o/o296YzhuUme2ahUlhiglg0s9h5CRmYtWXw==","signatures":[{"sig":"MEUCIFchW6Xw8w67eXEqhZ9q0u6Ak6aHQbGhR+dPylsUoaMJAiEAm+qdILggeKMEB2StyiO9G6vasHnJtKenJtNmbqzh0u8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyOaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQjA/+NaeZbxaOGHXedzgfnnsp60Gyr9ysKz8Uzs34tYaI7RmIZjad\r\nQzqhpjiTLrF5Y5E5izxycv35dHOEpP/qATMG4H4vlYodOlRu48uBBHQJQx09\r\nzzTXtCiZ6ZZf7Hv3UzBnFsynGQ92s+k2rmhoJYr4uH8mtf8lFGW5FcQX/rGc\r\nmrfoV4tTBCMm4Vf7Opaf82I5dgo/JZ2JhC6o2N4j7nBRAmJQb3yc3jRuwyG0\r\nu4usw9B2/txoATmWRcC6TJ8NYOBoCu0Z4wTTbpSo4kDx0YjObgiwz7YTQW+Z\r\ncbCT84zNBlPt9g5RfiWoz0EZBQhVmrFcWeYc2YI8kdvUtgIoTLGKgAp66oht\r\nKwhvccWo4GeXsrPpAHc0XYQuAPw9LTG+E5pqlaKhxME4C5mzr0OeWTxB8GPd\r\nN6j/kVphoJC5Jvco51HL4ZKygl5SmGjnfSbNb90lHmT1MewE61lRDOEIQkKR\r\namsotAYeZ7QqH1RCzJ0TmdkUY1Ae8t2yvG/+WXiEj+yPCNv5VlFJcUB0Q8Gr\r\nGVywm2DMT0Jeyc0kFoS0XoKri9Ik081XKSm6blrY6Ikf8wvdgmgKVbAddAf/\r\n8W4J5E1jiawi5qISqEFXR28iGD1DdEBAkEMtQrbeWgeMmtxjOFZG+MZ0WUEi\r\nbOEivQdvvnNQlsDH+0HFTWNv+flhCCBXeus=\r\n=CUoT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.49c56a25d.0","@material/base":"15.0.0-canary.49c56a25d.0","@material/shape":"15.0.0-canary.49c56a25d.0","@material/theme":"15.0.0-canary.49c56a25d.0","@material/animation":"15.0.0-canary.49c56a25d.0","@material/elevation":"15.0.0-canary.49c56a25d.0","@material/feature-targeting":"15.0.0-canary.49c56a25d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.49c56a25d.0_1665082266342_0.10978440453112692","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/menu-surface","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.07acddef3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c23f72a9f876b136bbf447564a228a1ca5044548","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.07acddef3.0.tgz","fileCount":37,"integrity":"sha512-SjlFKxGEZbNXuNLcaLq0wkyYaGE5OPK7xUe+LdxQyeK3cjAdlBAOQ1R+gC6IxhohR3Apa2ktHNy17zWwAHlXAA==","signatures":[{"sig":"MEUCIFtmxiKkDcUMXffTSTc2ZJ2x7DM7d+SONks19Bu59hogAiEAo0X/imK99bNmTSYRA0Anpodo2Av787p5HzFdp633mrg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJwkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVLw//bXVotiXOBibwaVLZEngxT6BRPi9Yx0oQ2pNmy/yYTxjyu0Dm\r\nFEQZYA0LKJrN6wZJIdaLiaKmkrALpYKazrfLfL/qma7bVYcGtPIHIK/nZ47+\r\nZYncV12GpuucoCU7W37xqb/27a05EX14V3GT2KP6ZHjWZxe/NYgUNFXSjthV\r\nGASgXB1XLU0Rfyyw4LOCtlRMAwqgXKppueokehSmi6SXUdKuhbvohcThF42Z\r\npNHEZ0QAT7vUrN6GTxdQogwn+k2lXlY4eXbVyEs8r/jQJ2gpX1NB6qbsOrEp\r\na1XkEjSI4iNNxyvbQmVwFZnHoIy8RBT0gBoBiD2Q77lhbPI7Mh/Fc8UbCjv1\r\nqZ8kGEFaaMNgM3PQJP7OZ4za56dTVXnJ+mV6qBwkjiz8ood5UiC5iFBQq+sD\r\n3TPGzV5eF72EW0xKRrVA9c1DqCjNg6OAnXKT5ijmgBxVeQLOtxuiLvrltxD1\r\nj14TPXfTIU7zMO1VN3TO0Op5Mjhyd45I4gKr+w4M7hiYCDs1smflcf0+K28A\r\nrLJTI9FSzvskEKzf40GuLDKN8k7dlr4TvssKnlu10BOTeoUBu9CSG9wjSIuE\r\nLIovRkopX8QSJvR/2djdDe2xJ6dbJzE33c3Gg3mmXnfPc2n3R/LUFG9XPzDE\r\nE9/ClZklbEvY+07JvRabERavPeUOIxyGDfo=\r\n=DMwB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.07acddef3.0","@material/base":"15.0.0-canary.07acddef3.0","@material/shape":"15.0.0-canary.07acddef3.0","@material/theme":"15.0.0-canary.07acddef3.0","@material/animation":"15.0.0-canary.07acddef3.0","@material/elevation":"15.0.0-canary.07acddef3.0","@material/feature-targeting":"15.0.0-canary.07acddef3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.07acddef3.0_1665178660589_0.8000074668013675","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/menu-surface","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.1c74eb2c0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6e6b2e4c8b9b73b3763e17c33c7bda615f1813c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":37,"integrity":"sha512-TTI9aMUIAuwSiV/+oHbrb8J7Ck5VeLF3ubv2gqOW8x0haCtIMmePL9z4+Kbo4USWHBc2y8dBRF0iRS/aId0lQw==","signatures":[{"sig":"MEUCICiOScMC1imwrUT/2qGww+c02MDRdHgew7AWS3z8SrA1AiEAzjuFYWc/9/Gb7cZDxpYHREQJ/RbcUJVyuTIHZWrkNSY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKBRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTDA//cu2J/p0BZAWDKGkenH4QHMxeqFCaw2y1sCCBw8gaU1oHGotf\r\nXyJKZk0crHTI9MOQ1wQCakIcmRM0/8hc1P4hlVKjDGPC5Wq/YRkNC5oT/tXY\r\n9l5vsl0hsWENrIy6th1KGZ4rspRk4Pxqi9WwedXtMrWzKRH/ukqpwrP08BlY\r\nXFSLJpuVWEEC2wxk5vbSRzD/sZ0TM1IiYzjHXl8dWBGg7t+uv1IV1UDl57uL\r\nJLID/TsxakhAJhakOg8Jg0szeoyirg/7x9DMzIsNcfJqPaVtmx68wIlcnbh0\r\ncWK3MFxQPekbY2OU5bXIIMkf9GsWD9Y9B17auhmyp/XEcYufOoCCHru0ENaX\r\nnHeMyWKkUp9n3kCqzVvhH/H55nzWNU0G6l3/F2VMky/z8SKQKQ7GiY2mYLsr\r\n/hX4b6/v19b5JK1PauO1TGXFzpFVQnPPozSA/MpSAnawSLsA6q7QKyFuCbmx\r\n6xV3GIvgbjVXMNWXUDvzZlEICChj9E3D20poHLKUJi+cTknDdAzOmcU4Pesa\r\nlpoXcaOuFNUq9grJAreax+78pTAKuKkVp6AS71H6+hL7GSqYr1msHHX+E33T\r\n2tCkidktKlCTetj2djV08kWV+r3rQx0mj7HHNhEpBrSVscWcmL6t2v2fnWaq\r\n8gs7iWk1ozRF5AjM+SHJBVO1EHBTd0IetGE=\r\n=gqk6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1c74eb2c0.0","@material/base":"15.0.0-canary.1c74eb2c0.0","@material/shape":"15.0.0-canary.1c74eb2c0.0","@material/theme":"15.0.0-canary.1c74eb2c0.0","@material/animation":"15.0.0-canary.1c74eb2c0.0","@material/elevation":"15.0.0-canary.1c74eb2c0.0","@material/feature-targeting":"15.0.0-canary.1c74eb2c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.1c74eb2c0.0_1665179728700_0.42817586634617477","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/menu-surface","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.dadfb713e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a03b41d12e5f284faa23415f01180f8511bc2036","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.dadfb713e.0.tgz","fileCount":37,"integrity":"sha512-H+xc13lV03y4qsnJ4VaJhHTlJDKI0zzzFVNgWMc2yICz/iHkgK7UvGPgHuB/LLxsITztVsHQu6SrSmDupcZrYA==","signatures":[{"sig":"MEYCIQCp8jILurWDo5nXmSlip2sp5TVorTakEw/hAtF/+221mAIhAL1Pfy9su47hkM/G3ivT1BYmC/TiVP+/JdDQoiGhc0SQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQUwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqW6xAAoaJWyf6pYLbj9m2E4IN6506iD2LLAA5uoWxWzgq0pGl9gFvy\r\np7tLCv4mSj36oWRHW/ipvyQfq8Pw+PM7oYF6EDYnwx8NgJ6IcT8sRitKGg0b\r\nLhgxurnqYafw5zR+ghebv0F9Aw+KgZaQ7fa//G0lpPjvmMPMi5sAVxTO1f4h\r\nzEASsX440u64dYG3bYPf8Qk2f99mJ3ub9787OYLamwrxSuNUVmLCbrc73cRS\r\n4XT8cImXAVYAQTj2eDw8ocx/uTBDQ1Bj/2o0ezFtSBLtcqvdrsgOXAPAMOOL\r\n25YmufbblJ2NDtZUuSCOSzIQL9sOztOeGkiYSqquEQNKu97a0VeEL7nUkeUw\r\n8ABPYbmhKGbpRcPJf0Y2t+Ji7jF2XUMe4lgiTYi6uTcKYKnFH8derOwKpVht\r\ncaprcL9fsSFfNxErkubOzQIjCSIASPPl4YIm/57GjICH7PmPTUXAEEZuuECA\r\nXtje5pFY2ZKXqCvtOYM6ikdIS1tkMueYe93HM5o3jHilX/TIp4k4/O8G2WWo\r\nUZ7bjamAyjsD4oeXm+VxJShwrYe4hMyvvHTsfWd2+WrYU0ZX60x/dv53yc/4\r\n8hsN2mB1vITNv07yY+0hOHMspIUBtVzPOyS5jBxPVyTJJruD/IeHCvbV3iIt\r\nDzXj4f23PsoVmwacZSjSI3kJH+GgKPkpXFM=\r\n=gueJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.dadfb713e.0","@material/base":"15.0.0-canary.dadfb713e.0","@material/shape":"15.0.0-canary.dadfb713e.0","@material/theme":"15.0.0-canary.dadfb713e.0","@material/animation":"15.0.0-canary.dadfb713e.0","@material/elevation":"15.0.0-canary.dadfb713e.0","@material/feature-targeting":"15.0.0-canary.dadfb713e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.dadfb713e.0_1665205552610_0.9981488695782705","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/menu-surface","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.395f1ce61.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec89f5c807794892616eead2a4d712e930d5a094","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.395f1ce61.0.tgz","fileCount":37,"integrity":"sha512-CpmZ3LwTcuKRihF2FrTejMEtWX1b1Hke3C71DaqEpPdfDWljbyZvYjho8w+6m4XzxTesnyIAA/SyABTrpaPhFg==","signatures":[{"sig":"MEYCIQDme/eCdVf/UcyXlwBgJ9B6eAEqG1FpbztWFy1jU4FxVAIhAP+KZfQ1qE9hqrjLhz8WXBUSCFYHQUC6u0Ekzo23Cp4G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQWrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyRRAAgDIBr5fBwfI6vLrLk8Knk0kZ8Jcu4UZGLRvcZO708lH6KCiG\r\ngubma9T1bH/tqzt5hPCAKELlLl7683qCW/XjV9sXziglvuar6fzwJVn9L3M8\r\ngCkR72mxE5suNhUBA5XLDZfqCn1qkzhHCndZcermh22gZmPl24fksD7XDLKd\r\n+5sLgapvoCPd5VPdTpdJ5ozzdbRUI/uEkxx+SkHNsKoOb1hr7gsTbpqedpHf\r\n1EGzf6zLHAZot4d8Ew4wZvrZePkCLv6D3vcLnjP1bDJh2AFFbgUq87XF0/sV\r\nFucDtsfngw7ooFcfBjD8c9JZzeAopVHdX7iJcm97mdXU1IwuLDH8tD3ZB8O4\r\npV6FdAHw01m4Jflc1CZ0JNek+geEw2cZ1pF1/QPNr+sTJr6kcAc4HJfEPEVj\r\nVJ/yLpYZGQzyMD8jpnK3tbCTgSgGl3xRn5mBoZSEB0EfpISJhP3FD3BsPt+Z\r\nEhse8Ear7nruCgxRdojGXAhk2mDjISx+K3Au7YSWu5L1PoIuR4qdJAnd4VWL\r\n4oyWZLhGvStkqukS7Pgp5+VfSNpTUDSFJY6ETAgzw6BrJPdxyWls3/zvNR0a\r\nbzBcuBJhT8CPRlb4PqWp8EohlsSh4+npvfSi/pJg7o3blBLHsPpmru7MHBNY\r\nXk83ojZxd+nszj/F69hwOrdgDefZA7gT+A8=\r\n=/41p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.395f1ce61.0","@material/base":"15.0.0-canary.395f1ce61.0","@material/shape":"15.0.0-canary.395f1ce61.0","@material/theme":"15.0.0-canary.395f1ce61.0","@material/animation":"15.0.0-canary.395f1ce61.0","@material/elevation":"15.0.0-canary.395f1ce61.0","@material/feature-targeting":"15.0.0-canary.395f1ce61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.395f1ce61.0_1665205674705_0.9122598181983754","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/menu-surface","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.e741b5c82.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7877d8ac00817badc27331a190da1d5824314aae","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.e741b5c82.0.tgz","fileCount":37,"integrity":"sha512-BL5zJuj7ObJ59lmFcn8wMI0uXPRq69ARRoWiEHRNgFnjiZbN0FRfs9oAVNFkhKTatAMyb0YOLb/oVhCP2b+hfQ==","signatures":[{"sig":"MEQCICIvpumERJ5ngnGwWrf2h3GMMNBpeRb2GbqRMx1GQ23QAiBhrIYVnwpkzyIJl+2tpjnAL0bLWpMvXLyrwrnNB1xDpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFiAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8Tg//WmXy23yl0phnH9ZomTu0eYvqzOb+qD6VHBuGm/Mxuk8L0pfB\r\ng9mqEE5sUuq4Jzmy5+LACOK+ACsj0VUYgcyZc2bxyiCPH8fYU5PE0KSz1Wbh\r\nWK+Dy/iB1wLn/+u3AcDb5bjvN/uFkvLlsIapvbZcoEvA2FfATEfp91tc6cjw\r\nTYbjJpuRdIuzuqRmiVQIQi2zs3AV6bzkSEGwKCpiaQVYheyuZ1GgR2PTdwnq\r\nfT9j5Jo90qH3kA4bfVhwy7iYsRvIo37CzcA3+S2rvz6lpVtzds1JkB7a3X0R\r\n3jSCbTdCjjO3+QT82sL9JWeP4+nD6+WeRagP9/b+1euNSY0vzUWIUAGg4msT\r\nFtHAgld6JGOFjOcp+lccFr2X6TmVxqIj4nlQlzMlY2+wq22U8xwZFzoK4VDe\r\nXIGC5WvuUvZerFCNTAzXL86dEUNw/ZB15q6hGb2PazIMbwtPr45E3cZ+U7HB\r\nPP8qftfi8+ov1cQdnbsyaobb062PaKCJIWRqlHg47FFRJYXhr9ZIxcJcbKDV\r\n1S5miRKQwtsiqDIP6YeMNOyZI/7A928xlnywjWzgwVchTrk8vU+aOWD/4j72\r\nI15Zu7qYMt1ClILO97XpeHwxv5YtLWSjLcbLMW4kr0Tvi/cNMFWiPqLrgAc8\r\nW3Pvcc/FpkiHMe34JVgImAG+HNWVPGNG2kg=\r\n=Zz+C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e741b5c82.0","@material/base":"15.0.0-canary.e741b5c82.0","@material/shape":"15.0.0-canary.e741b5c82.0","@material/theme":"15.0.0-canary.e741b5c82.0","@material/animation":"15.0.0-canary.e741b5c82.0","@material/elevation":"15.0.0-canary.e741b5c82.0","@material/feature-targeting":"15.0.0-canary.e741b5c82.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.e741b5c82.0_1665423488214_0.4932157295819741","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/menu-surface","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.582f3cc1c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5428d1de9ac50fbdd15ad82846b5e1e8cd899c40","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.582f3cc1c.0.tgz","fileCount":37,"integrity":"sha512-sQ6dv3EOS9dIPOoN6BAfbtMH+XRsCaKZrbCJFNmxk3SZYpS7vaMvw4EMAPUmsvczBmHfXNldfaih2Ps5h34sQA==","signatures":[{"sig":"MEQCIDohHF5c3DPS4dyTC+ow0tL879TZnwFdnn43H5mZpaUZAiBEA8kN/qWNvZBbnISaSW+fDl15L1rcTGmLtyCW2RTAag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPXBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8OQ/+PBcBHyR1gZPZN0qG4S1Q0vW3ucb2yB9ME/umDu2kyl/SBz6o\r\nA+afLasVREP5Rw8ma+jk0LSO4CZKKDIMUgdNd7q4tUHxIMvx+m2fPOfwo768\r\nTr9kSDaItmJ554qwfZV1YPmghOe8GwK5OumIRVzDlvkvOGoiFgjXrBA3N7yA\r\nYerbJiUKzJSvZtNBNE25txm4gWgZJcbB2z5o2aXnazXSPZzZEMNK7YOtdMw2\r\nRbNZcw4aqELSc38VYpfC3zpf6R6AD2g2+14PwRDHQmDfktReRzLRB0Kg0mul\r\nd6cy/sw8xiVijJjvfT3z7b3zJKn5JPhAFjFZ2C+r/thbTg9ASZotpPkOJpdj\r\naU6zE8bO334ftdFphTsOQrO3qiv207WrURJVi7JKxzlQh3rApcxLMj4DQ22F\r\nt86Fvehw+zs7wUkvQXjRkPEv1duisduhn+5G0UGA9MopKEVd2dN4CDd8YgWB\r\nQmJu1YkEGzYqsoYbS12Y94I9DIgqc41jvVLZOPs6leEN0QY2RGNaqWtF0NiU\r\nxeMm3WtdV66Ny+uR43IJf3t5zekJSwPywu9K9v+ksxvkN+gZ/rXpoYCu8aXQ\r\nWJNEMF7RWn7W4ko3PW6FcNtL7f9WGf/KakK6CVrIttEnaebUmzoLqHkaGoLY\r\nrIlYUA5ogTt5UxqAAS6rJBgFEjCb4se3tb0=\r\n=jrnh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.582f3cc1c.0","@material/base":"15.0.0-canary.582f3cc1c.0","@material/shape":"15.0.0-canary.582f3cc1c.0","@material/theme":"15.0.0-canary.582f3cc1c.0","@material/animation":"15.0.0-canary.582f3cc1c.0","@material/elevation":"15.0.0-canary.582f3cc1c.0","@material/feature-targeting":"15.0.0-canary.582f3cc1c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.582f3cc1c.0_1665463745246_0.6319484655134027","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/menu-surface","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.b1a6e3e88.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dabffafb67ae0054c490a1c0f6b285d56d06773b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":37,"integrity":"sha512-LIsHm8jCOzoeZ7uj3dogrw2s2sa4VsXYQYsZ/j081W7kEALcWYV8fkTBvgUV32BA5AvmYq3qEn+svztwDIimvg==","signatures":[{"sig":"MEYCIQC0U8JFsAUf8ZbCB3LB/mx6f12+baPabAbS8unknByZhQIhAOcDizxh7ADtaitrIKbNRIuikscJaNF5PLhiNRl/jz0d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRqzQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUuQ//Z9zK1R1zFpRUlMRst+HxFozfZJTcoO5zDWckgj04tYvh+kuy\r\nqzdINHzy4KJJ8EL9SpVN1n2gXiIAceXlrLxYwjJBq9PDAIUc0IWHG3po5BpX\r\nBz3lW19CMJ0bEvFp1XBbecm7iQ4tS7F0LQTDZBDmVGOexTyrddCbCi9kxxX7\r\nOqEdlTA3YLAmuqnvstGna9nR5cvHOHiaoeIJZqM7VXpwhQ5R2+839PDn8YgK\r\nhYNMIs/8za+m57jlB0AKuAyI1LXY8I+MnMZsfZUCXVC/OnfF3g73olet9RnY\r\nRgtMrNHTMQ0IEmSsMvyT4yRjehEGbWxCOqescqUVp+gr/FIqdkZGwyBox7NQ\r\nO4ny/4oRD77cM4M0vkkVd+dwEBreORNWkeEOHxqvJO/xAIRWs6QePvLSDAYW\r\n70/W7dTs4MbkwdH3amVW2ewrldzlDnOM8COva601lOX1iAQHbIzlqXRHK3FQ\r\nLRYKeix3Xn5mE9jNiSxusNPPcCnNZUb0ZidMUfDUD3MCSQXtBi82UmMn2844\r\nrWU1J61tfxH3Osaz9Ti+Nze1WoG9IGDeyzZih7yPirYuVrDXhIWfqucKJsB8\r\n0A5J2Pq36qZ2edGOjtDO6f+DjaBNPGeJ6xY2JYXm4NkdaIgsiyLFEG4lZr25\r\nwCdvKpy4CUdflQJA6tDsuGZ1bBZQ36kA7h4=\r\n=GSXb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b1a6e3e88.0","@material/base":"15.0.0-canary.b1a6e3e88.0","@material/shape":"15.0.0-canary.b1a6e3e88.0","@material/theme":"15.0.0-canary.b1a6e3e88.0","@material/animation":"15.0.0-canary.b1a6e3e88.0","@material/elevation":"15.0.0-canary.b1a6e3e88.0","@material/feature-targeting":"15.0.0-canary.b1a6e3e88.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.b1a6e3e88.0_1665576143987_0.2113591766419396","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/menu-surface","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.c9b1a31e4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6cf73cb5d80c50b23dd6a936fb31cae59ef7184","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":37,"integrity":"sha512-XURY7J8gUtIIWDejKo6tmv+XlWxZEClhbXHJ2dyGJpLvNg0CozcSD7p3UFNeAHguTwe5OA4I4N1+fUrhj8b06A==","signatures":[{"sig":"MEYCIQC47DD64DSyf++bzd6IPxY0p7j4E/MN+1dobcs+ClX/mwIhAIe6YGY9HBCO/gY9wtN3+p9qVwqGFkChB/kiI/JxLhEq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvI5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrudRAAoFzhgTmQO0KHa3srW5DxvRaJNwwEpDuia4a2VliObXP5xQf7\r\nR/k4TzeparDHMEq0IOSAgx0fnKYVarkoeh1jMugyuksnQzGXYheSOA8iCdGn\r\nkKTTC4+J7isIKvefis6iR9xNQQQafB4mG/JM4iQI5YoJVyyRMtGvfqnp2OOn\r\noDsFS2nbAeJIK1xYwlhB97q5pW87qpyRIyO690CnxS2EQNVrJAqtEgzDFr1l\r\nL9Wlf7MDz5DNengZK1lgscGxhNx56+NFD9cAjFb0SlWkJjwNztdCoWliMp3S\r\nOAbzcEqIdZ0hRpj0O8ZAJZ5IeQgW+mZJ6FFnkX3N7TRgER5BZwi2w2mnuGvf\r\ntIIL+BvgykYDaHwWNTI8+cxdZ0rHiulNSgdCeGJyttO5J4yJIkrE1ghK7FnZ\r\nRHBceI3RdiYuwIRGXXX+I3aiPbfrQ8KGBWVjmcp8mPF4jmzsbUYmggbQYk1J\r\nqadppQzCdgtRZ8wI6rRGHvop5ygh0zI/XXZ8v6HI/5e6qB75jLQZZ3ceZK1E\r\nsinQjiwTHMhw71RE30MdWVa4KLs8LLI2zgx0xmDxqrR2fxr7ih6fNuyS0PU/\r\nIKy8juRl2uFTNlX2XpmhMl+KtvBf1e5CTbInY9o2egwK9Y0WJ7gMwOjymSBh\r\nfoDz44YddJ0ZFPrW2oLvVHnjR3tQSXx9jGE=\r\n=GmV3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c9b1a31e4.0","@material/base":"15.0.0-canary.c9b1a31e4.0","@material/shape":"15.0.0-canary.c9b1a31e4.0","@material/theme":"15.0.0-canary.c9b1a31e4.0","@material/animation":"15.0.0-canary.c9b1a31e4.0","@material/elevation":"15.0.0-canary.c9b1a31e4.0","@material/feature-targeting":"15.0.0-canary.c9b1a31e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.c9b1a31e4.0_1665593913594_0.35950246955758747","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/menu-surface","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.13e9b0d1f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ec632b47bf90fdc86f2a5e6ea4fa7e31c8792f8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":37,"integrity":"sha512-CJrpbIwbZhvVUmerMFO23GcHOgi06+RHT/dgCy1dStvXsZ04EgwKz/bsfwBmxPSwyUJL2UuDxvbGIyif8IlrkA==","signatures":[{"sig":"MEQCICm7Ypm+P5/byY2ptql+eZhm6Om+COdPMBxKdOKFxACYAiBmuh/axoLmalRRH24vCRyxAk1mcwdNtY0st7Lhk7CFOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxOoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGFA//eMC1F0WgzO/Pi1FkJxB7nQHWlWwfuApfxmA8yQw7Gt0usaXW\r\nJHyDAKIqn+VK2LPyk3gY7kE41+RBjQg2OxSUd/yBsFOUzkrMOQ4kl7kxoA2d\r\nlbK3Hi8+LLAT7nDSPUh0yU4lLznPKCRgM5XKdPfbIPVlZlinHJ22rKvTeeYd\r\nK7HDu68FlRHHiumrvbfqX2EhsIP3UwCRSACyU2Tw902zj0KE0qtA2pBdV4SG\r\nVz5fM/qCxEHJCshwRyaMpRaDTt58/6AJsLwsevnvxdSyYQA9TueJZw1OPwyY\r\n7QdgTBXawBxdzXmaz4d03pCLZJdtMlKR24sU+HON5f15y+YXL+SDyVmqamHB\r\n3hheR5DWs1inkFnk2pDrSHpBmwoBIRzRQO8FdJXFSR1cwOuY9MtRg0K6ZVej\r\ny9PtYbMtczkmIF+WHQVoCLdgjiOzKlDAdQELtxI7V1lv4U6au/U5YBsI8nWQ\r\nHPEwLwhIX0+8NeRqFQkZzGRelt2vdS3VeYc0D5Khx/Jb+5dYpVJJYLDaHnPR\r\nbyXFX5+cBI7ACSZMPeaqCnC9EFGjnx+vjR0EsSqxzR5fwWuxTOey562Z6n3T\r\ncs8j3NCkq+ZfzJOiaC/It4OnvcykleW9IMikxWK9HKK70iA6QUbVDAM1/bP7\r\nMaTx+iegz2IKiFw9CmGiXVEBczfUrk008CE=\r\n=/Doa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.13e9b0d1f.0","@material/base":"15.0.0-canary.13e9b0d1f.0","@material/shape":"15.0.0-canary.13e9b0d1f.0","@material/theme":"15.0.0-canary.13e9b0d1f.0","@material/animation":"15.0.0-canary.13e9b0d1f.0","@material/elevation":"15.0.0-canary.13e9b0d1f.0","@material/feature-targeting":"15.0.0-canary.13e9b0d1f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.13e9b0d1f.0_1665602472296_0.8302457653299018","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/menu-surface","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.1dc797e7f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abdca0686b4ed2a2ede46bebdeca3de74fac7e61","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.1dc797e7f.0.tgz","fileCount":37,"integrity":"sha512-YBEggogTCTuCnoyWfbtRnNHgQxqEnVJUwY2vU53hyKwZUxLiApHNaDZlfa5gDSiDWMWbvV/Q+J3DUxQgzLek4A==","signatures":[{"sig":"MEUCIQDAXwYAcDYRGUvTMNK+6AtAqDBiWuJDljz8fyEqbsFJrgIgMRqPtcDRVGYIxKLKVGPDI2zeHqEKbeX6FGAOF7MLjvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS7OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqr0w//SNJfvfUG1agtDPHVck+QGWhZQjq8VJpCaFPjuj1g+8uSr/cw\r\nD7RfeX7+saowz2eAGg9oPcftoy+OhCMS4sQ2pMFvJP/jx5e/jWC40lIawkmj\r\nF/XkilwQqBGS4j3g00cjt9yiYyD16pG8uhQY/XFYXK7LZ9O8v9oPYjvTWlAZ\r\nrosUEThllsMsdSUOt7vJU0BkE4NK2cNrQTcZRGaXAA1Nz+yKwMNCIdqRnIeY\r\n9DB5u2La7KRwOTxgHjYIhE/+QySPNEUWmJqH996dCvEh/lf8U+cTjeETPZxs\r\npKiSSqSae5lngMRrcub9azAOOC1stPR/yO88gN/W+mCs+h6rPrlLZl1wlSI1\r\nqYc+3OjCy2oyocbuw2RuHIpYFMTwSGVhwbEVUD0ApXIAlG362MEopAK3/9hK\r\n2rdkSxAYQ5ndNgEJGRo0pzaMzWHGWmGA+gaz1Re+kAZdIFkyAZs+uT5E7u+b\r\nlK/IEW0f416+9PIn3P+r/gjW8IxTFy9JTvUZgXsawobnh7HsI1FtfPVOEqw2\r\nLAS5RWDc47yFe+fZFaImEWEjl3Q7h3CscX0DMFsQpJSGr3O500yYCRaMtbKk\r\nEumq9/D69QG38wWkOK1TSbhOTN0u8EYCb7asrvMReT6b38M0vuZKGnQvkeE/\r\ngwbR+lcVAJVj1A/Im3u2ObR8jUCvmB2Q5AU=\r\n=qGwg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1dc797e7f.0","@material/base":"15.0.0-canary.1dc797e7f.0","@material/shape":"15.0.0-canary.1dc797e7f.0","@material/theme":"15.0.0-canary.1dc797e7f.0","@material/animation":"15.0.0-canary.1dc797e7f.0","@material/elevation":"15.0.0-canary.1dc797e7f.0","@material/feature-targeting":"15.0.0-canary.1dc797e7f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.1dc797e7f.0_1665740494409_0.05262254826460744","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/menu-surface","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.ed4009397.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56c0f36ec6564cc5fdd95d30aa1aee7ddac54b8d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.ed4009397.0.tgz","fileCount":37,"integrity":"sha512-O0+U6f5G+cuL2lsJW3ODMy/L73p0SHR7lKWxfSlBguZiKloVyUrtkSnC6Xk5XwEGWCBIGdFNL0n1ACJ2WbPLjA==","signatures":[{"sig":"MEYCIQDDVn4msBLWSGK2CTLOv3O4PdIJLIeq+Lv4aJdyKILKvwIhAJsBszML9/+3I7UvAXWT7JFKfujwDnjFn7Sue4rzgpb7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZOGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4Uw//ctvNQMmF7peyvlee26V101TnZm0zjD0eWkfHdskwB1fEN4ME\r\nU9W/NI9X/i9QF3pec+R6k2/TCify4cQ3uTDblmXO8M753+BXUbTn+4xjUHJm\r\nIBUF9H3Gtr3UdhRJsf8MHlTKF/KWh1IJ3zIEYI0RkO5sUiYDpC/i58Y47PJM\r\nB+GJoFOewlT/J2OnrfBPAzTR657LcJYUmJ4tDSu07KneXUDvnxLfqsFvqcgV\r\ngi4Gld8AmjJldcouvZssQGjz0v+XShyRaUDsHB8gx2VUwJnW6GMi+tx0BkRY\r\nVgLsm/F8GHlxCIiq+pj86TRYK3hv5XghIzg1ZMnVDV++ZuYj7clHDHabSHro\r\nFrqsa8ZMlcVhgM13Qm5p8/BPAgYm2qBp6qPrprbgo3fJ096IssO/4ux29qCj\r\nBDY8VEoZihfpQUDuPLkeHjc1xap/TCjsd6GPjOsua3WUp1pRaNjNXRd0j3dO\r\n/D/1WhAOT62XQOGZEZF9ZZw/sY2eSXCGiSKYCON/0D1eG6tE6uAty6nyVgvp\r\nnyRIUx1IMh2m+xUBPfTtk1Q4Q6ehp1BWpEDhyx1halDuNsvvonpj+YFqD+mN\r\nE54msg0d++I69CnlPyWmwdmpuyo9BcSeCIGV7jeQZ96GAravjC4Fpnr1JUoV\r\nrccdcML52MFNmrmWGEpfo2rXULeITQGe3eQ=\r\n=Rf3b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ed4009397.0","@material/base":"15.0.0-canary.ed4009397.0","@material/shape":"15.0.0-canary.ed4009397.0","@material/theme":"15.0.0-canary.ed4009397.0","@material/animation":"15.0.0-canary.ed4009397.0","@material/elevation":"15.0.0-canary.ed4009397.0","@material/feature-targeting":"15.0.0-canary.ed4009397.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.ed4009397.0_1665766278533_0.2148535339561808","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/menu-surface","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.95ef196bc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df9a6fb1691ada483ca44b6bc5913cf1ad1ff57e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.95ef196bc.0.tgz","fileCount":37,"integrity":"sha512-oqV5BytqbHcYIVt3iCvMu8BgBu00ieLenfBUcmgN9hjKbZFP1jzzctCOwU5sWCRVZpdKis3iLm0ik/W6foGC1A==","signatures":[{"sig":"MEQCIAymim2BqhGJ892ArzJvX7lwIMKLJIqJjqAMF1NBU4ceAiBYGLxuaflO0ucjxydJQemDN/cKHA9txAhFL4jx2MmtrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe00ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7uw//Sjjd3aiq+mQiTwBy1VpkRBUlIBqcdzv/mUy7v8XUHVd+Poqk\r\nn4v8iQ9mjtzlqDL0AT5A0ikQm0qXgAELyjCGGyl3G0EF+GbgdtCG0vzS9Xbx\r\nj3nFSV1SDZuaB8WN+hOKUHR5/NyhpLGiEwjvSfN7DEG22C9Ivis+LbxpNF/3\r\n1D55oDaYVgjzakUw8hBLT5vuwjkE+Ehwft4edSW2toXUjUBv62eX0ApQoZZ7\r\nqtWVG4jR6Tgse8IkOoxfjI0q+kX1nmVqty7jOFeZe9diMzhWW4hpZiPiM3gr\r\nezGYC2i+iaTaNh88vJ85k48GMBBNx+1ml0BjCztcdAMPIW+6O2CNer5BY5Qv\r\nHCW9gxcGqoZOFU0Be7JgcQineMI93TU8/sRMynKOsKaCnSqWcY3kXA1ZidxU\r\nSFol9fNl9TtttWZOsLqvrRwWkdz2feIbamaDX4g1hUw2tODDWv6mRQzssY2q\r\nkU3ufkLR+uDMhZAvv2WUYJEMWJAGTSqSA6pKArvU8exhdib05Lyk9YqKkNTx\r\nJRzibXLOmldbyYHb51hw8IZ+kTKW5vHg2MN5Nj5WCEnoY5+EYRnpox9pA9sj\r\nfNRSBglJiEUfQEjbktVXgMOz7HaszrLA4bP1waJWE/ZmmUwwVxxeaI7KealJ\r\nfvYEiNt6/32Ls4mgb7QVXb5GafzbRT+51/U=\r\n=BtKE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.95ef196bc.0","@material/base":"15.0.0-canary.95ef196bc.0","@material/shape":"15.0.0-canary.95ef196bc.0","@material/theme":"15.0.0-canary.95ef196bc.0","@material/animation":"15.0.0-canary.95ef196bc.0","@material/elevation":"15.0.0-canary.95ef196bc.0","@material/feature-targeting":"15.0.0-canary.95ef196bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.95ef196bc.0_1665789236440_0.6517448218849027","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/menu-surface","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.13eea1b2d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d77d2e397d5fc7ac3f1f52ea0a3aef255f79e7ff","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.13eea1b2d.0.tgz","fileCount":37,"integrity":"sha512-7vbB7yzoh+kxn+kBakZ0jVUrE6ada6b40k8kytEnxJWtxAy2rlpY+FQcYFQyCzSOOoGi1WcFzaZ1wwPbBFVLpw==","signatures":[{"sig":"MEUCIBV26wPCTUcR+mlfXST77BlPI3WKFAFjjeFeePPXn4sIAiEA2oOua/nqjgeMIrxb+eVaUE3nidY2jHfwdkq4iCEa7rA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNFGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7KA//aRLL4wPdPWYyONpShX5o1Jp11zEgVKVna1Jiw6+3ILdo0FUE\r\nki+hj4ALneI33Zp2xbyZx91unQJR/d65mjWl3+N0t6Y/RPQpG1wdx2mw9VkC\r\n4M16e89kICc4pBZGesuHU05nzT/Rrc7yY3YJsroIFcBhAkDvZLnM5hOlJsM5\r\nr2Ra9EC6bmgbCDwNh3orWlXh/o6f6D8AeHXLOXNrGhJ1Ol5jRta4zlySFMmO\r\nfVKny45Ju0cxgFysNWqiT4lgyogvrmJei4hWvL3rrtDUBeodD3+hFjb/tM8b\r\ngJtoJvuWwVkVtEbZSzIfhsfVSWxU1vESbfV51izbgAA9lgU9/Xur/VSbRK9K\r\nZexoeI08mLlfWAh547NdJchdWaM7b6fADuCdiYNygO+yt15A2iIxpL1dmp3L\r\nwUHLKOR3dl80giFNqhruuqjOugwrz7thhyY/48QfdoPvWs8wA+7DNExYnHR1\r\npr/GoFMpfEz0VrlhyPOPp8OpN+wJwgN6jjnwYIVQcWnRuNZ63Ubc4gLBBqjm\r\nqBdLN2G8Z+mYGKUCyFLJUVmQKAGB4Rt5MTov6iqxT2LmFw66zc98sIhliJzK\r\nExKM77ihH2xqJzuapSRqIYqVRKBWUzPw4cm8Z3G/S3ZuqEoBgHkV5E6s+lRI\r\n6JyWwHzAoNCYSTM1929fM8L+YNRdkPbm/CU=\r\n=YhIb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.13eea1b2d.0","@material/base":"15.0.0-canary.13eea1b2d.0","@material/shape":"15.0.0-canary.13eea1b2d.0","@material/theme":"15.0.0-canary.13eea1b2d.0","@material/animation":"15.0.0-canary.13eea1b2d.0","@material/elevation":"15.0.0-canary.13eea1b2d.0","@material/feature-targeting":"15.0.0-canary.13eea1b2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.13eea1b2d.0_1665978694490_0.4556100359990394","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/menu-surface","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.ef9b2babb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"082c5b469f0abdbabc33b52c1d66cfd49dcfa34a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.ef9b2babb.0.tgz","fileCount":37,"integrity":"sha512-wucGD6keuaPYmKPZWYiFbz7Aaw6VFaMV1L74cjeYv47xPRZ7xFEx9BDzKasv7TVZ0aKqeGGmU5/C0Peh0M11hA==","signatures":[{"sig":"MEYCIQCzxw00KVGLjoLIAzlD7H9l3PMC9vC/2EulyVTbxSIJAAIhAK4Iyqynx/Zee2ITJbmJD/a+FPmP8CGABmQAUrYLszw1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR3HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiQRAAkLRjl5Vd+FJ59tWPJQTq3xSqyGOJBlEv9wCJrY9EF8WzkYzn\r\nzsBXYFJL+TGdMF3iScOBtPt2aoV+HuBK4BygOBC6idP3opRHi/bsfwatTk8e\r\nSHQPSTAkRdx2+jlaHjaQXtEX0YJF+b/ngBG+8qNN8njoWsKzmoFOUDLTe5+S\r\n6ujwvY+55G8Bs0iCOruGD2xNffTE+AeoUr/1nO8pfXz5FRLaq2788dCv6m9b\r\nwaiK9FV4hD9PuGCzlYxVWoKxB0nWOAIZY/oYWl1N1pKGfO1xX9SGWI2hiokH\r\ncFGLGEC6Jj9T+IC7hR5YLiIi/G03vjY28whjE4Yi3mUDUHItls5rWAp4uA9H\r\nCz+gxFWqvKJnBQ+ADrY1CKzHCmRNYuPfTbqY75+y9A18sEfBZcE2ECsDv37E\r\nSnczS+KpLJl4l607FQes96jFfXMpRINxnw5DHhrwBeN5wGqixj7kmNSjfLv2\r\n99Ve1fK1VhyfY7j10Ev8n/+OCxWDE9ih/bEOpKwLf28P/7VlAF6rcdpcAfSV\r\nLFSFIkSeuSh8TOnxqNhsA+2oKJZ/tS+DzMTWj7HtdgZZLw14V44Ue8cEkAyA\r\nCbdfTcAPMO1Pvl4qSp5SNXKC9rqH8BuKq0dS1oxMm3HtR43lbNVgpIZZ8LJM\r\n15jU7ndWE5C3/fhAnKP9EGEaD+vHhPuNH/4=\r\n=OP0w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ef9b2babb.0","@material/base":"15.0.0-canary.ef9b2babb.0","@material/shape":"15.0.0-canary.ef9b2babb.0","@material/theme":"15.0.0-canary.ef9b2babb.0","@material/animation":"15.0.0-canary.ef9b2babb.0","@material/elevation":"15.0.0-canary.ef9b2babb.0","@material/feature-targeting":"15.0.0-canary.ef9b2babb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.ef9b2babb.0_1665998279453_0.20676301328394708","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/menu-surface","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.cec7fb987.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40443b66183cf926939581f67191104a8012b049","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.cec7fb987.0.tgz","fileCount":37,"integrity":"sha512-3BdeMZiMIO0LKb/7XSlL4rLIA114uryFoSiK+IsL4M1riAXfN7eQ1RkwL+t91ChnqcMF5/d/1FYptSA7Qw+pRw==","signatures":[{"sig":"MEUCIQC00pAnYLIHbCHT85mSvVPEEqgeAS8p9fkXdKNBcXkKJwIgMMMr1tUZiQtvohnTsa90o4a8wR9a/BZdSQJ3TPRaBl0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTTVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqH6xAAmy1sPfEqEbq4Y+Y8dTBzlhv/y4NNDDeWe8wNzsWz2V2Bh0D1\r\nD24BtPLcmpTtrKbwVuS9NDlgoVBl9nUqH1YocXAUWrpG0EkKGBHsMLAeCXpP\r\ng2bELXLdaJv+KkxMVZTnwrTUwc2l5o45vAMTVGpCeVlB8FUYvdq/E8NxyB6E\r\n0q7Xhn3Y4e6xLmWmY0gUyFakBW5kwd+2zN0fDdz/4gGxkwEZoAGis+5nrKou\r\neMP/AEXSdybtseuJ5KCw2jg9ApUTQUzLR9jqVZ6J5HlkQEMidOy3tivLJdCK\r\nH31K2m56m/b8YQ9Py1ttHDwj9hM58zRrwekTRZOa56RJEDfDh8LP9p3bNvzD\r\nyPlCY71hp5KooUWT0U3Qt9XvG1r12837LOsSauGFSmJ/SDr+QEipHY4A3XFr\r\nNATAdPIj0GnRKYnmjI3seP8vW/tTwJDCrXYe1GgOeZLOTnYPHxb+xu9GiOo4\r\n+Vqd514Y4EFXc637NS+tVBcD1yXDmHBDnAIy9tQJzg7crUA0Auk/HmvMjd5f\r\noo7Au0RCpNu8A2ameRw53n9CUtf6KfiEWZ/Jpw/2KvWLY7e7JV8IKqBQI/nk\r\nOHx0VtKEs6T9v6sAyVUHfCyqpgdbgs90sL4yUhKAYccYEUbr6jOXxfTqx/ot\r\nFfVOTKrGcgN/r3uGRqKGPcRjy8UW79jrILY=\r\n=GpgC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cec7fb987.0","@material/base":"15.0.0-canary.cec7fb987.0","@material/shape":"15.0.0-canary.cec7fb987.0","@material/theme":"15.0.0-canary.cec7fb987.0","@material/animation":"15.0.0-canary.cec7fb987.0","@material/elevation":"15.0.0-canary.cec7fb987.0","@material/feature-targeting":"15.0.0-canary.cec7fb987.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.cec7fb987.0_1666004181115_0.04118960550292061","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/menu-surface","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.4fff58b08.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c838229be84609855e802dce2bc766967449ec7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.4fff58b08.0.tgz","fileCount":37,"integrity":"sha512-TmDhV+B0GnOfcvqtQYqvdq8llPnMCdETQwonX1xn3pLgITVTSNzSKIWDTUWElJw3K9iYojqkeqxhdACSv37cKw==","signatures":[{"sig":"MEYCIQCtSB/ae6zwd4fTbhUNQ6+6SSO7ME0o0i2Gf3Q2FpRVPwIhAML3zaTl4Jtf6kK/vjabx98OdgqRWsLIkY+wpzitBBLi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXM2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzSQ//brG0faNQ6YTNlOUPm8LPK8n8cwldimUrMOb0V96kWGBH/1oH\r\nMmSEZq810e2LdBMRd6zTQV5PWHT9+D1UxXTuGUglBG4bA1SVRkjtHdVeXQeq\r\n0CjIVq5LGrr13r68GhZiUydwre+PwkY1ZyuTM221MlqOWK6TsVVbswK1Focy\r\nEa3BCO22QsWL2bSKzZWNxTNkidWX7t7+f+NKwthCx6KXdB1pkvLoJscdq7qp\r\nNsMZ5Up0lE9EwDlIoLxhmnYSGpgsDw4uPKvLhfw+2dk03Jsv+b7JAzI0o/rl\r\ndCMBwAuVJr0o1Jj2e687wFlyvgvboqDA5tsQYvdnEoChanOun27WAHwWnkRC\r\nlPW6U2GRJ1aUACWja6JVo5yyq+PPwKiMevYL7JQsUwKbmg6kk76LDSGF5eQ0\r\nBZzUb97HZtXUScfhJxP7rv/LDLs22q9xOVOPZHrmNzNIKLzw6NJRRj8Z7vGi\r\nJitKuVCwquNhHcq0egcARRy2ce8HJ2ydD/pBfVQydsRzN+oJeweEqbm6fo2I\r\nMAPfO3Lfh4TVbC7bwFeQfDkjTzuUxB45kA9jel2KmnUKdBQeMrkU99bkCAHn\r\nRHoN8BhgY2FilsqrETLB3vvSTkVQP/DHGvFyjwCFIc5VNS6sTP5M8ag2u0qg\r\nAKUhOC96osQl5RcofyS5h/CEVhxBPpgCcwM=\r\n=ARTz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4fff58b08.0","@material/base":"15.0.0-canary.4fff58b08.0","@material/shape":"15.0.0-canary.4fff58b08.0","@material/theme":"15.0.0-canary.4fff58b08.0","@material/animation":"15.0.0-canary.4fff58b08.0","@material/elevation":"15.0.0-canary.4fff58b08.0","@material/feature-targeting":"15.0.0-canary.4fff58b08.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.4fff58b08.0_1666020149906_0.03612744338933105","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/menu-surface","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.587d8f871.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ac8aa7d2b2a48378ab3f39f8bf4245acdf0d439","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.587d8f871.0.tgz","fileCount":37,"integrity":"sha512-9PHV1lexpBwZAeZMrE8lytxjopAZEcM5BG0zGXhWiX63A6ElXOEoYZEEWAvIKKsE+C08GHPyOJi9UDsn/nI+pA==","signatures":[{"sig":"MEQCIEheM0EZPamF1r8iNPckoOQ2EPzWh2kLcXyMq1GCO1owAiBkz/Ij5mpFBaewyE2dzHOzN1sMzl419XKJKSkh9vNeQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXtUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFmg/9GvyhI1+nx75j9zBbBv0Z/LJexhT3snrz4yWSiJzXBkx/mA/c\r\nbmOEe7ixJ0w9vcUSzgV47QlGkLxpnCMZJXSrQZKyi6YTyHajHnTEh/TO1bjK\r\ncQ0seHunXclfZHsGB6Kzgfa1wu2LA7oK4t7WdePCGQKn5/Ki278bi7mmd3DO\r\n/HVagL0IBWyRpKm03OXbLa/UMjTWC89H4qdeKTDp8/nbC7nblPYWYN2KwJGp\r\nrmlBVHkpwk4wlatZbh8zpNxh8vkGaQinRaLHVeqOkkbqRmHNBFnJ08r8IWHF\r\nDLt6Jr9qI/TkhLZTvWsfhXPHPe/LikEs8CNmhoUy2zsTxGnCF4ov3FKHCZtC\r\ntlNWz1q/SCcx+4jjTgGQdJ/loUhgK2+RqW1MYRcBIroA7+gLUDdSnE0AK7tD\r\nroSaYN6OcZtDDhLKH9DUtJ+8+Q2D1OE8rqE11yu99KKuaJjsTvPqlFGYwu5D\r\nxujf+3rcqTdKi5AIAxqr9ghWBIbVoS/yiSd8LhARh/6g/3isOQpPy+bdwpjM\r\nGj32EO0Iv4zG/Qu0CuvxplCYVO7uDqB14hCd3I/ZeHw/77wH9SK0lc/fL28z\r\nSsLQjD0GB+CV1oDibTDREp8Sv4udq21RoKKfj4dmoynI5Ql/OOKkUac2I+0Y\r\ncpqRuVchcdt5ARbX0RT3eISyIoGj1qP8+Bc=\r\n=igd2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.587d8f871.0","@material/base":"15.0.0-canary.587d8f871.0","@material/shape":"15.0.0-canary.587d8f871.0","@material/theme":"15.0.0-canary.587d8f871.0","@material/animation":"15.0.0-canary.587d8f871.0","@material/elevation":"15.0.0-canary.587d8f871.0","@material/feature-targeting":"15.0.0-canary.587d8f871.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.587d8f871.0_1666022228467_0.11027056877056918","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/menu-surface","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.edf4b98d0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eef3bf9a826489647d87cc5ffb19c4c4b7bf0bc0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.edf4b98d0.0.tgz","fileCount":37,"integrity":"sha512-m1Y8uwu7HfglUhzFCj7gM102Dg2lkr8zAW9L7iJOvfhTdwDdwRCC9brDSdx54SJjEN1rfoyN5Z5cgdJi3Raj4w==","signatures":[{"sig":"MEQCICwJICWh2XXvgpO8uBNXQBabZTIbaR+pYq2DB5HQY4s0AiBkkoM7AeVvReAOFqdJcxGiHJ1/urRLtNZn9pK1I5hoQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYV8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkIA//XFmWRi9PeII5ga92+G5DxGLrwkldqcAn4i05u6kSxeFs5LUr\r\nMmCeq54ohuCTYDXqR+eetJGl0YPlSu9Mxa/hEA2lVHLZLmlVcCilingnd0j6\r\nhVcH1Io0dK+5Y8A0IMDhq28ALJYeyQxMG7AGgb8kZDn6q79jyNQr2Dh5FNVL\r\nf92XhdNBU6AxXegWHfurC0lS+tSq+bh98Zoldv77JrMjQAnFrGX99PR81Bjv\r\nYpsv3AbK63BPLaW13zgqFYrSiS05Zz02EuF2YXc+E8++sxuT2sh8TPnjisiE\r\ncKIos4cqLDW0+D08pZ74WMQVlblFg8vZgGcra8LHHnveg4MqOBlNLz42bONM\r\ntgA07jCogfcmDljjhsNAKb7kaehKMXdkY+7X3J63bd5t2hS5Og4og2zFK+eQ\r\noOB+l07zUR7zuOZtYRKVzpdx8TxDWnuAYcvzxulQDS7R4bcwS6wyIjbec7JF\r\ntOKiNIfyJMlQ3AZEggV5x2fWVo6/Sr2r+4TKtYBToFmgytIleyNSoxM4gXUM\r\nSpwN4h2EKT8AigGfbVGJSDsh2wdc2/4QIbg3luI4+rIzDbdlGHaJaCEDzsPG\r\noFtBL5DtKqa/7nSIxwqdlPn9IUvYlUWjQEbJWjHNz5mBh+PcGKmout4XScER\r\nwOYlaFHzE3xpZvXzkjdiPhXRaIe+EiDZQRk=\r\n=SjsQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.edf4b98d0.0","@material/base":"15.0.0-canary.edf4b98d0.0","@material/shape":"15.0.0-canary.edf4b98d0.0","@material/theme":"15.0.0-canary.edf4b98d0.0","@material/animation":"15.0.0-canary.edf4b98d0.0","@material/elevation":"15.0.0-canary.edf4b98d0.0","@material/feature-targeting":"15.0.0-canary.edf4b98d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.edf4b98d0.0_1666024828151_0.36911985664888824","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/menu-surface","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.024ac5f16.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82fc7bf00bf78796882ce949e23443ed78b8014f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.024ac5f16.0.tgz","fileCount":37,"integrity":"sha512-pLAL42GmT6Vnuba2uQssR8kf5CWZrbK167A4xMHnxfvUhBBjK+tTczSTB2rUvTVnOBteTefkIiaAReP7z7AYfA==","signatures":[{"sig":"MEYCIQCV64qQR2NwoVlkiTj0+kmqyoZ8AZ1VXJjHIWTDCcjVHgIhAPW9Fm+zS4m08qbhPFmFwXN7cpkHQo6FMCtzk72pwlMK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdpNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuIw//XWODKecyQAzPGR3fnWIqsSia4Q6CBVp4MHNHS3zATv8Rni5M\r\nF+JtspbI82e9v0KiARHQg4thv7zYdP6YJROx2s9edtIgyAjz+CRSkJ+jIOg/\r\ndPdIP7LLofbKDoB2uB/HEnX7lqBOFfPu7vHgP25Y845OF7tk8MsJasrGkPDS\r\nTo3MWBmCkRfHFo/5TbVKygylgIaO28Bz8hUFZaZgBr0zvLOen6cJjK3SpVQJ\r\nbIbPC2JtHRN6Hj7rKtjCoxzAtK/eHIB5TDeGur3hVL9J1xBAZVFZkpVxuChQ\r\nA9fBuKaGB+Wjdf+ZRr7xjDHGcYr/v1FM983Jb6FpT6hguDCsnfZFCgCA5t1g\r\n/16xNNEM+eVRiyOawOewASjbEhU3Qgoq5uYkte9VI8EI9tus/oCt3LmAd41y\r\ncQjmj8c1vhMV8mqsibsvX2iYscIF0WpAEz1IkazPYirQeUJwX5rFkvEjZSZG\r\nqSHGynyWN9eKwwiFUrBvn7jvBGdTVjg8l8AfHzAmwVHUIEdbJG6+uuzdWhYk\r\nb2E9aMNu3qYcc1Y9lvhCbXuD7LelCEu7m5hfUhdNGzaKU4hAPSl6REm93EGm\r\nGH/a4Vg6nKbSZC/9xBVbh275PRG8ESbqGLXjnLYoFIDji2Y8DF2HQ4n4WKdt\r\nELUwGnqgVDGJNHF5Wcy6/vz2FnAPafnUv9o=\r\n=jmza\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.024ac5f16.0","@material/base":"15.0.0-canary.024ac5f16.0","@material/shape":"15.0.0-canary.024ac5f16.0","@material/theme":"15.0.0-canary.024ac5f16.0","@material/animation":"15.0.0-canary.024ac5f16.0","@material/elevation":"15.0.0-canary.024ac5f16.0","@material/feature-targeting":"15.0.0-canary.024ac5f16.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.024ac5f16.0_1666046541025_0.4681938029035235","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/menu-surface","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.c8bdf6144.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e36317a8f01ffff6c37f88e3dd32d1fdaf3488d6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.c8bdf6144.0.tgz","fileCount":37,"integrity":"sha512-arZL5lPpO1mcQJxqhRkauvy8egdZQw1Hed00Z0u8s2rOaIG/K1NvVcoAqE73yAk9C2HoV1ZWDwHFcHCcUk5OiQ==","signatures":[{"sig":"MEQCIBLOOzeOGQUFoKiZGz03mh697Vv2tVnLeaofRXvDT+lEAiB8JT2ttC/wOQxlh8M6g0On8bxXwNrqJol9e7qDckCLkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu8cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLdA//T3GdcjqsRxJknoLGXf+FUjENHcEjiSlMhEULEl8L5daLVDOn\r\n287QydLEqGzUWM8jCIPCeX6jIg/qPKy2kX6nLIL2k4wORgq34w+7Na+aNpuK\r\nmQeJ04edwKn0heAz6+t78VJLwxKeYxGpMA0F0XOVdP3GVoIFhkMno4tHBB3H\r\n4d1E3wQ0j6EO1Ah+z2+5j6v+kVU/PImhlIQX9KKQ7eaKVYUQOrST0lDCv22Y\r\nLYXsqETegSa0xSXiWOT2SR36qYheHVMB8FnhAz2pCazfRLvqjjn5U8Vli7Bm\r\nka0LXPxic5+bmPndoMBzs20hpstRmhmt0h8WgIiYM7Mg7VaKJGG8adazs8Gz\r\nk0okg3TlKY2JNftKj2+V+srlsrAroWDsdkCJqzUWNxpM4yfxiuS3GsJ+YF2K\r\n2cUbodiAofjqPkJrIOmhmccc/a2dTVmTNVj/9fEjyKjP/tdMLlrDxgAP2ezV\r\n/QikO18O6srt3GFn2PSz600uHB/z6Y/Zk2aHlMm/ZKzA6yd/xNrfiiHyHEeF\r\n7hJJ407CqQ/JsohnEwPxxPxIq9cZdONlEPAN65sJBcRR3vohJZ241hkeXGVe\r\nxIbzl2q5iE2Z2ylEJocAgJ/hLjlBzxkbuwR3HxU9oavyRrqk73+6PZmLhR/V\r\nv+KbuKLo8kelSMxG6bA94SIEKKuu/mA9PlU=\r\n=/Vgc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c8bdf6144.0","@material/base":"15.0.0-canary.c8bdf6144.0","@material/shape":"15.0.0-canary.c8bdf6144.0","@material/theme":"15.0.0-canary.c8bdf6144.0","@material/animation":"15.0.0-canary.c8bdf6144.0","@material/elevation":"15.0.0-canary.c8bdf6144.0","@material/feature-targeting":"15.0.0-canary.c8bdf6144.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.c8bdf6144.0_1666117404618_0.1906389066927423","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/menu-surface","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.bacda4885.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91acff796a54ebf03ba19078b76e2ac9c35d6aeb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.bacda4885.0.tgz","fileCount":37,"integrity":"sha512-xS2c6ySaRGLZZFDDuaE6/TdYbwwSdOa2UTtrEubeiFyr6fU9vrqNgmJWjmDF9Dpqr35hGGE1yo5HIeZFzAQLCA==","signatures":[{"sig":"MEQCIAsa5y9hEZ/ezwFjF3JE+HgWAbOxmH55hA1gw/SRRU2lAiAi1iSj4S37CTDkbyJjZ+JOg/2oUvPLuGgUXEpDO7Q+aA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvOjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkPQ//ZgVwJlQJ/mcwG2fZabWxyXHNv2rUkF7OehWwyFNkwNESIY/n\r\npldV4Vili3suTKUZjkCVH1zo0mLuCoBcWJTtcI41eX6mv3VIaqQnzmorLFY9\r\nVLAC173bdBTa9jOnJVimvZbbgBmfkHIxlRnISqs8cXD+WgwvmFbEHY1KNBUE\r\noxnEsoVuTp+pWY4ifLLBks5GItzIvEVfoXdDaXG2WSnG72gRh8CsW7z54QsM\r\nXpExgvpThzo0wSbB1gYM9wfktoYpJteJAjvTgCuUzXEzNxEexFTpX7zy0qgx\r\nXXLTe8Pysp8nOE0jQgyAnKsjsOwnV2DuZOUrtQSmAo06g36vwn66tH+JeSsB\r\nCW9qelfCfFXGbDq2Kf9PWDTGjqR1JSkBkP7y6vKi9NB6uPX4dxoy6apEeDaC\r\nl4btG9QX18UV6uHzHM40YWigSMxspH+2xEp70FELpauuoAtg8BEniFTpg6HS\r\nivfhXCbOpn1wdj7WoZQprFMUGlJr3HE5xfWgAIH2zapGR5IiIhNh/ke6aJz4\r\nCnqarLUTfR2HmkswBuzaAtaYUiJ8Spwzd0SvvtB5BAMAIq2uBUuFXmu3qtTU\r\nva3uOPv5aD8gtr7DodpSNykYaCESD1Fmi2G6qVt3IdX9DMzTnY/SeZyJ8TqK\r\nLwT3MEMGzAk4ES/89ijB9+BGuPFk/7hoivg=\r\n=yD8R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bacda4885.0","@material/base":"15.0.0-canary.bacda4885.0","@material/shape":"15.0.0-canary.bacda4885.0","@material/theme":"15.0.0-canary.bacda4885.0","@material/animation":"15.0.0-canary.bacda4885.0","@material/elevation":"15.0.0-canary.bacda4885.0","@material/feature-targeting":"15.0.0-canary.bacda4885.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.bacda4885.0_1666118563292_0.889510369883675","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/menu-surface","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.92b2556cf.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6573a60053453028653c8fb792b5b683313bfa8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.92b2556cf.0.tgz","fileCount":37,"integrity":"sha512-D4EztwHzsmCdF3RR618tgJQAAUNVDJdNIZcNyc12y2yZqkFJAgY08yWzb7truiXm75/jNJ5MFbsj3dEl+ZCclA==","signatures":[{"sig":"MEQCIEq7TEnTJT6fUk0w3jyvzOkjnCLR8jZcorm+K+6h45yiAiBkP+DH6nfTKCsVlD1cxouOwX0v0w0qmwx3gBDytnIEkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT081ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRwQ//T+1OaJoYKQWPpP0N5wyETgR3Y/i6UTmsHObrITHVZ7Rd80L1\r\nl9W4tRfgutbrm8TFemcfQkQNL8iKE6HkC9GXD3EzegGk6CFR+KjgLr1BAv/6\r\nIheFpYCEiswbjlacoAkbw34fEyntE/YzzrXuJb32CduyPHK0ANLDKII/JSZW\r\nZqigoDzgcGd6QTCwjL96G+LLUAqhAwhsXqpU1gxBmcydBM41nUXWfziBWxZH\r\nBGVrQL1pTkV4J6HMyjkWRTOCdrS+QlVpbm8ErzX3AQhJIym0O1AmMfOVp4BM\r\n96ldYRGzm4kIVf/dbGX/G57U4+11RQ/Zz2dTS6M4XP4afHiLAG9n5qwb1Qja\r\nX6ybaWVxs4afhOea5iUH/2JFWFpleM9Ew9r8iCDhhGIiGFc1k2RgQnzefccJ\r\nM4YFJGJw7idt0ZLbfAwFWJiAy7m7M7S4ejskjrmPPgxSd2V5bU7MhnF0tE0V\r\n5N7StExTS7nYEkzAJp5my4GXZElJfLvUIvzv685TrLVFSndFxa8B8zeqxhzh\r\nb76Zn+ivbHhMU9B9ijIrEEaAX6eDey2rOsF+pfM/vLHemghrQ7C+t2VfXtpF\r\nIsZXrhFy+MNZpM7PQnSn6/E2GNHzwjSyGZ/pNfb+Skkf1RPHqp+dZR7S7PyM\r\nEJva2mJ9x+N3ODgN9sd2JJ7BKJfj45xfAC4=\r\n=5vSq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.92b2556cf.0","@material/base":"15.0.0-canary.92b2556cf.0","@material/shape":"15.0.0-canary.92b2556cf.0","@material/theme":"15.0.0-canary.92b2556cf.0","@material/animation":"15.0.0-canary.92b2556cf.0","@material/elevation":"15.0.0-canary.92b2556cf.0","@material/feature-targeting":"15.0.0-canary.92b2556cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.92b2556cf.0_1666142004832_0.564738630725184","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/menu-surface","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.cc804509a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"001831de3424d29e9e33392db50f4e3a3ea0b48d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.cc804509a.0.tgz","fileCount":37,"integrity":"sha512-j/kTSJSWK3NGBZPLPFGjT+JQOiAndkkkzensg/E1poZxS2nOaJeSR5u51uERN8YiFhVUFrh+shMSjdyEMO6cQA==","signatures":[{"sig":"MEUCIEayU1xEI2CUCSJbyA+aTj1zOXk48Fv86WYHRFEusSJ1AiEAh4dwnSoM+YGVUwAIAgHGPhdrnZybEkPZn1+F0NmHOpw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1AYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmooqxAAghuVqKWP+uAFIlimiYY7N/8erxN/c5kFsP9Z5W32aStB8ynb\r\ny5hFVvAZAMq8Lnuabv4/5qC8e1/FxzSjYUVqJb+TPZm12OTxLOz9xo246rsS\r\ntbvmSDv9poniYEiVT0sttrylCb+I0qCMWletTpD93e8jMEywc3ldHDqlrova\r\nvsWUFinrqovbZXcFuzsiEobtzASxByI1JoGIolM9ysKPLA96NoZlPXAUdE0U\r\nngiJdjOBELiYZzyoTrT/qZemLKrH+Twm2h9WyYGrZdattHUdd5UEaEog4Zb/\r\nLbmkwPsF2P8dgkhrCwvca6p/8cRYHRh2FEcdq/IzFWp8smn/B3F/RNKxMCQw\r\n0B8GGNfo7yD2GpSmBbGn5x/LZTf/pbpIXqPoWPVgPDQ7Hwja5VNjQiUojRzG\r\n8rx9INJGI6X49vX8TiFMayLz/y5zRbDklcN+E6AjQP/Dc9eePUDAhPHObVFj\r\n4EyAlAbcMYzUZFJu4c5+6kEpcKbpCTlVHWTziHsSBD2PDKSxgoTiySz2M1A0\r\nS8+aH9AAab1YkCvf9HgWtGPz7TF05ljZy7vefJZS0qY75A0efsp7HD7kH0XA\r\nTDDhzlx+OIkx2RI/iJPGp39YnuieLn2Uc8wn/oO9DRkCG8eRsm4piml1Otdn\r\nlIWQgjcTcA7Jl9MzEhWtQ4H211csSl+8FR4=\r\n=Vvgn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cc804509a.0","@material/base":"15.0.0-canary.cc804509a.0","@material/shape":"15.0.0-canary.cc804509a.0","@material/theme":"15.0.0-canary.cc804509a.0","@material/animation":"15.0.0-canary.cc804509a.0","@material/elevation":"15.0.0-canary.cc804509a.0","@material/feature-targeting":"15.0.0-canary.cc804509a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.cc804509a.0_1666142232332_0.13010712339279906","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/menu-surface","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.982bedae9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c6f497362888ace9bdd75f7fcca9582bcb5272b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.982bedae9.0.tgz","fileCount":37,"integrity":"sha512-fFc2CyYGIcLedN6SEMCIlXK3ai1PqkZAMa1kanc0ELLPhoTQscrQBvREEJoI2rM4t0P1yJgPL9Rq2yS6sWKH8g==","signatures":[{"sig":"MEQCIBN2eLg0+OdATozAKYBzdZ8ANs2R1TmKSTlMOxs9JSRyAiA2c7I4qRFcimO4tRE34VnXVvOrmKSJ9bENYm0Zk/BTsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1TFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpfsw//TZ+54lL1nfgbbsqihJTG3cP3ijp8Okn8tHhYAH5KqvIQzdM9\r\nstKZZESBoIlvaCgEPaq2y4smXX+42u4ECW74NujIBzWQ/w9eed1Nlgawg9eI\r\ngIcsab3tC5d3g3tsay74nqRNfNOEczzCaZtPiRlcIqhWORswKwsjd+W/FPYm\r\nFV0eXfbeqLWqlywHiq4usbbMvDoYsuhD7fpNxx0/GEMXEL/ngvEowkfmYj3w\r\nuU3pmD7nyDL8axxpHDAFA6GosGZ999h51VCuYupoyepaa/7v4TzDdZAyK9bE\r\nA3BmRm+CJHFEve6NuHDyWrvTq4/IOk5seWh+zzyfbSo6dzQI0fUK62/RjMTH\r\nC3KJrjYln0eJiPzQYdSl9iLSOmxMGSiuS24gauQFBxPBseP6QhLio4P1PzLZ\r\n1hnnu3vpBvSZgqqELk7+wCSn3tMtr7B6ybP9PCC4YiHxnL1ZrUG7SAFx7jkR\r\nEUftqjVKhvJhxkrFq4PWsHRsRZrLcHV4qRVJmJP3WHnCJNBgsuyo53A4U25/\r\nQkCzVxG/4hXnD77rHSwwoBo0NgbGnZmNtmY3WOoEmE/Pb35LSw0U0nchb/aI\r\nhGcnIkmFnrvyLtKTNrSQeYNceE5pPn9iMj9YCeIuVZZDYmIAmfBig18hQfmR\r\nhUA+j/EYRtZBSoEAbP/gAyQEpFXsejfc9hU=\r\n=QNLp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.982bedae9.0","@material/base":"15.0.0-canary.982bedae9.0","@material/shape":"15.0.0-canary.982bedae9.0","@material/theme":"15.0.0-canary.982bedae9.0","@material/animation":"15.0.0-canary.982bedae9.0","@material/elevation":"15.0.0-canary.982bedae9.0","@material/feature-targeting":"15.0.0-canary.982bedae9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.982bedae9.0_1666143429710_0.1851584563037476","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/menu-surface","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.ee40081f4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"083de39494290946a89d299a88ae457ca602324e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.ee40081f4.0.tgz","fileCount":37,"integrity":"sha512-nCkwM7FPHL2HoDzF3JDggabnpZvCwWGGkQkmZ28HECLML8hqis5KkiOjlE++4pK6FI3mgeC3cyErjHdbLAmBng==","signatures":[{"sig":"MEUCIQD53u3+VcxftRgck/32PiQ4m1i5Xz9aMMgZb7U2kXIvMQIgJ2eEfJc4skOEr6stSke4eVHw7U1Mx2OhV8a/ENgiVCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFoGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9cQ//QC53w2arlh/usnw2nACa6LVQu+ONlbh/ou6SS9nUrXvYS2Wb\r\n1CQMcfM+MWVvvTP14npRBn13S7j6Mvk6PLAk2ztG8pclb7C66BfolTuZEjYq\r\n3cFTHqVgr5rOtXLUi6/EosEj3sEh+ojnAOh6ObeuQ04Ok7djaRf1GIedgOns\r\nYjIn4JweWC8FwBhHOTOwpdlXKvhjo9ciDFkSXP1NZ5xpRg6ZHHJJC3aB2eKp\r\nurxlOC2dhPWIcOUWoOJ6pKk8oNaYMW7Jxj+zU1WbrWIMLXxXm1GJhbWm9ya4\r\nNmTS4Gg2iOX2LyZLQrFQAtOnBJGjSDNCiuZRT4iy5M66bPtrgni2/5va2pjT\r\ns2JE19tdebuOmBxUymYmpHG4uVP6v5OflG9ZW+7oV3TOwI5bJTE2HFs/TCR/\r\nRFCMrrVSuojtspY969vcG6CBwKzrkK5/RaiDlINrwEbbIQ/r5seDjjTMstla\r\nm6rHHpfA8zLfpDjS1bNJlzMBUtAZIOt23k+qyfjLodadihUIXnFDaItAKe8M\r\ns1SPNZt7WHvEoOssGJ/qgqNEsz4uF1cYU7nKfiEf02xNbe7XrB53QdylxO6d\r\nuljE2QVcrEFmZ11r7Z/7CvUBr0jon5C+UqHrANDxdX7yDlrIOcP6nMOHWf1G\r\nw8jUXF8rUr+3+apNVWUMFCsHNnu6sTvo6LI=\r\n=DfYd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ee40081f4.0","@material/base":"15.0.0-canary.ee40081f4.0","@material/shape":"15.0.0-canary.ee40081f4.0","@material/theme":"15.0.0-canary.ee40081f4.0","@material/animation":"15.0.0-canary.ee40081f4.0","@material/elevation":"15.0.0-canary.ee40081f4.0","@material/feature-targeting":"15.0.0-canary.ee40081f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.ee40081f4.0_1666210310269_0.5990101803304151","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/menu-surface","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.98f1b54e2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e99b64fa6396c98ad2dd954f8f5148abb6d3cd3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.98f1b54e2.0.tgz","fileCount":37,"integrity":"sha512-KA7vqckVykiq7+SoOECtw7JYBDhzMDXMP7+7pmk/S3nLifPqoUaKm0jWIR/G0enPNkZRuxhjfuzX62fA4VlKwA==","signatures":[{"sig":"MEUCID/TSstyhyXqk+c7wREvSiR8bup4PrsG3Yt/kVW2JrFrAiEAm99O54G//5FWwzjDWkxgI+VJqB/O5npFTTtlyb1KFMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdIsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDbA//UmqK7l/l2+Iz3mpwUe2DTc46NsFzOLfIkuKr6mAkq2T+Jp1p\r\nk0eeGXsQMtXfNt02rBq27qRAw2XpsomD9gxhi945qjxQ3tacHjic/89uN9OD\r\nVQee50Dvsq2FEquAAMR8TJk5n9hlWp9sRrh63ugeP30zwllIzKTKH3FNNZoq\r\nAVaKrpNkJcMR5BklYdCyct6BvxccZSJ314IMuD1dH1HykW/jeWqBQkt5utPe\r\nMM4Zw9nomHcT28nwQVr6i1yhF0/IVj2ySqW23ntLMLm3bfat5vg7VMjhdX40\r\nEy26ReYKAlVTkWGW58NugfiIzwBG0PqErJ/jlFUEiwwqvQxfbP8Wlv8Hp9Ff\r\niMal6BGWIb3Ewq8FphnwgZBHUmlDoP0Iih+iv+rZB6BlP2a85HtfGyX6VgIO\r\nNS6RmyFT8HEm1Hi3CZ+ZKR1rhxZYZ3hXobehP9NVlVHHK3aEa038bpAH0J49\r\nJHRtB+L+C5G1x7IHpnBefsLV2ZSWeGdSWGWxUReOnXNVY7UhbfhULEakNh5H\r\nZEvjOx4ygU5d2jCSbQ4m3Dj/7il7V75t8hgMFHrYcZJVip11zOXhQt9ciNqK\r\nMWVKREaKM/zd/o9WYTSaJ+d5QxJxhIOSd1oNZC4CuN3dGOOynWwCNdWaSXVc\r\nOc8bpoUOE4wg3YIM5MUYVdvqcPj9NuScEl4=\r\n=4py3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.98f1b54e2.0","@material/base":"15.0.0-canary.98f1b54e2.0","@material/shape":"15.0.0-canary.98f1b54e2.0","@material/theme":"15.0.0-canary.98f1b54e2.0","@material/animation":"15.0.0-canary.98f1b54e2.0","@material/elevation":"15.0.0-canary.98f1b54e2.0","@material/feature-targeting":"15.0.0-canary.98f1b54e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.98f1b54e2.0_1666306604501_0.33741947808233985","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/menu-surface","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.e74b7ba7e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"908bc14dd522d373636002f1b7764fab009b6a4c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":37,"integrity":"sha512-uIZbVz9u4NlbmiZLcwiRdIVEYOjsJ3aPZ++Wyq3tEjAE4V91+4Akv8lv5ZrkgFIDlzam970vbeGWk1ljxMgrQQ==","signatures":[{"sig":"MEUCIGivxgRY2mwljAxEjQv5CNMlqQp28WkcjYdgsvoJw6LTAiEA0Xo1oqOlkiViwuUcz61pM2AxEIRs6LDD6aDAv88iU1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtFtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmof/g/+IbNBEkqeRk51GowQsUj4ECmS3/K80Obq02RBJ9KktQX0HAaM\r\n4hZwBRNvns0RQx70udzXfetGZPvn7jW9ZWHvuvCC0ntKd5+MDxfQqQ1SiHXX\r\nmG3Ogwn/GM0iqhrK37l5MVWjS2BiqtLnZTtfMeADxwkcX/BrCwfYEuMrIYLA\r\nmOaGEqJ5ZrmODBvqZNrvbSZ/u9q8j0UcvuYhiFPJTJHYxfMW8WNwC1Sicdq8\r\nOEGzGi2fT7ahajic5+5WoN377QE1YTAI+LmlbA86USahX1TdMA9S1trIWlb9\r\nzaSzV9hsPgbzvgvCWR5OMlYjs4PMQMrI0Qdd+38BB6dbdqYeCIFttQe0CBPx\r\n/6Iugxc2TIBz7q7XPcYi8UUOVUtYqWwphKF+TaEHshkeE562u53FddQaCcue\r\na+Ug1IXc6p6JOdOee3aibFJWyhU/n6vxpmj/Q5UJWqw+3e29/ZZyCYqmUhUO\r\nnzxwPdTdoCycQDFjmrdNX3VAws55YC4gH4Cf7u3kXjv+kgpum5jASBAJP6dn\r\npBeLUg8DjUT/QGvsyKXVyBCu/RhKVH6tKAorqSRpw5OvUSDbtCzcNEG63yV1\r\nblEoQOye/7+4eRAp1kOsfJq129LCWrKpGXdruKVr5iHDodMn28XEpGgk4q4V\r\nl/TkVSFBe4SgENOWhhROUY682rnyMUqbUig=\r\n=W5MF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e74b7ba7e.0","@material/base":"15.0.0-canary.e74b7ba7e.0","@material/shape":"15.0.0-canary.e74b7ba7e.0","@material/theme":"15.0.0-canary.e74b7ba7e.0","@material/animation":"15.0.0-canary.e74b7ba7e.0","@material/elevation":"15.0.0-canary.e74b7ba7e.0","@material/feature-targeting":"15.0.0-canary.e74b7ba7e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.e74b7ba7e.0_1666371949155_0.748341036508742","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/menu-surface","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.ab55c07d2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"855f809e8309fd25f00bd13d8134a824b4fde85f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.ab55c07d2.0.tgz","fileCount":37,"integrity":"sha512-MEzoGAfXu6yENk9FpO/QzCaNl0PigVQfA6oWBtD5JMSF/Ec5uSvIbrOgydhsOaIUNn1lucuf6l8W6gAmNl0F1w==","signatures":[{"sig":"MEUCIG+x1rUSK7syVvngSAb7sWfORB9PM0oGYw/IvCq2dWqXAiEA24ce6t2DwDsfOJtiv05hEEnneZvii+zu///NTvrqNUc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDQgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+lQ//a5cb8AXZeMhqdWFitOZ0ZWrbaXSLVV+e0w/t1Y9Caxl34cnY\r\nGG5HSpXsVlk/cFIkRRI444b1B//WhycSEtRd/ezmiYcdcVuVLpPIZBpC3hlu\r\nfienhKdXYhHewKfmfONW7/CmHn7aPmriVXRaNbS2TB55fOHICnFP1JbIvKl+\r\nLjCq17JwNUVzjlk01QBJVuKHGju5imPQJbh0kii+0g8cljHiaexFDvXDEyp9\r\n0P+cYEXIcbqGZtsjlPERDLTIMjnD7HrrXKvcKnHRFEIC3B/eRi4FNDbX3kx7\r\nJeTEgQGZe9g3nHpfpMPFJgUnDmduTK1Phf/MJL7Y8mU2qxu8SANfACd2YxhK\r\nlB9aODTHKGp4PJHbmSSPZOLWzIRJqTJi4Cgu4s8EXJeZ7vZ49ODRAm8M7Ahm\r\ns3RnKnxJVL/u15t2OFi7niljicDjYyc3VMQOpBuOSlKHUlfLOHhlOHh6oMm3\r\nvaqGDCuzKNXr6eKB6bfzIoR67mrMEFtr08u5o+0n8C1f6Wo3aNCyop5hnhv9\r\n6Td97vYuHwjj4WUFjBZpsP2NyC/YfA6AGOVn+/nJRoIZTpnKzEqWKRWQml1e\r\nbfJkrtxxOIzGEHgOoh+zWYv2yi/PZBiIE0qawJIsqjivp+wc48fsDh+ZlDYk\r\njFaYame3JUbdYsPR4rwIQOZz0NGdFtarSuw=\r\n=YEOS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ab55c07d2.0","@material/base":"15.0.0-canary.ab55c07d2.0","@material/shape":"15.0.0-canary.ab55c07d2.0","@material/theme":"15.0.0-canary.ab55c07d2.0","@material/animation":"15.0.0-canary.ab55c07d2.0","@material/elevation":"15.0.0-canary.ab55c07d2.0","@material/feature-targeting":"15.0.0-canary.ab55c07d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.ab55c07d2.0_1666462752629_0.5520408372096419","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/menu-surface","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.fc539db34.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49251a697b22e8e872085fb776b7499a0f7e040a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.fc539db34.0.tgz","fileCount":37,"integrity":"sha512-jQk7+W07ANyx722a6oFXHwdad0Cp54KDBx7MX3gnh/D5pDs05iYlZ1WuyQ4iCWUmu3X+tLrmpEIUBrBW6OTW8A==","signatures":[{"sig":"MEUCIQCNpE0I481D9G9/q8Fo8oU3ZXrpUOQ/d/cUVbCg/mAjiAIgF5bJ285yrFc16uPquMCRKOgpSSfcKXPsqcLGFuGi2NM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuB+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotgA//WNBO/FaPO9sgVrauaEfFM5tL/Sk7YO06eGD2gLqJhnMsTVRy\r\nkjW+fvD3G9Q48AT92WMjRiIl1sQLou1y6CPFJa1cYpCrlKm82IWH4BUweN2I\r\ng9XFYqllG5+Jb6JDvd2bzYNfSzdKWEqB+CJa1++ELWGPbMk+0/KfpoOdpr9W\r\nKjYN1x/GC+Zysdrdr0wIbtZW9GvVvExeSrEOQV55PYK3vghUHM0tU+gxUo0C\r\nvcAKtuEZqjhSPCqGqm71cC++TQ6hHytzo24neLal+vxXP/A6YRAVyfdHddRY\r\nJUWCwFFPtR8XklIIJEtDWtqS6wStcLuvhyahLqMWenIGAG+0QFTJ72zCny2P\r\nFkAhOio0upXdawVuK5lO0v/1yPcdU+b4YNrwagCTOqgTkiL/eAd7n/bA4xsT\r\nnNjLtkYM6D7v5/LSzTO2R0aFbMkAOKNEqSa4JQdlw4CvjDGUjbpH++HMV2BD\r\n5HOQgfzmyl6K6u3tu1PETYQ4ILTzjs1gEvx2PghhPjH7CaaG/sS36pIhBqa/\r\n+FPR8hhxGKH5Vpz2LptYaKUrt0PakXiEIKhUNCuHhlyUmqry4nBtfzpJppKl\r\n18FNBIvYqpP3ano/8CMEOZFk3+BtkwVKIfo2oTrKl5EFbk1DhrOcEZXPjsmp\r\nsiiStyidZ77lOfK5ClDMltHkRqNc8OrzO9Q=\r\n=lp0R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fc539db34.0","@material/base":"15.0.0-canary.fc539db34.0","@material/shape":"15.0.0-canary.fc539db34.0","@material/theme":"15.0.0-canary.fc539db34.0","@material/animation":"15.0.0-canary.fc539db34.0","@material/elevation":"15.0.0-canary.fc539db34.0","@material/feature-targeting":"15.0.0-canary.fc539db34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.fc539db34.0_1666637950131_0.9159868801257001","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/menu-surface","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.e340b04c5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b50588a375a07ae4293c2b13600c5e091ae8e378","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.e340b04c5.0.tgz","fileCount":37,"integrity":"sha512-QL0IRp0d/Ria57dKbD4LxlW5sKAiaP51veZwkGmy13eFs3DQV/LyjHGVit668eXStpKtduG8LuC0Lz1ozxCLiQ==","signatures":[{"sig":"MEYCIQCoVBiVr4PaW4NOHFvFuYFfeKmpG2cI0HeMhrvXHABQAwIhAPqD4QbZpev6Ls0n9meeEkr+bPFNT0JsNPbABo9NLPHQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHUAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrczA//U3uS0KEqR8ONvT5QqhW6YBZW4QVmpKqB1tEP5FFxlt6jegCk\r\nAX39k6xHR8DhBGPMjKp6nKEp87RjC2PBoh2WwFRuuBWGmd3QdTS1BdG+PcSw\r\nfN6FmgabrZmubJJSw+c9G1dnL+EPNtXxjwZqjB+HPZU8YzYZ0OvsAJJSTEl2\r\nywecDmKFFPzf9SakYYqwl/+gp1ZInZTbaT3ZTIkgWlsF1sLRhVTm5aDOJI7e\r\nZTTN/eJYYvXwKHbVMT23gPTIaUVg2kdMMAGBd3/qVlJC29MDENmTBfGT+QU4\r\nBGNbx76rVprFG5D4bTgd4uI09vR+SdHBCkNDn9jpwhOdDoDczYBGtVRVlwX+\r\najAUcD5Z6ESHSbqG08C7RVOSBbAcUxn3pGrFkSKmuYtYalZs/qIvAXCMMiib\r\nJhPnuH07WISKPI790g2wQbA8DcRUFO9OeUXHVNoijBrvsY1WLI3BkbPraVN9\r\n3ohxbZTGK077FYFscE+c2VpEEsumbPz8/IAe0s8/Tdrax/Y8ieCnh0s9WFGV\r\nZqATtoVunBpsNqT6Ica7k35qLZHg0htDiHMgKbzCdp2iXVX3rgfYLXH2RZ/0\r\nnFEmiBgXuwqAsK9oXOrl1B43bCxzDVJXlbmVfh2PbF+CrP5EoaflsPTrxLzK\r\nezEwucapZQ4JBHGmTsj7AEIR0RolEkppAEw=\r\n=YN3Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e340b04c5.0","@material/base":"15.0.0-canary.e340b04c5.0","@material/shape":"15.0.0-canary.e340b04c5.0","@material/theme":"15.0.0-canary.e340b04c5.0","@material/animation":"15.0.0-canary.e340b04c5.0","@material/elevation":"15.0.0-canary.e340b04c5.0","@material/feature-targeting":"15.0.0-canary.e340b04c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.e340b04c5.0_1666741503850_0.714485050580655","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/menu-surface","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.2c1a8f8fd.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34b98796ae5232eec52b9053979b1329623bee00","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":37,"integrity":"sha512-hkBfYcaPNATefrQ8i7sHq3gljeXTLsTwNLwvaDz01r0YNEJ0cJ/EFR+tXSKZxUz0ER0m02AqB3z8QyX9a7Jl5g==","signatures":[{"sig":"MEUCIQDNiX6Ps3FPX6zfoAhWiB1Odd48oDWukPBHjI1kzLulsgIgdYe5vnzQyR2EBsKepnree+Is2/bhwDGi4DsuPCxS/90=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW66ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKZA//Z3DRlXHNL7AmzxwRM9YuEy6iEsXnJMxFMkw0Hgk9GZhwqITj\r\nqW6R3LXiFEehitgJmfjZx9j4SLE3qo/QNZwlOTuqJ0uRMaWXzjIZipqrjKWQ\r\nCfkn9PTYyPVPC0DvnYAJwOVdmyWFb9fhDyE95Zv7s/UMpSnLpNx7z965nurO\r\nYk93hzPoKK+zSMXDJA0f8B8OQDAauWDsJQZPUdwRSrofxm+P8DEGASAMgNZs\r\n8NTeMVZ7CmM936U8nhKJBH27+5aSopqUODzULBpZCmHeVuZWpjNF0+l2lZAw\r\nMBDSlpf4WKXNtYxwR+5C1vKbzJxJ4xO/mxmqF36B4azPHw0C8OOquo3NFbcL\r\nKVp7wyjuRZnUe672RZ1EY6Q9cZE8tFIswiSiBcgun+qm69BOVvhTe/mUA8uO\r\njPR6bcGJ39uB7OfJLUnUgsoDb2+TQjeTO2yDqSW63R22uw2xuGu8hXyTONnC\r\nYwL43r5Avlicjj8579di5BwRohnGQrw0RPA6ln7uJQ0dWHlx1svzr5OrE9XO\r\n/FA058UW+kI4aJ5jdWfDuJK4ZKsLYhL1l7k0BfoW7c835b48itSI0LG5d+sg\r\nsDEvGHmwQOQbxTa2kskXTdGTqDFmuiuWnWxmDtPKlV7pN91vi78duYG7VY5h\r\nxsAfPolkBPF/I+I+Tjzf3qr7CFkKk06Lb0I=\r\n=JUIN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2c1a8f8fd.0","@material/base":"15.0.0-canary.2c1a8f8fd.0","@material/shape":"15.0.0-canary.2c1a8f8fd.0","@material/theme":"15.0.0-canary.2c1a8f8fd.0","@material/animation":"15.0.0-canary.2c1a8f8fd.0","@material/elevation":"15.0.0-canary.2c1a8f8fd.0","@material/feature-targeting":"15.0.0-canary.2c1a8f8fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.2c1a8f8fd.0_1666805434388_0.9331008309113329","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/menu-surface","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.ecfee946f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ecddac781473808aa5b23f08bc77500e00dcdd5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.ecfee946f.0.tgz","fileCount":37,"integrity":"sha512-Qxsh0/oQv4DPnz0NuWnZMbGfTH6LmXk41xLi6tE9y8HajzlVpec26fpIDgqWyz97WK7rqUHvsTKskruppHisEQ==","signatures":[{"sig":"MEUCIBDiKd4qMtO4Re9jrkAkCVnSfwmycZ5LhYxs6OuA+k4kAiEAy/j6dIaZ3ZeyT59KIYkySUxuEIDeMaAGExOjPBLJ1HU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZVUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEdQ//apmobHiikwV+Ficu11CdlWAqItKpRlxqt9TbuM4OYJ7FE+Pi\r\nBD4N62qND6gZZmuR1iubejry8qqDFYddvpn+IGMLT5hwH/BY6bJ7BXJQkEaF\r\nFqs+6D3uHWB2G5SduguTfK/A7+PhP71KfLVPDO+Kb5dITuZ8/RFXqvRpW1YB\r\nUFLXiAT8fKMJwVpa7+eY9+zQG0HJ67pygBbawI6zwizw6WaheBhv+hbywTs1\r\nCsgTkDVylP2Ab08TqMFU4ZkDmQV6zpAMAsIIkR05Cmo2L4w53UP514U6gSkF\r\nX4jjXUO5h0OYvIw9UBvQQm9xQhtihrEqsTdhnOvYWJCM0+18KslgY8UKBx8J\r\nx2jTBrSV/VDICoUlYCalNV2dP9xzOQ0jDtGh+XLDvSeRpObRwWYgTnaTK6n1\r\nwaysRY5IF9xWu+RHyda687ZbzhFrBgGIiWtpAhAYFJZVQEgMokHwRzKMKyYb\r\nDfSGVjaypbUHoo7LCACxzbP3oiZYaaDsvLT2ZcSVy8dbd5JdmeZNx8PINtqR\r\ncYqTrbgBF8GBkvcFRx80D29nTNTzfRtqw6svlw1UOV86dHOEgMjagGSFHLu6\r\nR79y1/WmVrxvkIoOLczwOzSy+vvXbRlMNg5gQmXgfZwFYE6S1QjTgouyZHbt\r\nAtNl3IL4XOP/1H6l605ldS9bNKlmA6A//8Q=\r\n=9siY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ecfee946f.0","@material/base":"15.0.0-canary.ecfee946f.0","@material/shape":"15.0.0-canary.ecfee946f.0","@material/theme":"15.0.0-canary.ecfee946f.0","@material/animation":"15.0.0-canary.ecfee946f.0","@material/elevation":"15.0.0-canary.ecfee946f.0","@material/feature-targeting":"15.0.0-canary.ecfee946f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.ecfee946f.0_1666815316373_0.602990910191376","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/menu-surface","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.73ca9dbb0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c177f16eefa7440145b9345be5398ff6fb1ece00","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":37,"integrity":"sha512-AtnZmfQzWXISMVyu2hTuy5DCBJhHqHtS9SLBHv1+z19AqFZFD4K8z90uXEHAdXswjaAmiqPhxH+zJPtSDZWB+Q==","signatures":[{"sig":"MEYCIQDuWlTOIRKRXQ3D00ymWlZqJD2mt7rwdbfes1DFDuTZHgIhAM27aiAl4dJx/ghFlTv6WGM1bO0ChyR38ZXEmJtrRK6U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAatACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoLRAAl3n7oT4DBxZStiTGk8i+NMlWrTERYfkuan4riS7Wd08Xq7/V\r\nKuTtwePQB0Ki9gyJWZFGLDF43nlZyMKaFCsOJfN87A3guaT8BQHbSZWT/WJs\r\ntICYSHhcDT2qjVfMx43Lagj0OGJG4ufoPQdkWFXrw5Qd83MdFXC1ipdYbMlQ\r\n56j5LNbqX/oA954gzqe5rF3AEP8QxaZJU9qWZBzreOzmHGgudxruptKGDA0O\r\n75dnDn0BsE064/7ZrJAsnpuSG7XHj7Nbm8F126LDUANszqqaAYfXw7h1fBZx\r\nHZxcS9SnD7c/u6biDU7Af84U6qYIWtqHA1IuLk5ezOVN6mTMc4ALlUTVl3Gs\r\nLscvt5znTlVMnbfqvHBwMTO1a9Ys9pDbfTbsVaaLJ5/CnbPyHoMhUuqrKWN1\r\n94yU0Cdrq0HUyHAthaDpXhkis6of3I2mA5Mph5lhqkxWPzvllrcrC3OpOHGf\r\nGOD8HV4mXAnqQjLIp0KXaDnZviI6aj5ZZgoIiA1Ec39sCA5d2t9ZKm9uVZ1I\r\nvwH+NFYbJ9Y1Seprsmqpn4a7IaWo9/HTx6tY70WeGiTT0oVFZEWhXj44yAKw\r\nur0AH+cMbtS0bPe5X1HvPGjRkltl75lB+PaGgX7dBqGKTBK7Kahlq5DzIv2Y\r\n70OwqQ3uL19PUlKOb0EVB84TqihFRos7Igc=\r\n=UnjN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.73ca9dbb0.0","@material/base":"15.0.0-canary.73ca9dbb0.0","@material/shape":"15.0.0-canary.73ca9dbb0.0","@material/theme":"15.0.0-canary.73ca9dbb0.0","@material/animation":"15.0.0-canary.73ca9dbb0.0","@material/elevation":"15.0.0-canary.73ca9dbb0.0","@material/feature-targeting":"15.0.0-canary.73ca9dbb0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.73ca9dbb0.0_1667237549705_0.6533212412098528","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/menu-surface","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.357f2e5f1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8f8ced2f4f227bd543f6129b079a3e748ea9f74","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.357f2e5f1.0.tgz","fileCount":37,"integrity":"sha512-7jFfd7q2htVZ4CDmlddoDgRXK6xVgdo25GQcBz5pGQZjXaOTEI+GwVr3zj/daGi59M8AVoZyEanYdpLH1HGQhQ==","signatures":[{"sig":"MEUCIQDSWAgggYr2CHsMF9ELQJ162qqjqMxGSAOiGvarhz+A3AIgWHZJaMgPHrvuD+B1QPNIlzAq0Z/c0ptYGDI0tbzdcSg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBizACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWNw//TnVf1OnqLbAEyu0xPilLiozdCmFjKJMyomREKFh4UDUtb8mN\r\n6WGoHTPzV89SULUNXReXQOvpaocEn0kDXBpra2Wt5Hpaf8QCT70Jd/1tBzkL\r\nW7K+PH7HWQ2c8fsK6LuSqZOfGEiEwvWvbItR5ivsTjbO8dsCMW6C061WG6Ay\r\nXkfYWirZbXYqGgLzrpx3sqyf3rY/nVajnOk2nCMgVYiEOJKOKgn2/b0q1sj8\r\nrJK2CIQEiw3NzPW784WqycRlMSZH3T0ihJ7FDPH8M0/SCrUeqiojvhfwgQi0\r\n9AGCX4Lrm+upOUUfm8ditUlXljKCfCgSki5D5ww124PQ5TpMtBgrj61R8aDx\r\ny/xt2LrElV9R4iqJvcnmjOO1+sjpJE27DLMHM4oBx9yXwXEOs98RJ0sEXxBH\r\neOJbCq7+HZjcYp2l+23e+Xj8sgeHk4A+kdzWPg474XSOaX4vGVExq9LS4b1t\r\nJYLaR8apFPZg1AXWA6APVKnpZhf/Kx+dhSoQBEKSAzWopUcHtm1A4WltyqPz\r\nEmv//1ZeB3bXV8HVo4iuVb3rEcO+Cq5wpiIdvqi3vhr+aeWARoM3QBt+PIme\r\nPM4ePSe7uUFjA8SWoQSLwPnI7wvE8gYbpAwoyMXTrC+eGi16pg4iI5J8JJuI\r\nDdiid52zXjqggx3rMlS94jYJ+1NvPTf3ojQ=\r\n=dOAX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.357f2e5f1.0","@material/base":"15.0.0-canary.357f2e5f1.0","@material/shape":"15.0.0-canary.357f2e5f1.0","@material/theme":"15.0.0-canary.357f2e5f1.0","@material/animation":"15.0.0-canary.357f2e5f1.0","@material/elevation":"15.0.0-canary.357f2e5f1.0","@material/feature-targeting":"15.0.0-canary.357f2e5f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.357f2e5f1.0_1667242163115_0.9645785769422455","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/menu-surface","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.eb103d4b5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4233a5593e9a3dcc390dd393bac5735d4b7e2de","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.eb103d4b5.0.tgz","fileCount":37,"integrity":"sha512-Wbj5wQFKVKyJUJ6rOLO4fTVLOJXMrEoaBhIyzXucZsHymRWGfq9svIuKWapFCfPkaRXcFVvGMj+T6dwSzIgeOA==","signatures":[{"sig":"MEUCIDDcP4KwSxC7TfJzfbdEMOZV8MzndioC1G3lpa2SBRo5AiEA8vooMVElYaM+tePggSoemh5yVnajQgyakGrm4k/wvcg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYChpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPrQ//UxIcPeVFAFHAP+oU+zKjbkdixg3MrRnoeshzKfFzruFlYiS5\r\np8GixWFj9QqAw8+svi0gzrijR007iFfQYD6BRj7xN6+0iBmemCE2qZiBJ9/p\r\ngUU45rTUBSuemGe97kSG8TPn6++YBsYFEU/zVdD9uUgyGEsOmxKQuGoEZMTd\r\nXMiGacbo7myKhHbgJEYkzPBB1uXG5Pd7PCasLQ35iWhFMj9T3N0glGKbciSM\r\nWXqROok1ZFQqYklT3PZoMOp9j41zlg3ha0MBpzGzXYrKDN5dSmuAz5FKYd4Q\r\nic9E0GmBoCF236oPGyC1TtBxT/3chlfn1QuNdWFXwCn1MFms0IHjizX1MRFl\r\n89p7dkBeU0BxodVyFSlh9tP3NJWEVSUAnxS5pC6E8F8C8eaWWYTAszDvIxMC\r\neJtplOyUabWfFpPve3sk1cRuztLL9xyIVW7h+TXGaps4cFQ8cAEM0ayGxCly\r\nG8VS3PPp+5hywDHDoI9cajXr6psKly5sd6M2keziE23744ut4/6Ol5O4DGWQ\r\nfhh1QDmaVUPtxv3SyzKAlhvXbgvezPvMw8tFO6Bme4jKi8sT+UNZ8vsNz30c\r\npB3kB9GFOFL6NCzW0MeW+UctxVo3X2g5not7EeVITAgBmUi6YVwJ4rIMDWL3\r\n5Nz+v6JSwp86XJaEqXNE6e85Uws0jYsCB5A=\r\n=zQ8N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.eb103d4b5.0","@material/base":"15.0.0-canary.eb103d4b5.0","@material/shape":"15.0.0-canary.eb103d4b5.0","@material/theme":"15.0.0-canary.eb103d4b5.0","@material/animation":"15.0.0-canary.eb103d4b5.0","@material/elevation":"15.0.0-canary.eb103d4b5.0","@material/feature-targeting":"15.0.0-canary.eb103d4b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.eb103d4b5.0_1667246184835_0.7115952922874262","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/menu-surface","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.af5f01223.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7f788cc8bb37f46c978ae0fb1b948b6ed76a24b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.af5f01223.0.tgz","fileCount":37,"integrity":"sha512-5r6YFgIr/jh6DOQkJWagPT+i17m70Ms+vDGlTQ4lwKdTxf9EeewY5XE0AC4mzomhm6zFG3I48uwLQo5yuoYD8w==","signatures":[{"sig":"MEUCIA84gIL52G+4ynL7fKGewPWyF18CfMmk/yv5KxGMIxA4AiEA+XBHjbho2GAO6WqfGkxLWtekf0bpq53kCtLZbhlAc+s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWdGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqI4g/9FmlylpIAYk6/rl3ldZy65Wea7AMZssEDUroWeoO9bj8caBuJ\r\n7gUdFHeaXIwf7fiBqfRi+WqQKqlopfyTXjy5Mv5oS5cXz+b+MZ0NozBSgvYN\r\ndq1KDPghckkuQunBKYS29MHD5LH4IdgCF8uc2hRQ6I7OZ9ZQHd0s382BwuYr\r\nWFRWvFyHoRj0fHJKw1irY1LbEPw9crJ1LiUTJ9xBPTb/oEd+xMYXFtvSlI5Y\r\njfirp1+0G+MSQd8ALuVYuj6xSTAQ7C4VXhlEQAVY0Dzbcgwytg+ewKy4QQzI\r\nw5lsdj4ynrYSA14ZN2UJhilsgikybJxQy6qmabh3Efz7gAmzx71Z4E7siLYa\r\nsTPUGtFRa7HkDsZ2iL7eQDQ4b7ByglfhHqJ2yJWck1frUxhjsYMymuvvUs0r\r\nr6+YYA0X/sAUANu5KKqQFTC9fsaKiOwEbfzCSpDQLpQdtSpDTYmY92iKxaLn\r\nlczTZlV491+AtlFmPFHSlKxFTqr5ejXmuBUtDT+jM9PP+t902eNR7kc8Em7H\r\nS8RMRNNtMSimZM/4mfGTDZ/YTcZct60d38OtA1KgR7xdKOkz9NevxOSvUsiR\r\nTde3ZJoRKy0a9p1UwvgcbpFlhhhLbHiZYqdo/r262Y/gy0wAMgBj5je4jLGy\r\nkAIXrjxdt+CGVqcDapT4cm7QzoQC8OA732I=\r\n=APSP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.af5f01223.0","@material/base":"15.0.0-canary.af5f01223.0","@material/shape":"15.0.0-canary.af5f01223.0","@material/theme":"15.0.0-canary.af5f01223.0","@material/animation":"15.0.0-canary.af5f01223.0","@material/elevation":"15.0.0-canary.af5f01223.0","@material/feature-targeting":"15.0.0-canary.af5f01223.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.af5f01223.0_1667327813800_0.9048944823698946","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/menu-surface","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.58733ef41.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94724a4b5295911df36ca484bc942dd61eaf7d9d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.58733ef41.0.tgz","fileCount":37,"integrity":"sha512-1JYSvjj7qgNnreQ3mEASPdiFi/FH/0vkE/jsDPA9vuM1R8whrQav/S4FAqDBE99xMfP4XSE/quLcd9Q+UD1Ing==","signatures":[{"sig":"MEYCIQCtK+o0k+CkKT8n0Ko6Ausc+cac7S4AS4AdjeICVk8rLgIhAJzrdh024S5wY6LgfztGWYso+PukvDfjKm0LDOEwyHtt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrKkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXXw//Rc4JHYiXHeKnyo/nskqOZP8XYjroSPH27iKAVdWKIAPf5yJ0\r\na9uKkjP2miaLgcfdcFtsk5rvF/ADB1rVGdGAKkfAyqgytSFFT/csCI/U2R52\r\nVf4F2M/50OJWZaNAcxhpEF2g4Cx+VaLISky3piF2pU/AKRj41PIbENh/wrFD\r\nBsurlTePGT6jIBouIGJSf0XzdXCBZ7jMeUtQZlCSk05TktjIkJnjtTT//enD\r\nEKNQNbMjZuhfL2+/p4+QWG3nnkG3fur244H3A5YlDq2elsttiOwUsoWzN/AE\r\n0Tex3UCtSTyaOQDvbqzhG/tJiBw7NrgbmJcyB9ApO1QR8ZuSROkCC2IFMqCV\r\n+VdpYpJj25t71RruImseRhyZ6s+HJgk57HcW0LQfZHtbDoylGp4kfjv1VbhP\r\nxGGf4FSPqkTIxRcHY5FKwzrn9Dzt58oLZ9KQWR5eKZDP4bnas/oO0+j6FvAU\r\naKJi1Av7GpsbFwp26RViETUmDLA0shKTTB1o8gTEYR2AXc2QGQ8PX6KZTkww\r\nNzEj6PayX/ZU2DaA6X2lQ9oiUs7M04Wo1G/m3li95dOqciyp7AtmFznNJNqB\r\ncBZ+4j3CbCvf2IW41HPMkcZKXMtuNIPzhSbjhAGM8h2KL3zMlFoj5zFFpXoU\r\nSoDA7Fo0MnnzRqDzkqQ3zdQkmFXdlMItqto=\r\n=Wpt8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.58733ef41.0","@material/base":"15.0.0-canary.58733ef41.0","@material/shape":"15.0.0-canary.58733ef41.0","@material/theme":"15.0.0-canary.58733ef41.0","@material/animation":"15.0.0-canary.58733ef41.0","@material/elevation":"15.0.0-canary.58733ef41.0","@material/feature-targeting":"15.0.0-canary.58733ef41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.58733ef41.0_1667412643969_0.3900067767161255","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/menu-surface","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.909b48215.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69e258b95ab5318f101152f91b2309521fde2fba","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.909b48215.0.tgz","fileCount":37,"integrity":"sha512-bnyC1kq4D6FVs4gehzxe0cFTUh7NrHT4nw/2o144xQ9N5ksszM31HhsFlHCgLfH36VUhKV3//0VLbQxuwM7x1A==","signatures":[{"sig":"MEYCIQDMLMD9eihkNrhdR2FcdEUskM3UrBeEDTHk9qYHXTpNogIhALixLxK3SzPgSBgskmHGIhOnhwSFeLYfNp2JONO9yopR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz6XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVDxAAmzcTswr4QbPs0ZHaexMOmjSE2PiBGL71ouOOtz7wj+3oGeMV\r\nmpV1kbOxPxojm2rqxjlX6c3VggRoe0F3zzhbD6RiL25QRg7TtYLDB0xwzKq6\r\nj9YGmbMe8yviMbkSsvqJp7Vzr1dkTsP+YOm/ZlOa5wlv6ZIPTpXLGAnYkHJM\r\n1ioNLSkmqE5/Ij95z0Ljm+ToBHnJM9HQbmvss6c6k9ZRUgzuAMrXN9Q9ZmgK\r\nivU56S8IbS6aVJ2E2rVFUga7sXMtr9+zaDkXRnMEz4QWt+FKChKnLE08t3Zz\r\nJAqBaJbnuWEEdtTvnuU3wQpoHR1Rh14FYuho/+g+VTdriwghXq0XHO2FzF59\r\nnNlKhsYTmBksx8TxlCA3odUZtIvqtk8qc3/ezqdY5NfoiCtaX8Iia6uAug8O\r\nBQCp/r31oaS4ECiF1gudlQSG+jiVxkajn7R60PzNykXlu1HiHLxsgUOquRAz\r\nD5zA4h7l+KeGO8TqTG+C6G5Icw5Ulye6nbBSneonWUPcJb5C+zej/Vl0vfU2\r\nE30frrhb5hPOhpiXhPGgSnNP05OjcyJ34VWtpTkbA2Dc+69fJKeKQpzA82jg\r\nQ0gdYliHHNZIrz2kEvH9WfZOK4Ol06OLkypaj6dBlR5KMq29gvWTWe9yNAhZ\r\nn+2X341TKUerHgQlQR1jgxVs3lK2XNbY4uc=\r\n=2mk4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.909b48215.0","@material/base":"15.0.0-canary.909b48215.0","@material/shape":"15.0.0-canary.909b48215.0","@material/theme":"15.0.0-canary.909b48215.0","@material/animation":"15.0.0-canary.909b48215.0","@material/elevation":"15.0.0-canary.909b48215.0","@material/feature-targeting":"15.0.0-canary.909b48215.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.909b48215.0_1667448471044_0.5249191997209026","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/menu-surface","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.7f17127d5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34c451122b7654e7d1f53091608deb199031fd70","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.7f17127d5.0.tgz","fileCount":36,"integrity":"sha512-AZCR1DGTZwln+0g0U81708vWeenxUQukyg7ZznCoLjPYe3e0UY5h9MueBp6FRaUzKBP6bDL00fvpxZpRx5YuQA==","signatures":[{"sig":"MEYCIQD5EV3R9pBDCiNMAexM5mZUzrXpvlPd6ozsGbmBPYT4IQIhAOrksFZXEjEZKaCEMzkIlfw2wrY+6KQfLn9dk1nqdR3/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAYgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdaQ//XNDn4+SpNWIQO4Om2qcFPgP5Z1/8uiE8lfv2lXYFXqFL1coP\r\ncFPKneDsR1kKpB6sietpITj32xpv8OVg/1bFIGlZ4u/2qc+zARRJkChx+cRU\r\nadjojzjdd9+bhzlHszEXZ8nEummYFbW1oblaMMCNLpA/8qgVexxDwSRB9y9N\r\nTX8zwfrlB0AbDchwggyV5qKNWY2hQ3h0UXGh8pvABnws+HbFyzLwt24aa4TP\r\nZrk8R2nR4CpujvSNhUA0fj/2BMzGc+HWuzNhCeGvssd2WTHNPUK5D37viBt5\r\ngjUMh3wommx1wI/TuBqb1EB0oC+MrmFOrCj1zmMIV3fUHGXnNlfpwEkEtZQC\r\n/iHBAkXpwAcBw2F9gukMuJI1nKXt9HSQzVYpjKgMOMO+JuMGZiRanvRszhdW\r\n9X/yHWwq1i6kaXGhVLe+QIg+3sGoq2woe9fEZkp/tSMRTwNB+eK2rjJtC597\r\n229YlYd+ltX1TI0dbcvU/yjnUabLfmBeMXtM5hSk5+S/hlZD2n+3Bm/cDBwW\r\n0J2Ek6jS0jIZA6Pta4kRqPmTzvRVn+jWjKOxrH91KMAWdafK189J7E5d1AG/\r\nG5azCPYmw0ErlTOU6Wt89HJnGjTaJVBkGaf94InwqJoittkfRcaSfh+y5Z3k\r\nwBC0gqlW3aPgpMdzF2RBnU8jnKYQxVZdr1Q=\r\n=KTrS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7f17127d5.0","@material/base":"15.0.0-canary.7f17127d5.0","@material/shape":"15.0.0-canary.7f17127d5.0","@material/theme":"15.0.0-canary.7f17127d5.0","@material/animation":"15.0.0-canary.7f17127d5.0","@material/elevation":"15.0.0-canary.7f17127d5.0","@material/feature-targeting":"15.0.0-canary.7f17127d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.7f17127d5.0_1667499552554_0.8117121639233762","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/menu-surface","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.da95e2a05.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7553eb8649a94d180b0647d678bdbf0073dcb65","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.da95e2a05.0.tgz","fileCount":36,"integrity":"sha512-Xpq4F32oKN2JYq7DC8ojNo6kTYJ04nKHjcZydtjx2OC31d5HBbgtCuqwHLRTNLDtBM2fyibNO3UgEpG4ws9PCg==","signatures":[{"sig":"MEYCIQDTd6oBAeorTeg8GvZrPDT1NjNmRD3OSNHuY7IcfC4gWQIhAIfeJ+Rf7SEb+kAFnBaj1BAnFIiKi/fdf+sFvFBxIhj5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUTZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLLhAAgzksXjg0q96QsrirCefUxWNpo+lSc5QKjPTXvw3+KCrMv63X\r\nhPDlFokL/AssrHlbbDqZAtScqAT5QkoWIgoVQIM65cdyiUGoUz+4ytpZpOsB\r\n3c5mVJqY104nhXwCnttN/ycXx1+gCmpuIwrtG3gn49zgrEv/VzovZYZiaVMt\r\ny3X7B7pdwkkbScWocW1/GYMb4L0C7Zvl5+vke7+r1o6VsNWw1ewQkKIdXKyB\r\n/taceJToV14KwUYeKzuIzYoO9j7R7Q8bq9LOVLlaERrkuMh9yK01huLtp6MR\r\nUgvsT9jsUSIFkchhOhdYTCPKcO0N+HQct7jxwdbOkh3yevxs6dWMveU+y2OD\r\nafPVa8e57Pfz9CuhP/c/EcZgAM3djD1B7b25xrCWJDF6cdv+pOgrnwIzpgAC\r\n6Swhg+HNUl6WDZP0bd3Dkzq1gn9t9zj4e57EWGXvNLNCBFC40czslNIR0TBT\r\npf5Q5ZNcR8jXRJ1h3PgC2YjfXwDxGKKe8EVXUJ6afw3mSyY3sVlb5kYuMEMa\r\nI4I5Bdu8QrmMSgXpzBFhRfSWBSGnaL4updhciv2g3fMH2TPJp2F6Bp5CEob4\r\nApP+1JXUQ3BhkbhH8mgBoq2XyUy8WjgtCG3cK5zn3EscM/XQFJdt0QiJ2vpm\r\nMvYtvdxmy8tXAfhrZen6kZdcplZa1lNr5+o=\r\n=7/Kv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.da95e2a05.0","@material/base":"15.0.0-canary.da95e2a05.0","@material/shape":"15.0.0-canary.da95e2a05.0","@material/theme":"15.0.0-canary.da95e2a05.0","@material/animation":"15.0.0-canary.da95e2a05.0","@material/elevation":"15.0.0-canary.da95e2a05.0","@material/feature-targeting":"15.0.0-canary.da95e2a05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.da95e2a05.0_1667581145367_0.03230369519754417","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/menu-surface","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.4832e2750.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b41048b5cbf86eb481c9fab7f0200511099e892b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.4832e2750.0.tgz","fileCount":36,"integrity":"sha512-nY4O0XCwD13LlcFh+43rWYBp+JFJKXLVu22B3xAUSPRPUowWpVKsMIIcj+p3jbRv3rog40vanqNqdJICcic1Hw==","signatures":[{"sig":"MEUCIDC30X1aw5N+Wrw+7/JPBAc/xoyLpAt6zZ3y01ChY8zLAiEAyO1MNsLif4nfM3WntxNcElpxoxR1pDI5LbpSYt38G5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZXyfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzpRAAhB9LFPpKV2gScEOR/gcMlxfZvM2+3jOUlqbH20W2Awe/WzTI\r\niK3GiYakTIKugN081iP+icrUDZ9P3jlrZ1rT/JQKBsGG9J9pVgBX5NZ4CIvI\r\nakihwHvh5wTJbf1zJfiYt4+XmDjtx9zbBabQgnY2n51kQmYwp2pSOdujoR+i\r\ndZnhdzWwoiraGJkW3I2N+H+OoB5Knvnbmt/i3hGDu40AomYIxVm3wjMYv4wz\r\nbF/SqHOA/aalx49TfA5CQLec4wRa58x9RbrDaDjBtRrhqnPgSrpZeYqOsHcm\r\nWP/zsr/WdyEQR940bKRLZHVDp4P1Ay8o1DVor0inNiHQ9QAe4QrOYJMwCV6d\r\n6x/yZpvgzFOagUAc2kwqGF5yRVbokWYmSL0W2/hs6zUCX+3NkWLl6HZO1Pu/\r\nGGX98FtDW2ONtE8fhaC/CX9goVwiz2Y6cEEqb15X9ptw+FG/lABrYjlbT4MF\r\n4QAQJV1ZMofORn3fiV3q51JaX3jThq3fToY9dpWeDHP8FrpwvWD1Is83/ZAO\r\nL2ozev9xA60kxUyhc73u1166zp8qZfzmazw1DLq9+P6x67oBy4uVZGIpQYWJ\r\nsxmTSLOKxcTpcOxXhrx7lzq6q00sBrjFC2RBDY0/TNjp2lQ1fK8iheoQJF35\r\nYEQPNYeeG8Etp1HdiZOYu7vzjeakwm+m0xE=\r\n=hPnq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4832e2750.0","@material/base":"15.0.0-canary.4832e2750.0","@material/shape":"15.0.0-canary.4832e2750.0","@material/theme":"15.0.0-canary.4832e2750.0","@material/animation":"15.0.0-canary.4832e2750.0","@material/elevation":"15.0.0-canary.4832e2750.0","@material/feature-targeting":"15.0.0-canary.4832e2750.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.4832e2750.0_1667595422911_0.7789012445005532","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/menu-surface","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.215506426.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c092f381d30cd37a97f3b4ce08f2237c4fd0472e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.215506426.0.tgz","fileCount":36,"integrity":"sha512-+FDiahJdz0NVTLqSgMq591Aq8YJvVX9o/lM125NOQTPyMK3L/d6imnKP/JWUU2C9p1uSZxr3Ih1Q+IEXD6RRhg==","signatures":[{"sig":"MEUCIEHmHyewq5807azZfkYG4JpGRrmMBd7MSMg2PFGOMDVQAiEA6wSO8x+EFhD0XERiS7HPphYiR8VTY5Rqj57BD/O1Q0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbb3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrA7A//VAWu2icdLUSS2006/0jUplvHyak8pktKxe4QoTAZC9nid4bH\r\nHbY5rkDb8el/CyjbycW4xq2koOoc6M+K9y/aszHeia1c1iUj1j6RSTHSNwZb\r\nLEja8/D4HAo6bSsSbFezvO28BI6b+oFWD2zaBxrSVQebiIixQ2Km8tS4MQZ3\r\nWiwjUH182byrc3pg+/59QNIfRZ4b8RuVTxxDYqbace5mj3yrr3i0KgTJ5Cag\r\nt1vaAqOjDGzykzYIoq5aWAjzS5+VmTB8zyhEUdJGlDUhV55ykd+ZLfZ+Nwe5\r\n19Sgkx22TAeKadxBHxYrz2x+ML09THaLD2npNvhBtt2LYkARTQQfDzXv8Rqh\r\n51aqxQrKcest1z5YHGUEi2UImL6OgM/Z+KGPYXsT5LHYl+cmWRRKgE58J/Dd\r\nKOwAHuvA/yd9Nv0r5kKdDR6Vyyk1t1yXWds0FQEVRX+2wIDW546N7l6BwxNg\r\nmcR8esitI7ZJsWmKas+y7GpnBpinp8mf9p9N+EwpaVU59TEWsEz2tDQarSMC\r\naJ0iCGIJsL7iA3a5F2aedURs7ipzhPtUSzJYfgyppou9uSekeZYIm71nxjfF\r\ndlp5bcFjgxW5A3SY99PBcYPHxWnQULzAo9eaUFtym/RTVKGMXTA5JAPu3ee3\r\ndoE7YKNBGFldQ35+U63sUdP3h/j/AkhJXng=\r\n=MzvZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.215506426.0","@material/base":"15.0.0-canary.215506426.0","@material/shape":"15.0.0-canary.215506426.0","@material/theme":"15.0.0-canary.215506426.0","@material/animation":"15.0.0-canary.215506426.0","@material/elevation":"15.0.0-canary.215506426.0","@material/feature-targeting":"15.0.0-canary.215506426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.215506426.0_1667610359722_0.05706301669901226","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/menu-surface","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.4cf917476.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f9e2d96e1bacad74895ba997fe041f35e420b9b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.4cf917476.0.tgz","fileCount":36,"integrity":"sha512-nsU6fkmUz/bIRaaqcASM/IdYGT0c087b5NQAFmD5KCsaMWQRJBhlpe7fUcjFASJtgDH9nhQjW4XWe+0NZC76FA==","signatures":[{"sig":"MEUCIGFRpuN80fRQpDrVk4teTEZpItgnwwt9BP5yE48edlyCAiEAsKaYtLiQD2x36NuI8OqyZ3qU81HdrapscJfkxTSppqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqWVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDvg//YZuhkTczjcjm+RhPCSyfsS4qYeeRRwvL/0NdhtVtHwQoLMjW\r\naq/VeUgODRPWEQR/v7zI8o/a1D8yvyKScr8MNU35O5uJPuh1qMCha6z+YF4V\r\ntSKqs24soRwxoyqdSLcWfrUeZGoeEKJc1GBL8Nt2QUd+pfFFafI1oqdUwEbh\r\n9eK1XMR0K2w/KfhmKna2PKNHfjiZNTKfEHT9lfvwAZOmJRsNyWURxPQ/sDgc\r\nXhGQ+4r+3jZTA3QfsgHc6byK8uIb0942WNwbV9RSf2ArgH9UgoiwgtL9sQML\r\ngH1FjsnqCuBlL68C2k5tZd3L79jqOLv2RgH3xVDQtZMt6o8Edu51f6w8ZbVB\r\nUUyIyEhRy/Y2aMqgDsmzMLS+zWed6iWKBSoUFoHYcdSRiHB2MlVHDL2TEJKB\r\n5UoQraXJm+ymEVVVLOq8vQkiWJikawNUYf7MzgPRmwRWJSD+Vtx8jY6+A6hF\r\nFzy5viCBYVFehr+B9lCujPiACWbGjGms7E6tj+qxQPBlnEHNiDSw1wviAPcj\r\nm+nUtThT+HW5lGVyCfDTbn37Jrehm4fYPGEwQDBxN/6VXXKsu3RY36qDuvp4\r\ng6CFaIeq9ZA4WXR+ELrbxLXasAAatckoMd8GR8n495AS9ZTqKhtqAxdchYZN\r\no5sJrd5hl98/VmfH6IJ3rmLDvHp0mcWui/Q=\r\n=UDZb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4cf917476.0","@material/base":"15.0.0-canary.4cf917476.0","@material/shape":"15.0.0-canary.4cf917476.0","@material/theme":"15.0.0-canary.4cf917476.0","@material/animation":"15.0.0-canary.4cf917476.0","@material/elevation":"15.0.0-canary.4cf917476.0","@material/feature-targeting":"15.0.0-canary.4cf917476.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.4cf917476.0_1667671445575_0.22437553197410876","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/menu-surface","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.eef14bd32.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33e9919672de09e1b2b2f0681b3f71fecc6d2979","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.eef14bd32.0.tgz","fileCount":36,"integrity":"sha512-sQgrbqb19ka64YgSVgfHkr8+Uu8CJJnAIc7MeHaPYB2mQOgLJCVIXI/+3EWVTGdggr9jbycQlBXty0GAKa1XUA==","signatures":[{"sig":"MEUCIHDpb9sgeWCHBbkccKQToBv8QogVtzohiCTyiGUjsVhUAiEAohQeoxaSZGbw5EFh/AxreQdDn7h5TzmxQNNrKNYDdxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+3VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSUhAAnvQPHVj86T+KsD/Ahlpz8or4lPsD/nLkB6/wxHyjiKFvpfXt\r\nsjorvOZa9zxEhgzb/zwhzsvrdEY8REdYzxKZuiO5YvOeJM2DYkhzQ5ApkrcY\r\n1sfWHr87jzAMKatPps3WyawJCr9gzPSDOZq058034tuhu5A9NcYSFXH1xhyK\r\nSZM9B3eEWihgCopEZVK6HUmORW/LMZk5/jIL15DeBnOCXzNR2tNBPsHFRIBH\r\nOeTLoweohQ/nOe7fYAYMRwL4C7Bd6Xjkp0BEZMRXf5SP9VNHABtotcltnGeD\r\nQ4WFFsy3apRSnjGMW/kKvr8ZDK99amYeyY5dW3qNyhBdUOvZT2C8wztosptz\r\nkPaZj2Qfxc+ivzCwbrvn/hrwseLNIVwEHzjZv6Ow8EKP3p+F4hhYZPfhPbBP\r\n2r8vZSl3+7a7tU5eNSieOtSTsiYhuz+bLdvPEwi6BJJ5hjnkunwfBpo7h0n+\r\nta2UfIBe0645XMyQAZ1ftA/0IYgouWJV13le33pPVpgk5EZ3O5CxccxivtEc\r\n19BSORNAgdkyGb05osToQf0YxwEBTD8923ZENUKmzWMM4E/KnAVun5lcfN73\r\nopzmfHYa+XfvcSoL0kbzTmztrJ/OU/63M8vh5YkTbCC+iPyC2LW98l28eBxP\r\nU3cELhpLRW2nTTAkZsraOmWP5IhaxsxMPak=\r\n=xaq+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.eef14bd32.0","@material/base":"15.0.0-canary.eef14bd32.0","@material/shape":"15.0.0-canary.eef14bd32.0","@material/theme":"15.0.0-canary.eef14bd32.0","@material/animation":"15.0.0-canary.eef14bd32.0","@material/elevation":"15.0.0-canary.eef14bd32.0","@material/feature-targeting":"15.0.0-canary.eef14bd32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.eef14bd32.0_1667755476812_0.8660920651397184","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/menu-surface","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.6faa29fe9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e61bda2b39fb121185bb26dd481dea17c5a96b2d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.6faa29fe9.0.tgz","fileCount":36,"integrity":"sha512-WGl20c1ZZKFY5XZxt/kR1Z4uBy5bqh1JWZ68mNhUYSoPEnKRWm3Qi7Bm3CFMpN2gqHwPmYoPRtjk0/CuBgIjjQ==","signatures":[{"sig":"MEQCIDsDP+3iNFk3n9PD1CqWhr8KTRgnBmGSWQ+5WSRX0xM+AiB90jBcPldeJbv9WqAdbuIcSElEfivdWfGLvCHHrM7cRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHfWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdHg/+Pd+H8xGeyi6mL0H8OwLDmDnbYdf0+OFRgon1b66iFIrK9rfp\r\ncrYKkVsLFyEd8otTtygkSitjep+nOym6OH7ptRIMMt9JgLvri111AK4VKzuA\r\n2R+QokunGjRJd/8NsUTkCaCtbiWM36b8yQgOqftg2gw42PNiDIGxVnTrRRB7\r\nyLyC6RdGSzOjNLwnwRM9/0+LNJr/vkmJnxurkJe90635xMfHXuWsKG3VVl3F\r\ngQSc+VyVl7KHzQwGD/ueI6XCh4Y9v5JStGMdQwdNRsNWfqN2KUKjJj+dFXeM\r\ndM1Wp0fuFFJK2f1cuZ+wCPywEDNP8H6KU6TRPbQ+n3/Y1tK5eKsNKt3sMjBA\r\nmOplIVjRhcY/lfMP0MPxZYIB4iGo6FG4v5MtVHfKDtWkWYQFI6h5/sNUYJe0\r\nsqB89O1q+i18Nx4NBE0Qgi9iL3iv52UcYpI91taLetzSzPBMn68aV+j8K4Jo\r\n8IsXyzg73pEoka5VQvhMOGRWUEoBswM8Ryvcy2aqbkGK0vt6DG0BDCncHnAc\r\nizyrDoPM4E/xbEIaXwDY56pLLbZ64RDeI2LQXQsh8di2rC+ICehlYffo1MmW\r\nW9iRD09aXPYRPaP0uLD3vlmi1uhsSctU+UP8gnHYdyd0nnGTRaR3JRNMn1MI\r\nh/Ee2E7sscCXEy5hB/Y7edjDmcH0E21er9o=\r\n=TuKg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6faa29fe9.0","@material/base":"15.0.0-canary.6faa29fe9.0","@material/shape":"15.0.0-canary.6faa29fe9.0","@material/theme":"15.0.0-canary.6faa29fe9.0","@material/animation":"15.0.0-canary.6faa29fe9.0","@material/elevation":"15.0.0-canary.6faa29fe9.0","@material/feature-targeting":"15.0.0-canary.6faa29fe9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.6faa29fe9.0_1667790806031_0.4077105093144624","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/menu-surface","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.9af09b967.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0105b0fae528dd11ec4628daa08012aa47d6b66f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.9af09b967.0.tgz","fileCount":36,"integrity":"sha512-i1lpO6kUB6RArhY9et80vckeAnjMM1/wDREuaX7PvV9FVOfBM/cTEr7RIFsVazba5rpZOFpD6CMgU6+7476kxQ==","signatures":[{"sig":"MEQCICYbKV/s8BRsbsphSqsEguy1cQ8VTtWfzqCAtpXZfiGNAiBAvbBPvsIHKgjyy30OdapvHunrjyQBeQcJnAURzvSfzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU4iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfGQ//fktF6fpQWhfEHQsZsN54yYl5ZNE1ZqXLuBlBVepIZKmaaIFV\r\nwYcxQoSJPymM86UBi3e/5FZI7XowFe+CAJxQIC9B94+QzElMtmNaD7bI7k57\r\nIwcNQXCKCOIjoBOwWgiaLGNAdgqpnG+aAxOB7d1nvj/VvNiTsJmEXNYnKOFk\r\nYJUCFMIo1K6ZQ1WoJgwT31q7C1d3BUpN1qgA5EqCM3ZhgTK1pWBHlzYK2Fko\r\n0NLXULnz5FLB6rPAbgTKth7BCH82SWn4aYeviqAzf1xJxdubUHVchWjYWash\r\nUBiioW1ISup9DmHyBCxBzioS0UXIdkHgcdfL6v6EpWkkfRjCWnX212X2GLGL\r\nJWU3/WWsXTG88iNzHnGvUooAzsKxNawTDVnPX7LrPeWUD72Kmn17cT73SZnk\r\nCUIfmMPDOETPusGSuwT3Qc8B0DbyttM9veF6s+IG0zwIf793YOz6c03a9zy3\r\nQ/twGm+gjAYnupGBLLvUNyUhUGElLnYGSVFDJwqYqaETuX0iPa/Lbukp+x4n\r\n3d0T7km4QVm4CdsGOdhxdLSxvjB4eTVeX2zPB46tds6EZeXrn+lW/u8Hxaj2\r\nrGr6ueMqH0+voz0GPDsZm3bUTSYbiI5pQZy+ERDGVfMK2VSxL//2Mwu+RNED\r\n0wL/dRl/xPBIqTJCIGu3x6svCduQ1ZnoLoE=\r\n=WA/H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9af09b967.0","@material/base":"15.0.0-canary.9af09b967.0","@material/shape":"15.0.0-canary.9af09b967.0","@material/theme":"15.0.0-canary.9af09b967.0","@material/animation":"15.0.0-canary.9af09b967.0","@material/elevation":"15.0.0-canary.9af09b967.0","@material/feature-targeting":"15.0.0-canary.9af09b967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.9af09b967.0_1667845666126_0.36951136935139584","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/menu-surface","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.0f54fbb93.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63d7a7fe9187e289d784e554f62127f62a9a33e9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.0f54fbb93.0.tgz","fileCount":36,"integrity":"sha512-aUXeebCh1BQrrL1XHqR2KpJZ1g905/dIBHsG6JAUQiInKn93zJVVqwdN2K/U4CyEFbbtxGc1oz51eT1rgos7xw==","signatures":[{"sig":"MEQCIGEvVZbVRzT4BUAg1wZ/p1AlxPYz18fsZ/m+SG8xk8uGAiBc2wmPvR76u+GXYNwVvcw4H0j6xUe1Uzkfw+/iXNkyqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatCUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpS9BAAitkHl66TW3x4jTk//MJ7gl7yXI9l6s7xJBcdje5j5uA4qMPR\r\nNTikLQGwobnxcup6KqNS4VoX8CW5nETtZOri0BdbO+N00SEJjbptQjNFWZ23\r\ngll0oXqqoHPZrQrTavKbgfdDQTd+SJLjIuptDx/xk44mEjxyIW14u1dVqOBK\r\nEqBmv4iZJ/rqinO9cJcTg1gjOvSJZDXFUxm8CZElKL2bU/PIJtBP2rzvpSWR\r\nHavTn+uX2SXqdLm/Vc6tchn6egP/GXF5uj8vMV4Y63dkHao7HM6GLUBEiwhm\r\nmr5SpNTJOo1Wm9gxIIA803qirJvk70soLMnE6DVHrLhUm9mEKNB54xZMK7L8\r\nkuk+2I7yoMl+OWxL1kZKqV4h/o2ewPcYa4VOf6FeCo72ssjfUStS3bv1f13o\r\nv0rHqjGNK4BY85Ie9FTH5EiokfyZV4jWvNESwXx+DBxVLoCRW0FAwFk5afWL\r\nM4oHCmNJgFK8tg3k7fK8sp0X8cXWTOTrVmjQS1H3gm2bDnZ6o0gWMEit2mw0\r\nNmKyb3vD6xAzaF5CIu3YZcTbGn5QHUaC9U6u5eCcX0YxqikVAnyB2ZQbGZu4\r\nISPibymMzJHcvdI5V5jMX7rWM1N5REohoiB9T9xy9J0MCSvnIrr+FEkAKrWV\r\nN2jcnnysYH2BZXvFrM+RodsmVnWBF3bJ+ZM=\r\n=VclV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0f54fbb93.0","@material/base":"15.0.0-canary.0f54fbb93.0","@material/shape":"15.0.0-canary.0f54fbb93.0","@material/theme":"15.0.0-canary.0f54fbb93.0","@material/animation":"15.0.0-canary.0f54fbb93.0","@material/elevation":"15.0.0-canary.0f54fbb93.0","@material/feature-targeting":"15.0.0-canary.0f54fbb93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.0f54fbb93.0_1667944596097_0.25709948221644563","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a8d47f9fe.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"516c40f4031d3381a9d544a640297dddb66d5490","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":36,"integrity":"sha512-JAnFhZo8XFPLSQuRcwHBuecCVqFqbHkXfwEjp//U6BIvGlTsdRUqbPmnWY+JZiytcK4Dl77qYN2nUdXq7QbTLw==","signatures":[{"sig":"MEQCIG5XDu5+M7CRjSfQaAMroZ6RuH0vsuFIQo2P+B4E4C5cAiBQS1moxvDzhIsJAC0MEbaYuNehuTQaWBLTa6ehBr8TsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaynzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvJBAAjnJBEVCNqnQ3zBjWMBcI25IIj7SSyLGlm5bg3NXzNvVEavTO\r\n6nqAyDwmKgORic78ultsb71khNnIZ2QnrWg0rx1gEnhUHy5nP1PZrq9WZ7fI\r\nx6Jggz1FYIG5FwA7l0T5iBg2O6m1sJvIkCZVH2UKagH6qQPSdt4L7MUj6mm6\r\nDgWwm/3DwkE1Ya/MUyBLHNseeirH+ekussbWYKoMVsB2FECYIwAm7yC7aOCM\r\ntouolNWhQD6XA0K0TwkyeeLHufVcdBESJtQkWT/7qrczMclZw1nQLOUYrtmx\r\ndpId0J94havpgTbsnuuFecdcfp8i2PCRLAIqnVpeoedJ8Lqx7J7k3l9kdugn\r\nfd6ORItnygnLeWp+FjmAa9paN7wddvHIgTADjvLRoN7Fg/0fDoi4fBpUQT0+\r\nw45nP+yRYRY/0A4wVTfA8f/q3QLxTVSuoxfsAQnTi+xq773U4qPP/WWpJd1u\r\ncivViSBy63WxS9kZb3Y4ZfKBaOLpWVHDbEnQnfRibo1n+0LZ/g4yR9w/4zJA\r\n9SSA3LsjvG1ToqzdDB22PqHd2C3vULaPDPy0IwcZLXa0Q6qdKu5IxBjKAoNt\r\nrHM6UFvZEuB58YRc/SkGFuyujoGYJLpBSvLoKONh5uhzFP9rtJI1aBP7Q6gf\r\nYcRrfULlbpONIA3okpic5maPXaDeENTHhKo=\r\n=oPt3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a8d47f9fe.0","@material/base":"15.0.0-canary.a8d47f9fe.0","@material/shape":"15.0.0-canary.a8d47f9fe.0","@material/theme":"15.0.0-canary.a8d47f9fe.0","@material/animation":"15.0.0-canary.a8d47f9fe.0","@material/elevation":"15.0.0-canary.a8d47f9fe.0","@material/feature-targeting":"15.0.0-canary.a8d47f9fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a8d47f9fe.0_1667967474809_0.2623537198777244","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/menu-surface","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.66a1e75e6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e33510620103d07f7c4c8b5dd603f26862951acb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.66a1e75e6.0.tgz","fileCount":36,"integrity":"sha512-FAwASfYwiFjL0T94B+lIvUTwLvGjZ5Mz3+R+D50gMLPUf2eTpTYH+5+nl8yGRBTFdxVTouagHtKQMvhTm9d7Hg==","signatures":[{"sig":"MEUCIHZL3XI9UALeo9u3eFvjZiLcdN4PxS8hgmfQmzX4VwJbAiEA8zaKcbbhn2FLsij6QxjPZ+914LSdCNSzekdRV21hy5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3RnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOYw//U/luimEPnsfhY5MuDnX3XWPwNMmwBwPsIlimUdoUW0n3QB8l\r\nFJ+X7U207gnikGBmjLJh2yVxpcg3OM1OyQ9G1tDfA6yLBy1lzKZt2yLwfqCh\r\n1kLKtp3l2oSUnEvBo075kXWZOU7q9npEzYF3YPBpHISIJ2mWAxiXBt4CMhVP\r\nXXHM+SpyiGQyORtGY/sO4tIOEaCiNqwDxHMaPIIX50PANPYEjBRRLdiBiO9Y\r\nHcAFQDFhAsa+AHUz2rc7u/YxtyHcoEBONq7flrW/9TnBAObLZuwdm0fjP+jy\r\nK9BK2+1tnkjwoQJ7izigJiJakC7WxPZxzUhAmbu5b4gRsc7ZkwvPEP+bGNpI\r\nnxEdvSgtVX85qGtiftvbG7VxZTYslvRwZRgUnPPd/1Is62za/z+wNts9AJ9b\r\nyyIrU+eMh7A1ZFBSwiKSmIwGTA5B+NYIAljnk/SMshQibnzlvv2AjeZyyBcz\r\nEXZYWJwgsfwiIIyJuIUzpKLhvSLQv7nIZUwc0nOyecgvbwH3RiXGxd2rPsDj\r\neqxwV4VQFBSSb7yD9Wnn8T93yeIkHZt3vmL6IzcNHNlO5aVh71Y8EzaXNyts\r\nLYe12h5OXDw25zqx8x/0SNM9sCR4eh2QtITf1FVlsDIhl3LbOS5TojXCEAtm\r\nRQNmdeDO2oIj9GqTff/a1evvZpLeBeefwwQ=\r\n=aSs5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.66a1e75e6.0","@material/base":"15.0.0-canary.66a1e75e6.0","@material/shape":"15.0.0-canary.66a1e75e6.0","@material/theme":"15.0.0-canary.66a1e75e6.0","@material/animation":"15.0.0-canary.66a1e75e6.0","@material/elevation":"15.0.0-canary.66a1e75e6.0","@material/feature-targeting":"15.0.0-canary.66a1e75e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.66a1e75e6.0_1667986535397_0.9230962835050427","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/menu-surface","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.5e5c2afc0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a401593c9617719eeb767c59d5534a88d7969fa6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":36,"integrity":"sha512-T7i06bR/cZ4E/LD5m4xNNOtMO9pngmdTuVVJ8zSBVYqtoR5mZD+lTvLcdhhqANj/GyI0mkN8vIR75KjErSGPtw==","signatures":[{"sig":"MEUCIQDipaGhqDDtrDJZ2736QtRtD2wEMHCQN7S50OWY3DmFMwIgejVll4pF8jxNKxEJHzzK9SO7N99zHIS+Zc3JTG1JE6o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5SsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOMBAAjEK51zLbT4UedMKWI5o3sNa6VSYQiQuPYF3ohpHYBKSfK4MN\r\nr9DP6GfkNdrdEj8CP4UtOHsJgHD1wQV/dW71IN5ERm0/Ci1pIi8AiNc1mvAK\r\nblJxDHMqXZsBAtDOmtoOK6oeQQel3voKlntVWLllTO1PT+wnZWepOiCi2L7C\r\no3w5Ep7zK2VEBMRO2cfQGPWRFJHn9EM5uXYUNfoNSOajRyTNaHhGDfdd86xx\r\nexjX17Wd9SGAvXq2jFyDxN3AIeM98mtaoLkGjaDbUSnAdVwZrmGhLXkmmzD8\r\nVnWWHYvgOUtVNdwIV6ySW5lsy54esCXGy1OY5+n/jn8YrHobX4vdxXANCmN7\r\nqf9vEe37f6OVAqbnASSvsC+plPspYLn1/tYrdrAY13zaXdF7nI5SsJ2WrCKu\r\nvxqnx5Upt8hTo1UbVJMR/xlymlkbT08XtyonT7GI4Efd0FMqty5e0g0n0DKx\r\n430KuoKhctqWaRrHjVq4LDNY50SHscIpdXshpNQhjCXSIWUY99b8V+QVpuFW\r\nqAbgkl694uM65YmJC5pNjfQtkMMu7xlS/xI0Z7xLkHhuL+zjczY8ZPoIs1/4\r\nqKb3EYxi3krQiGWUflbBfPwhKvgL4r+yp4dnJid/wKyvwGKWLBz2BaU7aTer\r\njxpWb6nBtZe5ZKKLa1QKrF9oHexxbFf5dZM=\r\n=VCBJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5e5c2afc0.0","@material/base":"15.0.0-canary.5e5c2afc0.0","@material/shape":"15.0.0-canary.5e5c2afc0.0","@material/theme":"15.0.0-canary.5e5c2afc0.0","@material/animation":"15.0.0-canary.5e5c2afc0.0","@material/elevation":"15.0.0-canary.5e5c2afc0.0","@material/feature-targeting":"15.0.0-canary.5e5c2afc0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.5e5c2afc0.0_1667994796658_0.6615279132779219","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/menu-surface","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.3e3f43359.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c4444fcb698bf35ad9be0a7f153cab579429b25","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.3e3f43359.0.tgz","fileCount":36,"integrity":"sha512-wYKmIqqCtf/GzHt3BRRIZrmyu7kuk9lG+vqYH2zONS/jNjco920qCut3+iLqQB5+sIaOwnffEB4f9caNBWwu6A==","signatures":[{"sig":"MEYCIQDaO3FI+4yHFoPwVrsPew99+2uLdNzwVDgGe/USAfXnVgIhAM1CMkRSLCj4WQ12s5cD4ciV0ysnqkR4qjM+rNqAd/bE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAdsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogBg//ZIrD6QZb9f7Myf9nyVG1t5vLCvzjAi+cjPBBQYN2Pu0+URtc\r\neNiqSBeMqHca4jt6Pg3NINRwL6N5M1Mfh0F4gM3d1RoQdFEQkIqzV3dHSvtX\r\ndy/p+IggfqlEtblyRD/7OH+qU7q5M3boOfxmDudiFM0QT20x6vz6flUsNrex\r\nYBTRS0Xy+nOA8+1zA0Nww8PVu7uy8sjomBD+IuuabOJjCUN3grH3ilJuChr6\r\nqmu5GWalVTlQE+xUK880yZnDpsmEMzYS4q9Ym3X8SrLbUtJ/HYvstm+WRilP\r\nx7Zz36RPdHjg+Tqha4X5nL7YlFm3CO4Kq5ua6TAw9SBPvNHkg+lAJGlE9e9X\r\n3WvIGBQfT+Mo08A7x4WQUweNu8LbPMeuH/WflzUzq4Zi/RonJKqGjSysBF9C\r\ngcqZO2euoaI8TsE9nZI6Pz2zbltMnevXmU5IIrawdsh1Q7t2lTO/o80Qc9OS\r\nNOlCLv378VE6KaVvsd9eNo4SW95FZ1scKXiFSdB18DKnyoAAyCSmS2pHwyIb\r\nWb9l5mGh7nSCbADVqEgOoq5Q7ahSEK+n5be3KSooj1AXHQ+xr373w/Uzou4Q\r\nOO9FAdP0UlgBZfR6I6JtZz6bh7rfQyDF2ZP/S3HCRtAQgkbY6HCnYkbCfHxK\r\nS3RRrJoxmSj1OeMQdxkVzRJM0zvgvMr8yVA=\r\n=LBj+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3e3f43359.0","@material/base":"15.0.0-canary.3e3f43359.0","@material/shape":"15.0.0-canary.3e3f43359.0","@material/theme":"15.0.0-canary.3e3f43359.0","@material/animation":"15.0.0-canary.3e3f43359.0","@material/elevation":"15.0.0-canary.3e3f43359.0","@material/feature-targeting":"15.0.0-canary.3e3f43359.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.3e3f43359.0_1668024172343_0.8622414893726946","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/menu-surface","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.3f667fac6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b4788b7917f404587cc1e3a05247bd8f87f5823","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.3f667fac6.0.tgz","fileCount":36,"integrity":"sha512-1ftfu2TpWVkMatNSvuVbU9q6AwWpn5axXu4leCRQRNpP5nAml/kduFtjGiXjdDvokLLUV8e6omYdS4mL5ZeuYg==","signatures":[{"sig":"MEUCIQDs9I51I1koCfqSTYRYBT25cHBfdCXAqaDgDTPvehDYGAIgDmMU2Ldb0FSf9U5jiQl4W/uX7ogh7Fp/GE+r6V1IQoE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCRMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqz7g/+PzPFHjLnBNH4QnRxx2Jc3tCL/UEiUDE5ZcfJQYolDVHhl0xI\r\nbSKxC6DDuF17JWpz6lZ+tXXDr38QjGZ10Jwf2ZfijJzRk8YSj1SiBmKEplL1\r\nDA6y3owkoMTF4Ukgj9d2g/yKzHC5GSv+C3YQ4AbqO1u11Ysu4gS6FAJ624ew\r\nnhPOi1Lnn0rSql+cWctyJHlYi5Dv6nH2UMrQRxnxQqAC+ise7IQaTwK/6SCR\r\nD0ZL8ah7OL6EujNXpbCKoMTbImZaVZZRk+yAHjZBnIw32c9WRzl2ckgztcSn\r\nPugswdfTGSooW6d7Kx1abqfs9oftw5iVUpTDq+8UoPG3lk8tKW0kOmx/Se4K\r\nES6XTNogkoLow2tmsYtjb0cSFgzH45A0x1NapSMzPtmSb3XdMZieNv9IgCMT\r\ndlQY7Amvm7IzJ2ZzkehMgj6kmas0q3gzfS2OECU/c+JcGV7Qc/F0DroAlIR+\r\n0qTA2iQgEXrEmQ/MydO9o7HwHKcyRlMSaIxfVvv9FsSLRIM64sraiwg7wQJi\r\nGZ/x4tH2Y1V8TP+IjWk15Fhz3JAh+xp78dqnYrAWDXyreT9loeT6h0JqM/2K\r\nv+JVIaDuaQAyueeBTCZoyHk66iCFmXBbaF9dQes7sriPgsw5Nflcr9d1kc/P\r\nDr296nMnIoaI0Zv1kQ3/BqPSobKBBHQFcek=\r\n=EeRZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3f667fac6.0","@material/base":"15.0.0-canary.3f667fac6.0","@material/shape":"15.0.0-canary.3f667fac6.0","@material/theme":"15.0.0-canary.3f667fac6.0","@material/animation":"15.0.0-canary.3f667fac6.0","@material/elevation":"15.0.0-canary.3f667fac6.0","@material/feature-targeting":"15.0.0-canary.3f667fac6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.3f667fac6.0_1668031563860_0.3180984800845068","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/menu-surface","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.faa28c1c5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f6092ed638090493520fc710c8977b978329530","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.faa28c1c5.0.tgz","fileCount":36,"integrity":"sha512-cqrQEIqg/CK6uvdrJbgcKqXUJdVv+rSMPFhmp6CwPNjcIiCaD0v5PcQc3PurNcrIsO5K4iJlA36YGYGhuwuD/Q==","signatures":[{"sig":"MEYCIQDDkI00dikB9zMIERFSTAUo05OcGyR5H6g3VDu4xpDObQIhAI+jCeKgZt0aJo+fPTIK77pigIkHPWdYAbTyIjkqVCSS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnnkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrT0BAAklrGfDabLk6l9dEf2NB4SzFS6/sV63iNJ+81SlkZnFW+Itfl\r\nFguRyf+eq33uSqyIGyWMT3vwszaNRJ2HlhHogyXKjklJV4VRVkApz9EvZS5k\r\n8wOQtOo0zg9GRO5RIhIEZEZV8fnoUtcgBIDrAdmfM8cUF3bhdZj1FAdTjr/i\r\nu4eY/BjtH32VhzKPyIJqSrLo20ExyYd1kamf/eksnY3fvRBZBohQ421wvj2a\r\nFmDT2FhbiTwpM6vEoVdC2TlOUa34v0GzIMyMZ7ApiAHqW5CCTwRNwQPVdcTy\r\nWiM4UJ8AXR4EqK+BnavOY4PrPzytmIDcYn54z3falEHubaJAvW+Oonwik0bk\r\nG2whNfd963o4Efnl7ZBIjXnqLzRBn2uFHjx+3rTy1gOe2pKzqdEUoDgX4SKl\r\nbtCP0RNM6ToW87yf5fnAKcuK3RzVaJk3KAWYGGi8OCZYS6BxR+KsK4jNyVgD\r\ndiOzcKmOGKQeYaun0CfIfRU3YUcAscgS9ConLELf6EXtHh1GXAUtLS3GxB1Z\r\nnHzoaWRqqOjftvXIIO9f//0oCAkF3GrpgMliwnw5dp9BhDeRwKme1lXw2L+l\r\nfqp/sGXrW0T/v6zD2RB3BN+iveQ9lcNk0wUoL8ffut9xpiB4u/kDL3wOwQYp\r\noTiif05HM3Su5MQBlB6ASDBVVm8RbZiC7ck=\r\n=9dHM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.faa28c1c5.0","@material/base":"15.0.0-canary.faa28c1c5.0","@material/shape":"15.0.0-canary.faa28c1c5.0","@material/theme":"15.0.0-canary.faa28c1c5.0","@material/animation":"15.0.0-canary.faa28c1c5.0","@material/elevation":"15.0.0-canary.faa28c1c5.0","@material/feature-targeting":"15.0.0-canary.faa28c1c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.faa28c1c5.0_1668184548693_0.35360562556003017","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a868c7866.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d07687c61e15499a94a227088b3f0df56945df73","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a868c7866.0.tgz","fileCount":36,"integrity":"sha512-l/tvAwtenYujKJymsaw5THXaz/nm9drsd4Hd5thYtw9RMBhkc4KMZQ2V1dXXBTP+Kv3Dzuz67IcU6E7lsF2fvw==","signatures":[{"sig":"MEQCIBuIP4wsetoG5wmik7O9nr33R2QvJ49AHB1MmO9nPv3sAiB/YTZCMXnuU8945a99/gdbKkJ1K1LNG3cNgY6LaYrV/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnoQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqr3w//eqHWmNiDEI3wJ8sKeDNJEfizGD9TVFyD9gJdaEP2adW2orAW\r\nIdqwaRGFMgm4PAF1tAmoN07y2eUoeJ1tOU8a3PC/RSwdlppkcMl9IF0pYa2v\r\nChlutljB8+yaa6ROaEmSwaJ5pVEZsTs3yXwiibAjxYG3hSPaxs1+BbakLZaY\r\nliMWwGF9E35wn/XviShJSJBpxpbSHxoQwFwIdrbqWabroTk09mquZlKl3t8w\r\nuAA69s3XKiYI4SU/sgSZpU2RzbpriLp2T1ILre2axm5ylj66TcrzB/ryHMkb\r\nE7IJM9oe8Pz2U14eeiFwASiquhX+YzPd6KN/lIeGMfQc2ElftxaLVHr2Ie1N\r\nTVVxVLXCdGOK3FWLG9Uhr7ReQr/a/oGSCM4+hZ+0dHw2dZdDR1U2AiOkH1II\r\nUIloSPsSWwXJ62sKVtjevdvWienbMbBHj5dBpm/0kOyAsAuoAsC5aiuFduRq\r\n6d+wVmF9VB+Sra8/EDBL1WLlG0MoZQkPOFgAXThTPvwt25Vu1/A3M5Z7UXd9\r\nx4p08ULgDkgf6jVoodkZXAVquBQCYlDwYVK2H6R7nbBszcxx+lfZCfLi5U6y\r\nRkhV2sxWtPB86ow2EnEDPYSN4SedANM8vfVj79MAfy298n79jwO0A5jD8c9b\r\nI11yocb32ZSElHYaur2e2F7kRsvJNCZNT1s=\r\n=PDHP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a868c7866.0","@material/base":"15.0.0-canary.a868c7866.0","@material/shape":"15.0.0-canary.a868c7866.0","@material/theme":"15.0.0-canary.a868c7866.0","@material/animation":"15.0.0-canary.a868c7866.0","@material/elevation":"15.0.0-canary.a868c7866.0","@material/feature-targeting":"15.0.0-canary.a868c7866.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a868c7866.0_1668184592116_0.4109507436733484","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/menu-surface","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.602fe8efa.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04c35617bd85f213cb5c2178024d5d1636ec085b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.602fe8efa.0.tgz","fileCount":36,"integrity":"sha512-TYVjsOq1jxIhCLKe7C+OIcfn/MWXV8k1Zi4VnIrIWRA3W0kV9QrD30UpeQk7lzOMopbOFLC7mL76rPSkykVNKw==","signatures":[{"sig":"MEQCIHV41q+I0rQ30wERPwsailjZgbKKUbvD7r2hSZJcyBLrAiB74ZHGfunhBoDcp9eoatsjGGe28hhrN1dwf9fxkpT8PQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboJVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqO4g//ZvP522/6iPFNzMynEDyEmMTg/hQ5Usrv1kQv6BIWNKkIXsEo\r\nCz0kuhNegOchjcLQ4DRFNkgkm1KI/mF99RzLKXeJtivztq2w3MtGLQtwZojn\r\n5cAV3bG0L2vmZJTSFXq4A3rq8Gl6hvFjXil/ygO27viVpyAZwRJmOOAzcSmB\r\n7DiNRi+M2nn0kxu5LKdXQnmk2uDLaGdw0+A+2QGON/2QU3/tdvBfXg+yUbrb\r\n0CL5LQq/OUEDVVJ6DMAdcrdwWSlnv9/uRsLZhvSN4BGMlsZg6HUHSB0BDEnq\r\njKfS+2i6iw9tHUawvK8/wrJtZkWBc4Og1vTs8lPxnj+nzx7bISGeAxh/9mjT\r\nwTd0ADQ4/rvklSg6V3suKjI0OH1kgh5OUV7DV06L6mivDwRP1jG1DPfK8Eah\r\nIG7Bs+J+2Unovnaiaevgjmgdb/Fe/93yAtJRT/mPawFnq5UvUdWjdudrcpuc\r\npAvGE7DbiAhBwOEolPaxbqlGI/JW111/R2re/HnrpDMAAonMHtjspYxs30yI\r\nEeF+9anNhzKTc3XYm7MyTkksJCL9yfBIUanwYOwKItE0x/ursr/P+hpTO8T0\r\n/oDuTA+/6dUx8Q6UwWKcMN6OAu+PYuRKI2lEHEbONByytEmRQ2e9++B1oqez\r\nsqVVedY/O4zM7vI/rJuzjrJ1vWwYPNHzVLk=\r\n=+Gek\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.602fe8efa.0","@material/base":"15.0.0-canary.602fe8efa.0","@material/shape":"15.0.0-canary.602fe8efa.0","@material/theme":"15.0.0-canary.602fe8efa.0","@material/animation":"15.0.0-canary.602fe8efa.0","@material/elevation":"15.0.0-canary.602fe8efa.0","@material/feature-targeting":"15.0.0-canary.602fe8efa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.602fe8efa.0_1668186709219_0.09554891172020485","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/menu-surface","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.558c2be62.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b7b1a5ddbd00fe03e083b07aee869712b10ce6a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.558c2be62.0.tgz","fileCount":36,"integrity":"sha512-5kIPLK9ro4f5hch37CPNyzu2996rLi2X5m2neTXXBZyNGexe0Z40EAKC9yGS9SwUYiLptSM/BnFAimlB9xHRmQ==","signatures":[{"sig":"MEUCIQC9EyncOfvFV2kg9/U2SLMr8JNnJGK8prW7HGnJQhv16gIgcSia0al9WewKo14ZQkrnPnYeFTiKKH0bKCauxtMR558=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtB9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosFQ/9Ejp6bOGxpOpwneHg5N7MbK6m3QGrpSMZDEGxtLVXPoOn6N7z\r\nQGuf0l8tX6wlJCOAznVCDumDL0F6rpu4+Nkn3uBf6s4YW3MVMMcBl58ZJIn+\r\nZ31faq82/8y2D/h+tv9SqzRQwuyLWLZeEtGvupIgpv0bCQP4XUFl2172mRpI\r\nRjolJDEzslBjuLyCqxUfjyvPKEziqI0wZEGab2T5SDtMc7wWB3XKNoBpI9eM\r\nB1Pp1+LH6WXPUTgjiZKiyFJUh+jO2WdpBpuPBFuo39lOTm1t26tzpgOj7it2\r\nUVOjCV1pBxPPZwgP/qZmschokf8F/U8lByHKdtCE8VxiLUMD6wuSCEO2pax6\r\nYcz20GFuzrFTwdi/pIyh+txDV6wT3/rpE0z+KXfryOBkEEWANTReemqgKYWq\r\nCxyB3FY8Lpso+zYMu+taDMTsXkq7wS/Rr4+Us4QbrXDgE5mHn0yRsECIBEk/\r\nEGk6CpUhsfH/hU33yU9CeRKGbGcRZNVTwOPB173jZ5qD6Gr63hQRZu/E2HrD\r\n7H6qvpZRCyM7qeFfgXXhI8mgHMr1Q2QFWxokkCGn85m7f3NFUxdlvTSD84ZN\r\nVNyw+Kidijm5CAj/pDqRW4QHTPgV/en7SGYpDNR9KsUvjxLbe1n9pM8LexBV\r\ndn6ta5STysTzrneUI2Nn6cje2/hDiu+ThtQ=\r\n=J/95\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.558c2be62.0","@material/base":"15.0.0-canary.558c2be62.0","@material/shape":"15.0.0-canary.558c2be62.0","@material/theme":"15.0.0-canary.558c2be62.0","@material/animation":"15.0.0-canary.558c2be62.0","@material/elevation":"15.0.0-canary.558c2be62.0","@material/feature-targeting":"15.0.0-canary.558c2be62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.558c2be62.0_1668206717435_0.5847798944267628","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/menu-surface","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.b5c13a7a8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96c3ab76d5fd7a64aaac0ea2a78c40123c64c1bd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":36,"integrity":"sha512-9aSHtn1Xk+fvG9/SvPov2o5K3jQjyyQjnx5Wx8+LtgpEdaTddGGF4Jp1iaWCF0sWunK+ozP8uIlFksKFbMgKpQ==","signatures":[{"sig":"MEUCIQCEo9EuDnMCjSuqTiNtUzwlBTM9ZfH3p6pgZJ5yBTPFoQIgAMWLzWmD5pj2Go+p/QCYCdsBBKqcys6oJiLoKDWxBW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmWoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgwA/+K9aqbni/VYhB6+zDA3I4LZyUuSFGiZBnsoTqa/aWoAzTsOX+\r\neLEQSyAMyD0WJz/RaBXA3EVfjqAFa9E+RrbffL5+KXvdwRB75oNkFbbXZnIq\r\nnSBJ6Jj7WtDoGk5oKEek8YWLmlp4xJSuE4jwaZFONwdVXEw/uJBdpM4jdPDJ\r\nVosMbs3YnZZMEe1QnF/6Y3uWLESIlZ4+UkfbooQOGcU90LzoGQn/YdH+/k0I\r\ngZ24wTLz2TOQCrEd1n9tk0cPzyG/cn6aEBbN3+qiRLWKebkDnu72a/OZ4B6/\r\nWIfAqOmXqBs+huSJSZVaeZEeRnR8YFkJoeXZeaw+JodA8VG+bfFjWJ0vJsFX\r\nZTTXmrp3LLSLVBBt9ewkeDTsF+pfah3UVf5A9WodQYFgLCjB15OEp4YqS3di\r\n0UVZDxX9aFO+Kxq92pLNbbCCcCw7HKWyONXcG5CeoHQPyArrfxznbVnu8OC1\r\nhUpmufcP51egWfUYebdxBpO03WRUv1eXZvuea27SRCcVg9hldjShCj9fZR3N\r\nFGxmvoX5D8+DF4fPRk84tI69+uYCRlqIFwCaTpNkN4+KgOXG2iqbg+vM3UXR\r\n8A6YwwEK3pl9EKmul4XZOSloZckvRNy8EoowOqnINBkfJL/aC2OKXxXzHkPf\r\nTxO14hfxz09D/8HWdbSJMHXvKazaFGXEzWk=\r\n=wSN0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b5c13a7a8.0","@material/base":"15.0.0-canary.b5c13a7a8.0","@material/shape":"15.0.0-canary.b5c13a7a8.0","@material/theme":"15.0.0-canary.b5c13a7a8.0","@material/animation":"15.0.0-canary.b5c13a7a8.0","@material/elevation":"15.0.0-canary.b5c13a7a8.0","@material/feature-targeting":"15.0.0-canary.b5c13a7a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.b5c13a7a8.0_1668441512679_0.7076694031485942","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a6e1c0702.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"716f580c2c1b5f826249a5513016f9fb64b81906","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a6e1c0702.0.tgz","fileCount":36,"integrity":"sha512-95OEubu1gUKr+VQaoQrDk/SI8SqH++MTd1wsTJ3uxYQ6jj4Bo/I6UEGhKB6C/r33fvido38kbboTpNtjGp/VCw==","signatures":[{"sig":"MEUCIAvfxtqYQPqmv6A2hWlBwFwLitfpDOkQBDLx/LIetfWFAiEAxEMBchMxgyLjXMQidLKNbk13Xn/IZIa1SfIM+ZoUDE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnpnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpu7BAAnpG+BpM+h07bESeOtQahoI0fM5xPFLo/KEaPl2mfHchl4H6r\r\n7mE1wDBMjC/O7ZZaNUTEM9vRUfX3g+1odvZh/k7ECvf6XlwZ19Nkq9BM7qXX\r\nsaDXUvArNQOmxRyuLN/pj/skRpIiguwGruq/I4Z6AWzJskGSb3MyPyA5oiUA\r\nTiCorINlfCLnRw16NQc7bXKeZhr2PdAAaCpk84HA5q3k1tVNNoSjcnNBVlMX\r\nDeaCAoc6cf9+ezlQgLwq1AaW+zugYZvS/uqgxKwH5LqZWuauZaOk3AkyOesH\r\n9oVx+1+/sLbywq6twqisTwTfm4r7k1R1ZYXTHzp90xG6MPOGB2tgoG+G+0i/\r\n6UB1vQR/VgQjj8B7UEV7odVKHnR12rnAvB+s3Q2W5/efZ7bapG4LUf87wjD2\r\n/6W2Vc0X7n+amk8eY06dvEygfazGJLelWXjG4+7ndr32YptDz6EnOeAuLl1P\r\ngl8QF3X2pD7JjkwViZEj7T8+NrWf7QnF8/kObW60nuK1NUZkt/jZ0ng9mTSc\r\n7ggw5xn96M+KJ03UrXg0wHnx2EsVhcypqwVoNnFXY9I9utth6HwwQKTjcMZX\r\nOBRjFA4cDx1qG4+KudUmv2higYimBG8Fugirqpsaxe+XuPqOchyD3GDqCqhV\r\nUVqQNWdC9/e9GAEkClRLkiOyIqTGF0qOXGI=\r\n=POjZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a6e1c0702.0","@material/base":"15.0.0-canary.a6e1c0702.0","@material/shape":"15.0.0-canary.a6e1c0702.0","@material/theme":"15.0.0-canary.a6e1c0702.0","@material/animation":"15.0.0-canary.a6e1c0702.0","@material/elevation":"15.0.0-canary.a6e1c0702.0","@material/feature-targeting":"15.0.0-canary.a6e1c0702.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a6e1c0702.0_1668446823144_0.14549990493647447","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/menu-surface","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.b6f8a06de.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c85173a5f2c609abb56141a1bc0de6768c62f01","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.b6f8a06de.0.tgz","fileCount":36,"integrity":"sha512-4bfYuEv0QYiKP1sJDLlLc4OueUHKXaWF8Wr1djipKsI5E/HFmYp4Kjt5G4TOxl9YDO66+fLuQtuhx5py+rRIFg==","signatures":[{"sig":"MEYCIQC0LEu3j2KBLtP0chtI3HmJ/A8cXrjkgQW11LcRk28LggIhALiQa1ZhGFUsNsvzlH8yBHFdczMJ36tGtUZfUMS+K+53","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1u1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpxpg//Zwm6WrbCYAubuLub+d4vHo9wqINoKZHe479laZwMFckxY/tF\r\nlTu/S1edPyUfrn9TlSYNhXQuTYsZfLdoO3MUXbAdJ8c0wR3zwZPsYVCPjcSl\r\nVlWWzFkHjLcShPPOe6OV4/pWYZnDsriNd60R/WVfRwsLSYUTiNMZlFRrCk12\r\ntU4My3LcFcvabLBLpI8hV75kH6mB3E0G4WURRCK3fyK97uK2UsbrojgYRwkS\r\n79IIyqt1TkIRh2YWfoVBxtsDVTi7ZTzknNEYtyD8v83rdarBoR2prkevxJoL\r\n6oyHHvTOlRW2RMyH8sXnSUqXg5clgou+mF+whP+ZKoGGIa0p2IOTezs54Ow7\r\nesj9DhqCzjicAK5pylX2cs3AlqRVAjMSoRCX+B1um8d4SqET31/q2vpmork9\r\nH2A08Sfo4y5Q7o8TAiYcx0mFYP0s85w3mggWaLKi6mws1pWZyvxSlXGPVZFB\r\nd8VhulGAG6YFG+bv+i7SYzcVEgETImKYf/boYS4mVD3U8Dr4Xa1XfCG/H+qQ\r\npGk4LcTgSCZofWCggQ8xhIN4hsUrHRunSQfuVyxnsiAw8LA3rwfWvQjeJz+/\r\nVlgOQ9XM3f9P4DS+xHDBNqSH756ws4Ua5NenjHKgTx6MMtfAJyvP+BVfknb3\r\ngpL+MFiaH6drTNOl2tg/5d6wHYNbFuG6yrI=\r\n=jE2r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b6f8a06de.0","@material/base":"15.0.0-canary.b6f8a06de.0","@material/shape":"15.0.0-canary.b6f8a06de.0","@material/theme":"15.0.0-canary.b6f8a06de.0","@material/animation":"15.0.0-canary.b6f8a06de.0","@material/elevation":"15.0.0-canary.b6f8a06de.0","@material/feature-targeting":"15.0.0-canary.b6f8a06de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.b6f8a06de.0_1668504501672_0.24153488576606685","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/menu-surface","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.0163f3ba5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6a1e89345bf777922f6fbfaf4c50670d1dd076f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.0163f3ba5.0.tgz","fileCount":36,"integrity":"sha512-pbA4LpOtAAfHk5pxZl4+ypOVDe1N1jlXdYRcIMNL8zp4vDmSNxOmWoHPDBM61IzygLyZBuGu1HCY0/QuFTuidA==","signatures":[{"sig":"MEQCIFYDJ9kTHq9pG6iLnNIg8W5ifYwH3ixL0R/etQ95cVu+AiA4wLDRy+18caCobQ7Fg+4WVDfh0ilVYlblzSiMTgTnYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9QeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKmRAAoonBNpw/D3R91Xvw+B5NQTOvyvrvpqK7sJLlgJSKjdgta3Hi\r\nRnoiR/PX1Zr6EZLRi2L/qX1t8mu01ddwJ0tXULHHZQor1qEi+QxOIJsrAgOC\r\nOP9LWBHT2hGy3X9B7e0XnFfWLWg3nED/N9H3gwVHwpWzdMk5AIBueRMTcGws\r\nkHLNszAMSBc8+/WkwNAfIBdAnZ4u70ZuLBuPvvYO9XRnmMTzK7jodKKTcJhK\r\nOs9C8p9awDFIndak+wkTboUZUAw5T0+AXVoOpMkBPgTLxo22Sdmej756Qsba\r\n2nnWjMdQryiDql5F1NMPeap1W8/yXjpatgtIRUZqtj6uy9zqiXsVzHtZ5Uvb\r\n58ecKjZ+ydwTfJSj18X4iEoPPAkPoRabUPe9FR0OaP7isy2Pr08ra2QSzs47\r\n90Hz1wZDWeW2fWOfWZ4ei3pW1MMzLOKlbcUiXK+LbsDXbCXTR32ndEjY2qBy\r\nXm78r+cAod+W/v2woIFnDCwlHK/bYNTd2vItjRJ0d97ttRsvU+0/FjZ4gWO/\r\nQcMGlA9ue/rEeJB+0iey1iXELs6Fm83/hXSTkY61f8hynHfve/rj9zc1akY2\r\n/w6zgdTwG3b1uzuSXxU3Zkq2iLOFe3wx6esjIxwLQ+mIt/MMyd6wCy4O772f\r\nrbH4WU2erNlcnavqQAdib0aT7eSapIrFTIw=\r\n=nmxH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0163f3ba5.0","@material/base":"15.0.0-canary.0163f3ba5.0","@material/shape":"15.0.0-canary.0163f3ba5.0","@material/theme":"15.0.0-canary.0163f3ba5.0","@material/animation":"15.0.0-canary.0163f3ba5.0","@material/elevation":"15.0.0-canary.0163f3ba5.0","@material/feature-targeting":"15.0.0-canary.0163f3ba5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.0163f3ba5.0_1668535326259_0.5147132191244366","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/menu-surface","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.66c5cbb94.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00e7003462a08675516b677ae72dea54062cd211","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.66c5cbb94.0.tgz","fileCount":36,"integrity":"sha512-dNCQ5e4XdWiHTZ2CV+CTaFxq+zlG+4nlXqC5yzXkg6Yog7KC586ZuQIe4buYr0ig+bdpFDM/KFrkmGrc6W4rKQ==","signatures":[{"sig":"MEUCIEtG0aNFnoeePuvePG9IAxgfIBe5Ypo7iF1q0D6MIuDNAiEArqJdeax/80E/1BRsgqzxyz6bGCEQ0Tyai5x13nam7FA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+jBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+kw//d9+a8E7yFznSZdQwAvfU1z8zxxxLUSlw8BEVt8eQcbluYCMg\r\n7qRmt9yvcwmol4hRxWu2Vii5ryVtrzZTnmHIqf+vL8bbMRqmiQoIi8GujLFb\r\nyV2eN5o34xIdNwJPfhrOxIwdwb8BN7JtxA8LSkTtJGu/q1+pa0G1x16vGnqb\r\nGX7DaeFbZV8KscIBUtJmdYCn1fklPtxi1bKE1D/8mKD5Lw5PmFtWs2yKIpV+\r\nLhTCMdT3aN5w1vB6JoTLVDMqlsEhBiLkZKQhiauNs6lU8yZsOeghzmNbOTs4\r\nsUVOe1ie52F5TQk8NpEyiWJdFkZTyuDGRrnCUNLEF3sc+qvhJsuUxleQkPGb\r\n8hmFBQd0tOCARLTmZVA7KVy3LBR5IRUFxfyF9xW5V6n3hzvsmZXicr7WSUcW\r\nDksQgj0vopm9W2pT9U+PyRCzbZnVZTjGO9dxDG8b9cs1dB8BvkjY/vV8X0Dv\r\nlkSAHlEY1ca8dQBPKiasUjYjOTm5xyLfhOqLDSFwMaJtEQt8LAWuR/+Vke83\r\nvXLOgnNpnvnANCU9TD02SG+sjkRYHp8WZKJ7ZGBLJgm7Y8OveOlqWDNREhTR\r\nKjSYu1bPVxwVW8Zqn3quP0J72QzETKJwSgfP0siJFTTaeA4TCyL2XVI5U4jg\r\n+6k/Oe2UUb5kHVrp3Mol8RP72ja3d+o2QzE=\r\n=J3Ia\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.66c5cbb94.0","@material/base":"15.0.0-canary.66c5cbb94.0","@material/shape":"15.0.0-canary.66c5cbb94.0","@material/theme":"15.0.0-canary.66c5cbb94.0","@material/animation":"15.0.0-canary.66c5cbb94.0","@material/elevation":"15.0.0-canary.66c5cbb94.0","@material/feature-targeting":"15.0.0-canary.66c5cbb94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.66c5cbb94.0_1668540609448_0.18813320567137803","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/menu-surface","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.b01136063.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3445dc764d2ce40ebc38c20a42ed37c4a944ccce","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.b01136063.0.tgz","fileCount":36,"integrity":"sha512-HiC+zk6t8YWZrUlSzzUAxZhQKK7nOtTAe9dYxS18bILw0QLmJ6D3HG41eVw/U6v7nXke2ViRqs4jIRC+FX6X4w==","signatures":[{"sig":"MEUCIQDmPNhjSwmBER1yX1WU+ZXGULxi50ZAe/YFuDIzgXB/YgIgart46C5gxBbeglAPCjiK4QheM36pTdS8xEL0TlBmFr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCu1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUAg//WOPE9JSkY5NaGLHheYu/LYFOrH4AgpCgROOCQBi4ugb6Q7LW\r\nZH3WDNw6q9IBWgJTCir+JkNjf5NaasZpAcAhJaIQKdrhH/Wk03gy4PceV6Af\r\nnu4wD42Z6o5dEkm4xjtwXIVkprINEMvsaOfwt2vnfhyyx5zoWdSMz3X3QU9l\r\nyVett/sk1UjbkD0qem374pobep+x2g7h6F1vihHyLKvRhgCJNiSCLvfPofGo\r\nSsRo0FvkjgRMDnvVKlZIvmYa2WM2imyuPzNZk7rHP8IBmAWyrcGmJNdssjWs\r\n3jYpA1uYWhSiFoWSR1tgWDsAge1CXZOEyHFBQyanH53NoCo/iOAT5ol+XVeb\r\n57qbmx7N258npZ3mhXYw99pjRl2m1NVDptjfqh1LDFYUAQ9y7ZlP7eBZcLoG\r\ngs9Rgb0+Yxri/9iPmKaopfqU7Vq0E8/tdAmD9zjMZ2yRNXZv/Pm/7Vl+igaY\r\nFXY3EflKWFPm98K0IzCkBQMfHWXTqZQurNfguXoA3Nh8VrceZfYCvSZ+o4FD\r\nUHqnGulBPtYR2qC0ss7GI6uyfPWbXRzg84Q7uPGbU7pdwYKG389XCQUFka+H\r\ns2T2/plyIePmjO6FAtkR32XqYbJgMCEdaTx4GdLDyGTYynhXs2rAJgBEwZBU\r\nsc1WTV+9nJj/M+vCRQOvw5Qx6ugf6CW/+8Y=\r\n=ruWW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b01136063.0","@material/base":"15.0.0-canary.b01136063.0","@material/shape":"15.0.0-canary.b01136063.0","@material/theme":"15.0.0-canary.b01136063.0","@material/animation":"15.0.0-canary.b01136063.0","@material/elevation":"15.0.0-canary.b01136063.0","@material/feature-targeting":"15.0.0-canary.b01136063.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.b01136063.0_1668557749219_0.7121797083906569","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/menu-surface","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.01da0cabb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0882156425c85b28c54a341c8109d3c4d89e832","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.01da0cabb.0.tgz","fileCount":36,"integrity":"sha512-xgwS4Ktu0J9HOA0jGHw5dMLMnhGJYbSXJUPZgmXJO7NzbW5B0DtvFvvTVwkTnRvBUI5PAhiVwXIjZcO/8wBg7w==","signatures":[{"sig":"MEQCIA617i9x/4/NmstkEX8L9U1RCwXimRHZGHk0MAW+RwopAiBca3UlX16HcCMT5Tcr4vjbzgxSovsTAQxUMtYs46JZGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKmsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpA9A/+LFkUHNKKwOsykj3TWH3Qcq5qS5E3bFFSMXww6q9ubpK3+TpI\r\nLdH0PVP1Ai4dq2laFkjsXDQxTRSHGg/L2fHS/ZC9dyItpmFBUUjzukbKV+2i\r\n6XzE8AQWzNH2cOLsw+UUwffJ2nzIz/3zy6yUZHwBcF5OhNFwwISvaDFiMcCt\r\nrTXCUGjLlFdMwhwpt3ajBg03pvsDR+0xLURelv/KQGg0CPsExpHzWey//1F5\r\nyB67K7BqbIFT8ulvLX5HtHyfH7l4xWKz33R/Vts3MUju9loOo8Z1sK4/DPOg\r\nkehU5JMcKOfTCjL6fe4MxFE4nx8JzSaB57faKyoq6IIwGVLi/g6dI1f80/qK\r\nQwB+8kOl4HBQ36QdRCVJlGC2VJYFbA9Jstlxnjtdi8RmouBlaACLj2NmwpWx\r\nPZDFQjjC1GHGqN9/GjJn4nKGWd8oNFL7nbMlBIPoiLzG2aDuCy13lG3+HlNI\r\na8FdYgwrlJVMyepwZ3b86jHVMqziup+QK2WCpfs5wX561Y9TSoVsvefzw3ro\r\np254j37LrEHOiLZaIZaDBhgEU/xg4xYN2K3EeOaQrxPOBrWP2unKzpghErCQ\r\nAm5O6erHLD4K6MXGoqBOQGl6WEsDWsT373mogcpdkfAQI0e2ffx4A87Oe0Fh\r\nvKEqB+rRBffNwTtunAXNYgG7TW2IwiNR4kg=\r\n=zpqW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.01da0cabb.0","@material/base":"15.0.0-canary.01da0cabb.0","@material/shape":"15.0.0-canary.01da0cabb.0","@material/theme":"15.0.0-canary.01da0cabb.0","@material/animation":"15.0.0-canary.01da0cabb.0","@material/elevation":"15.0.0-canary.01da0cabb.0","@material/feature-targeting":"15.0.0-canary.01da0cabb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.01da0cabb.0_1668589996408_0.9015243677354408","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/menu-surface","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.4ac393164.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"655d5d678cce506733d4e5fb9f223e17890f856a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.4ac393164.0.tgz","fileCount":36,"integrity":"sha512-/xZo6mcuctu8nvg0DUQvkOljqhQEVsiFNxq4WwSdKQj5yDUhDXdS1rR/CaiRmnt+Huc5n8DrOAl2O6cL2wsleg==","signatures":[{"sig":"MEQCIDoskkuWahxBHvjTuOx9PTJoNJDE+ZfZ3qamPcuLXT21AiBmtZA/syhdboKmTrIGkPHjLBwl/NFMnwDV9Cp8h/unQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQygACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrgRAAg3F7mFKWecNdPGMANcH5g2UZAGg/YtrTCgyqaO85aYnsv1FL\r\n7ZciXam9kRExSXSQAc+e4JJmDLAnmmHgLBBfoFERfNsBLrlhMuDamDwPZ9xL\r\n+RiE7Tfpi6qS70kGybP/3u1VeepVG1ny5ebWzwVvYQTCOBYu/2CVcE7uJ6BB\r\nBuC8sQEcccjS4giuuBPIMs2oo0p16ktAxjvSye67lObVqjsFZmm8oCI221/B\r\nijzXlTR7+xPsrjwqBG/RSqxNU7vtr3kMb0k4vT0eVcjLCJaywH3GvA03zhyd\r\nSrju0AyTtufO9dCIG5cXRtmVWYg330GSzgmFkODuczwGE2FUVjrWSzGMjxyb\r\nkPJEQoDugcaKczeISQJIyPcl2YmRAqmMr5siCR6IgMi7Za+N06lmdRI0aXH7\r\npScTl5y4+k1mu6FgYjRS97yAon36OGQj5lpeWUhYSzo7s/uEZEyy/OHYolmR\r\nnVo6pg/uL5NZcO3b1jFREQ07Usr7tl7P7hctv6/nC9lEgOMsP9OhVQNXMblj\r\nbjVJekhUN6Ej1xmCr4ODboZRUIGOxUVArSW1NaSL/H1eIt0EhZtSaykNhWDu\r\nLUd3FozCaE4wPApHG1l5b0mW1M2qS59iZv8E43OMY9rRBcBZg3z3EiZhuFJ8\r\nHqRsOy0OFP2H1oCK9rEcimRgvA41lkKXV4U=\r\n=3HYJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4ac393164.0","@material/base":"15.0.0-canary.4ac393164.0","@material/shape":"15.0.0-canary.4ac393164.0","@material/theme":"15.0.0-canary.4ac393164.0","@material/animation":"15.0.0-canary.4ac393164.0","@material/elevation":"15.0.0-canary.4ac393164.0","@material/feature-targeting":"15.0.0-canary.4ac393164.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.4ac393164.0_1668615328297_0.7487992481131096","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/menu-surface","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.6048fb563.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03fc251de90dae5a09e2a24b7fe14402dd559b66","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.6048fb563.0.tgz","fileCount":36,"integrity":"sha512-5KW++dCXql2DvioitK7tUOUhnimLQoTIlzrNo6qfhLqW6esP1DFRompBXGQTfLiPgSCjmZgyTEHpojFIEi1q/Q==","signatures":[{"sig":"MEUCIQDdeL0VwVcIiAnAj7+7V3GnKS1VLsxsdL0Dflf45Z5IMgIgVPcE/0ORUyQODUE7WOLBFD3nS4ZuHRzEo/EQfKruCRY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ0eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpaUBAAjxyAFz1DraI9TyAVnuQsvLrnwJxh+TnVX7weJjgaifk0gIqn\r\nXc05pB90IwDKR05MHKLD66sJBDuYCoq3+eBwb3ExFY8CjZKbEUxn75eJ+DZn\r\nhnHIE4V5o6W0hkYo9HscWbVcjwpOSZGeNz6h0+whbat5Ja/0U8y+AwVo39zr\r\nNzaDkmL2blEfybOdHPTjOZzK/lO7R9KcR+Llau4ryoArHl+WRaTro7xuO4y8\r\n96YliKEzCghcSeIj5sOT22ARJ6cJN2M3vwGtXOeUkZC71ycIpNAcZdg41Vri\r\nydlh4g9c3F9INiXIuiz5zBuKvGyihMry6Gnm1AKjrFasXpPnHS7NShnGXBdy\r\n7yg8FF559vAomi0CrWVf5ujKgcfe/mkShiZPAjWpccGYtPEDmIuD1BsU+DhJ\r\nIRD9RBc9HStVOsKDnHc5O87J5KR+ZN7985e6+cYpzyVysHRE+eeejM1Haiy1\r\nkscGvww19AnvuFedGo7P/He3toB0dxuSmNRXboCrLcxNdC4r7tTFWTTEA3gH\r\nxPKHqbfK7+9kL4zy7hA+XHF6DjKyFWtkYYVY8E/N/TYCyBfRbtjqO6UpzUG5\r\nnE5/ovUJH3NOmlhV1zfRsHeSUVHUxHt2pMzaMD/EE30wDpDD5R42piEk7VNq\r\nfXSfQ/O9NMKXg9hOx3tiZP7xHVR/h/7wy1Y=\r\n=+b+u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6048fb563.0","@material/base":"15.0.0-canary.6048fb563.0","@material/shape":"15.0.0-canary.6048fb563.0","@material/theme":"15.0.0-canary.6048fb563.0","@material/animation":"15.0.0-canary.6048fb563.0","@material/elevation":"15.0.0-canary.6048fb563.0","@material/feature-targeting":"15.0.0-canary.6048fb563.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.6048fb563.0_1668615454330_0.7890556134609901","host":"s3://npm-registry-packages"}},"15.0.0-canary.3777b03cb.0":{"name":"@material/menu-surface","version":"15.0.0-canary.3777b03cb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.3777b03cb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4f3e581531bcaa939b6584e69be340aeef143e1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.3777b03cb.0.tgz","fileCount":36,"integrity":"sha512-t9I8pqDRqsV9Jy56R38kkBLbXlPhFmCC5GYqtVCjeM0jkMbjv+h5TgXG2yobqVeMGJa4A/CO2K1VTlO6Tz52Bw==","signatures":[{"sig":"MEYCIQCy6lvV/WUoR810duBxo3p7KY8SBHfkxQsxluAioFLk7QIhAMQ/Mtvc3TPZlXxmO2BFGTl5G9nGyUXscvB33IN9O9D7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdS7ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtYA//dbgIL2s1fbRtiKpK3ystO0tJXc+ml2ahhVy5ta1CyFqh5Iki\r\nszJxdZkL/ueHzI3o/2pd5aQkxVGMlFq2NVTUyfv+Rr2XNrWCb7zxGIqFGevM\r\n9FobAWr/s8HrbvODJ+o/czgdS4MVQX+MtApv0rHxCsS0zDPMPUTRLgyJWkA3\r\nb72fqXKL8LtqNNeqKg39c5miu1xqTW9ldd2VGUpDNZx7pCOOeo9hg6Wjtmt6\r\nRUyZLeGqsy+qXtUwN68Lgmxz9/NapzFrOD0WgPSr+cXhU5m2Q3buC91eSsqU\r\njK+3YWCdSwxrMO4Ul6v9tZl3ODEnXU7mroVlmhJYWZ1BRaBu9fxjzb7xHV0o\r\nMNhPpyE2/ms9EbPbZgan5cPsFRnPKm12S5PwM9aA/b50zmsXD2YAEtFlGBLb\r\nVwnZAPUIARgN1bvc2wyYP5h4FqzuKeQIJv9t1apiF/7BlvSHE6JE4z0WcQ90\r\ncpae997YcYUroLOefrzAhNaYK03n4rBt0IuTs4e/iMlGuw0woBpqmqtt2Lgz\r\nBlL4xPOa8CooIlsgZ33dNkqPc5ix4c+buZYP/Rc2PnglJMEBtu6gMaSkQPU3\r\ntYkb+bjfpvMa7BOqzWFahqK07yQSOCuml4+wKQC3yogOLLNuFc1HzbVqJk0r\r\nDWbdV7HnwKVy9QJjq4XevaaWNOA88/4+jYQ=\r\n=XRL1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","gitHead":"e02f6251b19559b874fd1998a9f0bea7d651e41f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3777b03cb.0","@material/base":"15.0.0-canary.3777b03cb.0","@material/shape":"15.0.0-canary.3777b03cb.0","@material/theme":"15.0.0-canary.3777b03cb.0","@material/animation":"15.0.0-canary.3777b03cb.0","@material/elevation":"15.0.0-canary.3777b03cb.0","@material/feature-targeting":"15.0.0-canary.3777b03cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.3777b03cb.0_1668624089476_0.8050844110566195","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/menu-surface","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.f7f56fff7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85b9334a70803857bc3ecbf5b32eefef72a8d316","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.f7f56fff7.0.tgz","fileCount":36,"integrity":"sha512-h/UvGj86yKFhdv+3vFk3tTJVmeAWdYESr+REh/xdwxouT5nt6ADnh36AcNeuxH+2x3AuW3jr8tTA9eON+tY/7g==","signatures":[{"sig":"MEQCICet8pyvHvu3lGbEiRgThxIjTY0a5bNyI+G/U3uhtYLhAiA34Ksz5M6Id+WtEKxM854wVacESqZAh1oD3Q7sRYWYog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUBTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBxhAAjrWHKrQDCEtCWsZKYpJFetomntEwaFw1+5YlriykKEGOlSb9\r\nrAG2I/FtF2501Yn+OAsJOHKEI2Ujmip5PWbq39lkDddlVDO3Nw2jd3Oe9rRU\r\nzJL4aj/uFJAiNZLC/jumKYGPs06gM9Mx9HTbe/E4U96wrY5ghr7pRa4AkiW5\r\n6/79HKg1TERuFD0wl6pGz3FDdKFoqNd5e38wuKYASoDT1Dr1t0B53k5NMEUf\r\nCeoy3AofjeaTEd5psFxKl2OBEe8hSsPfCAxULfiBwA/8SDMwySQvBkn1hPfx\r\n2y/2hKgJsqyZqAdmsGqdHKnw8wQwCRKAhN0JhzoJX2K0BKZMYr0qR1P+yaRY\r\nfge91gE8w5NzgsozVIraoqakUJ87dsXYLwqwKvtZhKmksDDScW3hA1s6C00U\r\nl3ewNsk3wae+c5IE+CMwlBe682jtCWi9e52hwUJdo55GI+wrjIy8pRrdfXny\r\nhwbzGxwJIBumWw2p5JYOLA48yH3pRYoMm1vWmoWESTIEbXCgMgwqaR53lHz4\r\npEdcsjCwwTDYMG+JV5wIk3fZxYn6jC5wwDleZ5ebXW9KsBhmU1DSnvTNuYAu\r\nxBa3bg+ByapLP3XwA0SyWBXH6tT7R/ZXIwVzcBWRAgCnKXTE/IoItzT9WTwr\r\nSN6S0oe9WYUdtku9R/nro6T3hTJuJEBqCNY=\r\n=RL3A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f7f56fff7.0","@material/base":"15.0.0-canary.f7f56fff7.0","@material/shape":"15.0.0-canary.f7f56fff7.0","@material/theme":"15.0.0-canary.f7f56fff7.0","@material/animation":"15.0.0-canary.f7f56fff7.0","@material/elevation":"15.0.0-canary.f7f56fff7.0","@material/feature-targeting":"15.0.0-canary.f7f56fff7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.f7f56fff7.0_1668628562864_0.33547462850281007","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/menu-surface","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.7c73f6134.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f11b346c63fb6df99357259d18ab77fd46ab156","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.7c73f6134.0.tgz","fileCount":36,"integrity":"sha512-1653e4gfqMkpo4ZIkEhLrEW2lcqVXBd5t2rvV8S/RPZ9XWGbqmdKEm3pnwFIgpYmAUGpqpqksY6ND43RBN32Bw==","signatures":[{"sig":"MEQCIA/fcxJU43YIHJ32IXJOAgLI+AVC+I5jfjSQLdBE4vV5AiAhDrvnijrpdVLPYcMzZNCNHqFXGnhrTVqNUPXMRagv0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUEqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOMBAAl9iQkWA3kv6gSETZPYATi4sN/xr98+xnmbF+gjLAEU8VMOxq\r\nw74oUCrr83yn6yczF9WrHu0CjpJXx32B0FIk0fnB/Zb5kq6G0b8K2/HjQ9QY\r\n0YPYaxWpBTug6mg7tATfUJ2icFCb5kn51uRGahq1UBfkM5iXIvyouzbCjnhH\r\nW75UHDOA5/UvKBxarLnPR9UJ2Zo8hav6TFP6B4iOmy6MxwUEdlFSqUP9I1G0\r\neo3NMU1b+9X4N7q67NXeZoZhny70C/S5g2vEih/0AlE3jDczY+HyJZA+wKvF\r\nZorpQ1GOXEAyEFW5PmYgRqbFq7EySmKEHqhr8qiPyzsOYOcvNO9g7p1JiUaa\r\nZfgNv0rM3/4QHWE6ZKEuIANuCCzJSln5DfoBagyf8iM0IGco54QwjMddnC8o\r\nw9Y1rY4aL2q8wxPHTojjk98Dfkw8819QUypvQ07fmrer7q4U+v8/cIQkYVZv\r\n+BURrSvriDvB1mxVjclRbq040wTnQW7NTOyCnkXzqYtv/oMQ6E2IuZOedUCC\r\ny9dVZP5YrgP13bSPapRcfCfnUty17RLwpROdgJG/pbbKIs7r020ejkMRY58j\r\nX86F/UVwM6TUmKz676ZC3lVtHeeVLfpK6sCloLIzi1DsDVnIbvVIw5Wf9vAa\r\nQfttUt7NQ95/nyyE6qJQtGkVAqgOyJ51eQg=\r\n=EriA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7c73f6134.0","@material/base":"15.0.0-canary.7c73f6134.0","@material/shape":"15.0.0-canary.7c73f6134.0","@material/theme":"15.0.0-canary.7c73f6134.0","@material/animation":"15.0.0-canary.7c73f6134.0","@material/elevation":"15.0.0-canary.7c73f6134.0","@material/feature-targeting":"15.0.0-canary.7c73f6134.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.7c73f6134.0_1668628778645_0.460608316080825","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/menu-surface","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.f1e037150.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a31338cbba0f2aed41d37986b5e68749deb3829","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.f1e037150.0.tgz","fileCount":36,"integrity":"sha512-HQ65GWHn/Yt0Whp7mZq26iOqFQCOF2dx7HUuI6eHzrZvKAdUP2RQmkyWHvQho3+Ui5g1fyTM6z2pHsjVdJQdsg==","signatures":[{"sig":"MEQCH0pC/2zEicBOMWHi5vGA6cX8YDcj1cIcZ3OnLmyJ4cYCIQDoXd7dOtbIJx64VhmlZOlujn5bFzvmgXOJekfQGTS5sw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUJ9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKzQ/+J19veRvzHm8B2z9JJUVTyynK51+v7UIl9FKN1+NtJKTMAT7W\r\n+Fus+Gdey3NK+fwzY/wokr/Ezcn4wvgoQ3A9DRdOq4hSIJa6A457uIMI7Rle\r\nNSiX/dqtrCFRE/1lrWRGD1cx2PG2Z/6UTezTGzA3OQS6H8yiE0xW4yVlExUI\r\nIJ+tsKnU0Qk2DMioLUsR+J4o+TUNMk/ujv3BsZrPybX75GdyXlhm9WKtT8Om\r\nlEkHJYDOpxc4+3U+pQtmU8zky6TDdeDUAXpOpab33vw+1abehj8BpKH8lhD2\r\nzWG+7C+xZjO2/8spU5KTO1fCbDqThAQwhqVOaWTmo1vBhtAZmTo2WK2JwMhR\r\nv6+6ICPWp/Oun4aljA2ez9LJ1ih8awuhw9et9PCrvRxXLeGtZ90xmGsV38oS\r\n1t3RsROuWYc/Y2SKKdkvJ8JcIB7qC1wN9mfwW4jamdV2BkXzRS3jxA9JmXsy\r\nCerWnOtJLvURg0T+3xzBCmuEIE84IZ6O47DglYERQDjV3wNU/G4YRWdXuRJQ\r\n4VI6EKSE5VZpomkHQSxS/xxjulf8pCQ/6pjvMO6u+0sHIK/+3bHNsg3NgQ/Z\r\nZOg9VnyU0s7ZltJoARxurFX1SN8ZJp8gCXLX5eeh68aZAOnlwCRady2aavSA\r\nvRkhGsYbKwYOt5+Pl2kCSYuK4os7cuEEvOI=\r\n=z1wq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f1e037150.0","@material/base":"15.0.0-canary.f1e037150.0","@material/shape":"15.0.0-canary.f1e037150.0","@material/theme":"15.0.0-canary.f1e037150.0","@material/animation":"15.0.0-canary.f1e037150.0","@material/elevation":"15.0.0-canary.f1e037150.0","@material/feature-targeting":"15.0.0-canary.f1e037150.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.f1e037150.0_1668629117306_0.6608815986903003","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/menu-surface","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.40b18d043.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b4de7178513d07e905148adaeedfd9f1fbf46c3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.40b18d043.0.tgz","fileCount":36,"integrity":"sha512-ceyV9QADWYT1/JCKz4clpSP63K48CpMgtC1NanTucIm7Tx70Z+8xTi8FDd9ez7qC4ROFjF3aY5aM/ausCcJCmg==","signatures":[{"sig":"MEUCIFItb5YMkVo0hsye+EiDQRU0NcxqseQ7E6MdECU4fP6xAiEA0hmvo7reniA8/S9JIYE0ufmScwEfy5BksP9Lipai++4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWssACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqzcw//W+pGGufWq/NFI51gCzskzCkFuoupZQK4l0vkuz6hBSTetIQ2\r\n7nMEcQzq70bbT/Cf6UsFMmOFtzFzxDjAzSeKVKpfyTt9WoUCR8WqoHbMFCLk\r\nUr1V1KxuNno4JeEUL28fwIUODrWM8XxHOTXkX5tattZ2vJDlSh0T4kLKO/5X\r\nZdqsW+AbrknJdps6M/6N2TJj7Dl4L4lT7Lblboql7jwhxsy5jKhaC1Yqeiwm\r\nbGCsg9i77kmyTVzfGE6q45QSmGHrEyLRjlrCwKWcULxuaE/aOVTLtlbmxaml\r\nloHNN4XXQSl3VMi8mXUOf1gFdPeuhIL1XuhW47VCepj9HKQcTGiNfJvt0op6\r\nukohb19GRrIojYLNkRTWsdKJamfyr3BbG8IqzHj9Jb7fTj/2oXr4D8glBp6N\r\n8vUnyRBcGU8HAYDBfWhNUnoZaVTkdH1AgGTfpfw63C3ixMTzCSW+pL7n7XOw\r\nc4Eop5fVcyz9WZoPiJC6Orj/p+voB0qBCPI9hGZhHRo0OqPpoOxdcqMM9szL\r\nt/rshvxQfy4JUd9gyTqHp5D3YemI40DNqP+Nd8zRVCv/Em8f43bvQBBIeHOe\r\nw7j3QspDqcUrNuFRPR5EX1sIjAQOfspS8fPuCrPcShGi7biWjjn+g4Q5r4b9\r\npiXaQJUx6sff/JxbEkd2IYpzbaiCRV3RoZ8=\r\n=euCF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.40b18d043.0","@material/base":"15.0.0-canary.40b18d043.0","@material/shape":"15.0.0-canary.40b18d043.0","@material/theme":"15.0.0-canary.40b18d043.0","@material/animation":"15.0.0-canary.40b18d043.0","@material/elevation":"15.0.0-canary.40b18d043.0","@material/feature-targeting":"15.0.0-canary.40b18d043.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.40b18d043.0_1668639532168_0.017147399191614676","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/menu-surface","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.86bde5c06.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0101dd86c34836f3e71d95247f2f582b6e8abb08","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.86bde5c06.0.tgz","fileCount":36,"integrity":"sha512-fDVPeoOdpDMNG6tObYhcAiddckiwn//tpS+nT/K8EamETe0uMQqdxNbe13Ze9x2x8BhNzRpNDwhV8FSY+exgqw==","signatures":[{"sig":"MEUCIC6UxNLAoD0Mf9wRQn+gEydsC7pB6/VgjhfczmleGXRpAiEAv+MMmtKAVx09YOVrmr3ymwxPxs6ZrOWSeO6QDqMXtMk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW2IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrC7A/9GXE1bH8mtM/r6NsN97nvBJrtgv7XPifjuJpIXZ4V4MBCjP3j\r\n0rADyqoBqrNMCzQrlgsWpY7rc6AAz+3soJz8KGmN7vMuC5kclOWDZs0JBV7d\r\ntQt3cd6JSQFGRmAb6ZGRloFzDC4KmHM3tXGtD40/vfqzhgZwK0U1keO4EKm5\r\nAV91l43SuDVR61894ffsiMdzmJfw3ff8RgSgYOgeVHSJuQ+IcDtCI0qqG11Y\r\ndEXxNz1Gna60qMzqmFCxAmQsDyult24JCNxRtUXfdjcSCQsZiJen6lGHSgZU\r\nPkzSSdFsG4z1hZ8v/SImpYi1XXHaxF2o6/caXOAzc1Jw6aNbEVTJ7wrmhrkl\r\nZmN76MvQeTxQWupQuAKnJfYHtHbF9lnp3jqKIWWPQyAtRJXUiEUOZ3b033Bl\r\nMo710voidr6XAyYMBRjX/JdFkVE42caozE3msuc7q/ZeXjkEQVT/2mOoWIhT\r\nnW/SdgosJf5WRw6SUX71J7o2Sj844bYfBAty9DbmslBb0Ca8ibIMXNi95Sjr\r\nwmVDootQaiGBPAPppQUj9Ui0yRXQnPv4TGsnPQN9KnwL4lTNCGLVCpswdhCE\r\nlarXJ2qww+FjMq6dMm+7l8LJxtJC4rTuXKhKTvvIaidZD3/B7mBF3GXUgc/r\r\nkGwmckIilzlfYO3yrJKE+wkfBZI62EMq4vg=\r\n=czDb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.86bde5c06.0","@material/base":"15.0.0-canary.86bde5c06.0","@material/shape":"15.0.0-canary.86bde5c06.0","@material/theme":"15.0.0-canary.86bde5c06.0","@material/animation":"15.0.0-canary.86bde5c06.0","@material/elevation":"15.0.0-canary.86bde5c06.0","@material/feature-targeting":"15.0.0-canary.86bde5c06.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.86bde5c06.0_1668640135910_0.21433894454850466","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/menu-surface","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.bb7751002.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1104ebc6cc542c0833d2a2dbb489ffc467edd9b3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.bb7751002.0.tgz","fileCount":36,"integrity":"sha512-mWMMhvT/KMWfrGaXLAifhbcq+QbrSTxinpO04q8b1m3rG4V9dhT40W+NPUS9wxjoRW4qN5YsqfjbjMw9QtTw1g==","signatures":[{"sig":"MEYCIQCzxr0km/V2x9GyF2/WJCIFWyXysd9Kc0c7VzF7DKhBSgIhALKV2qJuWy5kAWcv6Bu4WEBW0Z16l6ksn5wEqfUYS88j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXmJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWIQ/9ENfhrNe5uPBss/8iC+DnOP94iK5ZG7W9hV9r5ZvMPJdvNyfz\r\nrlwb0L/xDGP93oVlnw/5Ixd7cd0Kuz7/FBImFdJYVYCEpO5bqT36kOz1KI/Z\r\nC7eF0HhVVDDDXAtXY5Sn+Ibyqp6Z/DbKsLIY3UM/Hm1ZMnC+/yGjb0P3N8CE\r\nN8Dpm71ku/KgNHU8sdug61fxtmsKWN03eSWvrG7EyeEdyzijSur4GInlck1r\r\n1dHQSkzp+oPI01izZ1JYl0xnnr4L1pT3HlIbNw30/c4krn/OfYTTieZ8j3gD\r\nozAQOeMStxKR/0hrJVKhp0ohBG8GECYdkHzF7lhqI8J2N6UvnNQJ1s97hNNL\r\n9LIHRZT1heKVXpk2hI3aRYxphQgE48QXAO5SzgctyULLaFgCUIyj1iDTzlyu\r\nsRP3uQ6i+5XDijONM3Pk2dZ7KL1JzGSOqtO7qWwqoWWPM0fSS3GGTqQvFeyo\r\nSjWqebXs13mRczukrQ8BxlbE0k3MAMVAkWlDXaTsb2sgY+uu9x7Z5GdWyGxN\r\nTienCbo9ypt+sjm3nxExFkW95WQimPs1/6TaXjxZipcHZMWjU81QKB2n216R\r\n5kvNb36nSQ46gPW1+z3RLFvjE+vfSijJOsse9mFhH7z9qWSBiFbMxUYiBjw9\r\nTWBoUwMLvjcG+zSlr8/oEOf/Dvh4FkXyqCQ=\r\n=WxOZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bb7751002.0","@material/base":"15.0.0-canary.bb7751002.0","@material/shape":"15.0.0-canary.bb7751002.0","@material/theme":"15.0.0-canary.bb7751002.0","@material/animation":"15.0.0-canary.bb7751002.0","@material/elevation":"15.0.0-canary.bb7751002.0","@material/feature-targeting":"15.0.0-canary.bb7751002.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.bb7751002.0_1668643208737_0.01818683790312492","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/menu-surface","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.63aca9af6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02861aac87a3f788580a5e41095617abb28cefa1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.63aca9af6.0.tgz","fileCount":36,"integrity":"sha512-IepOmXaMtOHRnp9yFktnVjRoIvbnJ0zQP/su0UyOwmfnEkbrCh4L57X8gFchDLvAFaX2eG876mwrmPXFQlGqBQ==","signatures":[{"sig":"MEQCIBAV0TVctX2k6vLxzJw+i/Wr6B8PUVnaaYyIIuginQZOAiB4NC/FAHpJIMZzClzkNva3ThiQD7NggnLI3mvFM0WdCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoT5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpbcw/9FtLj4KvhCUJJ2R7DztWaX/QDQXfv/lJwLowgU9VMzGf2+HWs\r\nVxG1DPeLUxGLyngKGb1ez5SAQWIS6NvHatnt8Ch0hgzZWGgTE1xDzqxggqLA\r\nUvRGC8ZjjRMNO5Rc92xs0VvV/wd1tTOAyxQour/59goPbaGLnItFypZuZ4ra\r\nJUN6lv/R5IPk0tn2NNSfpKRXAYkZsP8uWoKiWKodP8dgQ835wH9+kyG3ZJG0\r\n1jvILFG5J4FYrySIeyyS+Dv2F/YCn+5nSeWPlqPrFcW1a+VYP67dM7Jyi2lB\r\nXgiPZUuompWEuZLU83A7OgLHts4ffh1MdudItzk+cQRoxElVr2xVkId9qPpN\r\nkRJDT2u4L824wJR/zUJrb6vMJApmlJtMsbDUJz5ce4wwK9R0NoSBUTNBKZ6H\r\nyeRQC/+uhG7cvLbxD+Q9INTYADkf885D3nR9ayKN9l022KKl7gexOGWtZjVk\r\nL1KAMXBuJODL/LTOFjMDT9hYJ+hDAFsr3SYPdc7EwZVSCITKfeZ/AoM270uP\r\nVA7LP7GdAI2FbGqgDppIJ+1WHT4Tx2XG+zd6lCtVKK4ZN992qqr0Esh1s2XE\r\n7L091qoJ0ZF8lJLgUp8T+jixKk+KL8geC0Qv09mWXrvrBiy6fKFNuTzPJROT\r\nj0elCu46k5dETwc1FwycYNFti2zu5zXtZEA=\r\n=ubDI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.63aca9af6.0","@material/base":"15.0.0-canary.63aca9af6.0","@material/shape":"15.0.0-canary.63aca9af6.0","@material/theme":"15.0.0-canary.63aca9af6.0","@material/animation":"15.0.0-canary.63aca9af6.0","@material/elevation":"15.0.0-canary.63aca9af6.0","@material/feature-targeting":"15.0.0-canary.63aca9af6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.63aca9af6.0_1668711673468_0.26822399361146076","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/menu-surface","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.56482dc2e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74ef58732e632abcc69af58395011874020d9e69","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.56482dc2e.0.tgz","fileCount":36,"integrity":"sha512-VGGK5OQF7nA99MB+M+QgRmUKIa8Cp0zwHG6Rj6a0K4Hn32I4hWeNl/18zgU//W/EYDbtQYp0eXeejtAZiuBJ4A==","signatures":[{"sig":"MEQCIHyAdFj2Pq+/bAGy3K74xqS34/+f5MnYkKOlAjRMm0WjAiB+gsPWLtPe0f+U3MY5i9rcNrMSyUlOhPbFcF2SJT0KYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq3EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7ihAAidqpTv7Qd+HozaGaAgd5u6UdqtVoDQ1t8h7KMk31WhXtwLtI\r\nkS836lXRRG5Y3dZfMkBwv9xN7w59doucEiMU8hq+uZ4Ox3kffwHJDCLOdyC1\r\nL/cI7O8Sqn/liaQ+PFaBSF/baUyyky0STMXUkxcj7ihGYrI3eTs7rh4sgV87\r\nxdcUsST8iBBKvRF+smQo03wtGfAhfpMdHWgjLgWXjPGrtPAAinhcPeFLfvSq\r\ndLVkbJGSzjqDXitx/n2veSCXjVDLAvjlfohDho+T3qrtg5IwHK+34TCX6sIb\r\nLuw5BcLqkRjVCYHARiLTbEAxo9IhVkVURpih8uHSLDgrG7FxHeMYQLwsjvjV\r\nhuiDK3IOdKtfS0gvXs0IWoSRBRvjjJI2GGK4D/dlS58jB9Gl6gZu9eieo8ly\r\nRd59MVLGW4hTWjNAznbxykXnYsLp/e1qchUgJgL3k1CIuk43WgedQTaNEVy8\r\n7ousflxSexkrK2HwKsjD7yoITo3qIvNFFI3o6zYDAtt/9nzqk0dDdIzJkaGH\r\n4OSuBJWtQyQPcl38AdjnDvKu+I+e5nYv7lApGtQdMHD9JhUgoXiDgOj4LWWm\r\n3eoNQBUJ2f89ZMsd5sVnyCP3QNxXnTHatNo79CiT00aR6mj5TvCAcLv9xLK7\r\n8m07mcsE2zhJaP3DPY88koq3q9Z7dzDuRss=\r\n=d8rD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.56482dc2e.0","@material/base":"15.0.0-canary.56482dc2e.0","@material/shape":"15.0.0-canary.56482dc2e.0","@material/theme":"15.0.0-canary.56482dc2e.0","@material/animation":"15.0.0-canary.56482dc2e.0","@material/elevation":"15.0.0-canary.56482dc2e.0","@material/feature-targeting":"15.0.0-canary.56482dc2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.56482dc2e.0_1668722116197_0.6004210495549196","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/menu-surface","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.953e689f3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f38f52b000c7b10b1cba79765dde367f4b75d55","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.953e689f3.0.tgz","fileCount":36,"integrity":"sha512-1I2l7T24pR7Ms6OM7bJnjqDWBltV2yWDuEwrz7lSRfZJU26sclFTgNOwS127JUjYidIl7gb/DN1taI1ggG3GvQ==","signatures":[{"sig":"MEUCIQCmcnLyTzP4hJTtGL0EF8u1gazqpkKWibrekL+v6cTcGgIgIY1XpZLR5nzXcKMKVeuzWmpwCkCIOdru538/FxxP3wk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq/5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohCw/5ACIo0SFjjYNC24ui+N/LR4bcv/r5/zcYnTGdIOtFqzj6/tTL\r\n+IRfOLkqZHaXbXdYu0qCplmpQmLmaXpXxs6PE0xKnMcZD29x7lMyyhv5NhB2\r\n0aTJfS9ndRAfFqgc8Yro+s/qHMpqmIfLubVUUTjsIizzQ3APYa5PVmgOHTJb\r\nGqYDHpX57RhwV5drSpo4Hp/DPh7i9YgW0YfH1E6DsF735u2LWbl/ZZ+LsEyI\r\nvTQKh2xuoCLSL1LrCHlo8N2Xn9WM1UtJILRE4Itq/qz0ujwNT9BHkjj2CVdm\r\nSkAZEQSNZn2SMkyj5arqDJjDj5jHo6Dei49UaaKwNmFc0wFJ0H9isnMBD9HF\r\n0eB67/ozKTiZsd2ERCxGibw5Tfw3wRP1c+hnC1TL8NvTw/orKrzPGX+zfCNg\r\nKfZPEUkzcinxwBiFVEnXSRuLxRdZRm0gQxai9WXDCamRi/RgI5qHGJ/0Knsx\r\nTkWkX+I+E5AT+HPGfXsML3Ru4NPXp3Sl+27/3odVHSf+LUwSX2uU8k5K0C2m\r\nMjJ2x8ihD+gWyBHYlkcx949ToQMcTluWDWCVhiHU5Qx8DA0W1vA/yYGAShf5\r\noIQbAx7PZM64lklgxU1e7dpb9tttv1YaRzzzwZIHJqNWY65y2l9Sd+O5mbS8\r\nhZ2aMyTfnAxDlDMDMAN3HOWuXrPVpvG3i5c=\r\n=YfBD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.953e689f3.0","@material/base":"15.0.0-canary.953e689f3.0","@material/shape":"15.0.0-canary.953e689f3.0","@material/theme":"15.0.0-canary.953e689f3.0","@material/animation":"15.0.0-canary.953e689f3.0","@material/elevation":"15.0.0-canary.953e689f3.0","@material/feature-targeting":"15.0.0-canary.953e689f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.953e689f3.0_1668722681059_0.3224009490725337","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/menu-surface","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.b5606a793.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97776ba1fd365b42cb8c795322c0ecb64eaa5b04","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.b5606a793.0.tgz","fileCount":36,"integrity":"sha512-SHvVWMg6yGw4RDXX9/NF7chZy1khUjoAWrq7kkceH5G/Fr5hwlz7RfO+tD1Rk+vmseWPDuLDi/pFF9KFuJPKmA==","signatures":[{"sig":"MEUCIQCwE+2tcIlHGCb/I1nze10nlCDqbSODNkjQCdvFcubHTwIgZrfUaAPYAKc7BVnuJOc+xLD4uuch6mj9gB4x137rTKU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1yYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7jQ//ZdWsfByU+m+5jSyHL0JkDIS3dKPfd1JuO4pHYMA3E1Nec3vM\r\nKc7Mg85hZqr0UVIy0cyL16nWw0Xpiedy5RDmg3G7C15sXrxcSkesqXUXj2vL\r\njLgCzTzmnKZ7QRDqWDQy0yC5pV7mWezlm7jCue3i4Wn2vwTmWy2bUCQeT05x\r\nP0zgQVsvhQ36zsPaVNmZalHoCbX1eyT3+DDF3TiqFUqy53rJAG6WiBxJYw6X\r\n/ebaIrxFWIRNZXcAsKugnchE/oZurCBn3jZNqWYSGYNHaJ4jhEGKgrCr6DDX\r\ndl0PAyisZfEDgHkfPHyjP0muKHmV7vcOU2jMZRmdZfYKmInL/MMeUWc1I59M\r\nQlFcIfE+NCbRrQiiVk/BA+nn8ExprPWaMI0RGppowLsc2qiqM4tlOzEvPK8O\r\nQjF+yByp4jpOCwjVbeFAqofwAO4zjUJmdC9jkAOq7I7nXibvCN8j6r6IQl47\r\nBbmiRsYUuy2Q8W8P7H80gEA93MoH8g9/aXqnkZv6CnxDn/ahPZgOATJdO/3C\r\nif9I1UvM/bAEC83jYeawK030X0Z/j+4eR7rcOEp/M9dIm5c1m0Cm64PvXG7v\r\nCeE7K1Ae+kDByfh2T5GwwHUSEKuzZN0ncij/GrvDocIsp4m+Te8ZeRLlY288\r\ncvY+b1nlACQlgvSHBgd75ingPaJWLPj6eI4=\r\n=z6gk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b5606a793.0","@material/base":"15.0.0-canary.b5606a793.0","@material/shape":"15.0.0-canary.b5606a793.0","@material/theme":"15.0.0-canary.b5606a793.0","@material/animation":"15.0.0-canary.b5606a793.0","@material/elevation":"15.0.0-canary.b5606a793.0","@material/feature-targeting":"15.0.0-canary.b5606a793.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.b5606a793.0_1668766871947_0.29520280993761183","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/menu-surface","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.8c5675942.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26da1330b347691c15f22e3ad955e2b74413eb40","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.8c5675942.0.tgz","fileCount":36,"integrity":"sha512-VHy77+pL8jZi/hy8y4bElExQq8iW2BxBsJl8lUVvdW5hjCwQ2wnrOETzWDnBCEne5BU4B26LdS8PhAD+vQW9WA==","signatures":[{"sig":"MEYCIQDC4ApqOIrgIN9l611HWc4AU0R84BuK+Q8RVrB6RyLdTQIhAIfCiuxEcG1PmrMmbjRXcXXc4b9fjg6LgzVITsw9pyE8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6HEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqi3Q//apJ0HT//7J/j62LviN+L813UmZJLRUCelHKrsPy7VRzEtKPB\r\n6iWlYatalM0WB3+YyDUmFukNVuOquosHW/idAsf52ANTN7rATYKHXnqte5l5\r\nsCzpCfnYe5fX2s5PQoUyzYSu9NGbQTp7Z3gQQEqE7RTiIs+BqtmWD9WcNhjj\r\nd+gVLy/heXeRjCKZv5zWth4bGA5YhtMkMJ8INMVbxREv1myVl3MU+05h9now\r\nKifxGDhSc77lu9g7PnUBVhVfw//nYRN+pr8RjCCz4Msy4OOQ2MhUYlvgnfM/\r\n5j9SE1CkqKMxr9rydvZudyoBYy1tnMSmrzbpjI084oaH3Zm4rRwNNnQp8+A1\r\no1eTQPB71Aov/1ob11NmSidBPkseIYgqpZP+TRF11jWLJ0QzvGeVpmNQFCPx\r\n58AAtOD8SRxmTZFEiPBh9ihXKf8eHO1OOttXjRvM5fTPOeuU24e4Re6Kv7Lm\r\nrrhBvvMPS5M/M5jWkNc5kH5rLjDKTxth+zw7RrQ22rZdHTRzGspiXfYu1atr\r\nQUuH6AOpFsL9ATV8ooCFuCsZsC/fyi0/tsM2NJBZZmnI2ppXtdI0iU5mhwIT\r\nQOfykFhH6LytsgL30j8uJ3dr6RnvNELwb4bPrS2fPnLz45LR9629LmlggozO\r\nsWKp9RbrFqxlOSRfvgCzIiJl9I1Wu/IH9zQ=\r\n=aC0m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8c5675942.0","@material/base":"15.0.0-canary.8c5675942.0","@material/shape":"15.0.0-canary.8c5675942.0","@material/theme":"15.0.0-canary.8c5675942.0","@material/animation":"15.0.0-canary.8c5675942.0","@material/elevation":"15.0.0-canary.8c5675942.0","@material/feature-targeting":"15.0.0-canary.8c5675942.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.8c5675942.0_1668784580257_0.25722938637219794","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/menu-surface","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.697fbdebd.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7fafe098ea5d0922a762b3fe8341be704a655f7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.697fbdebd.0.tgz","fileCount":36,"integrity":"sha512-zEGmZJgIaX33763C/c5WxowxUZ4XbMzgdoYv53dX33Tu10OSNA6XmWMDo5hCbj4gq4oy/zPsRcUu1v3ajeiJOQ==","signatures":[{"sig":"MEYCIQD2IpULSa+n6fbfz6QteaJYvIBLxoTvrhWnI4+V5CzQoQIhAN4ibf72cVejWDtXZBYQrbjCQ8O9/+yIMbk18HZdRs/E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7o/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMFQ/+PsbmT8CEks2bZxWy4KUXhf9yxDRy7JfyKIMZEIZi5LirxLwN\r\nLPhjY4VLks5bfbgOq7JWE4IoTAskZ1l5Qlpv++E+BxOxorLRTI5p/K08/36U\r\nUCAuRGiIj0ViHT8xobDaw4GuyYpLy+TSFiwmMvJK4PfiSqAosp3YcUJmyOzm\r\nZDHjthgI2iEZ7GyNWvY3HIe5Om386SyUocDOB3J0rPNrSGYYwQfMb5e1t742\r\nwQBBAl2ZbGVwJKda3dOPO+DjKK59U8BT1b06L0Rwbf5KZt9cY3o8HIT/1QEf\r\nBq5SXfZfTDyXJhHcEj4IT6/mtDay82Zbm3RgOrs2ihBVMIwhgv14lD+yEShE\r\nOFQyi4U5XXoB/UFUN3XCDSfuboMCEDClsNxgRrGc8kJ0mHdjB1HLAATUbWhD\r\n7YgL6SyAeIMbhnagD7Ze8jgAkmJKPc0aXQ/TUgzLjqtNDLLq5shZEWOP0wtY\r\nSbV+XBL+a26UXHQD8kjyDC8gRwqVhsc9YUmAf58raXIR/pj/M76PHDJ3EXLw\r\na2YX55nDODDhQhd62rtI15mbzbnpYUfBJ8dMkHHFCgxOLSvKmjXflKI0o4jA\r\n98CpDB+W3wI7kYtBnSO46xge73tm5cFSLnWkWw2cFT76Z+xpC+YeKYDnKUfG\r\ncg6//NsKvnas8gZO9kddxXhvJEd5GsdLlIc=\r\n=quDY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.697fbdebd.0","@material/base":"15.0.0-canary.697fbdebd.0","@material/shape":"15.0.0-canary.697fbdebd.0","@material/theme":"15.0.0-canary.697fbdebd.0","@material/animation":"15.0.0-canary.697fbdebd.0","@material/elevation":"15.0.0-canary.697fbdebd.0","@material/feature-targeting":"15.0.0-canary.697fbdebd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.697fbdebd.0_1668790847323_0.16814171679432266","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/menu-surface","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.d58410453.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0294354c7cd609f542e3011ecc207a08e0896f71","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.d58410453.0.tgz","fileCount":36,"integrity":"sha512-Lkw5l6E/9j84ZSP3DkpWZsjIpgHpFZhmWMxMeaYfyCN8R5R4JTjvJcKQlwOGvQurJW/3q00ClpmLveKSC5Kwug==","signatures":[{"sig":"MEUCIQDh086vsNNw83CEgf8IMJk82MrgoN+PO8Wxk2kCRsy2JQIgLYQbJipPdfAqW97t+Fb6Cw6j0JPoWe/Y1DPrY9snKF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9wUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPTQ//SuT4ST3e5yWZ6y6FeCLXlX+Ed+StOhEpo9dwoNFba+on4BNG\r\nhe2g+07HhS3k2TNw0nDxVCXomR5TnGRtuOYKqlsgOaIcazz1FKdz/bjrbz+7\r\nTXU/9FDRpK8EzmwsRc2fo6NWvCJ8VxD/paYho8ShU45B5AHfaddnzw2CXceM\r\nkALwWePYn58GDat0rPLkF/AZL8Xk8iKhQ2vB4EkZiW+aARpwKV4cjGABr3UB\r\nDQSQIC236BP56wLd3jLUtod/WlToll1ps+5mfinsrYsmIWJNmd3t5IMjjhH1\r\niq7rd823fp0BqyMZAOAS9iwciycckYqz7Vp3c5Mftf9UiTEhEfzfoCHzspRP\r\ngJDUPW+VE8Z06mioFv8+RcINlE2tS2yvVI99NfRoQWoJm0UNjhTlhPUXxgNG\r\nElhs4Q+BMhGI/fncmUOyMflABvSb/Tkl8vfmYQ3R5icKjtQTJbyevq3vIMRw\r\n22qw9cqr0vHWf5HLozwEORYpnY1AwILS3ARAOdR/54fPcA1guLPhq2PtNyO5\r\nzG2Ts7G2sxcilAjpqdWTzUOjprRZVAkXFV5DXg3anCLgUJ/gQdDpbK6BLjk7\r\nS0aeIrR/XEAH5NpER0fGuH+p3eLHjMTbQvg4sdCCiSViNAUdOxQB0MIzpIg6\r\norSmiSVNq4Q3bSvLZoZCGzu+2oLlejgIFws=\r\n=znJV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d58410453.0","@material/base":"15.0.0-canary.d58410453.0","@material/shape":"15.0.0-canary.d58410453.0","@material/theme":"15.0.0-canary.d58410453.0","@material/animation":"15.0.0-canary.d58410453.0","@material/elevation":"15.0.0-canary.d58410453.0","@material/feature-targeting":"15.0.0-canary.d58410453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.d58410453.0_1668799507851_0.5841601907178946","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/menu-surface","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.7971d6ad5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0e54b74d8ee9ab1ce158621ab1af71b262c1d02","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.7971d6ad5.0.tgz","fileCount":36,"integrity":"sha512-7sRmwY7+a3gB5GM6Vl0sZzVVW3iu6QNW79vRias6nZKJMXbE/JDWnhcgkl9QkxvUolBIJ0y1ChgZyntO8Val/g==","signatures":[{"sig":"MEYCIQCLylFozEyAhJhDojdR6gINmrqMiWnZO1XOOdwmQq4z8wIhANg4nTCT5DluJ6mFmlAVOdTvyQdCUad9WDZLLfMbKkb4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJebACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoj3g//XOwwuUBHx+EvMeFb2TANRUnByhHlYIfnZ0QEX6gsW5/F3UJw\r\nlZWTPnYXe2b5mrsa9w6DHoxlD5YeTdBzWEeQXNXTLsmqHgyJyRu0DJ/aZMO9\r\nk7KE9tkDy3YeSlED/hbbN+5v5Ht/JE5XsypZRJ96pKZRE2YqPl0Ayrjit+7l\r\nHA8A3YUo25RKVUq03QRHMKxhw7WkExn6WqiiL4Lj2MmxI+4kUAxTPoX/MI3A\r\n2gzpIzlCHi7HWnRyo03XnRlLP17IZy+8Eh6wNAAFqpC9cp5yXNsqZLUQ1KC5\r\nVqbSRw4RPHvyfabowmvrVZS2qzoMq+4hElyhIJFWUJZl0NWn5bITmLAeWI0D\r\nQZYcPRfAcZDNXWWP9FmDUfEy39IyF0Cvzv+It+TZZ/PHQiaDT0jSBR2+0QbB\r\nVS3MGYmtoSJowwmaanNuWJnGq17/CmwC8YM9bk3n1AUkg7tRo3x/rS8H0RDJ\r\n4WWipReWM1p5jXVxkNfrRm6qWy/2JbVLKEsDrX2VjKid/pWNXEGya/3E5BXP\r\nYZW6ny3bRGY11oWvfIeM+DOrOHTGY/NXiE8I4Q5Ga0ywiHOPhS0Y1UWO2RTn\r\ngM7CN7zlLaWf3EU49pbpXWo53xCVKmZFLD3mMJYvz749GKApDUq72rfg+6u7\r\nJZkrTul/6lLbyhF/5RrL0zA3Hj23vM3Ii9I=\r\n=0HFf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7971d6ad5.0","@material/base":"15.0.0-canary.7971d6ad5.0","@material/shape":"15.0.0-canary.7971d6ad5.0","@material/theme":"15.0.0-canary.7971d6ad5.0","@material/animation":"15.0.0-canary.7971d6ad5.0","@material/elevation":"15.0.0-canary.7971d6ad5.0","@material/feature-targeting":"15.0.0-canary.7971d6ad5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.7971d6ad5.0_1668847514950_0.20421714621097964","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a0ae73b0e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94c1fffc497dddefd735bd70eb3eed4960107f52","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":36,"integrity":"sha512-YfwoAr/VTJ3jQYyr8Spq6d9MiYAjh1WzLw8aYumBXuhJjOKgFfvrrxRWWT7cybB9UFBFTd4sbbd3uergSWQFiA==","signatures":[{"sig":"MEUCIF+UdlyatPL7g0Ozuzk+dTUMN3oHwpCH4IcCsryCTz5wAiEAoxEt2S3tYHLOo19mQoSCviuWIhnWHavB0porew4hSz4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1i6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6Dw//dRITogaxOaxlYkrjZoOJBSC3t3qdaGtb2hevfKf6PPKaxSeo\r\nLQ8e8rTqljfDjl422+TSoqrkfdrVXbjrodM03l6GoYabD3dhK3cDoSocRRuh\r\nBq9/FJG18pKMV3ZEDmF6h/K4U2br/Hf1W09N5wQU6d8j3V6HYAKCIbpXxVkm\r\n+BH+LwmJ1rl0iO0bX1ol1TPtEw6rKPlH2knpcEVheer9k+5GM2xHmb4X0Kk7\r\nWHiY5TTeQn3GfzWB6eUU01usbwEZI9t40YWAp1bPbrGVsk1dZlnAzLTkLwBL\r\nik69HJmY+FY4wOVQnSeWemQrcIiby8te7cVF3JV3kVH7aNTKqIG6eYbjp0Y0\r\nOj5FDLc/sbt3QKc4HpLax3SFTvGc1/sxLEDzH/q1zIGvMMCckBcldlct3drK\r\nPN0WI1PPW66KbcCGCmC34rCEECVxdZRidq0/yM7c/WIuuxpfuHbI7hIlT99k\r\ntS4oNLUnYqng6C5tiWCM+cqEshtxdia85uKbHcVXeXbDZVW3MEgtvcjBEm/2\r\nYXCN7ibct577liJasU64OPPkFIjEncO5muDZcuXwTyGnRq/I+JXRicw8ykIj\r\njcF6g/GPn3ixSFqiEHV11zB8xynvoMljtJrxL9l4aXoVAL9Sjo9K9XM+Ando\r\nfkIYRqNFmBnooiLfmISBCtjMr0r3azC890g=\r\n=Ncb/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a0ae73b0e.0","@material/base":"15.0.0-canary.a0ae73b0e.0","@material/shape":"15.0.0-canary.a0ae73b0e.0","@material/theme":"15.0.0-canary.a0ae73b0e.0","@material/animation":"15.0.0-canary.a0ae73b0e.0","@material/elevation":"15.0.0-canary.a0ae73b0e.0","@material/feature-targeting":"15.0.0-canary.a0ae73b0e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a0ae73b0e.0_1669028026161_0.6471675319389265","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/menu-surface","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.96f472604.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af9189e26e19b2d88aa60533717cb13941ac798d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.96f472604.0.tgz","fileCount":36,"integrity":"sha512-DxGgGW4WBv94M66f2hkoltEIDaST5Z9I2sTDlxRQMW2KRRHcvU69uHBLORVy8rueNiq1ZPHOuMRtHmxMNRHrjg==","signatures":[{"sig":"MEYCIQDhXq2X26Bb0ndub8CLMgcBObZaYLJYV9UG3IscSxaGnAIhAILdUYfdJ3esch7g3i72raSFTl+TlI4YdhnjVYXbi3K7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3SbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+ag/+NYNhjK/+dnGwZg/t73cQRPE70hyFtQ/vUppxvYUA5pZkqHbo\r\nVX4K42GMA6L0rREdXxaImE4Rv4fVT6E4tGXL1MChlBq0Vc8b4l07nhQz1GF3\r\nTEpgydMcNSzJsHfyXTc5RLSTx3DwYN1zxbakZlK0bKsFxg/XbZtSf/Q2P+YT\r\nxwdmdoz7J9IdlRZTTlPdSYfLC4Z/jebjkkOuQHEB1KhXW2ELhlEhNsons1U4\r\nd/yhYvk/OHQ9CyEKplkpAFK/wsuXduDm7fWLfHO0INMalERQ7xcAbnO2V1Lu\r\n4CgKAz1EmKblF7HVbZnRZTN6u2LwoMH+ohN75muX6HjowcGAg6P3cPqc67mn\r\nP0SS9DaeVQxAuTwXtd7k3jReuYf08ZVijW0MhP8Y3P/zd59DLqDN2b29ouos\r\n6CgYn9/oGcOZrDascUAGEFbKcdLJGjb2xG7k+R/vXsSndUXn97fi4bQjOkwY\r\nHlbsggM57GzzOi0jTIj68AsqvPK8/YS7kSZ8EOqwocVvP7th087q7677Id6S\r\nNfz/eFykUlxyubtDhjDegeslAKgP7exdkWTza4k2BH5XLN/Or7RzIA5iGc2M\r\nc5QW90kKyAbtZIArY308xwerMTKrwsfDTxfpFEiU8c6Q+v6i7QlJ1ess5XtZ\r\nfIcVDxc/hKNCG46VVqpFbsEfdo8jUS6LCpY=\r\n=TbVA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.96f472604.0","@material/base":"15.0.0-canary.96f472604.0","@material/shape":"15.0.0-canary.96f472604.0","@material/theme":"15.0.0-canary.96f472604.0","@material/animation":"15.0.0-canary.96f472604.0","@material/elevation":"15.0.0-canary.96f472604.0","@material/feature-targeting":"15.0.0-canary.96f472604.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.96f472604.0_1669035162832_0.928826851605602","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/menu-surface","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.18b8f31e1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"046de5fe2a934272b5b9e47d6460ed954dc430d4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.18b8f31e1.0.tgz","fileCount":36,"integrity":"sha512-wA5yd4zqhGDQiraJsugthYt8pC9mAJ7tV+iCRr9yjSRRHwL9C1aHUXRwc3AnT4JsSOP/MYVqQvj7C1amF50CTg==","signatures":[{"sig":"MEQCIFUvdQZ/bTRqDI96VOg54+6pwPalq7LLtiIkkg94H01ZAiADNfueUriQx36+fjUXdc34wf4X0/q+jWMiWWiT+AsESA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6EWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqA0BAAj/QwEhDx/XhA6EcGpiY0C4XPPlKgODvmeDhtoYUlLy18wfSU\r\nJl0+Nbk2eIf9fXt8+CytDqqwBQymcr3M0Qw3olb2PLxqMocV4NbtnFi8gA5C\r\nekZtRn6VrDy42Xk5vzDFle0Ccn3Kcty/uTyxrhYwTomvXB9HWEHUJgOHrJOy\r\nM3I8i5Ebgq5m/pD/BCKr8PNkpR4bYOKJR0eAckK2TWpg27StkTWB3RRtAMp7\r\n9fIxiLGEVhFY7jaDGRDZvlHBYWb84Se8knXOZXg41jgmHiZCZMvpf9s8vQyR\r\nmsFd9VCBLqeT0SpPIy+8WUewJVrgVZ1trX17Pg1OwzaZFK5MWurQdUO0ZDWS\r\ngi/rxE597vhpjp+mY4fxoIbN6lpOYJnJ+8D+t59ac+cf/4IecADFS/kmEVj2\r\nIg4QnRslqdm/BAGRvkwoIIV9adsYIf6R751hdC6aVdghgDrK/rLj+4VC1dxJ\r\nSZGEqLIF2CCQYa0Tv23cbuMM3cHxA3CQhT/YOPldYZtC6dfuTVoSMfYZ08kp\r\nyXVFrDxXMywR/I215U7bBtsOroy33mwtnZE/hE8tjsG8N35bHTM2vpZrXbIl\r\nJIleJSPXuJKpedw+UouMc1AaY7c0DH46lASM3l6+kr+s1L1wxzyjaeZy/PwS\r\nK81AY/2Edcm8a1jF54/W4Xc18ffw0yQ7iqs=\r\n=cwct\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.18b8f31e1.0","@material/base":"15.0.0-canary.18b8f31e1.0","@material/shape":"15.0.0-canary.18b8f31e1.0","@material/theme":"15.0.0-canary.18b8f31e1.0","@material/animation":"15.0.0-canary.18b8f31e1.0","@material/elevation":"15.0.0-canary.18b8f31e1.0","@material/feature-targeting":"15.0.0-canary.18b8f31e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.18b8f31e1.0_1669046550197_0.7356532360465378","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/menu-surface","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.912f33ce4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"930d9c806ffce0f8a796352677134087f1278b83","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.912f33ce4.0.tgz","fileCount":36,"integrity":"sha512-ZI29/Xf4REzR1h1WW1mlY9mKfTVncPQYpeMY/lULB4bwQ0dttGrVepB73UmlxujwZlJ0/vc394BVSXOKBBcElA==","signatures":[{"sig":"MEQCIE8CBlYA9rv0p9JLNkBthDvISWhVyQ5RqXrTaI4OzmQ4AiByhodMsWnNhL3NuJj40aAbqVDIE2wP40zpZCxbDV6vBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7s9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrx6g//XjxWeY68CtN2U/d0sYLt6XswDdFPfwwB8ZBDFTQz9WlTAMWu\r\nkGuy9SZt0my+nI0i5905a2CEM5zuK/NwccWhUPpq1mogkIXVa654HBN0X5jD\r\nkdeLgmqXEzMgM+d/HuNECc4ORFzZHSKpZ6puv4nYzJrpb6PVLIa1mcY48bWw\r\n3/tWUwNJq1LkOKzv/uY3hc2jMlz93GIK81ZXm9RipxI8FUzXlmxNPSVtiUwS\r\nYyS5XNhmc9qcn7zzl+V58kmwRmxDHtKL0oH7/kvhnBC9CK3n0ypL4mpjkAaJ\r\niwzdFfOpoGQIwerodc7xcE3r2vVClPwSN2PeYxq7a0ASrT62Co3l2YYva1QT\r\n4OPXnEcEfORnqV6qrl8yHpdU6DAACQY9pfIWvoQMYMx53ZDa8jPlrqqoboQj\r\nCi644FPzxxBaF8ZYWd/PsEPtxUlu+8z10pT4iJ4P/TJwzWvA4op5ovKotdkd\r\nHrq4HBGXewptaLugxeY1tIcbOtekRPg+5M6p3vG7EIB0aVU0A/ljviCefERk\r\n8GbtqF3zW+z0mRVeTEu8N8KGWIiqE7gjDN9hhSIn8fqq0k0Ggt4Dgoybkpbw\r\nPVjXaoKW41Y8IAWGM8XbDwhS4cAYDymbp/5SKsp7MzVrJZGwfP1ylvUfhpTP\r\n1V60e+iIpg7J7ZN/xqKHxBapeC4x7mNf32E=\r\n=vC59\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.912f33ce4.0","@material/base":"15.0.0-canary.912f33ce4.0","@material/shape":"15.0.0-canary.912f33ce4.0","@material/theme":"15.0.0-canary.912f33ce4.0","@material/animation":"15.0.0-canary.912f33ce4.0","@material/elevation":"15.0.0-canary.912f33ce4.0","@material/feature-targeting":"15.0.0-canary.912f33ce4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.912f33ce4.0_1669053245638_0.28555393017805275","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/menu-surface","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.1e1b1c369.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c125319309687f148df769318827cdb5f99505f9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.1e1b1c369.0.tgz","fileCount":36,"integrity":"sha512-GLcM5bjgoEt1oanxmxzDNP3EDPJocUT5Fayv4nlkB95y1DiA1Wn2RVWrxtPDxAlS0E95NZ0Iru0EniVkQVcJPQ==","signatures":[{"sig":"MEUCIGGY7zSUtKGgmfT+l9sCXhgo6SI9Gfu738C8EEeLgDWoAiEA4TcI+6nNV/aORNtl8AvvxX3Cq1+tNh0J9aVev2RhzCc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm3WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpq1g/9GdjOYD2szQLVaXf1X8+aFIvYx+khUP+uZ44VKwKceayrmK/Z\r\nlAxWO6GTzQwVv04lcPP8lfWjipT7nxKgUDWD2oDPo4qmYYbqg0t4dQOZAgNr\r\nIaKv0VsDFy519GGlNz3kOxQNGAirYRYINcRXckVaFgPAdLVBllOIn4jQ1pxM\r\npx+92qaX292WiWshi1kqrrO2N2tY7DtqlZP0TLi+SpW+LdoV3wRIKYA3nUu6\r\nlm0UrRnTpIl+FBv8ANzegVV8n+K+XL8F8Qb/4xdRtMMBOfxKtIJDV8HFb8l5\r\nksiSZ/dsFseSKnhq2vtOp+PlPGbvUxfyHVldHNiMYnEzGLmX6LrLI5mgDSJE\r\nkdPnkATP2VtAv0lK1ftbREaiAKiGS1FRIZDLTZMCkiodpUZKvo2TLbKSsv7b\r\njiMApKbI+PXrFR07xekW3B7dexPOtWeGTgRR/dvHf2N6tMFRkeZw1lPBTe4t\r\ns7Ap5tNLEn2idf2rWyht5uqBIX+koS3BcKMxoOe4fDTH1zXckdDA1aZOn+7J\r\nTjX3X7QvCDk3na59rmCOJXfxunWLAVGFOsvMMZNtcsOSOY4vVM+9R08K6ij9\r\nmHxKec9/E6wbp86axagd/YHLF0JTFJ6s5X3QHZ/NRLTpotMWsETg6OU1e501\r\nag/I1Ce1PhYsiPbtg0IxkNXAYXSAqoEt/s8=\r\n=jZ0y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1e1b1c369.0","@material/base":"15.0.0-canary.1e1b1c369.0","@material/shape":"15.0.0-canary.1e1b1c369.0","@material/theme":"15.0.0-canary.1e1b1c369.0","@material/animation":"15.0.0-canary.1e1b1c369.0","@material/elevation":"15.0.0-canary.1e1b1c369.0","@material/feature-targeting":"15.0.0-canary.1e1b1c369.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.1e1b1c369.0_1669230038711_0.8409961389947211","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a2ec49244.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7df49ea9b8e6eafbc2c4ffe566ff9d3951802e52","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a2ec49244.0.tgz","fileCount":36,"integrity":"sha512-NcvU6h8ZRPaO4q5fcAdql6xIZEwC6DGywDMXeDd8pV1nI3+/PV6cCIMbxJx2NwVxgb391S3s8ezNQNS28TPEbw==","signatures":[{"sig":"MEQCICgmylfReODb5UahBe1RZ0Tx3XSGNsPx+CtE+Lv7A3ApAiA5pjeakRtOOO8EnLJ6iMmJ92t6axNBnfM/leRldWs4bA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnTzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1bg/+OKXKENlPvggm70hWdkGvqBno5PiXSQUBBPbb7EVEYBB6xtXs\r\n4yrTA5v1w0+MKr+h2XaWpIFcJfqTMfAg3Jkh0lCcN3JgJ+uMfulJ0m1aNzk8\r\ncMHTygSyqshIsQReQ4I0g98xYZZkgn89KOmW/l9U4VPg93PUSNdfogkG7rEv\r\nsJLn7PvZWLXqNQoKnWBsdJSg0P/LrKAoUuNUyJhTbW7LkH9jr0PJHNL1Em1l\r\nhmJhCRGJwplSKugVu1r795/gNPp9q2rOIXVPydbKk2Z4ecTLiiQ48Lb40FpM\r\nvxwoVYwr7tOZ/NxzHZ3BdR0otS35JwZMMOHiJzsy3nvufZi18WjkAW93mK9f\r\nu5LlI9Z6u6BcjTkKzEyXmk/K6JZgeDbDEWDxrgPLSRCrIWVnlXkU7yJGsOHG\r\nxgYOnEVQK5doQrikXMnTckXSYUq5if7YZZtqXGinBE6IJIR9uip7VUUS0nD0\r\nzPiGPJCSE1hzz36I2yR0dO8Di3Nwyw/QmESQSn7QzASO2xuBJyJFMxakkXgu\r\n9W6SKyQjK+siSosSb12roTy/DCyjZM7LEYkWCjXukxskZWI+yXs1tu+kH3X4\r\n3OH1lPKqPyYZOXkR52jfmWpPRqROtuoixDFtf52FUDTUjNtMBLGe7agTN7cl\r\nmdX2yVV7cBn4I2bxvVQkNIaJ3ezfLbZlDxg=\r\n=7e3r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a2ec49244.0","@material/base":"15.0.0-canary.a2ec49244.0","@material/shape":"15.0.0-canary.a2ec49244.0","@material/theme":"15.0.0-canary.a2ec49244.0","@material/animation":"15.0.0-canary.a2ec49244.0","@material/elevation":"15.0.0-canary.a2ec49244.0","@material/feature-targeting":"15.0.0-canary.a2ec49244.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a2ec49244.0_1669231858921_0.7026732993612241","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a7458ba0b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df1c975b2686da6c7448fffc68ba3844184a9da0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a7458ba0b.0.tgz","fileCount":36,"integrity":"sha512-SGLIJ8/IC139gSjLiWU0k6/OfTSxP/J4h0xkexut/RxRzsNDFjz06eOaOlSx+9fieXFMlljpK8maaCeOCIqC0w==","signatures":[{"sig":"MEYCIQC705KHz3myzYjhPw+B1VKdW1zVUgN+C7XrmUYcENPxuwIhAILGhbXaW73IuPpNtIYPUXS4fN05bIrzIaJ3eqEJS5sU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfn+eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZ4g//SKZO5WOE5dsP+UBcOevLPSlAl8/kN5W9aMYyNclWED+RKEXG\r\nO6WhPWCxVzkNAwrOIyeP4ay0jj12fBMj9Gn/8QXWfXc2E+uCWXM0o62LNu0e\r\nvydYXYfl4vaJaHmcTmy6DwFmgaW6J614fwphHjh+PqHI9IQK0YjtVKf61Tnh\r\nNuyqruRNlYgMJN5GIEt3qjbgQhwJZS8BJdntl6jtk8o/TWsEvMYkXJKcDqfV\r\nbNupnvGFIiZW+r4Otpo3tNZ/eM0tkVgvlD8q1UcvKXFswU5/hDCfpIeYtYuC\r\nxkUKtxAQVXLnOnRNHe8rVz0bCNoI+meepqeq81zVCuxByCoLYxHFYa+VoEXc\r\ndqS6c9524786FtXLgSGAm0FFkumPnPfnO4xVRsA62NNmyMbDOuKtqNyRm/7e\r\n3Ky6LJ3VGf20fNaWfuEUG+Ld0qe9SZYjWdJ24TxVAwbhR1kNEHYwOSpgAcNA\r\nvNVQ2hRGmIDe7eAqqs1TmWO+ns9wBrhVIyfixN2A7Tjhm/o5SThZCpU08AtC\r\nNRaf0/w+O/qE9GpZ/g70EBwzjSXlTNZNWRK7X/WkUKkYftKp+Hbrze/V4MMS\r\n5yut1ya86ZnD2kE+7NtSODwfJUu4iSi5b5PqyjI0aOnS/D1VIndIG8BLaG2S\r\n/9EEcHWVwegR2UYsRf743SsvgRpfx+lAvV4=\r\n=cfLI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a7458ba0b.0","@material/base":"15.0.0-canary.a7458ba0b.0","@material/shape":"15.0.0-canary.a7458ba0b.0","@material/theme":"15.0.0-canary.a7458ba0b.0","@material/animation":"15.0.0-canary.a7458ba0b.0","@material/elevation":"15.0.0-canary.a7458ba0b.0","@material/feature-targeting":"15.0.0-canary.a7458ba0b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a7458ba0b.0_1669234590234_0.590840190655437","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/menu-surface","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.7c35e5036.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0f390269ca4fd5f095e2af614a24a48c99d3303","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.7c35e5036.0.tgz","fileCount":36,"integrity":"sha512-tURRJTZASdvdqjJxs51LOO74sNvB6EGy7EmA1eoj58Dz9u2V/zIAgjjQpL8vllWP3QZ3LOmbEkv84v5kcD61GQ==","signatures":[{"sig":"MEUCIH2ikqwh2JWYiSMoMWQEirGpVCnxhBJGpuRR6OO4+pyYAiEA5TtngPPH67FHTjq/hiETG71XjF67z4EdxdQRUNSOUes=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy3BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpKw/+J7+zbyeUJpFJq5oztnMjevLSjxk+g3WiveDGvUMmLB6sp1m8\r\nxIuzNqMHyXadz6rCkQukKtU0SAekAfbYpHX4UuyI2vJmqPLkd6inmWo2G5iT\r\nSUeb5JYzLs29fLzRK0kcqBpCj6sKOqEzcltaNVvZzv2RI7c1iMH3VozMhBY5\r\nRHwAM17u0Zr6oBLyQrQo2XlmgK9EASmjaLEZD1buC7NJs2xOV+EMFeb5M4n2\r\n32Md4hhMNOROrQq19F9a19YAHrrDkuKA3C9Yf+VFF8Oj5V8zs+iYXqz3tmXp\r\nCMIomSjt2IQX/qwgcI3KbbUzhwWXeVvSOLsxehLLdpRvGntusLlmZvDrA2Ax\r\nZ2Pd9ESkWH0/+oqsHVbIb1Ph7c5DwECZmv5YkSeCGaoBM+WOt+ajqLC/JQOM\r\noZu9kuaDBn/wKLDfEkSPc9UogntVYVbz1RsBhnTTQwbLc6xef+MlMtXftTJV\r\np6j4at4z8Xn2KduYmNN7MdYq51Wld6SmgWc4JjsWVkOwLt6i+o95BirdrZ2w\r\nLZf/AkjRpu0gIytSaaZZYZHSXwd+kJ4JFEF9sxSIsGal8edQjr3rq4/EiCdi\r\nKzmeTUjlj6FsOXl2oykKWqqdpVO5f7OYeiZkHkuNUR5tOYKK2Zj4YK5AhwKS\r\n6w69BVfZ9jlpROQmhnQvy1OA6PWIgrSFXSQ=\r\n=SdRk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7c35e5036.0","@material/base":"15.0.0-canary.7c35e5036.0","@material/shape":"15.0.0-canary.7c35e5036.0","@material/theme":"15.0.0-canary.7c35e5036.0","@material/animation":"15.0.0-canary.7c35e5036.0","@material/elevation":"15.0.0-canary.7c35e5036.0","@material/feature-targeting":"15.0.0-canary.7c35e5036.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.7c35e5036.0_1669279168805_0.12428012428536062","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/menu-surface","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.4356e05c5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adb8d508772e6ce47aa476d1c34890d6e8a67bb0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.4356e05c5.0.tgz","fileCount":36,"integrity":"sha512-6MyCOFvh+yLQ/ykiE52/7t9nXyTCjgDWYc69BVCKM2M5H3/TYMLNuQx/UPX7zZQi9ePIheAMT2dGs09V5n7m7g==","signatures":[{"sig":"MEUCIC86/VegzPNanFOHh2tXNeO3wwWKYl5kwaY+gwZh1ArTAiEA3Etx32D18jvQJc2Xq4QUWNQfGKDAp9msCwUwZdbecNA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfz/eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrU3g//VNBf4EKzfpxbttvBsWbLtZZ4mXJ1o36nz64y+mdANwmKMFjU\r\nAnv+k6QP+pUBHMvLhXB2RzTcBm1WnIVxcc5UbEM0iLieT8mV3l/d1pUlkXhb\r\n0fQRQScdc/WNo6K0K4oOnts9Em3vWHg9MaHKFTv6szIWrj5qzFJIvGi8vMpb\r\nmAX39ShjH4ga0IKU3zWcGvdINMObM+Tzi9HvCoBUZ4uk0HXgJP9BCdsQqxPN\r\nuylhetK/HOsvzesdJkIfO5ymdZcaysrvVBHiwmoZ6rZa+DjWQJx00VOBJltf\r\n8OFOOiqAefLPHSKTW6WQfdYfilixv08+bitRusLy4SPR6+boMipn+bvQacY6\r\nTzoFQhpcskbeBiXTcOjkiIEffhGnJR1gEwRV9OVLDUCrAm5jkuoUZ6MAAgmK\r\ngzkRAzZdXBudBuSBYzTJnMhwOqbXZh3WuxFt2PfTsQFf1pDHwcBPCLdMt3Xw\r\nORwUKg7LkDNJDaH3UOalnClHaLVHeuovpBN0y0/jv0pdsZKCPyfoxVHjvlKW\r\nkodhxhiTlh5QQJXNt4YX6K+964yWabs6XHK6OYeN5Q6WXAh0y9g6mT6MTZ72\r\nWyXsU+UW+AYYFrogVNfoe1AohlwDcEKbdcpr0kCjnMor9D9PCYZ29GlibUl8\r\nUG7/D4Dmc/QYlFe7aYBHTnSlrkfWKhvb3fM=\r\n=jzC3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4356e05c5.0","@material/base":"15.0.0-canary.4356e05c5.0","@material/shape":"15.0.0-canary.4356e05c5.0","@material/theme":"15.0.0-canary.4356e05c5.0","@material/animation":"15.0.0-canary.4356e05c5.0","@material/elevation":"15.0.0-canary.4356e05c5.0","@material/feature-targeting":"15.0.0-canary.4356e05c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.4356e05c5.0_1669283805962_0.6528480102407079","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/menu-surface","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.cb605f8af.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c1ab7454273926578684b5494afbe394af14afb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.cb605f8af.0.tgz","fileCount":36,"integrity":"sha512-+jUxSf4cfEIgMO0IH0zaJzwwKdI530GSp3NiwhcYSKHLqGxZxPIVh/n6msX0XPZ8InFaMV9Cckar1E3Wud8ZdQ==","signatures":[{"sig":"MEUCIEY7uPUTJBPDejlCUqj10raVVkQt2GKChH+F0NHLL/QFAiEAx9UhPvUpxIdBDakfuh3+if/bLjvSA/OiXOodM8OYO5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0ROACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBKg/+Pynhq/0lMlG8l0K9gPS+MUwBo0sDJ6aYIJKUnb9dKXsLwq58\r\n8c2k47ofN1BMUF1hAKqHEana8yPySlPd1psdC4LhsDiI+7fCkkYB/9x1HT3l\r\n39+Hv1KldymrJaSxKuM0dt7sTYAb7HPxgOwrfLz1doN/9TiyjlmcJ41xv29s\r\nje2Zxkkg1faj8JMH30sofp1qMFTbxfSwU1zN2Oq3FKZKOF4DQSWr6Cgh8Bii\r\nNgkEyvv4xI1jMpd4jn164U6yLE5+UOvv+Mm4rl4bAwWa4HPJdclex3nYxdEp\r\nW9oT/R53stXkj534SZy3kRvLBimizq74tNla9rOiklqOhVqm8X4DoKsjtI/M\r\n7MCBbCOeL+FS1Lp9Whd9FnUT2AysnNkJTlQquC033mdjBdEArhP5hhrBkBMl\r\ngRlsasR1BDXxmYuJSDxY9jbzIJhZcgisG0gOf3RIdUGuwKVfi60qEYlhgfF3\r\nd5P/S4XddqSG5YdQ4WMBlqZ3eU8L5gyQ2Fd61F73ZQbyWL9HMGb+1v/aho3B\r\nGIiT4NIgIndff2N8181lLdKEgbs74Ph5D7DffJBUuX1mEprz4MjqsgV1zvVe\r\ns17bZC+dzJc5Fw6iDfgNBFmVaER+fZHI4a7HD8PJ6DPMT/jVBPI80ZCKufKr\r\nHn2Y64J2BF57kkAABsyPKEg5h7K3Zvn0Kto=\r\n=dIQj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cb605f8af.0","@material/base":"15.0.0-canary.cb605f8af.0","@material/shape":"15.0.0-canary.cb605f8af.0","@material/theme":"15.0.0-canary.cb605f8af.0","@material/animation":"15.0.0-canary.cb605f8af.0","@material/elevation":"15.0.0-canary.cb605f8af.0","@material/feature-targeting":"15.0.0-canary.cb605f8af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.cb605f8af.0_1669284942644_0.640071744538494","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/menu-surface","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.05fb07f9f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb1ced7bafd933dfc1cd805e455333ea586709db","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.05fb07f9f.0.tgz","fileCount":36,"integrity":"sha512-nqYN0NY3Vfd+GW4Z8wn54+7ow4WMEus/xysUyKskGzjDwoE9xBw2ElO7TVKh0vORxjJzFfvlSUPCiAt2xH8IAQ==","signatures":[{"sig":"MEUCIQDY42oZOX4pLXQcUpYxX2I+mGU1tAzKxDFsc1K6/GR6AAIgYCw33QoJeiQ7AMZIR3e2hD+ujW7ZGS5lNxvOMm5VsDM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6ZMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQvQ//aFmHiry+QwxSW6yRnnfRCxb+5P73XJAiUXt7+667/yb5QsoI\r\nhunnBr0eC9i5DS/KKuUvmkoIKNI9OtSDgYB81z2X9aucqPODIVa0V2nUWiy5\r\nLTC+AZnIYvFjn2LXVo0mT96IvdIXQJPVLH5uJzV3UKCVU/IUV1VSPyMxxLe/\r\nhHv7QKHNdK7Mau2ZvOh9S8zpeBu3tHIja/E+hwyMu8brs3lPzBP7W+af4Yug\r\nwUKgcSv009xmP0LDynE9sgoN5GNgOd3SEScAbNHmLClGLXcUJLGbfMyn4eyk\r\nH7JXHBkehlfqBF5fdqtQ/LQPdaDS2r7bj23MVDX8BLmk/k6B3D/zB9LTqYw4\r\n1Qc89KnoSrqvQpMLlUWWxdk9gZCAjlw1HhLElFS67RF0Tq73jNGeYuf5Kg4l\r\ntikdzX2miTjy81cT/X/nZVAnAoBcE6vTJ7Kg6+0OvYe0Z1Lbber5hE6D3XTW\r\niyNsmJ25EWRLXUwjEm3obyo75pE1BHX4Dq14fRYlMXYbprIg7rt2vJ1Bwhtu\r\npsAj0ifP9jsoNWRBFQTznWSJRZSZ3D4P3EtcpPkBD88kdh30DR/cJzWhrqXr\r\nlLYPH0prSmH6S56IytzIDAHUB9JduiePWwv1iiRxl0PEWLErv88X0bHXJizK\r\n/OH/m5V7iSKgbBWoL8scCvYpeXvstWS29mY=\r\n=g8Qo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.05fb07f9f.0","@material/base":"15.0.0-canary.05fb07f9f.0","@material/shape":"15.0.0-canary.05fb07f9f.0","@material/theme":"15.0.0-canary.05fb07f9f.0","@material/animation":"15.0.0-canary.05fb07f9f.0","@material/elevation":"15.0.0-canary.05fb07f9f.0","@material/feature-targeting":"15.0.0-canary.05fb07f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.05fb07f9f.0_1669310028308_0.3027805472919285","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a911b386b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbc84c5b468361298859bedbb5ea4c69e243ea84","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a911b386b.0.tgz","fileCount":36,"integrity":"sha512-cPdg/a5LjVcKDCcMypNbJ7ar0YyflvMaHSzThfvdirinkhw+6LESgKqv+adEfF2K+wv/Kud4w/VtCYTtmjupkw==","signatures":[{"sig":"MEUCIGT87nm/Xzht40qdLCKOwAawt4jmv8xNK+p7FlUhrCZ0AiEA7YHCtD12dO0+COGVFGlunuUKvMuDrO4hVsnQ4n6iPHg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOYbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppoA/+MU8gEb9TSAUgdbtycxJoLXmH6VzzzG/SqTxn3Droe+k3WKJv\r\n7gootEiJKGr5eT4ioEghI+KksEbNLVmPoj9uSL9h77IVtjC9gF38orlf4kMr\r\nqtklEw0njCb+aJgSM3k8ajhNsnD+5u8vWqM7Oz/Hk2h9gVuLYxHoX4TxAQiy\r\nMOVJBinsMdDzTinSEMbGNSyUbPlRTd9TQFsV0ubUIBezaSvQ5qOC1rlAb1e7\r\nHn/02o+8TPPh73Zv4EtXYZLNuj44bP5Dkse3gGJxqX9ytSckzCO4EJJZkcu8\r\nPQhlgESGZGUc8whN4gZh/5gpOfTGvdZKI08mnHhxrEqx4YWhBxzZqwsTKsTu\r\nkgft0Dt9mtRxVq5dPIbX5a7R652p+JXo8ioqUcrssiAGoam+iacEvqYh09oe\r\n8FSuLMt1EgmBAn07xcGsiHLvORLt8fnJXyRGTOIZ2ZJAckxPCu2jV2r4wXsF\r\nmPPvnqhrFQ85AOOrkjJKvrqUfNlCZRseeJuKC7IwjtKrAOr71Y4qe4pLKsJr\r\nc6iiTZIZ49Ux05HSJqUPRq1o29ZOGo+enMgXaSX8O09ZPvfBDriRNL3VSkgT\r\nslT1Ij9B43jPJsO/xubgBj1XfPPJpDgxBnkHcOjp4Y2YCw7DvIKWDRGK+F8M\r\nlv23r+//fpgASndpLVrrqIYNlLoC7d2eXPs=\r\n=/wZI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a911b386b.0","@material/base":"15.0.0-canary.a911b386b.0","@material/shape":"15.0.0-canary.a911b386b.0","@material/theme":"15.0.0-canary.a911b386b.0","@material/animation":"15.0.0-canary.a911b386b.0","@material/elevation":"15.0.0-canary.a911b386b.0","@material/feature-targeting":"15.0.0-canary.a911b386b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a911b386b.0_1669654043087_0.3406357184288562","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/menu-surface","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.2aa8050b4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e335deda55f9ea5478ce9ae70260c9fd030b2ee","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.2aa8050b4.0.tgz","fileCount":36,"integrity":"sha512-6oSePQBp4/o+QhmaBDvkN3qLrL94y6mWAYn/yn8dhWH6ORTyvslPZhC6gv2yJOJb0oNNKeuhaS/gF/eEftAt0Q==","signatures":[{"sig":"MEQCIGXrQWGU+wplxYN07tiu1ACWfSn9logmUds3opH4Er4tAiAgnpTP7c3xTk55mxXi20pyDj1SmGe91ba/3///feCFiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQfqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmro9A//RxlpMm2olPQjmzGr0v8tS5OgH2tbUmsPwduRU2T7XEIzScds\r\nh0cWgxCH7HA3YXaoZ5R5aOuz/s7/3zI2a1B+1NHZzVWl/fY1VBcCT/I6wswG\r\n5a2a5B5kfpkfEoIl8NNuF8CIugblQ9VzI+JAQRqhJHVQuJSznCBB2FYtvwOc\r\nPAwbign7p+6/GCNVreZiEnogYr+PJPTG5de/dz9gv8mvaARktEQSWTrevVcl\r\nfOHUkASP2U8U8WzXdHL5ltQJACH5W00KjHAw09mZ9NbCpJf15IrdSbQeMz4v\r\nTxRJ8stQPlD3uJir6mw9dAxBOWbd3odaB35yeyYKjIQBf4aRCLqoHbGrqI3S\r\nnlBFmG10HdJW6K9IMTo1wUuD26EnHbmQLZGHR1hAtF42Oh1XcrJUVwY3aygM\r\nU+7adOc4tcv8dS27bhTdTwoxA6oTSNotegcOkNbhFrmAWIg/S2zFTSAHLDPy\r\nx6Ddpdf5e5ye/Sxz7TswzjyoZwiZgVJNbCzr6yFdVRF9EJ8PaDWp3yXn6jHQ\r\nbs08FTnZ7bbMt946GipqaJmNA2d9nWmdMUTnwnupyRlmuDz6V6goBiySJ74j\r\nd0C3Zm4u+xLEG960Wqfj+i1F/6oJVKK4IPYI5XYV9kyj4hYd+HMf4X5OFzNp\r\nICJSzdaYUZkKJpS8DmF2t/MWI1nBl4J2tX8=\r\n=7Mbr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2aa8050b4.0","@material/base":"15.0.0-canary.2aa8050b4.0","@material/shape":"15.0.0-canary.2aa8050b4.0","@material/theme":"15.0.0-canary.2aa8050b4.0","@material/animation":"15.0.0-canary.2aa8050b4.0","@material/elevation":"15.0.0-canary.2aa8050b4.0","@material/feature-targeting":"15.0.0-canary.2aa8050b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.2aa8050b4.0_1669662698402_0.16266652483802324","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/menu-surface","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.323904a9f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9c0c6a24bab90fd635680b05c73658a5c4c4979","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.323904a9f.0.tgz","fileCount":36,"integrity":"sha512-bIOajo6hqET/NNF0YGN3guScpsXx4eIqz2fwjassWVgVdpjnrr5OL0wf4t4/C2+2xtkZUhZ0+Qcrm6cYC3EDOQ==","signatures":[{"sig":"MEQCIEr3LJFk9XiqTCZMONZsNZ9FHcGNuXolbVwM4FiV2DxuAiABmcYhliyoQtDie9W3o8IJZMW9OzH0SUNIEEkCZ34PRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhiZoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDog//asdgIkQjQhQtZTSFWpReYQGkBCynd75mAn0HHcC33FWb/Tdl\r\njVy7iodVJ8tDQLArUgBmT7JLNycb2kTcYRDYkb7krOOGhBJ8GJqbyoT1xZYi\r\nbYi/hE659N7i4teqH0UN8Bb2PQBjU0fU9mqxvs5TuBDhudByijfLMzb4BbJO\r\nw9apECaQjhmH1+pJ+MabGFyjwEFQkm00He8N9QP8bd7xHnXuBu8bEgVsUOLC\r\nR71hltmiCPNVcm62JfNoCnOBTHlMMi/ho4zLRaH3xWbUHlSIfimkMnGzncsh\r\ngV42X8t2I9jGKqYa+xCPymuHL4blwWJmdyRPPGYKw0qQcawS7jdi6M/R4vQO\r\nkUg/SsEdooQ6WzhZ/AmTvISOgjStJJxLKu+9ajGi/7MqlsSHvazVRMHgMBxZ\r\nBy6RP037fxE0BjkzvqPWXhXkJ9ggoF3uP1/Xi+9oVNc26gjX0cFI1fUWd2qu\r\nJD6m0icaFCtlRKx8fFWCOtVR8hV2RNPyhQQWjfRIMCoy+wp5ZiJVrpwWl3d6\r\ngfG4TF2fkQ3JPYi/9LEOuAt0uBEIwb8A6dNOvrDsSNJSkBLprx356BOX7e5/\r\nZblVRoJMJk5+qc6QRwPNI5HlqANy/qwfjvSYNzavA14+rC+kTYa0EPnb83Gi\r\nov0yO4I4qGOL3IUXR37Yv6rPGfmA0RpChYc=\r\n=JaKl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.323904a9f.0","@material/base":"15.0.0-canary.323904a9f.0","@material/shape":"15.0.0-canary.323904a9f.0","@material/theme":"15.0.0-canary.323904a9f.0","@material/animation":"15.0.0-canary.323904a9f.0","@material/elevation":"15.0.0-canary.323904a9f.0","@material/feature-targeting":"15.0.0-canary.323904a9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.323904a9f.0_1669736040666_0.36348961184402406","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/menu-surface","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.168a629a4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f0ff710ffa0efb6da7cfd05adf0d5d5cfc0138a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.168a629a4.0.tgz","fileCount":36,"integrity":"sha512-VdCqkZUEJs9ZRt40vxvQr3lIR7rHt31TFpa1MQmsQBYAfeCqoezToqdfr18g29eKYFabcv+/4kQ93VQMPNh/vQ==","signatures":[{"sig":"MEYCIQCoc+++DMLVSYgOhGuA5pYUVOTt4XY3Zf4ZT5X0feJ4vQIhAKUdqAcHrgN2WeKXt5Yypt9ok/xLF+BYUM9+QKwQuFjD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjf3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqt9RAAhDL3M8wDScxEzSbS3tUEovJpLwgFxDysnBTHwmFV+YYiKHa8\r\n8Jzdo9yAMUwUrx9C9ctbimEhi8n5pPUCjByVlnDec/rSycf4byQxYwAdDlGs\r\nxgdZGj4Pn+PFCOixBae0DTA+SG3Koy+kxth1L+cbwUhdY1QvmvEeXaDU5fIr\r\nBWT4mJf9DxmJePe3tOBqOkTo5BxCWLnyttBuFs9xwOvxS2cwaxVZkEXUALyj\r\nF53Pfc5mlDWXDdQDqkJtO1PnCbt/+pjEhQQ6RH5hEx/1PCMipyq5mU6ZzdhZ\r\nUUe5EIMxlERUWqL7hnXc6Vt1DAKYHnMcpKEkk7SBgoWWEMO/LYR/7oathVbf\r\nUhlmUQPlUlhuw21eYF7oBj8Q3IH3utoKyR4dw/bcjeh+xW+TcSJ0hYayb/LO\r\nwx3vSx8q51Z15NM4O9I7zngOjIeZiCoNVtC4xzjLzmoZcWT29gDe5yY5XpiL\r\n9BhyAvErtoUN0W/Ai4udXpKwhuGg4I9Yo+sGSlp/XcF90DaWgt1YiNqAEyu7\r\nuPywU9oRjKLWm60EEqeHxBkbb3DJKXeOPVCzd7xJrhc3Q5vTVz+mPHE4TLIT\r\nmBI+h3M7nWxmvCR+0qm5wtWXLB6A/rqGRgFRwrV4P8ogTS/ZDpfajBpYygmN\r\nh2/xO+7+rOosS8bNivHMEjqSlkAJmonrtms=\r\n=+E6I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.168a629a4.0","@material/base":"15.0.0-canary.168a629a4.0","@material/shape":"15.0.0-canary.168a629a4.0","@material/theme":"15.0.0-canary.168a629a4.0","@material/animation":"15.0.0-canary.168a629a4.0","@material/elevation":"15.0.0-canary.168a629a4.0","@material/feature-targeting":"15.0.0-canary.168a629a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.168a629a4.0_1669740535445_0.961351065237882","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/menu-surface","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.65c411674.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03975c7e76efb783287dd4af787aca86c49217dc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.65c411674.0.tgz","fileCount":36,"integrity":"sha512-gqqlHI0IF1U49lt3HLuBn66nWDxDhhmrI5PJWVNmHSOLCR7quhPr9gAGlh/CpsVQQkhsll+jkAWmcIMUryaAuA==","signatures":[{"sig":"MEUCIHeYN/5JZIt8pAesEZj0FkhPYIXD/BUtbaqiBMLSet3FAiEAiSgLycUMzvnh6wQWhaG6dtTwOBFJ/509G2Fw5nLd+9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkOTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzFA/9FmBNbqi61G+3ULjaY9w4C6tGntm7TajPqWQJCFmFutzuW8iw\r\nJhrZp2HzDenW/fqqiRm8o6K1v+7d9zVUsocvfS3B5NpakTfnCrSpT8Q5juyL\r\nR2irs4IBLp9MWzPssX2plEc1gbIhPUFjzGTGKd+cigJetvTAXHI6QiAqmamQ\r\nDBlFMDvSj/kd26gMD3qXEtLFDSFwnxjkslpd4hijnE3A4Axl9rBY8osmn1qP\r\nH5g8oxK//14ZGkgwh3HwlIwZ/aHHFnZJMnSG+rZNrgnubI27t+wOMwawAROP\r\nCNKX+x/fa8kzNR5HJz/Ak9ZPqDVZlUbtCUl/1ybgyJlhs/hREc3dFtIDCBwN\r\n5tLiLjsyt3k8P06KoG+KOtnUz8lOxP/qXLI0J1EAeeNUUWuH72I0587sK4aS\r\n8w+NN4bjoW5UP/bvR9xgu8Mcpp1wPcPFixD/cSGaWMevQIDOQSTYEai16lj8\r\n29WtBFCFU3t+Ww3FqOyuVGB/ditQ7ScLxo8H/4N//WfXtS7fz94XEQG+949E\r\nlXDBouhG3j0e0CC/RM6CSS/yUSvJh1ainoAs+JSIzn9dkXNgODj0p6fDczGL\r\nG5+rdZX7F6dBE1qqHKAf0T2RVHO865TeIqhTpZjh6/DP0sSdW1VMg8ckrYuG\r\n1XPyH7vBU9gtUHgSoAJWOKEt82uE6w7iCfM=\r\n=JJcK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.65c411674.0","@material/base":"15.0.0-canary.65c411674.0","@material/shape":"15.0.0-canary.65c411674.0","@material/theme":"15.0.0-canary.65c411674.0","@material/animation":"15.0.0-canary.65c411674.0","@material/elevation":"15.0.0-canary.65c411674.0","@material/feature-targeting":"15.0.0-canary.65c411674.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.65c411674.0_1669743506759_0.4715526689488654","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a86d36fd2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"961f425fcf780c2fb6f4192cf4d16087b47ec0c5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a86d36fd2.0.tgz","fileCount":36,"integrity":"sha512-Wdzg6Sec0Y0OuGTAMs/N5peHw6Cwq15FxBlVE1AfTRYryALXkgHjJXQAwBuUy8VwALqYTYi1kBkBnrTMKjt2AQ==","signatures":[{"sig":"MEQCIDYjwDjOL25JizdEzkcvlQlx87tAJW/bXR1TY8SOcp0iAiAn3k0UaqumkZ97zzPi5rxsBqS8FaCi/yODNFvqrPcPUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhrx6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqI8Q//f53Tu1DBAQGy2Ct2XN4BpnNVMuaU54uSaQwkkxRre5U7Echb\r\nq7e3TlMLb0Y/r22BQsRgqeinUAEHiKtVFKAUw2x8GQiJzF+g5XFqOG+Q6sMA\r\nEnkOQ81+uBzoc56n3LF+8LAZ1PozkoZbHk+rIVHDlqcYsu8ewMPFpmBih+B1\r\npFba6IXlLRMJQ73iyuSYEPO4Fy8AkafuwYoWN794AIj0+HlQE7IugIxWHeo4\r\nGTpqMQskWhIXtc0qBP4uDR8MEHQtQZOBroOt9iLcmfPUGNu/u8yRWcIJ4UYY\r\n1946pev62GtyCERvDjQ+Wa6C9zyqn/aUEfG9jgkgYC3Gk0xfV8xlJLGdUI+e\r\nPgc61sfJfkjYPm+X1e9bP/UArSCwk9jeD19WyuX0TaqtGXC1plH0T3FDbPRN\r\nKyE+b4IwbrZsWh/eDwEe6WCZVr2qX7F3Qn2XG6warQZcx+QyPk0BZ+I5Qyaw\r\nGS+yo1SDo1lGhIs/nkaaMiXB0AzAVQ/+Xc3hvMPyinhQjlAiw6J4F0ozaEQU\r\nO9Gta/UyePO1UrkjpaP43JGsOvOmhS4nyPNiXgBFP78vzm1ykPkwA2kNHcKs\r\nqmoPKOL3vlBAZfUhorsdVTZLMb3MDlyM8rrJEhwuougV4fG8Jzagyk0SL0QD\r\nXkzGNdGbGbBR9cH/aIw0X6cxwvl+NGaCYAc=\r\n=0uV3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a86d36fd2.0","@material/base":"15.0.0-canary.a86d36fd2.0","@material/shape":"15.0.0-canary.a86d36fd2.0","@material/theme":"15.0.0-canary.a86d36fd2.0","@material/animation":"15.0.0-canary.a86d36fd2.0","@material/elevation":"15.0.0-canary.a86d36fd2.0","@material/feature-targeting":"15.0.0-canary.a86d36fd2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a86d36fd2.0_1669774458740_0.1742763742565936","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/menu-surface","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.3a1f46c66.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff95377632512de74018aa571d913f4f3d29f7a3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.3a1f46c66.0.tgz","fileCount":36,"integrity":"sha512-AGv3iI8zS/M1k4x7WTzZss8tLu77fuZ/Q9rq0i1geq3bgfaK+/e1V+onbAzhVs0KeAQpq5o1jCsXdWoUU17bJg==","signatures":[{"sig":"MEUCIQDiPXCnCIMWdTUY4LQd66U19aLU3aoRemq7jKd5ZC2NFwIgVJloId6CHKkk4myJUxbpr0W+gEMst+BvcfHTZ3rzROg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0d3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpt4w//YsfCLKdRacIrzjkLKIeAcfOY+9sM0eJjB5jsL78rf9qQwww9\r\npc5mX6++lzZV553GiFgOvf+p2eXrcRJChRGgvRvrqefWkIU1QU9P8RKwEkpb\r\n5/Lk++B+ujjX3z5p5c7Q4O/QYLb/hTlF3mW/3ngWWciDpoIQbsTjgWaL5cK5\r\nuLAibmIqktuG0SWrWgb9qHMNueGDhbGc1VIQerz+GylewQX47LUIlPWMltuL\r\nhX433i7mUKkX3AO4uEzuPBXhNO8MUGVrW3OySIa6UsdHIpWltmPJQNOkTd1Y\r\nJ+o9dzZ8YoKmbjrVJyO6B5MPLqGh+Zq7BayYxqktIadygGctFz/6uI2sr4PP\r\n+wdJCCrSxrt04FP1bz4MAUg+c/PKMSq7eWsQHll9KZPKCSbmGanUAPhay5b3\r\nzPUn5x47QZdi/jqM3IqZRLy4WItIOXU2X9gT8UW62K5aKpOB1L5qzfWMBpLu\r\nZoicYK+zCYOwmRm0+iXXGK7vp6OS/rnPHQGuGgyOqTWxjfNJJJGyzkqlDTFl\r\nawqBdLEOl6qNOhv0ht4naAeD+5B0nVMwZLHxvWU5Xpg4/zwNNil1Em/T9jnH\r\nWxbIu0+PvRAmUKA2zTP/CgfOniOvDBInBk1cwVcE470zIENaKtbs+etOK3Pk\r\nuqZa5Hw99eA44GwQ/cQ0dB+4S8wn6eWjAdk=\r\n=0YRm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3a1f46c66.0","@material/base":"15.0.0-canary.3a1f46c66.0","@material/shape":"15.0.0-canary.3a1f46c66.0","@material/theme":"15.0.0-canary.3a1f46c66.0","@material/animation":"15.0.0-canary.3a1f46c66.0","@material/elevation":"15.0.0-canary.3a1f46c66.0","@material/feature-targeting":"15.0.0-canary.3a1f46c66.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.3a1f46c66.0_1669810039409_0.48558769392149004","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/menu-surface","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.32d8a9648.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9877025b6b280db6713614fba0cc884ee5dc028d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.32d8a9648.0.tgz","fileCount":36,"integrity":"sha512-LYArCTeQuwN3d4pM6IcM7qmOu/8JE9v1EHP8nPoCnSlIgfz0n2lLrPa3elSEUfbtT4WUOgJ/Vn5I0U+473va/A==","signatures":[{"sig":"MEUCIFyrJ8fTSeQNqwuOofi9E2bCu2IPjr8cqO6yf5nyA80aAiEArZ4k1tgNqdfdICDKWD6hqhtTHpfPdv3pi8Y2J01GYH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiORsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvhQ//UEAYKiRK0wDrJQiJIKaNQ6RtA3SyP3IZXzATkPRFJ6mU94/c\r\nN2YFyvw0GpRrxVF5g3f4G2mbbpGUJkLD4X1EAnDCHW8jSceiKraB0KfvFHUE\r\nEODV/T+61xRuVlz7Q1bhHCwpf19Z4TEicoUbupgHmxfgZkdvF29QHM9a/9vJ\r\nUQ20wvawYJ9fNRRxJ45Dx/dABuB5PcKKMPQBjHopPB06FrthkW5qL5CB/II4\r\nlb+6WUNjIkf45nHk4QPLZBbtyxuRFH/dkdGbN719SLdaCllTbncW4V1XcA6i\r\nw16us1deKuIzn9p0pOfShE5Wbsv19Ey2MC3i0lwg2E89U+ln6lbfCVd4fZYW\r\nGOA71pwL7e0AQFPF0KF9e3WVkeGhlLH8l5fe/5xreRRiSjbyJ4x/YA/5BGJV\r\nBew2JNZso33XYqay/9GRshEtTPIM0JaknYnzm8o7AdFvzGpSAxtXPWO7pIWj\r\nqwh925CCbI5KH/hxaH96k6YNDsVdCTJLdU6usJcKVnAAfdoSi11Nb83q2t4m\r\nrcftGFXMwYqLEltQiw6djsEjOwOTqAfN3eM5sFhvZITi+v+7HX9EAp/M0uaZ\r\nCwhhh7AwTT7f0FlmmGOWfwYzUswGfYlkapej/S2APJJLIEIWo6khmSF44v4b\r\nwADeFW6VfvHPKcp2H4g0/Nv+sUPiSVnnR5c=\r\n=SSak\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.32d8a9648.0","@material/base":"15.0.0-canary.32d8a9648.0","@material/shape":"15.0.0-canary.32d8a9648.0","@material/theme":"15.0.0-canary.32d8a9648.0","@material/animation":"15.0.0-canary.32d8a9648.0","@material/elevation":"15.0.0-canary.32d8a9648.0","@material/feature-targeting":"15.0.0-canary.32d8a9648.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.32d8a9648.0_1669915756653_0.12876874026858443","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/menu-surface","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.03618ab70.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"011ba8147145a8f0138b18dcb75d8f114334972f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.03618ab70.0.tgz","fileCount":36,"integrity":"sha512-Plt3YRs+8vi7V3kvikY8qHcKCxe62Fagl/SxIjvUCiGXslxsGPI5ksMfe+vhxnehMBbgsbHaOxy4WiaHSvE45w==","signatures":[{"sig":"MEUCIQCPKrXAbILsxXJugYRhxX3jUX+h7BoZ5DWcuaFe6hl+YwIgfec/w1pc36UcAPgFeJG89ZMdVb72sOevHuxXJg7TbTI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRSHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbPw/8Clfm4TTNrWoWia1jwD+WrI84b36Fr+Jk/A79o1dAqB6Fxmnf\r\n6UDL7Ai2UTvevJroOUvGHGiFQB65lCfDBDTHoRygH94+OAZtVlVJBhKTZFui\r\nlfF+iwp/2vS4YjgYJAPOXsXh/Y7HS2VAl6AUkgvx6vHsbiGfcaSG1C0WEGFm\r\niUglbI1B2mhBeABT7qXBx2iz+ZtBm6G0mkYXZuc7mfHGCVh6j3URPr7Y5M64\r\nrmhXCLldpp22bqUv53q8N+qVNGYSqBNpr4jlZyohKAzsZTdRwJ8VQf8ftqFq\r\nZrQTsNOlOfp4RjIgKqtrb7q9hjNF9ykpTWBOBrOUPaJmVEsIpGKZqjLILDlw\r\noriyNCbOYBWeSCW6aCLhenj0hvjwz9NZryWqH18a6feyQpEGZJl50ZO4ipeO\r\n8xSYA2dYv9v7FPwEcjHuH7TynDTQK0mhDVQ6UEVJqkU498fYRRuo7hrhvTov\r\nL0Alwq6z+8v8rZoGAQKhkAr7s5D8o5gOuZqWjEV+4q1IWBPdj3sgLK3sRzD1\r\njQl7xp6eaO4MCusei3ZvPRTtaw7yOnEShRXXRDMwGAeI2fmUKxYTxB/xIv7n\r\nMJEVcpPp7WTUtCR9hUbphusZ9JX7A2AW/YekoYCz209ty5hvj+Bm3TtuUSm2\r\n3VPOOMHCuzAFO4i0q2Yut/7v6s5CEzQP8SY=\r\n=wW7f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.03618ab70.0","@material/base":"15.0.0-canary.03618ab70.0","@material/shape":"15.0.0-canary.03618ab70.0","@material/theme":"15.0.0-canary.03618ab70.0","@material/animation":"15.0.0-canary.03618ab70.0","@material/elevation":"15.0.0-canary.03618ab70.0","@material/feature-targeting":"15.0.0-canary.03618ab70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.03618ab70.0_1669928071562_0.8519037062242452","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/menu-surface","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.68aaed940.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1496720e0a66b7ff8d78564f536043fd9ff7a0b2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.68aaed940.0.tgz","fileCount":36,"integrity":"sha512-g6I5nhQSb9B9QSANYTEPx5parNwwy/cyWq8GxGzAUFJiUaPd33oHtTgchPNM6v+AzAd68nVOkTx2nhD9/LWoBA==","signatures":[{"sig":"MEUCIA/zh1VwOcbcfUGck0DCSiGTJTO1kMt5od20jT1dDhnWAiEA+jRv5H1YkUiIrIbzvU7iXF0qv2tTwvs+Xw/w6kTyrNo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRt/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoV8A//aAoHv9MvufX+3suchEop8yR4Bpg1Vhf1YlMvg+WF7b89il0P\r\nPTPDiVSQ+Hi4wr9V983P3f6KtozLQ7yBG1LdO2FvcsFHyPleTYaxPswDK+ql\r\npm6whNg92H7NxGmHFs6cAbLvqyggT3zlOi6EYRyyhFjyvNetqGa8fRQRyZ9j\r\nFAkKrAPvEG/Fk55Zwd1sS1ChEJCwe6kZdukXBVNboOlsrU32ZXKm73Duk2LK\r\nGYRToQcluQf8aZviKwPQ0RlQHkrMy5dYOiOiMwDg1Rg4qZ1AvM54NNE1PVuQ\r\nR+7SPQBK3NS7496gPytbD5Vyoo9tnY0Rv3/usTZzkx3EPB7XwBeSK3oD9y1K\r\nwio1r0KvQNbGD9v00vE7dOVJPzpWZ2FrLhgZCO7kNB53eJdEJQUk341fUG+z\r\nsM8QUHIA/QY64+6gecrb+L2h7XL7mskPu41wC/1HyyE4uY7X34lRe98t0q2z\r\nU8Bgn83wttoFe2vTx8dGkKFwwuK5IZTNvRaQPApMYNxeU8hQnAGUPdSEeMBn\r\nELfwz2+nQpV4JZuQx5hITY5vD//371KMUeSlkSXf5/KZvODWlCzyV1fUWHOk\r\n1DYNfyZisdmmCJWCwX3FW6AmcCO03vmY9AuaRWTm0T1Yj0IDfXmevQa/1l9F\r\nb0byF+//VHyyZVjSkk1v0HTup4y7KMi2Vlg=\r\n=VVWp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.68aaed940.0","@material/base":"15.0.0-canary.68aaed940.0","@material/shape":"15.0.0-canary.68aaed940.0","@material/theme":"15.0.0-canary.68aaed940.0","@material/animation":"15.0.0-canary.68aaed940.0","@material/elevation":"15.0.0-canary.68aaed940.0","@material/feature-targeting":"15.0.0-canary.68aaed940.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.68aaed940.0_1669929855399_0.7742312547782826","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/menu-surface","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.f0a0bbc75.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8c6c25dfcacd639985358126f2175d0b4cca349","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":36,"integrity":"sha512-0X5iGBr05pohBHq7STFqOkr4ZK5JLxRS7d/SjqC+gCIy+YTWIwMWLTdunNJI6Ss56cocIDSy8vd+Nw10Ccavug==","signatures":[{"sig":"MEUCIExp6qXakqRa4j1qttB29uBPpjyfOy0/lUcQp+ynZUPcAiEAuvrfTNwpPEk1Yt3DqX88sEeeux4r2rda5UNpGyIr4As=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib7/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcaBAAo6i5Mv/wahLSR/SdKazoD2rMIwC8Qy0t8MUe1Bx6ufajkIw8\r\nRD4RSiPFpGvfg71nXZMNm2hWpQ+F7Xlsu5RCfXX/pR3vaaT7yydHU7I/4UZg\r\n713IDMaQ20Ve7DID52gqrAScVIDqbTMqTmc0o7tXWqQEQ59O+NfQ4R9+QOiF\r\nWzBpxB9bjrr9qczaevw3NtoieEv+6HXSV9EKJBPqWxmtmN5nxhgBf0h/SNBx\r\nsrqslUVN5+rGAFRjUmoGl6KtBa6hwpLdPfyroAYw6w6Y7TqNClXGR815awvq\r\ng2QcOEy/7ZZG6J6MlKMx605tqIUNuCBehm13QiggbqV+phxAGL8DZebSU/q9\r\nAdrzIe6QlJdly3kkCWCA7HKqsOSCE6vE70oqbJAjNPUPSY6tG1TFO1/Xdo0F\r\nhEpkjmYDPVxw3NW6Td4KeYT4Y5WH4KpXhyHY4N/WqSjtNCtr1iNEiT/DhzOZ\r\nrzq41awVo+5FJ2pMmw7Nh6RjXY25ejxXwIh6jHZw0vrtV7gRcbB7jsiShCNc\r\n3Avb+W16JBrloSRSJwaFdMgrTTR4PM/Dc3cdrg1oiuME2Z2STtyQw5X2cEAc\r\n4vSsq5dEo3J1QhQEiiOoHW5X7D8DTUKoXmD5TB393KlbOe05HYfkmOpD/Yb0\r\nz1TORYz8mQ4vjvn0sJeGzZ3AKss4NQRH3uo=\r\n=qehb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f0a0bbc75.0","@material/base":"15.0.0-canary.f0a0bbc75.0","@material/shape":"15.0.0-canary.f0a0bbc75.0","@material/theme":"15.0.0-canary.f0a0bbc75.0","@material/animation":"15.0.0-canary.f0a0bbc75.0","@material/elevation":"15.0.0-canary.f0a0bbc75.0","@material/feature-targeting":"15.0.0-canary.f0a0bbc75.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.f0a0bbc75.0_1669971711561_0.8692919098494676","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/menu-surface","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.dd99c8764.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5460ffaa465dcf19a7d6033cd33c46f5ffa95efa","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.dd99c8764.0.tgz","fileCount":36,"integrity":"sha512-h5ZbNbT4cBSe+cBD3XoGYKTc5K2m5m6T4MjJGvwAkFQDKuUqfa4FiFbqu99FHexE6fSV1EPC8/yox8s4Godqeg==","signatures":[{"sig":"MEUCIBmskPyu0RQOtrpZkeJJCsRln/jkQS+1e9fwSUTRfvK6AiEApVHxEcQKpDT30lNTPbtONUZQv1WpG81qF3JkKNn0JKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigUfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmql/g/+JkSsnrl0NBdFPkiEj22FNvgps0uQ95fWluYYk29WzcjLSBgU\r\nekVBsAtqiuPstSoxbWaTZHpcHN8JiBwtcXHFzGO49t2WGj9dgQ9thF31gLE9\r\nY1xGP+zYVq0uijuvyRVlMoEj3qePUdY4gm6jVHYbtpg0nplOOZaFqeqZiyvv\r\nGsYauFSAvElWKZpx2V4J6FH7gxjO2hbzbKapV4kPcI8ey9i/qAFN9ZwOIxfg\r\nWO7s+IgMUnIr5CRZ+pNHy5/Wn5x0JzNohF/efMw9sVh0/georqyl4MdRnreS\r\nIH+2iGRYzEo7KEDUJXoJ2cN/l+6Yt6UkFRCj+h1J+rn8tPyyrgdnkvTQpPO5\r\nR0E/JxeVmFwKt6qYmnG12rci3Or5JElVzSmBheZJsQXqeP9/vxjJ9KoAh8Vx\r\nFRScujFLPFKTQjg658RTKcxQ0O9FPLuzaoDYibZhXLOtR1zCXuN3cbU3gD48\r\nCqmiSp8uFdfZ/1xXo4MQpEuulEJsssWlU9U+BLLb4R0rd74C1fjf097o+noW\r\n0sVT4y1jrD7lLcDL433dafoDrwEB32Ge5D2qAYFrUfC3PZuYl3tze9pPA76i\r\nqfSCRxeHlMEahjUpTzH5AuvHdgpzJ9ZtRGcLUjtzEhgCqNQlJGNjTFWViGMy\r\nek0bqQ1gx5kqPUT4/6eTTJ6+30Tb12B3Hs0=\r\n=cQ9D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.dd99c8764.0","@material/base":"15.0.0-canary.dd99c8764.0","@material/shape":"15.0.0-canary.dd99c8764.0","@material/theme":"15.0.0-canary.dd99c8764.0","@material/animation":"15.0.0-canary.dd99c8764.0","@material/elevation":"15.0.0-canary.dd99c8764.0","@material/feature-targeting":"15.0.0-canary.dd99c8764.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.dd99c8764.0_1669989663135_0.7773028592137767","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/menu-surface","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.fabdcca3a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c09d969dd4dab466e13345336e8586ab75d8062","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.fabdcca3a.0.tgz","fileCount":36,"integrity":"sha512-IBjFooILevqr//XUQqW+vcE+L0i9ABhE6z+xtbkvN+mnPI+Zv+vE+ZG9ML7F+UtZAAu3Nn+DWvcO0lXJ40TXPA==","signatures":[{"sig":"MEQCIGLR9Zfh4uxI9er0Iij1Z9ZJju429Dlk5Y8O1fJEBTalAiAyXhAKn4mEYa1w5t/Nf4bWUdwaMPtquNyUZ5LgCWkNpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihSSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrr0A//dr8oFwNl5dtAX47A5/DrQStoXgalHlU4W581LpFCB3jOvHWI\r\n5XVZtNnLEUrI+FQWZxojKu0Xm02YKZLlqPx1VVhw3+aB4qFtbT73Bn7V9AC1\r\noSBDDYYGYIsq5aHRPjD4sLbRz+FrggFNPWs9jZNbrit11irHQKi3lku6Dl/2\r\nkkz7uMkGMFuA/jyCIzM+wL8Vt8LSFPKKodzTrWAp+0zCaBnBtdmfyunJiyFN\r\nkEiRWqIEruGdAYRTs50/Ga5r+E5l54M0uJu/sSH5bigoQgDUCobNPYmmjhTe\r\nTlLneu1wDIv8HPt2HuW8L5opZdsrUP8djpTedsSwK/czyCjGzxh8lOeQdtCo\r\nM99csvzx/r96cPmOgHQaSnPAATMUdRbCmPrzppRISu7vP0ki0lPePpv3OOMc\r\n1kl9aScIlOW1tPyQzbxlGz4253Cw0CVpGBadXF5JIwQod3O8vq7fMcwMRhUH\r\n/MWZ4J7sy5E/zDmBb+kXpBAHvI5uaFbbhFVH7o4IvuSYKWw3nJQgh/nZHtPe\r\nj8INIJYIotFLDacufgIa3611ahHCQ1ZU/e7c2jOBpExbC3hJ55CIN5Q9Ttb9\r\nuWON7zxk9V96aWD8TMG/cfXQpQrTaDTYRwsTZ0crS3GzIUxqSwoUrDITDUOP\r\nq6TcPtzplQw2eAD8rALoN1cSmNlvSpx2uQ8=\r\n=yfmG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fabdcca3a.0","@material/base":"15.0.0-canary.fabdcca3a.0","@material/shape":"15.0.0-canary.fabdcca3a.0","@material/theme":"15.0.0-canary.fabdcca3a.0","@material/animation":"15.0.0-canary.fabdcca3a.0","@material/elevation":"15.0.0-canary.fabdcca3a.0","@material/feature-targeting":"15.0.0-canary.fabdcca3a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.fabdcca3a.0_1669993618181_0.6972354735248094","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/menu-surface","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.2d26722d2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b9c55ef08b107cc28202bcd944e2f24e07ec70d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.2d26722d2.0.tgz","fileCount":36,"integrity":"sha512-v6DXlEHulKjLIoG9lWmptBPw6noQpxAtdFzI1AUF+ODHuDjs9NmSNFniwOdY9sdN96wDvyqtGrfNW5FB/dxa2A==","signatures":[{"sig":"MEUCIFMGCNpeBN0IY+ivYROSszILZOWmuuFOU1ZAf4jZZAevAiEAiINR+g/zCbAyBZ0BJgLKGoW3cDY/hCZd8Y00lTgtNR4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiidAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpdig//abM/IKsyb7ZoTJxYHilDVIt8qurCiEKy3gqk+OF1O3mqanL8\r\nGBuWnBevEwU2CbhE2viLtkIlzX6VyUoGyGSJ5vQ4v1b4ifpyvpsupXQlP1lN\r\nRBU9Y9CtiwvP6wM6Ptk9GTi8yEICiL+ytGwYqcaO55sLstPixkrPZcTyi1zy\r\nzNYTd7u5NHbNgEIgWZORBgdeZTwdvqDSojwwtpCdT3mjKkrbRBR4PgLyXfUc\r\nGkFh9JwB3SPdhe3ALqbvy3VEiv+pofmuM42XYPDS6rW02yjVJRAWl0ybcF8m\r\njHrwjCcECde2T24kPMLKVvqpWcAfkEc6lBKJ64ibmbcZ45r0YBt00HEANUX7\r\nPmu7OIDqCKQvo+dujaqgDkWN1LZceYQJP8gwLyK8JIuDKlXio/EcF0h9BgAL\r\n+V4TsyqXeEGTsEdmwlSYVd+J7NQg7WWLxv5Ul0uTwuGGGMXg1D39/0HZN8IN\r\nPlHTWWayyWLBHNNr65EkOqmI9BrLXRQxeyu6sjHvVaTSnEI9+kr4Gehgrxj4\r\nnrUs0DgZPdAeD9TOU7urKBIVvtlqtn/kAtMVjduOB9cTvoQdNdISNVEWSvKM\r\nPt6GMgC6ra4Msagc3btIqZK0tcSAHOXMqwe0VjrGyCF3zcml71QUPbJyhjlv\r\n9dLVrT0h7Iwj/RF/VwGpRmJc9DWL5ktFod0=\r\n=EU58\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2d26722d2.0","@material/base":"15.0.0-canary.2d26722d2.0","@material/shape":"15.0.0-canary.2d26722d2.0","@material/theme":"15.0.0-canary.2d26722d2.0","@material/animation":"15.0.0-canary.2d26722d2.0","@material/elevation":"15.0.0-canary.2d26722d2.0","@material/feature-targeting":"15.0.0-canary.2d26722d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.2d26722d2.0_1669998400382_0.5715612128642187","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/menu-surface","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.eaa0c3a86.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"906ac43414009d8b6a8a50e69677f04ea8f483a3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":36,"integrity":"sha512-AGvbsz1aq2K+bk7RXMr0ALOL4uPTYDF4GSTzBqcX/sxQMxPs38SNICCNMtYG4wFagD8wcnCdbguY7YjFauScOA==","signatures":[{"sig":"MEUCIQCdV3dAPtmTfoJ4NbpXMtJN2HmlWMy3bNEOa2p+BwPkfQIgDbtNh87K872xLI1AH5ftbP/nuIAlxtvDjXpP90tQ95s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijkQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo15Q/+Pzifas8zCCkKwLzlGPbab7IGJ6SbutVWVRCqGcwlVDxxrAhw\r\nbyz/Hn6iSu1jCg+QsTRbmOUczSUJKQ93fEY8Ryp0B2wXwFdZsmdByhH8a9HH\r\nDDacLd9faSdo4uaEygJPNn+97TbreMvS/zKqxmXcMuLpfvHoQx7M+6G9CS4W\r\n4PuJMnEkqrrKtpQ9+eWZ26XC1JBPemVyqNuyWxoDwWYNTHVz6xtYN5TDxioD\r\n9TO8+zxeHit7Gy9hJFwoJspcjumfSfwYgfQgmmKWQWwIGRJm4EXXTTcy3rGk\r\n7EY+jQ2ydmtuS3nrpqiUVwxKK7LR9CXZztfs4m3hyuwBsXytg7syLm0QUA1K\r\nfQlJ3K4HSunctjdYK0/8l4CzIardqqOefpguFLP0eCIA+qMj/cdEcu5IAkY4\r\nus1U3z5kPhCq9xAnV3eRZl7LOP/0cFxtC16+EY1yp2QyZTFgL1COunQL3VvG\r\nDxubc/xUSzwbUcg8mGnLQHPaIhtWkZFxWDxHrD/xT1xP0cLqRVRzbAw6mgNH\r\nS35fxCPFFn4lXQJ8OfthZiIm57xAFNZaOMvTfKdhOTiKfoTZ++OBB900R98/\r\nsA94ambig6Ph8J5lgca9z/IMJVPELz7tV/SkmTe6CLLqcZpjf11wMEic5S0+\r\ng7KREdT94ORI6sWIrQRXtSQBrdaQ31RzWUk=\r\n=7ak2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.eaa0c3a86.0","@material/base":"15.0.0-canary.eaa0c3a86.0","@material/shape":"15.0.0-canary.eaa0c3a86.0","@material/theme":"15.0.0-canary.eaa0c3a86.0","@material/animation":"15.0.0-canary.eaa0c3a86.0","@material/elevation":"15.0.0-canary.eaa0c3a86.0","@material/feature-targeting":"15.0.0-canary.eaa0c3a86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.eaa0c3a86.0_1670002960324_0.06960412406110916","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/menu-surface","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.79a613bbd.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26c9419e8e1a6f2b9d47d40b683a899aad9089ee","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.79a613bbd.0.tgz","fileCount":36,"integrity":"sha512-byOR2DiEmiXIbPDTlp9OdVw8uWiqS7rSyz9wW1r/Hf/Psq2j6ghodM0frhUBZzkfcoY2zFyflTge4AwBZMv01A==","signatures":[{"sig":"MEYCIQCaWhg9m8w8El8Fm9GamQr4ggsQ3UpWKzzcGAMPghA9nAIhALJQ7/FNXRjWklJWIGXnWUdluhnKfg9S/M9cbuJZFK6Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1DpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqehA/8CbYw3DaWpEobK/+pjW7dK1S5iEXiTUiw3d9fCWXUgvVrfj0F\r\npjxxU7Nt+BfanlBLr6vyA38njJiq/wGEALD16TbOgZ0tiqB3ilpSoPnjFHmJ\r\nMEYmDkpH/RnGjSoahsKtdPy/FVYJoFHyj/ejxi5Ymu9wePQYHaBlNR0KAsfu\r\nnGJyIS+BaZx2jtuHrDUIv8znuAiyDz2tpz141DdHmB6mVwvK/q9Mt29ZW5iT\r\nXTo3ddxRaOho/elOAnBZprVku5qApV5vtx8DnWKNXBXRUefGNCHB0oN1wkDM\r\nZVgMiJRF05z3PUCj4GeH7chCvmVjciGm+aUfXchGICU7V+XOXcGSw4Q02wRz\r\nE47QgxWxwla2Ayw/A4N6FSPoWCKmVDx7EaYm92UEIt5ogwvJN2drgKqKrm/h\r\nz3Il3S5n8g7+ctZVRMZimJtGSVm0ItThoYG/0IANmcFc9Bc1lZtv6L3I2raY\r\naW78HZn9RmX6x3OjBEdbIKe+ZmCOEdrjPLgGwVjJu9NErxF3R5aI6q89BWeM\r\nGH1E5z13L1byfsqLQI9MvKLYISf4+vX7ge22vsthMMplcWbFLqRFDFVKqkU4\r\nVwNg+oTJTk8uBk+oKE/cvkFw57CIUDzVEnD8imyeVG6Kah6ihPA2ZZ5r07re\r\nVz77MUBHmTqF11pNNYpcfZmF01pWWakOq5E=\r\n=CtdQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.79a613bbd.0","@material/base":"15.0.0-canary.79a613bbd.0","@material/shape":"15.0.0-canary.79a613bbd.0","@material/theme":"15.0.0-canary.79a613bbd.0","@material/animation":"15.0.0-canary.79a613bbd.0","@material/elevation":"15.0.0-canary.79a613bbd.0","@material/feature-targeting":"15.0.0-canary.79a613bbd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.79a613bbd.0_1670336745026_0.965958683122847","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/menu-surface","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.c871fe61e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f08dd4f13b0dcae202d6adad5ab19d06995bf642","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.c871fe61e.0.tgz","fileCount":36,"integrity":"sha512-Uom1RtOyi+jsUWpUcnOQLvUqybwhXmXgnEIowxgXWSzsjeiGlG1geKQMRnOwMq9UPGA9FpVykLxrP7xW4lYC5A==","signatures":[{"sig":"MEYCIQD0RLwY9hziGmDEYGtD+RYTGQpa/1X4+HLibwFphZbzBwIhAOql/VoQJdsL4eUa69dfNXV1gS27fzVTjyjlbntF7YXz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEYhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9GQ/+OmdjkhbXb+iWprhwSvbKIoh0cdpob0bZCMpHT7EX516rvGBY\r\n+jPazo51ghu1Alou0ypJXHrlWDo6eHa2e5JAFoGHib1oJsTO49HCfT1y5klB\r\nT/IqTAJTfj0Edyn+7CJxQMy7KoKAuTvTzS4NXu1TdTNSMnTR0nGwo6uKxt9W\r\nFmQo5bkCoCuML3QUfTK9etOqnnsL3wrgWsJPS2HPp1WQ27cA0T4ZekZo/KKW\r\nfp7qScc5ezA+H8yCdhedJ3F+DH3tNZU/j3v72hG4jaTnDLKlWllgHf/uIjuW\r\n3oQmCpNEqLcLNcC2Htf6mxRcYl6ITys9B5N48QktgWttCmXDC8pTO9O7NWaf\r\nWRecJSunLO/Imc7fhvCQQSOSkbACpxCEGbJ85ab+nCp0ko3cfUcPs02RgMoT\r\nIW0vIbkmjspZkxAYkNlU84BehUc9Mv4+LMClnAzT3fgZHw948vU/I3DcSLDR\r\nV/mYIK87z8zx8F9kYS/wfEDyOMSywIhg5mEwb9SMEEXgR6Ogwzf6Z0cJ8CJh\r\n41EMQi0iq17pCO4beLQNJ3I4lTgT/RuGetn2CM01eKaFlVznOp30m4zM6NOC\r\n1GdDyUDBYxA4JD6sSN7G4F6SS/xyxzeP5seehNMBwJvmDBjUuMkBn4oPXchW\r\nD+SRFDQHaES7jwqHA1dr5jUphPjrAcZGZf0=\r\n=Gvo8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c871fe61e.0","@material/base":"15.0.0-canary.c871fe61e.0","@material/shape":"15.0.0-canary.c871fe61e.0","@material/theme":"15.0.0-canary.c871fe61e.0","@material/animation":"15.0.0-canary.c871fe61e.0","@material/elevation":"15.0.0-canary.c871fe61e.0","@material/feature-targeting":"15.0.0-canary.c871fe61e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.c871fe61e.0_1670399520869_0.09328619528204474","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/menu-surface","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.9eaee7936.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa7d67450f513c6b66960cf05538dd5efa3e162e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.9eaee7936.0.tgz","fileCount":36,"integrity":"sha512-1lCMoEeJC1zGVEc63oOiudz4ubNaCbm2U4IK1Zm4vo7uZHvz5ecL3HTTi5QvSXzt26v3uzA9vqHPgfs28fk9EA==","signatures":[{"sig":"MEUCIEtioOVe0mzW5qEhSB6QGMci7pNmlJJYl2Rk+6C4+RyAAiEAm7KxAs7R5zYvS/+qBaT+qig2UFXF48r8/YlH+MlesDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPF4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIuA/+KwVzx9ZWlNyanUFV3dFTIOQRhp7PoU94OWelVyBDAf9yIOEm\r\nJHnoXdpsTATW5fRcLUFRy7gO7qGEhOsZxqYoveZZ5qy1ICOZ6KVSsymjEX/I\r\nzV32Ue01qqWuF/wsCDc0iu0JBePNCJnJdE5HXcikITVoTTtD82apFDtdeUNa\r\nIGAaf7jeqtD5dH0E6mrHbt9ZIo5BmSqjcoG0I5VYqfAR/bolltl6KDC3etXO\r\nIbC3JnKTHdwiz78oCCXzUG7Tp/h1rS2UZyM4KOy4eeK/vJfQhizCcYJp6XH6\r\n9vtjTKrrBDlGt3yqc9lMiHsZ4vFMRaYdt51T3VrTwonutKLtXJdqepOBVRRj\r\nJWnWl5qG0ep9fvV8t7aFNvnu2jDlrHRnCajM1CUjdkjr7bvtUdKvXbLic6KO\r\njEESbWYOSgb9Sy9qcRhEt1oJeZE+wizVowZJ7Lhnx7Zklq19nW8qHaH/eVux\r\nLffVUvMfFTW8hQc7WWLtjixAdxz79jwZOumz0TmimFnTFpqY5GLPBqstOmzt\r\njt4jU1dfLgHueE6TDOHTy+cQwhlaJmkOMu7rLQEFgqxwnrnN/Vxxv17nzCpy\r\nOrjEcwy6faXlKxb1gWc+jCzbCIbNvRywBy+2ErDEt9W30gwv4yccpELwPKaM\r\n6Rj7F65QJjtp80AQ3nhEn1nYmAWKat52o70=\r\n=ZbES\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9eaee7936.0","@material/base":"15.0.0-canary.9eaee7936.0","@material/shape":"15.0.0-canary.9eaee7936.0","@material/theme":"15.0.0-canary.9eaee7936.0","@material/animation":"15.0.0-canary.9eaee7936.0","@material/elevation":"15.0.0-canary.9eaee7936.0","@material/feature-targeting":"15.0.0-canary.9eaee7936.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.9eaee7936.0_1670443384029_0.009200185209980116","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/menu-surface","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.1d37bf601.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7ccbebcb6b1686eee74867f05476ae94168d32d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.1d37bf601.0.tgz","fileCount":36,"integrity":"sha512-Mugs1xdQjD1xzTl2/XTmWk5frHPQ/ofyYiNopzEPqBX/Ea6EqdL6rC5M+PYSspKLyJOa9r3gnPyuDxna8l+TQA==","signatures":[{"sig":"MEUCIQDC2RpAAuimhrzaYjWi/k7BxHs7QKES1nzTUQ47BglltwIgHGW34q75FWOC0rv8vvr4p7SxLQR3MVjX3WMyjbaCHDY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPpyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4zRAAlNEQLOZ+nYzB4lLRG6pVS49IKPlZDivCe0bkirsCk4I1t2JC\r\nuh8FZNh4f3JjBm2f8iQJjePLHa4WvWEG77m8JaB9KZkaxAnYtIlnOhFYA6J9\r\n79A/ieuArntMkOvaeurKt77EqF44jfMiOx4VR8ekB1AihGAdoQLf5UFtrInu\r\nnUX1+JatSml0YSHGLPxQ+jELk1xAZi2E07BLeMezc5KxtklXiHMjwtSTT6SJ\r\ngT9JP3vmrcs5lrZUMj2k83ohR3NssVArNskFOT3UZ7AkeEJzU1jgBopu1FN7\r\ntkrEEs8ECD9JMPmyQvRrkMDZdrck+t8ZrtF7a/LZgUbve5yjrGlKYxfkhomo\r\nS+YWJTTQH7TL6C7RXpB9ckr8EIqaqrSQm5O3o5KkXf+iVbDsYtz1Bb8x+z8q\r\nyox8fiogbVNYQ9cgQX2oXiixqLvdzq3L5Vawhzo9i27K9kurNpbsqWa3fbdJ\r\nmflv/HoKGRlnb/QDxgm2HXIP77GZCgu4blAxC0SIeiGsx09c3iwaLQVNdtvT\r\nYPnLVHZD1Z2Ocjlw6VAHAAF14K9+ER77hmrJjfv5aGIzLCyIdcKd+77MSHbD\r\n1GnbrZgB7eLIsvd+YlWVysTx0NPPjUtDJCWOre+5Ui5L16WC5PjxXYWW9u23\r\niq0EZN8rU2F+dVjSxao+/X5MnLCslMpmrTY=\r\n=jo7o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1d37bf601.0","@material/base":"15.0.0-canary.1d37bf601.0","@material/shape":"15.0.0-canary.1d37bf601.0","@material/theme":"15.0.0-canary.1d37bf601.0","@material/animation":"15.0.0-canary.1d37bf601.0","@material/elevation":"15.0.0-canary.1d37bf601.0","@material/feature-targeting":"15.0.0-canary.1d37bf601.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.1d37bf601.0_1670445682252_0.7872751687708104","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a5fe069d5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5e5b00fa98d220a636f7c446424feeff6a546fa","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a5fe069d5.0.tgz","fileCount":36,"integrity":"sha512-L2bRkj1ANd10FAcjJ9xne21EN+rtqEMFIoeiQ4ktGMFSWsXp3EdPsLeDiqWaeVdec0skIZm0vqikLm86baQT6w==","signatures":[{"sig":"MEUCIQDLEcqYn+hmDxF+xsVwD3r4pibECkRT6KGccjv3gD33ZwIgZULSZ7T5Br4seY4iSuFIyox3XlEM1fUHmMuKVp5fPEA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4IEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCxA/8DjeXVcf98ac8/WdEE3vGdNiXjibVW5j6SCAkJb0/PRojWtK/\r\nz4uev9/fG5Q7ollhulkFqlwjJvyOmjgCntXwkS17E1I43jlhxg8f3VarhF8j\r\nG3w94kryLyZJrbKhob1l8aSf+TF22yDfKkjms0zzNhoESapKzr053fEwU3WU\r\nlzW56ZISTD7Z3Bpx8oa9p2AsLOTMLp8rG61L5z2+NAmsN2SRwYAEZudJZMAn\r\n+gzB8Vvd1poFysr4pqUybDmmtX0FQjJSNmjcyoIdXnJTfvIp5ao8Rm8VaAf7\r\nkzU9UMkNYM19s2jxAX+9/alwvWFriFxflzmgtc7C+/NMaW2QmziJUvdsiq7f\r\nMz7uhuqYge/9Q20UR4WOpplFL4+/6XpUuwUROnXW1P0Duk4mynI2hSGQZBuB\r\nRZfs5sKzNX+8rl7hg98ACl9o5YAoQpRfBvTokwptmxXwgVfLSTf4HWAhi1E2\r\nuBnnw3tkEZJtEBoIt3JG+TtR01G2f79OdIEptFC4w7RbIFpUvrXHZRSAH9L/\r\n3zHRKPED1xohfFzYo+qkK4mgIVRuYBI51sdzWuAIaTPn9goRdgracZ/39MlG\r\nRzKGARd1fg0AAxhlsxRsj7ViDdcdrh5XjZMPMM3vBayZJXphNA4oh5knKX2V\r\nwQxCNrY1yeZMeXU6P7YMqVdlHczuy+Ik01Q=\r\n=kJjM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a5fe069d5.0","@material/base":"15.0.0-canary.a5fe069d5.0","@material/shape":"15.0.0-canary.a5fe069d5.0","@material/theme":"15.0.0-canary.a5fe069d5.0","@material/animation":"15.0.0-canary.a5fe069d5.0","@material/elevation":"15.0.0-canary.a5fe069d5.0","@material/feature-targeting":"15.0.0-canary.a5fe069d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a5fe069d5.0_1670611460738_0.146877668192392","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/menu-surface","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.ce8b5326f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66cbc93cbafa5a4bd736754a2b28ab1116c7b143","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.ce8b5326f.0.tgz","fileCount":36,"integrity":"sha512-znc2+OBwl29Ff4wO258933t0TwWu/5zZhaykoAfkaC4rb+OJ4ZDjU/jM4+MzjxWzHz2AxElNUxqqt7Ok2PBebg==","signatures":[{"sig":"MEUCIEPBFzrluWDewW10icm2T27oXSZ7D7s5lB5V/t2lDwRzAiEAlIMgDKIF/aAFyWgX+w8eYbERTe4sJ9+dsrhdZCt4Ugo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8UuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/Gg/+P+gCnEXP1VwQwDyVjseGt8ccXQVBE6TJkBJpd0glqi4sJ3CA\r\n9LnTsjrcyIlDdiPV86nfW7mmBA10+RWpdnbtcC3GUdpkkZIn4Ep3lZeaaLTy\r\ndzfooDy/PsEgKj/5oyi3/0LJ24XEMMBbkunCVvcph6OMf5Lvs9aKipHUd4T7\r\nLxCmKNCoMtH1CckbA6JLp9ZWy7D9fGJjKn6zoK9TbIUtDo2yl4/IcytM/2UL\r\n20OWNVpcvz7MnibXgisWWCZBPUgP6sdw8s9otjR0g+9oQBcz0Y8om+8wuyPf\r\nMVZbZXPsW9GdIBnyJZ3E0Olo2hyo5Vjyq/Bl0XN8nzc4xQNLFp1fSIVeLXro\r\nFESeXM3c5aexSa7Rq2Sp2BeuuLF5uujz2lONZBAaFdLII7JMWly4zd1pij6T\r\nTDrSqLO0+hnaFXaSzj224Kpm+oIyQb1GPm6Xiak/GqdVpEvtjZefHwMn6CmD\r\nweVDqH8pX80wDlH6b9M5s7bL/IHT9GhbyXH1s+tRZ63RrUvlg3+yFYyyfxGQ\r\nC+Nui5HsZ+rBTTh0K8PqAU40adNRIAma5eDhszkSboC5HOHVQPxT7pPsGLUD\r\n0lLqyVQoIVXaS4i4uAz7XzyUUNUsyDUTm3CGmRJYjOmjRkODv1oNP4wyvBWl\r\n1/Op0eG+30D4aiizhQT5uBip851guKZMKpA=\r\n=BaYp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ce8b5326f.0","@material/base":"15.0.0-canary.ce8b5326f.0","@material/shape":"15.0.0-canary.ce8b5326f.0","@material/theme":"15.0.0-canary.ce8b5326f.0","@material/animation":"15.0.0-canary.ce8b5326f.0","@material/elevation":"15.0.0-canary.ce8b5326f.0","@material/feature-targeting":"15.0.0-canary.ce8b5326f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.ce8b5326f.0_1670628653733_0.013837126520536591","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/menu-surface","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.43f5323bc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58438924fe4b15e97cd8fc52cdc44d76bfbdf9eb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.43f5323bc.0.tgz","fileCount":36,"integrity":"sha512-Ie/cYxnjaIeWJjF9LL4SZ+WYEooZdwzznXOXsD4OoDGVKu8d98Rj2WTx+b3DDdIIC4/A9onoYekFB6pRbxj6zQ==","signatures":[{"sig":"MEUCICyOojPI8r7tTDLu+cxBWVY7YScAnEmljwy24JGDc42RAiEAu8C9p0RnrtuqN62BaOV2I5hV+Z45EmW2TnGSFGQ44B8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1rfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9Ig//XMPaSs33+VvuG7fN3kGNUOQ0hUCEj7/1ulpz21UWXuRtZkTO\r\nJtQd8Y+LBgyD3vgcK7i80vDtqtHm17jT1eSTQlBcfQsO+LR0Qq/Ra9G83e4T\r\nvDs3q4vg+YVbe0FE6iM10FOe6P5Djz5WTaUApu9LnPUCDk/dIzU0jY4cRSG5\r\nFlH1SZKUlxBcAgJTA+v5z9zSRrWJJbQgH/6t6NQj8ouseBq+wjhUxJiYFSwW\r\nqCuoLtvUnRgl0/VghhlOdlD8pwLZtEvglDxSeCv74QFEkdRdzbg4OgiBlj1U\r\nCmLEN/hShsn95R+h1KIQX+IgdG5adKBe3TiDIcoiF2KAfYS2P/pbJVOePUQB\r\nMcBLd2PSAlJ8rHnVZpGEqm2v5e/a2GW++vdGJGt5h2DJJ4QKGjaAqufAYJMF\r\nHg0XKg0irwp4DxnrrLgXpxyP52J3pGRNZxbnx/B8VgAq3q+LV0Oct4zgcxtI\r\nqpdWXL6rswI8IBNrQ+R9/GPHhH2LgoV9hJGZa+rR1hbv4qD8y8UOmh5XIc+U\r\n6Gknc+RRCbLt9FahEpSvl8QOLTkllKJiyLukfeIrHwiMHcUs8qk4yJaQd/lm\r\ni5dXlgmlognjo2wxHRMhyTdKlN49ewzryE1wTxQ5HP4YumvwQ6tV/qjzyJcF\r\nJtbeB5hGL/ojgOICdAxerhKBV6ZEECR2zDM=\r\n=aW3n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.43f5323bc.0","@material/base":"15.0.0-canary.43f5323bc.0","@material/shape":"15.0.0-canary.43f5323bc.0","@material/theme":"15.0.0-canary.43f5323bc.0","@material/animation":"15.0.0-canary.43f5323bc.0","@material/elevation":"15.0.0-canary.43f5323bc.0","@material/feature-targeting":"15.0.0-canary.43f5323bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.43f5323bc.0_1670863582926_0.6665387169998513","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/menu-surface","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.5490e32e7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6653c4f45e8d27f7b39bd3a8de5497d4001b1ec9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.5490e32e7.0.tgz","fileCount":36,"integrity":"sha512-PV6JDLFD+q17LEAXwYj9Inl/ckHJ0dKqm37f76mU2oZp+i1lOwb5ZylTbJAXgSzPnY350SxY9qP6z5jzpqnIUQ==","signatures":[{"sig":"MEYCIQCNqREK0UHExQ3B+aly4Z1GR5s8Rxg76qvffP75teFzqwIhAKIVb+UkLk2iiHfq67Uh/0nBhxPJn4tUueaMJXzh0QGy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl16XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiXA/7BDGx/8kJrW6UI/P6rUdj02qQ40E6OaMjUnNbjeHfM/kC2fzz\r\n8VptH1PxK+Aj0weBjyoOAuBOOzIvHlneydPLGoods8kM7g/xK7oblMmIasyy\r\n4/ATFyPZTI61x4djb1moCK3Kq8YxqHMxdFpy9SZC6dS8a538vYAf/jr/T5ND\r\nyfjowkidZPNNna15Nws2H4Lrk2uA8KobvYRC0FuLNsmcENWNJzTGUQrQJbSg\r\nyqtHRGrxG1hNRZcITlT9+/WYXHNrStzvOW5TMWNK1V6tOONAUHKbek0A8KBc\r\n5USjjikgRS8BfzOM5gng9qqpfXKCZwsaT3o0yiyGwIPKgIrAUnPuS81Z7qoi\r\n7NUn5gpHUpxk1aTZOXTZ+VKOlBFyeVF4V3UIVxw9gywx7ctwFBR5shP89zP/\r\nh7lG456hu+gmg4PaFmMsBgdcrsosPaYX0IXUQcmYE1jNOory21y5aDc329lu\r\npTJ1YKusL112bVq49dZRMemAgkmzhmT/lS+FTeM4dWs3RMfxyzCaY0zL8HQG\r\nWaVtyg/ePc9p0CKIlZ4ehxz0Hvwh/S8OF4MLzCFhliO4fAgTKIZpztaIoTXN\r\na8QzF3tdZlJ85i14VAR+CDssBm37uKMmKvK5AeF+NRYaKcO9nbdHMVFuCSFg\r\nGnEPfgvrnzadtnVvWmfPuGSnJ8n6xAy1oGQ=\r\n=XvHQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5490e32e7.0","@material/base":"15.0.0-canary.5490e32e7.0","@material/shape":"15.0.0-canary.5490e32e7.0","@material/theme":"15.0.0-canary.5490e32e7.0","@material/animation":"15.0.0-canary.5490e32e7.0","@material/elevation":"15.0.0-canary.5490e32e7.0","@material/feature-targeting":"15.0.0-canary.5490e32e7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.5490e32e7.0_1670864535704_0.8122959404611947","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/menu-surface","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.817002c29.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49938eaef1c1de1384511c859327d012e943c1b0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.817002c29.0.tgz","fileCount":36,"integrity":"sha512-uThYpC5wZnUmv0WFsSUgqmRcqnRfkZGNu9+ivwZRZ4OYlIuOp/PgdAH67dxv4g7rey7VehRgDpMuA5ERRgxYMQ==","signatures":[{"sig":"MEYCIQCQBivav7j+trLXYZyd/EBVVygUcGe9dvcbQBChB7HMywIhANJNDs4ieqOExW8SRq8ePT6IgYfUO3RyJgptBiEJ6pOb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPSBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8BRAAjlan33rbdiNaAGPYvHTf6+PMp4sjaE/dQ774khpCJAqEpc8a\r\n9z0pOxXFRptlw2OUWNCWwFvMAjsaeUmWgMlh3yUHbV3gF61QqWm82uh1KpzR\r\nEw7Hhu0/Bue8vxo5QDzcCDvpiApfxgt0QBBb6fmfbeuOah4iM/hT3UwFtAjx\r\n5CYl27oOZce902vRwC/36pvnjFUr8AdESBZ7VLAMlkwa8DdPyZPTmiRaX7Gy\r\nirHhOR+oY10ALH4vV/VdCae15nCVmbQNCM5c+nLfq1mGxKpAb2sxEXBhH+rJ\r\n0BqOvvorNNfQYI+//mTKa8M67dKrsIKfLzUOUXiYAgcYHpepnsH9CvA7L4XZ\r\nOEjKdbxw4r59Yb2m2CBP7U1/iAuu3+Xg14omiFeO40gMlGn7nAvxeHPDed7H\r\n0FN4wg7dVGtXpe9ovfI+kCxskE39pXbpd7Gx8rPOu0bwrjobbe5F7vb6pQQN\r\nna8rLgJFfOBaRLmu3MLy+eknKJyawBTNetJmM3VStik6cd/B1ViDgVmRCQX2\r\nbVwCmhUsumOK2pLS2CmHsxoQ8iMxOnWamjnL/CY49gwDjmSv/2LvbYC/nv6o\r\nWoFTw3Gp+RwSOy6C3wY2qO0eLcyXGPSCJccZI2iaLVCdEFvwJsBBJaVaWPPs\r\njH0uYywM0kmBurW+6H7vFeMmqG7pGImsiIs=\r\n=rFeS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.817002c29.0","@material/base":"15.0.0-canary.817002c29.0","@material/shape":"15.0.0-canary.817002c29.0","@material/theme":"15.0.0-canary.817002c29.0","@material/animation":"15.0.0-canary.817002c29.0","@material/elevation":"15.0.0-canary.817002c29.0","@material/feature-targeting":"15.0.0-canary.817002c29.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.817002c29.0_1670968448985_0.9748708065916645","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/menu-surface","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.313a1326a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63a55560888e79200c45e9f877ca418dc7f0931d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.313a1326a.0.tgz","fileCount":36,"integrity":"sha512-FMGQWw0cqHbDJ29wocOym3pihpsZoxGUeYuo+0iZevLsQT2LIZQ31lhXZedhOUyxWnEqkVh3uVI0YS/7CV1OTQ==","signatures":[{"sig":"MEYCIQDja2hKMh8vscnDKc/Uc4N87Vbank70V7NWpLMEgu0IIwIhAMsWh109mGINaiDAhPE0YdZhgwR+hSrsiv+LgFAF7o+F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaVmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUWw/8CCdjhiOuuWYTyQVf/nLz1wVFF2CSN8gBQNqCLkt7IG79IuIb\r\nnjUx/6ypjFiq6My7nipqj0oWki7hOpZb7fCnxXhAltpqIhMPyf0LQVeAjZ/v\r\nPT6yCFIZXvFM5lLf/9YpIdpz/D2y7oJIZ20vp4WhwEiJgRfhEgqn3ExFKcHQ\r\nl4cZAmd+otg4bChHiadVFprUIxAWrnN+R+O9N27hH1ngt4fDZeZSFTwkaIln\r\nuVRFrwzIKzNeANDQR7aiOJDFtjPaxQ8VIaa7W5H6X6TTSeNns7tsoKkzp99P\r\nq/sDLsIB+mlrt0TFGLGLYywQYTyL9sd6KeVjmgzSme1lmE80mZG+yXM8Pq+H\r\nWa1AUd1WyH+bK1dGBPvV9ps1cNkKcjSibAhRPtt/ZJzFkcck0WB3rv9AVcp/\r\nXkzbP+WT1ZYoUQP38mlg6wb75ZEP/aUTkjMYvHln47Y4wHja0oP1khZ2oX2q\r\n4RBCttls7Qhaq7eYvVIpziLozb7E/uQGoyjVQpS0TLI1ZOH3xykDmf7a9T3P\r\nJhz+7Qui4uXcUd5qdG7CPU/OEs3CQ/RDKQMz6MGCXKmcHuxg6HklCMziJCdL\r\ngX/jXBpUcrsYyvATqTJBkvgEO3BXiBGsv/cZMDz4iSyq77pEqdyBytXV9oEw\r\nW+HavSht0Ku4MbTP2VqV1bx4BbCdbOILQ1Q=\r\n=ZZh0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.313a1326a.0","@material/base":"15.0.0-canary.313a1326a.0","@material/shape":"15.0.0-canary.313a1326a.0","@material/theme":"15.0.0-canary.313a1326a.0","@material/animation":"15.0.0-canary.313a1326a.0","@material/elevation":"15.0.0-canary.313a1326a.0","@material/feature-targeting":"15.0.0-canary.313a1326a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.313a1326a.0_1671013734118_0.6509809303840417","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a69c14e10.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5e8942bc7dec4f3ffa7c8a6597a867abbaa9d64","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a69c14e10.0.tgz","fileCount":36,"integrity":"sha512-aMAsNX6TNdXkUO+phGl6mUeXJF45JiGdpry04Bi+WslCTGYlWzYxeSHmGBN5Ka6WOQTfsrAOadHN6pxaZGnv1w==","signatures":[{"sig":"MEUCIE+vs9XVdfs+iOck7CzVFndFouBPfBZR+FyDXAM8hh0sAiEA5uhk1iGrr6/IRAV+bOJ11TWiH2W+sRruVtcvdHTaLGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbEtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdFg//efTSAqiBtYKakau/4q24lffNaV+EeB5Z1t8VxLkKx7+N6PVZ\r\nFuzGZqY2y6+Ogtie+rxCwQfwNH7OWfrLJYIuaObHsCfGhd5jZ9jpZwvgRvKY\r\nM5lvqq8J47N8GDO4UQbRYpNVb+FUT+NaYLXIhnc23ePJqBcC68+tAmM0su6q\r\nQ9mALTXkAjbBhUPqxqBI/YcIMb6+dBCBsQ07a3d3C1oSEYuAl4gD8MzBesqR\r\noccfTRa7KICf6iDAktCPnBF+ARzl9diY8b/h0rRcy1E2QkrIJeXprivxEiEj\r\nXI48BhXaRGn16wkRITbJylO8lSObiZjw+pkonRYBS/P+PrVPxo7+4PPo8Lv9\r\naFBMpYfSj2yYjpMIpPfGz3PtnSM4fFNZQaSBKzpXMulzar0j6ZWjEC6gO1G3\r\nKqf2NZdYHozgNS+v+pHYpDUTyEy5KWGCyduNV8r8Z2E/DYJfRQ2DIr24xXF6\r\nR/+i1wMwiFB02cjMzN5YYFFM5zLU1pkRou5dSqTt6gkHiehxZCXcBIrYYF1u\r\nTW14kn7dCVfeUeCF9CMhDxpUBeIzBe+2EgYh8m2GyS4H8+o8YbcYkjhpiums\r\nDduNIyFn0+MErEwumg6vOvdFQgU++jH4f3jSUmiC7nU/ly8eC4mNy93YCSbd\r\n1S+0GvCSRxkTHY6YH1V6rfe+nKC4m7DG1nI=\r\n=Uex9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a69c14e10.0","@material/base":"15.0.0-canary.a69c14e10.0","@material/shape":"15.0.0-canary.a69c14e10.0","@material/theme":"15.0.0-canary.a69c14e10.0","@material/animation":"15.0.0-canary.a69c14e10.0","@material/elevation":"15.0.0-canary.a69c14e10.0","@material/feature-targeting":"15.0.0-canary.a69c14e10.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a69c14e10.0_1671016749148_0.2903094058058646","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/menu-surface","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.f43e0ceb5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa8fcbc37e1ecabed8e527c932d6b930d192fe60","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":36,"integrity":"sha512-EU4CXBpSZG4IEJAsrbfXqiNe93t3bdUplNnSPQVpWnlqf3Ebfca+HCh0x3IM+B6LX73Hq6aY9LOMGVzar6NDRw==","signatures":[{"sig":"MEUCIQDxQ/Vjx5anAN/3oH/7fazvFQUAUi4QMa8uuxtqLt3dsAIgExVRmDa+3alpIj6tJys4KV1myxjgLEVdr7cPDpHTEgY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf2LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxwxAAlsF4fQPfhVkBMX45+DVWni4i4yB4sOF7uniqnkTPi5Ue+bFV\r\nRVwyCo+rG1xKExwVmKdSKfLD3JY7Hxzk2hsuacccwaf7XfSA9etuWjQNvJAK\r\n4Xc6eyRCUHbVARySGi/vdReruWdLybSay8TB4GORCe2I5eykHFQuep0v0+sb\r\nLkTtfYCjlrvJKJ5+H3boYnodwbghmcNHimxeZpdU/HRbeuO0CiucNNerg0Pw\r\nMlhDhmUnVdXtoR0fgxbCB7FHe04M1P+bOFyqwYeC0JlyZjO0I5A9dXRThFof\r\n0bNICkTv+1/VV8JrWEwCdzEcf5v73t+IQVouBppiEhnYsqtVMS75usImwdyh\r\nwdXHJwJRAnzE1jIlBPw1iisM03MrMyWBW13+x0eFQLTqVbjKLeFysFnUb320\r\nfmUr35GO8SZTCLZIrfgCfJzhUvkrw3nlSelKtlLm9XDs5IItBmHKaG+kyF8y\r\nTlsVRyFUoQ+dYjimz+82qfP8go8qRO8p949BMe9vHH2r5aoctOpC9jZrpNML\r\nO0IrAtjyP4IP1YsFf4pMHkU/VPfgD2TBma+2P1ewE0EQgPDZu+GYmpUCeT67\r\n1n/bM4mD2pzZnSvPlgzFlg5QhSHGB4MXZFrgYp6FSwjYwjVOmbLMoC+EaUiQ\r\niXa7IKKo1Og5ogeOt5jEVmIiPlJ1sWNwKR0=\r\n=tFT3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f43e0ceb5.0","@material/base":"15.0.0-canary.f43e0ceb5.0","@material/shape":"15.0.0-canary.f43e0ceb5.0","@material/theme":"15.0.0-canary.f43e0ceb5.0","@material/animation":"15.0.0-canary.f43e0ceb5.0","@material/elevation":"15.0.0-canary.f43e0ceb5.0","@material/feature-targeting":"15.0.0-canary.f43e0ceb5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.f43e0ceb5.0_1671036299678_0.8667021905742258","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/menu-surface","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.34767110.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7346a10a6e422659e9700ba8c8ce6c0e9a02a49b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.34767110.0.tgz","fileCount":36,"integrity":"sha512-H0LHI3DkBbowyqaLBsYf9eMa/mKiILzloMblyKeIYT5SekA9QhEeLaImmNqB1IRT/cUlKKIfCvK+toDoO3OUrg==","signatures":[{"sig":"MEYCIQD0KklrFcvL3wxX1PdnPN8QD3OTV5DpYyWCDzslN74IwQIhAK1tLf/GS7G+bCY6P0127a3ay5+fStO81FgIydSOf8wN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgYTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYQQ//c+aa9RWWhN1128pICNOXdIhX0XIV7JNK1KWfhODB5UCt/fq4\r\nJLhFVbuZxYwyMo/FLoBrS4w2OdrtkfyoArFPVA2IVKosTaqNbNEo+bTQVPwv\r\nBpKKURVTVmK7CNViGFs7i9EvH5oX92yXiGEVBRF6dOQqXT0x7yZj4u5nKHJr\r\nQeahiN3t/Z+oqLBLRNeF/HXKcUDH2i5dI8vStxicdjtnznF1sA9A5tpzQo/f\r\neQaoAmw/PRf1ApgaftxY1hOn/BidGIAL/kdss1OJ76aas1qfOdeRkD54JHCn\r\nFWhVSU2BWqlV8nD1q1JIJRYbWTT+SEGbYmEa+EAHBwT8iDl0XAFTbAi++Qqd\r\nFzPwX3VySm4HUHDYD0Rt+J+vcAzNqh/DKP8BssnbUtXwd7Wkz+FAOts+kUQz\r\n8+hCG4tpwaSBQrh2kgKYpojJIvoX7K1YvlaYYjSBM9D2PBtYb+YH2fVnPIWd\r\nHp5wU4n6lINhRAPAQoqHmM/mIiRN4m8VWCkFPyIVa2DhLSdh0JNrevbGoQph\r\nkSPp62OCO6EBlYC7QFQE1V5NTgzjOSrwp3gLRE/vizFH/nYfqAatdDc04dvn\r\nYn8v+Fqpocbg2fZHotL17quJhEcCTeUjgAoFOAlAkOCcxkys99qP4gV50cn6\r\n4UdnbaRvRmmX11gQxHmLFbKFIWieqHIoafc=\r\n=ORi8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.034767110.0","@material/base":"15.0.0-canary.034767110.0","@material/shape":"15.0.0-canary.034767110.0","@material/theme":"15.0.0-canary.034767110.0","@material/animation":"15.0.0-canary.034767110.0","@material/elevation":"15.0.0-canary.034767110.0","@material/feature-targeting":"15.0.0-canary.034767110.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.34767110.0_1671038483020_0.46693646334402117","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/menu-surface","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.1f99f3c50.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30e7cfad9f46ffeb25265a7cca00582edf79f64f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.1f99f3c50.0.tgz","fileCount":36,"integrity":"sha512-gU7DKMiyXVhX6TG2bTMq0SLT0J8iUqlMbKuGom/KPZ1zL7QqwtJq741ZVTDHF5pk5dMbdzLVTS/Xtg2KCO88qg==","signatures":[{"sig":"MEQCIDfbb/F9d/1UDtgSHcXEnMFaZJ+lXh49JpVWCjIsSspKAiB06zJNeJ1IrjWLuJ5o2yhHR8KRVgpuyrRoT7vS5tvlng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy5kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojUg/+J3HXiVqlG2DHMElCK3F7kV0wph8bt+3Arrqjam04iOihIxnG\r\nDHb1TTh0hj4269EnOLglx8cLHjZaIQ34fRKjXxq2amwk0ZtLzLfUrOOofCLQ\r\nczw4pXGcOcnbHBpx2gJcQO9TRZiirt1f5ucR9bLOlQGP6tPw+6ctFg0J6jsO\r\nNYNooiGf2Iraixw3mOvKrZeKceQLla/bUqqUK+4Mj/TeF3izfJwT74xgFUCm\r\nOfm4FeR1wvpiGck2D8bkwH69/G0EzIm2AdSWcNHo/e4a+Y463JsvlEKt6NnY\r\njHpXFKB13hT/XTB/9JbkaS+X1KY9RnUqi8DJS7ccjyhDoFrPdNzU+uE6UKAS\r\nfodo6+urzteMSUF1i8Bx9h/BorC7t2d1QSJnvFCZ1tmuBri/B6gl5zN3h1GL\r\nGxRhqxm+J4gEMEjFbs+eivO08ROYFDyQmg5lleFEcx8p282j0647TlVaS+/F\r\nju7oSQEcnYGVyB4PSgvKlJkkf78CpT5OPWs18qKdwca74Pw4eWo4EEPXpHvT\r\npEh9PynK88cIZ1/LMog1BuJXk7EpYM92HDl8lwKU0SAlL1yvYXUlfDK/SqQc\r\nFuGG4jW1evn5V94Q4encAYHBWvEF5FeG4UBavA7g7sn2uKCVi/uq19bjRQ+E\r\nndJgyY3kxynRGcohjQuKfMamnIB9rGltQ3s=\r\n=x7nX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1f99f3c50.0","@material/base":"15.0.0-canary.1f99f3c50.0","@material/shape":"15.0.0-canary.1f99f3c50.0","@material/theme":"15.0.0-canary.1f99f3c50.0","@material/animation":"15.0.0-canary.1f99f3c50.0","@material/elevation":"15.0.0-canary.1f99f3c50.0","@material/feature-targeting":"15.0.0-canary.1f99f3c50.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.1f99f3c50.0_1671114340477_0.5770464127120691","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/menu-surface","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.cfd69490f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8184c30642e6c89ffd85d571100a08af180789c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.cfd69490f.0.tgz","fileCount":36,"integrity":"sha512-HPylef1gqxfSffMQLBPH8haQbbjNeaLY+5RRes04IYX/mjKjfdg4geIzhdXXB8JioG9cZzAwpI94jRCOFDy3AA==","signatures":[{"sig":"MEUCIDRkfLkRi+1OBm2eAeZBZwoR/svvvYf3/cQ3eD70iObGAiEA1sQFxEhnPMaqAAZGJ0VUubvJ96bah8bofb1oLUg/Lv0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNBNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowCBAAnGjEh7slwV0lVdqwvJ/sfnPM8SeTY8q9wsniNHhkWLiSIMEu\r\neVUQGGhOOaHpBls/nFaWhLcHv5pnHuEHtbXh22dEZBWaHV0CKrxGqte1Cvqt\r\ngLLkeHdbJPTBgFoAI0oCP51FRYzYvfP0wxarLSisWxl6ivqzA2s/zm+Nemyh\r\nyWuVAzZpBrl6tQ6Tq3ct16hQVPiiK2ZyA5df42Ii2JjqPyvEthA41bmwARfP\r\nM7O5HjcBdF+QtibzULvIjPzgbBty2BT8DaZaLB/huJs+vkf3uWc3njC+DRie\r\nRMZpATYyt/RjlHBUoS7h5lQdsmdnshcEgt5LpKiKFEyViCP6TEmYSV+W47Yv\r\nscl+hd4JgOt1l7MeI/BVPk+V1RZwiaAV928OzYYSQ0GuSIvoR2mGnJZAVB2B\r\ny2zEoho7sUhvogfR969sjVi8yQ9BjfkZ2jcPjqdZQ5j1rXyjQsBfC7qBWnGL\r\nfG5kJpHUmkdTQZe3/mOu11IMuQX2yf1DCwjYv71Iugl+aVuxvPZXn/+c/YXF\r\njQ6+IMTYQqjHbbPx6qvPorM42MsHijo27hE4F6vfkOxCyconelkigAKMAG7G\r\nUs+2eDgToHaLhSLY+uD6eCT2Yfo55K8IyOUO3WGEFo2m3X7CyJOf42IaUqEm\r\nh/c6QDg1+iYETTSD/HnERCAIu8ouK5eTxOI=\r\n=zk43\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cfd69490f.0","@material/base":"15.0.0-canary.cfd69490f.0","@material/shape":"15.0.0-canary.cfd69490f.0","@material/theme":"15.0.0-canary.cfd69490f.0","@material/animation":"15.0.0-canary.cfd69490f.0","@material/elevation":"15.0.0-canary.cfd69490f.0","@material/feature-targeting":"15.0.0-canary.cfd69490f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.cfd69490f.0_1671221325058_0.08801951528068153","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/menu-surface","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.94ad8d986.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"193026edf8fb917f6ab09df13b04c4c1e69d5d70","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.94ad8d986.0.tgz","fileCount":36,"integrity":"sha512-LSgnM6yUF6PpZ50Qvh92ZRCe05t3W4Ocn3q+Rna2od7/PuVgyUZGBozZhCjO8zdCEGXOWfhQJiH5itdN/lKfsQ==","signatures":[{"sig":"MEUCICSKAHPF0NW5BhZAOOhJmCyAe1UOvRbNm45eCrebo0bYAiEAudQzxKSdu3H7t/7yiUfut26lM+z9grbPXQLiR4dVcws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLsTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmob9w//atZPwTwYqectANWTTcX4pVVU4Xfuu/UPkSgBdHfjjhUPD+I0\r\nvMZ5CezAxi4sGct5aLxABNOHszgy8TrssLXpBqr4A/y1hXAFTuojfeuOVEES\r\nJYTteD96Vk8hL9Ev0gRFemXtWiCNjhP2QNEeUqIpC0DA2YQW5jrosr5StZiB\r\nl6X3EMbZfEhng3tCh0E76skih+/FheSpSkFh87LqGMK299xGJcsLkG9p6dch\r\nRcHWAVMXBY61aokLqebNFIAuEIt/03p+kMgCDH0lsRMTI2pNKaaOgo9YLLxi\r\nB8CSw5GR1gDqU81oJEWGVjyIhaewWQkEJ0zM2JmuPHKdQ1d1C+HRx8HO+sZA\r\nmjF8tbw83FGwM4CGuJ3TaDUZ84RfAwzVhGkQytL1v2hgUOLsJpBqxbKU7CvR\r\n18/a8SFEX8eZ/UjgmwRIEuAeW0ngWB9rRZ+O41L98eNjawPwnbwUsnnNh1KZ\r\nsPs0phxe7iSrsQSbIR1+ud7cCv1Gl1kx0meTzc5e5+PoniJQPa4ZkIkGMMVj\r\ntckYfNEu6bNjJUJmwLVfU6zLIkFXyNjdbJq+O3NHSmQljtkikRf3r5sbSlZs\r\ntxqj6ccJxIP9t4bM2BUHS+cYj2g1xm9rY1E5DR810McMbAUKdiM0IQOUiCJF\r\nYajC5Eo+rwz3dZ4rYqUywvGqVfP+9/MtHBs=\r\n=/J9f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.94ad8d986.0","@material/base":"15.0.0-canary.94ad8d986.0","@material/shape":"15.0.0-canary.94ad8d986.0","@material/theme":"15.0.0-canary.94ad8d986.0","@material/animation":"15.0.0-canary.94ad8d986.0","@material/elevation":"15.0.0-canary.94ad8d986.0","@material/feature-targeting":"15.0.0-canary.94ad8d986.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.94ad8d986.0_1671478034870_0.9738432221908915","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/menu-surface","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.604264203.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e778bfd9f01da52b28681c7a18206e363da04d7c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.604264203.0.tgz","fileCount":36,"integrity":"sha512-vODqEJ9ArKlnhEG6pNJso81jDqMenYM+DNi2w8uAzi2gImcqwwsvTv6pJOG2OCo0t/JH5OFmEY+FGU8dH/94mg==","signatures":[{"sig":"MEUCIQCz8pXXqAMjxoZu4MaDQklb7OfeNmY8da14rKFP7VIpWAIgUQv0cR8okuIVAFYD60UDbMcYoXv65am2WF7D4Odq3is=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo31rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrqwg/+OTi6R5bUycvQkymEWarunbglg5gebwQyPVCYcAkwS5KHfZLY\r\nqIlClWXEQ5S1oLJxrbf02wVOnf7bY8jZOBdBhdcWVucWqY7JAfLmJzj/4VzI\r\n/Ae2fi7wdIl55g1hfparYO4VAgX0OjzkXBQSzOTPAQqLLS0UMsRSF49jI3kO\r\nH4mdWP7vdebwjL0ZYJI1wwrOWYJIJk1O8mgET8ALH29TYxtc+GO07Q8M/r/o\r\n2cQuRoygLDbsT7DAh8t561MTuyWbDv80NTHktOlpmGGQdPKoRdgpu5ehgZsC\r\n6EF4hH0WGQeFG/zKbuVl8m0hWBT4Cm6IerSitmkDT58pgtaVhgb2PGKjU7cP\r\ne/ghQ5ZDQrZ9trOlz//xr9xHBihBB6f79E3dGTVZBmgXwQqrucXGtolT25Dl\r\nfgYD0k3OAmhCINO5SkjwoofBYPVOny2VjUzPADjwFIpDZbHnlNosEbhTs3dy\r\nvHooGXXJJG8lk2pjj4mUe0BV++I3rUlLXIDD/O2AcQ7jcPhmk96XznJ1Wchi\r\nh+eTsF8x9yuEx9ehsSVMY1h7NOC2gcksan2SLiZpUaa53ICXvKUMtQmys7OA\r\nuuP2GSRaBXMsRn3PgXypnhKeEXPg4MY6GfKp7/F8+f2Q1aohKz/hZRWPd8fM\r\nx0lMoevuErdTCUpGP5lZuaT2YepefPlxvqg=\r\n=4se+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.604264203.0","@material/base":"15.0.0-canary.604264203.0","@material/shape":"15.0.0-canary.604264203.0","@material/theme":"15.0.0-canary.604264203.0","@material/animation":"15.0.0-canary.604264203.0","@material/elevation":"15.0.0-canary.604264203.0","@material/feature-targeting":"15.0.0-canary.604264203.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.604264203.0_1671658859024_0.02557508168549516","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/menu-surface","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.85bcff6af.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d065729a71099a0cdb84a4431d141576f1ba651b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.85bcff6af.0.tgz","fileCount":36,"integrity":"sha512-6OVqbFxj11x6RKhhdDmvY8YMYrwE3XYU8Qy67CyZpXBpYqaDEKY9nne4Mu3HmQtxKcPWWSt5itMQTgT4ZzqPPw==","signatures":[{"sig":"MEUCIQDF9xOEaJAuc8zAW/G/LlaiU/4wf6x9LM1BWcIj8clUPwIgcU2UofCUBgr9gT68u9+714lRzRqy4E/L//HW61U7QHw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDCUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplIhAAo2QuJTlY+m4j1PRA77l/qMQ8o5aXtuY2vRwqlDbHPDDvnSSE\r\nTqjW/ezvm8rygu69YIVauCe+4s7pjM4/Fasi2myIUifDp9GdXRKlwWeP8Qrj\r\nokMbu6v93ShWgJ3Hkqpd2LdTckJH5/SmspmwwwGfO3nP3dOCamXH7YMRzeiA\r\n+Vgf4WA8g8yn9f+bxonueiNf5lOOdtdAIHd5BVVPT3KZqaNtgypZX/EswnuS\r\nVPw7hSZJX75KKsfjcpCXcINUuMZUt4u50knrJfIIKjL6xsZkiQWAqGjlJkeU\r\nvYBNX3QuL96UeJczPuugbBnT3dhACWpBdhfuU4VzlyDRIv4yjQuCL5nd15yD\r\nEUHs2amejvzJa2FP1c6k+pNhKLsR95qg8b9Bz0LTadHsyEOUwANgT1I5ESNG\r\nsBMbbsrTm6quemDE0eYNAL65zBBH9jTOxgYb5JeGlvcIBzaFC6+LNAgLxGvs\r\nMInsqUpiX8kZQn1Cxu4OVoCm0zTJkb4ye6Flmu8ulOjj4eXI/B8rUU+Fx5nf\r\nwnEtQ5opiGCoUMPi7isage0ANuovFL6NGVsbKngJSiTTFk7/4CfOA6WsKuUM\r\nXdxEPAbu9nmI0chLjfpkz8EhRGKwcV78ZbqeKn7A/mZlXmW24q34dBgqcX1E\r\nqUjAcRvwzKIgRcg2C86p8JHDfB9XU1OzqoE=\r\n=tzNX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.85bcff6af.0","@material/base":"15.0.0-canary.85bcff6af.0","@material/shape":"15.0.0-canary.85bcff6af.0","@material/theme":"15.0.0-canary.85bcff6af.0","@material/animation":"15.0.0-canary.85bcff6af.0","@material/elevation":"15.0.0-canary.85bcff6af.0","@material/feature-targeting":"15.0.0-canary.85bcff6af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.85bcff6af.0_1671704724253_0.07925677783484542","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/menu-surface","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.ece3e8d21.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"810b11d7df9b0c344b82936b924917733818c4db","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.ece3e8d21.0.tgz","fileCount":36,"integrity":"sha512-s541IqWFnyKDOxAFxi5JZ7jlqmf4GEEuWhD+IBfkMfy3A/kwerqzantlg8DD++YzjoGMCE01fQVEA2lcWRd8Qw==","signatures":[{"sig":"MEYCIQC680cbopXvovUa5qdYOMc8fRxGKYDQ39JQAwtB0Ti8LwIhAODEowkN1gumUBL0uCFm5bR9z6DB5A5B1OyX4GK2+PHi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpI/0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCIxAApRv6bXAd5kw5DhiVa9HgGHLtMRJ85JycEseLiU4I5PciWjgK\r\n9/szikkA/d8rk8aQrNQly3ydLgeKC0+aafFwflwRA6UbAHXdroXXH3LYoTP6\r\nRclw0NN0og91ARxAaRDBfxrLSA+YcRyV1X6LMQ1wzptQ9nnJaALigrDM1Jhc\r\nILEEfwEg+lm4Y2Vubbo4opx4RgYlgiuJy7BvOXo7rl+P6ug5Oyce9YMNrEiD\r\n171pSUeaZuabGUeFek9ZtgANZrgl8HCUwxRBSvt6f4+BweDWkd/y5hmCUGPP\r\nsND0lXQdo7FC/vDQQujFwTUwcQW9RPFC1tc3ewYUqCQ3FYy5pdkV6m7JkKLB\r\nPiV1uML7577/qi+Sw2HyAEnW7nElLnX8cE63OXjMxOJbTukr6uOXrnbA90tl\r\n+0g3w+JesbcXL8u93Rk1s12iRfSiLtNgSRKzDkHiUgZ4MxbvlpgbOB3pYEU3\r\nGMuQYz7LQqTBkR8kqhEf4N6Kqwe6Svi4JCtx+MVHvCnAmyPeJ1hUXGAZo/TB\r\n4Zcjlbsn2alHy4ziqOCsGL/c4EjhmptgsEczWfeGGKaj9wkSJVZEL8bM9/HK\r\nQTmwxt/Xz98da9CIUtff9DXaIT+vsRObHLzMsPZz9yp6dclHpZiPwnoQfWoj\r\nl8tCU9S5Z6Pzqbz0nwE8smciTbWu/YZIUOY=\r\n=6+kc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ece3e8d21.0","@material/base":"15.0.0-canary.ece3e8d21.0","@material/shape":"15.0.0-canary.ece3e8d21.0","@material/theme":"15.0.0-canary.ece3e8d21.0","@material/animation":"15.0.0-canary.ece3e8d21.0","@material/elevation":"15.0.0-canary.ece3e8d21.0","@material/feature-targeting":"15.0.0-canary.ece3e8d21.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.ece3e8d21.0_1671729139767_0.8581189524752257","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/menu-surface","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.278ad53d1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"ad7689c4bf1e41a44e899a11f7570630075bfa95","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.278ad53d1.0.tgz","fileCount":36,"integrity":"sha512-GsRmO24hMDhBx2CaFQLGKJrp9xgOI0VqfHcZRIDrGK29ii3Uo7knuBLyw23xJl3S/OttrO1gVJSm7CXTZg+Jhg==","signatures":[{"sig":"MEUCIQDsatmihcN0Vg6LhCDsNZP8C2E08xXPGyVWCw7t0rkgxAIgd3gApfrQJmz6ZhhJVHL30VPtqgxAcoHjiUVTiwO/TzU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyXLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8CA/+MiRHfhT6BZFWokdlpyoNNnXm9JBBsqJFHSSmfD1VNqN+cGEa\r\ndc5+TASQuzh/mbRPxOuDMaqsuDOG+hBstowdJj7/qfEInySBQMQRwkg2EgG1\r\n/ARABk0vxwoZcNpeGTsZwxYs601rJiYkcu5jLG18Wx+YxPOrmfl97D1hF2Ym\r\nIlUEENk0cnXjfnvO06/j4+CjsQ876Cwj2Vqu2Gb0qqq8PtDT3nN7Iy5mZRST\r\nX/2VqwC1XHQBa7V5hKH8mynJ90C6AvyfFiXS/Js2C4xPBVTktEqiyU6PQ8/1\r\nrE4VR3whg6KyagaQzGtstS2mAD2Yv8Su38c/ys9mPg9NCvPaJr7MuwUe0R2K\r\nifq1MqQUZUOqTzs4TyXjz8Twh7cGpoFUd+aAMMFmD+Cx7Sw4P129JgrEwix8\r\njY3VyOtMzhvbP8C7gj8T39Kcdj2VHbo1laMtIEbMjFZQLydiKZzJvWGb5NZL\r\nrmpDisXfgxvQsIyI5TFl45cfkZ8KD/yJKzHpovFhSmqOzU/eGkSHO8OJwUN0\r\nkYeOwFxMjWyPg0CY7qrscGEDb9ALXgKL5lzgg04XoDft00UqV330k+7uoeHT\r\nlG9zeZpUHedaCYm4owT5H5HwMArfwE49ZjMtfRqLClh0PRL8OTjc7+nhgR9W\r\nbUKN54LJ3ZK5I+hy1YzSB9GZanDLhLGqJCA=\r\n=1lLP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.278ad53d1.0","@material/base":"15.0.0-canary.278ad53d1.0","@material/shape":"15.0.0-canary.278ad53d1.0","@material/theme":"15.0.0-canary.278ad53d1.0","@material/animation":"15.0.0-canary.278ad53d1.0","@material/elevation":"15.0.0-canary.278ad53d1.0","@material/feature-targeting":"15.0.0-canary.278ad53d1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.278ad53d1.0_1672160715363_0.18310642995537996","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a7d8389e1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"9078d66582c8eeb0402bf2e447e24262a9986722","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a7d8389e1.0.tgz","fileCount":36,"integrity":"sha512-m0pTNrMDJeAFbkersRchpeh6QbfhXTIoGIc810zMTCx4fahKVRveXkHryXwwwHs8IYRIQ0QfMPPo76QeG4QxxA==","signatures":[{"sig":"MEYCIQDJ0anYFyM96Nf7qSWihaRVjVwdFlUvF9YPyWMYrJUm8QIhAIrNv6GpksAhzX3z7lru+hQ8OeSFSfUM2jgecWNl8Ui/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":333511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0GeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpD5w//Y9zTK1QzOHiqB116Uqentt9a4xWfs2o3PB2uPAR+hpvtpJlr\r\nHNGg/p5jWpbS7ArTjyEShgYQx/Gg6qsmykZfO6DhN/qEwFo1OdF3sBoQobPg\r\nyWw/7RvGrJr26KuvU+GHukb4FMymN/ZtqsfQvgw2vbZ6RZTj00ayySFIJFco\r\nV9mwVCbtyzp2zSEUgUdCOZ67nCGCkUNZF9k6hhNUWADGi2W2A9/CTHH+xrrW\r\nAScVc+TI4Bp+roOyMDWRHQZ4PNqZmFXtTfeKvq7BJIy+Dv5y4VUJntxm143U\r\nAkdvmdYlQ7ZKC9JcwgeIPI3EeMRo44j/2myEozacC6m8cxC2q8+C9hSAbylX\r\nZP7jvhWOyUK5+KjbbmTxqcOcjx6zaf/gChwZ/0oPkZlUGel8KfpTKk67Oakd\r\nyatL3msqeJ/dZxBYvfYhKn7ZlQj2HjcoyGC+CdsD64XEBciOJMCbhNCZp4jR\r\njvWuEFoV8k4aTmginCQmfT7tQzrIdSO1lP54XWYuk8YMQFioqOUERcmitjeM\r\n7Zdd1yoPnfQ+vq3sCnD/EwyfG/lnHlGjddCOhM9jCM7ZI59gZTfqfjaMmieS\r\nE8r31pjfkvSW8Msow5rJ+AcWnEJG5ga3swW5wdRPd9lp+e/yDnl00goBq5TD\r\n/hd7KNXMY/uWBrvNbAsRfEp3XJNSxTE7atg=\r\n=J08v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a7d8389e1.0","@material/base":"15.0.0-canary.a7d8389e1.0","@material/shape":"15.0.0-canary.a7d8389e1.0","@material/theme":"15.0.0-canary.a7d8389e1.0","@material/animation":"15.0.0-canary.a7d8389e1.0","@material/elevation":"15.0.0-canary.a7d8389e1.0","@material/feature-targeting":"15.0.0-canary.a7d8389e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a7d8389e1.0_1672167838063_0.7084756690558811","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/menu-surface","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.8175d5eff.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"2e81880be7c3b7220f3af7e109095002fedecb14","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.8175d5eff.0.tgz","fileCount":36,"integrity":"sha512-xNJJclxzNQlgTb8nZf3HOABNlaZI8Rt9rlj8q/PxN3J7cU7BHRpfwMGoZnXUrha0iPtOLK+nS59n8sZxTcEzkQ==","signatures":[{"sig":"MEUCIQCwbYOUNVMY2bZrbDIe6LHcB0spDT+XsK+lpXWnGsNuQwIgZcy7wkdxsBneDA3oeUzsI5VMl06NFoLv3wUQyaT8qmc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6EyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqP2g/9FR1dIespCiUp7QeTbKkDlQLRuJTLfH2Zfxbmu0TyuGhsySnV\r\noV+i42WS49x04soVhOguOyXbRXa5wQ7Q+hBx6ZAu1YU7c8cYyjB4HjOCXrhj\r\nY2ZxIN9kA6lDOcvt5wznR0nbpOxWC48941n06f8eP7UBKO5yNEk2Q6dPwElj\r\nTZndwIhcp1dAt20n8h2Y85qfQXRhJp4KBpJcXVupXpfoAKAIGa8DvLxjaY1N\r\npBarBHT2nOiXxeFM6fAg4/XAweEAOr4lREHNewd5WgEuBh1T088C25854C/b\r\nQdCrrfecU1ahv4nf3O+8MXtFSzthVTGBc6/bax5cIpBu1Ap0myqZ2m9q+LSI\r\n5gstJhOCZhhmx4s7l9qd7T5hBgqsdLmTvvySJHaWpy3cwW6JB79uCxfb+0AZ\r\nM17KqMYwiHQaJ3sXqvmjat/28V99ARE1/Qb/vL4nX/9QNtUgM6zePJb5z5fI\r\no8HP26DOmj5iolzAzZDkF3MdxJItNR1wj+4WJVM0J5UsGze3MB7ZriTcMUSN\r\nNitEkmA+tdfMSyGrvnlgVyxYA60NYuXPhw+jWcM2b+48k3HDtIgjj2ZpWa2y\r\nzttJc+RIvtKvuTKfEEDMZf9HljULLpifUHQIB1OiClQjkNBIfqp6Zx5ER0+O\r\n7cEuwtwWbqTi41FJzBQ0kuHcRxAKJeNxF0M=\r\n=6cpk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8175d5eff.0","@material/base":"15.0.0-canary.8175d5eff.0","@material/shape":"15.0.0-canary.8175d5eff.0","@material/theme":"15.0.0-canary.8175d5eff.0","@material/animation":"15.0.0-canary.8175d5eff.0","@material/elevation":"15.0.0-canary.8175d5eff.0","@material/feature-targeting":"15.0.0-canary.8175d5eff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.8175d5eff.0_1672192306348_0.2280085519684174","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/menu-surface","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.e21dcb86d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"e0d864e14058c3ef3e5cb7c3c2538a50993f88de","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.e21dcb86d.0.tgz","fileCount":36,"integrity":"sha512-EDAtrrxXLujMUOCJgFRNbVxIyCV82b8OmgWhRRc7YDHrZ9zkPosOmiRC7OkuQi59l3OsjEkjOk692QDbLtrjPA==","signatures":[{"sig":"MEQCIH8jdKpXagKPUcdS3ok2KQWkMIKYwuRUaKJFmNoYwEUuAiALJ8r8aCfhneq7SLGJeYdGjtAvJfWSygONmBCwvt5/FA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ3rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwIQ/6ApUsnJ7KxeMv/knv5a2sZQ1U2+Mmc5HpGPIeOQnzpbS6mjoI\r\nqilZTnOUB2GLD//u7ChwErc32LOm44fzb6FFsIGca6A98QHesdYtAGf7emVL\r\nqA6OCFZLAn6EAMyG1W95EoujUHHLQ0kgSaZmXFymO0QifYAATV7FKG9zoX4Y\r\nSckoIDyTdtBXJUeMLTP8OAb/eWWR/bT45s94e1AL2f2DwymHZN/xDUH5lnBX\r\nVo6hP0PA8sBVwC8eYerIbErqlS1e8iK9D6M5nXFNekjkYGDPlV2SAn8Wvltn\r\npRe5rWoWL10jifqLk/e8T9uEhw8GdCYCCCZN72eZiYPwO/Vl2HW9ag0/jUHJ\r\nuRloou0pISxBT5wvBAL/t+3LLLk5rbGa9lNMq83gA7LfjmpDjXdBtmI6hzLo\r\nDXkXnJljqmzCVvI4jqYacHDFc7YyN9qiIh/F5bYl/uVrVmJPHxlJDrw7Wahe\r\ndaWHnESXL1GhvX0v2J7lhvbEtUAMmBb9Q9W80h9B7JX3in33qaEidAZJ2j1v\r\nWRX46PsdjVBPBMva2wT4u/V7/sHQhd/qjatQegMKgseyabdcTjNXwjVS2LfE\r\ndLiceczeGkQiWqtxipRAPBaf0MmukPJapvnjKSd//1LMRcswG4BwA427qhsk\r\nJkav4RjyotO7wo9wzcf3qBweb80pRdyM9AI=\r\n=k/uK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e21dcb86d.0","@material/base":"15.0.0-canary.e21dcb86d.0","@material/shape":"15.0.0-canary.e21dcb86d.0","@material/theme":"15.0.0-canary.e21dcb86d.0","@material/animation":"15.0.0-canary.e21dcb86d.0","@material/elevation":"15.0.0-canary.e21dcb86d.0","@material/feature-targeting":"15.0.0-canary.e21dcb86d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.e21dcb86d.0_1672322539517_0.35505664059053776","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/menu-surface","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.20ab6f5a8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"e83d03e3fd9ea3139beb52a91533adf32cdbb928","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":36,"integrity":"sha512-sE6Ivs+BAHityVx8DJycDkT0iC7RzmNa+UuN/uHRjINS6EWOka3UwU9qU6JLKm0PfYcMc3Cp7fD5IqNAk9c6IQ==","signatures":[{"sig":"MEYCIQDMEIZ5yeZRTsbJusqBg77XmwroOuZ8CMjgyPo3oFfYowIhAJbZ38k3QK0s5DYAj14I5FeZn4CRXizPH1N0rTyMgwqu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":334825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre1SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpM+g/+PsOQJHkhvthupDR8MxQ1pFUEcz5D9WsFLqafVR4M9DOhzj+6\r\nNauYEDCBUeNDY5ZJNvby60IRvooAaFg0LKxCIwK5wgz9ZK5mcCN7D3O0P+hP\r\nsGbMos+GnhELNlcv+LJc+jxFqo5D+NgpEcztlkHQfI6qf+1uP4e9kT5UU8Tn\r\ngMcFMZznZ4ySo6mbjrfEPjEJOKPSsXDXBebIeapvr2y0NPGCQ1y6Eiz6raWv\r\nVI4gBxYXfix31njXiMrY+HYjS9sVMtRipXxkcbqVeRXiI1sgC5ImkJTktqMd\r\ny0RXb88CGIV2m9RKoU3kMEMtUBM6BIW3AAKshlXoPRF8GlQjmbBsZzixxcvc\r\n8MKADGc+S7LwcNaRgCEwVJ/5mlOKiK/++rngiiQ5P0PG4LVUE4P1m0DCAjM6\r\n/4bS35aXf1SzT71zmv7299Pb8g14h3m41B28fFMq9GrDL+yTep+duaqaR5x6\r\n1bhBqtmakxsnBTR+jcQdfYmEbqwjD0iqQWVR2UJm46iFy/mEvle8gHZk6WUQ\r\nkjp607ObaKKOk9AJWTa+wlC6LACre1CIsw2ZtfMxomVvb8/KEDTmyvOPIiRh\r\neEHL0tEqlE+w7VVmgYkpenyEPjuVqEhf2lLD79oFqKhTnqC1jsrty05A2Laz\r\nn5okWiC9x87nvw39FvDT+BJMhF9qDAOuCGw=\r\n=rE7I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.20ab6f5a8.0","@material/base":"15.0.0-canary.20ab6f5a8.0","@material/shape":"15.0.0-canary.20ab6f5a8.0","@material/theme":"15.0.0-canary.20ab6f5a8.0","@material/animation":"15.0.0-canary.20ab6f5a8.0","@material/elevation":"15.0.0-canary.20ab6f5a8.0","@material/feature-targeting":"15.0.0-canary.20ab6f5a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.20ab6f5a8.0_1672342866487_0.14427302336333914","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/menu-surface","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.b9806f623.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"5e244174e10ad6f374f0e65b79c2943815c601f8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.b9806f623.0.tgz","fileCount":36,"integrity":"sha512-Mhh0lHyngYrckrVCDnJ5xB69pBqgDf53KBoezWXf7/PB7zqQyLfmqiKDyrV8/n185eWFS7K0F+eXxJeMyK+MYA==","signatures":[{"sig":"MEUCIQD5CBodDT+tGc5XxoHrvZU/3UkWgHAh+hB7bwpEHTd3QQIgT/qJFVICxn6Y+Mn2bKU9Ukt3wN1ro9KlPV5NG5o29Oc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh1XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpebg//YjjMCXmfWK4HcdqRolq9TsOJnKF+x8amgTxerJaeCf5qc96P\r\n5LAZI1Ze7X6CPOihzbDW6eVbq9OwRETbe9QGiFHEud05KptEkKdHPbQ9MSWx\r\nDhBkWOaVaSoGIbXgx2StplpkVmkHtDa7jbOIZ3lkywkKhohpqAvrB8ZjifX6\r\ncrZtM0EISbiSM/sYGXcsbaqT8ASurePbneDIky+ZbjxoHtEZDyXW1InGNmhz\r\n01jQvudmeyazVOWLseR7TGajnjifXpFEzpfQdPWuWiHENOQP28q7jhn5RQZb\r\nHwnD+9hjsVosCEKUkd8zOjHuKK3iACww/MygAmm9iFgWHl9ua7LGAM48o6s+\r\n+N6XsfFiXEjmQDpztvAU2CLEOuI5IzyLb2C95pCWSSftV32FtvXXmNXPli2w\r\nrQS6Q38sDqLn7Xv0rsUOFVJWhN2M8fO9qImsLxA7xZjIRQulsqvctTnCynqV\r\nRQs4xHH1aly1i54kKQ31GgHyE+lFqKsFUw5PUJIwDpOr/9fBNzd1U9QEjuFQ\r\nBDtcVfWswSaQaeU7hbPDNRqGmlaAcFKX3pqLlQOrH0kXc9eNIQgtlWvho9en\r\n1jrPEtSi5uKlNTGZwbr45pIgyOaDKlQ4fnMYJYbXQ9pzreUElxYlQV5i7Nc4\r\n6wvkJ9eGCy3EcbQSho0j4AdmiNeVJneAU/Y=\r\n=N3Zd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b9806f623.0","@material/base":"15.0.0-canary.b9806f623.0","@material/shape":"15.0.0-canary.b9806f623.0","@material/theme":"15.0.0-canary.b9806f623.0","@material/animation":"15.0.0-canary.b9806f623.0","@material/elevation":"15.0.0-canary.b9806f623.0","@material/feature-targeting":"15.0.0-canary.b9806f623.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.b9806f623.0_1672355159496_0.9860929992713718","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/menu-surface","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.50c9f550e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"b1826a7aa5f8b25b03a51210247afb0f0052cd0b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.50c9f550e.0.tgz","fileCount":36,"integrity":"sha512-OJZlFjNedxvPV27V8spQUPB7qRGI0qM2XdL20y+9B1nKfZMDy4BU+3jby+hNHLql3pm+NcWmL4zpYs7givzy3w==","signatures":[{"sig":"MEYCIQDtSjpIENuPnDelsraHZuFKLbJvY7ZF8c6p+evGLIBvaAIhAOfdukRFkG7Wl9P6GrMeGLn8Rl8fPZyz1JJxdxoXtVwI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE4pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqaBAAgfOYehtOu0na00YxzUBB5y+CFadh0Lz038c/WL3jGXeCnzmz\r\nvgeoS/ec4UY3YEY8CpMp3EBC9R9vF3PrTFh2VsSQwSRGaoao/BzBFt2+kQCN\r\npRYDyzwCXeWIDEuXnzLbO0pMew22cE+xwGN7N9TSw2idbvp07W4G747mAYQH\r\nfo/Yi66lo5mkNFu1bqzZYFLBK+C9f+sSjVkBx0XNGSTrQWBerCKlQ+P3HR2I\r\nNqtH6kQN/AQdRKCteqweL/UwwsA82v81Zusq/+QWI8fQcN6dkUpC9iKXuTJT\r\nyJlle+NYEDZVBC6vhP/hhBqCaqWSrrapW0VK+9qBp1qYWBakWyQpPFodGzF9\r\nRgagvMuzSJmJI0CAealz0PQaKwo+/DLamuTxV5dqVU9ET85pJmZq2f1L4Lpu\r\nZ9lW4oWzhWU9e4DlQbfFY6M5QfLcCrnyxxDI82AoOOzEpljvriNxXT92/C4J\r\ng/DJOh9u3OkWfc1yqEhe9S+rjaTmmzkg40UIYh4oN0whdedNboG84ucscz19\r\nJVGqtyLIGSmjEieeULQAyQo2c75QC72hu7eTyl5B5IC28RFvNEEtYvuO19aq\r\n1Dnxv2+KUpNQYjgJo3a6uLiCife4Vzu4CLrG4fYw3shHjT2Q4btVa8uMGHks\r\nRSvDONs+rBKgrw27+WhVCXJ1H5SVXebEGAs=\r\n=ZC3r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.50c9f550e.0","@material/base":"15.0.0-canary.50c9f550e.0","@material/shape":"15.0.0-canary.50c9f550e.0","@material/theme":"15.0.0-canary.50c9f550e.0","@material/animation":"15.0.0-canary.50c9f550e.0","@material/elevation":"15.0.0-canary.50c9f550e.0","@material/feature-targeting":"15.0.0-canary.50c9f550e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.50c9f550e.0_1672760873223_0.8026466120167854","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/menu-surface","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.af490a848.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"2cbc6863a124af3de427e91ba7343c2109e83e2f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.af490a848.0.tgz","fileCount":36,"integrity":"sha512-J9pbKtCfLAOeOw6OCWWm1smpXpIKhfRufRVKyTOD6CwtMtPymaVdF2AT9i62a11F9C2j5eocZfrV+HLWde/zjg==","signatures":[{"sig":"MEUCIAzJOWhFBIyfw/WVG5Aqlew8MC/TU+yvwos2oBd8D3OmAiEA5VMa82gIjK7byoylMiD5LzO7BiOOxWkXrMuPrQgggLI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFBiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXDg/8DhRogHo4RC5aA8Te20PbAjKlf7MnT3+E0ZfpwGri5i792CHS\r\nbk7DKoGmc8URTzFcEKIKJmyl7nrDUVE3y0Jj875NWLkjQMjBWH5mm9gwbduY\r\nSXQhr262a6QVtgevv/8RjryJonerOFEaoioKYwRAakKs2HFWyEEGJ4+Q3cev\r\nNLVs+VRcvpHPVqYCcFTpQTD/8zEWy5fBZOT3HOAXZRi8lPHNT/MjcSOz/tKv\r\nsXivDe5X1jdlLxnM0WZmqZUvJxTj9lTpg9r9PW+aS02KnnVrG8fHhGeZ10YV\r\n9vZ64H2RfzYyda/CSa5AlTQGFhufqWD9mKLoPygFERmMM/XEjvrq/G/TAQVL\r\n4c3I9n8LZeY474Mq2ZknP9vi+1oc5YJK5jbmHQZvyd2D9R+LIgchHVkZ62pj\r\nHCIoquh+UieH/1L3iAGsdWJowYFcCQ/f43+4ADmrElFaK4xiVqnOuF3Yhxr1\r\nuczbuIS0pAzV1LmGnfZkCfdA9h4COA63B9TBQtE2+QzGOtgsfqAo3g+FGvug\r\nZUjimahU2n4ex+yPWraAgrEFehMls4ZtedEbUf8KsbHnuUL1DZ/szUfVmuZ6\r\n7HNQLlz2xsvS83Y79fKmCPivTO0HD72fXX9SgJCVWn3UwR+hyixb9D+Nulwa\r\nTQ64vfwRkXgRS6XofId0z1snGk+bSCI2OEA=\r\n=nw4N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.af490a848.0","@material/base":"15.0.0-canary.af490a848.0","@material/shape":"15.0.0-canary.af490a848.0","@material/theme":"15.0.0-canary.af490a848.0","@material/animation":"15.0.0-canary.af490a848.0","@material/elevation":"15.0.0-canary.af490a848.0","@material/feature-targeting":"15.0.0-canary.af490a848.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.af490a848.0_1672761441793_0.252392802031169","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/menu-surface","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.7cf487c98.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"96c08b93642301607fe344ef1a2d785211dc11a8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.7cf487c98.0.tgz","fileCount":36,"integrity":"sha512-hglJGn8L7++ED/nNh+Qq6vqQG7JPMBiywmbfvbhR/WwatQEIfpADf2zzkI8dlT9wDko6S1crGp/nldziELeUWA==","signatures":[{"sig":"MEUCIE1drTFOi4vh+LMeGokCKXL84ODRVFX5f1OdU+L6MXA7AiEAnnKIkgELvTDNY2LWq0cmQVpZpvBniGdAC4Ey3pLjH6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":335283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGgwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7phAAj6g4B8wi0MQBZFHthUBcxgcdLUa+pKglBqUfS7RUgNU0joLo\r\ndbdcZy1JRjOb3RS/KXcsLEv1QXtGZz0nbJLCQXXEZ8ZkQ6P981OFg98BCp2k\r\nU+N8h2X79TrusY5gPIU4dbM+rkzWdNyr95xtGp6uPKRK1dRXRmDWL+3zf9/z\r\neUYjiOIcGIxSTWq3C8itxIOLmEbknIqA780aY3Bp/+V/zUdLquFtSLEkAtS4\r\nFsKQEcNxEIKvPlDHyk+uwY3Aw1JLDGt3acjAIrKCmxUj7ACZDavtAuxbo/X5\r\nGCQQT6pnlUHuDO7S8qlHlL5CpBi+EVNGOJqa2QDrgDqab2GsRxg8fZQFlfRW\r\nG7SIU/n5JomeW30PSVPRvCmSedrbMVg9jb0sy+8s8OTCSZi6h8Dvbyz+9Vr3\r\n8zZAAJvKQTp7IT+TOkt87wEwtpZw49sk6izR5YYlAR7TluKJ2uPZ6q2bY0KO\r\n9RARmExEo26xBISD+1I3fv/PgsKc72qpZyU9BZLapuQciVWiOQg6/LDr0MM7\r\nGHAoStXsO8EnajGGJlM9XtOC/AdoYrrKHcBzdCq74qrOMG3ccRik/DNA0kDS\r\nf/R6dz/aEVqIJV7I766H3a71WRVRu5nN/sSsluTf5HjQAJYin9bB0d4sgv1/\r\n0ftH7OroAlfQv6fyll2TqdoHhW/Ep86MIwI=\r\n=GuUZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7cf487c98.0","@material/base":"15.0.0-canary.7cf487c98.0","@material/shape":"15.0.0-canary.7cf487c98.0","@material/theme":"15.0.0-canary.7cf487c98.0","@material/animation":"15.0.0-canary.7cf487c98.0","@material/elevation":"15.0.0-canary.7cf487c98.0","@material/feature-targeting":"15.0.0-canary.7cf487c98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.7cf487c98.0_1672767536784_0.9002093070539099","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a52be2d5e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"e42e49abf888a16e2804bcb3da8f102a32880bae","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a52be2d5e.0.tgz","fileCount":36,"integrity":"sha512-/rM5nJhIj7H0N51Fle5dl22nbXJIEoY0x8FKLfNPoQA/FzDuW4KJOBjMMWTDuCSmHrcZbk+0QY70r8YNp6kAeQ==","signatures":[{"sig":"MEUCIQD/+aOQxeIr0M1kvGOht5l2cCDlejDIrg/wB+8sCdTQHQIgZ22ULc65/fY5zsqByG9vbchPD/ZFH9vTr6zwS+5bnfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH5OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpldhAAnTZEaVJizGTO7JC8niioNEosY45OLDgaY5kCzYPp1T0dwxAV\r\njmGvUi2dYhUkAN3cfyswrmSqVCYVGlEuYjGMdvHnSvBlmzn1Z9ohBOoUlPY6\r\niWAsYea1fEHVX1n/JxVYXT0miVF71vh+TOQ9x2YFUOooRheDceTLpThG54DH\r\nI1g6Xc9iURYfRzIfI4jL4qySMZCAnGpkcqoLF76rUvY3b4P0d2yoDZRw5/cf\r\nkW2oU2lx7VDYgFHc9ASEuvPzkrYbU6ONPUY93X9LqwqwKrBFpfcq02KH/VZU\r\ncCCZP7T+YgjsaZKuZN0ALLmZoSxH945Q/hEHu5wWGFa8m1MWUAuCE9v3/o/L\r\nNPwduANLwLkoW6732vUPpjFsd1gM6oSzcl+cV3H96VuvWK3q46HdIW9vsxE0\r\n11+sdRxIJCk0Ibfu72XR6QkoY450cPH9m7vESCr/OAWwAfVkLJzylMCArJSe\r\n+AYlqYRTUMf6K8LOoO7+Zmkc91Z41WzBdtm8T+GbJSBhWouhSExXn/FcxXWY\r\nvUmg+YO1W/yVTp9iwFYaH0AEmmlEruxLzGa+nNQ2rXd5ujYUA3jLfQ1UcgIZ\r\nsmd32j2wKp+2LhShpDvLXjGQ91BGY1Wj2aKsZoThRVTHWbOpWXO0UZ0hznSe\r\niKtSWOD5X6i22ntL5ShE02/qS1zQ17rFj44=\r\n=SorD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a52be2d5e.0","@material/base":"15.0.0-canary.a52be2d5e.0","@material/shape":"15.0.0-canary.a52be2d5e.0","@material/theme":"15.0.0-canary.a52be2d5e.0","@material/animation":"15.0.0-canary.a52be2d5e.0","@material/elevation":"15.0.0-canary.a52be2d5e.0","@material/feature-targeting":"15.0.0-canary.a52be2d5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a52be2d5e.0_1672773198614_0.7532568905244621","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/menu-surface","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.e38ba17c5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"af82bcfef3feb81dad8198a248858d2c7d053186","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.e38ba17c5.0.tgz","fileCount":36,"integrity":"sha512-wL7STMLROx19usTW0q/O2vrsqed50FzlobXRbS/gre1v1SGHN4lYJ6eJjyRLStXtcKkYcFh+vdTJArORvf33uA==","signatures":[{"sig":"MEQCIElsyU29DhkL8fjK2FkOUg4YKQhJAYFg67TslDzpFZWfAiAZKHZTgpUjBuyjr7zEs5XrsY/+bXUBBx6GuUQLPgdW+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtK0GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpP+A//epaX2Jwel0U0UCtRn//byMrYn9rjHsjCYiXImY50xo/NchX+\r\npGf3x6+Tnp32TxtdPMoRT9XxqNnnH0K9zhCB9rTjiLZb52EiP44xwcO05LyA\r\nGxwV5M5hYmfYPmTK7Eqg6TNE5LsTiYfL1Op+DXQLygTEFPcSqqRP6frHA2RB\r\n4x7JzaGn5K772DI2BOymocYdR09SJs9IhKNYHPyXeO0rbvxhUnXz4SKYOrO3\r\nbzeQyA1qfjs0qsdSknAaTYKj2IAy8LZYGWa4dS9yG2xwKydI/pNzc2Z6E02w\r\nFMT9ybyfWJxc8DwoNJ2gVVvo4PED4DpbhVEN5YcbyKfrSN2MIIhDnM7g9Yy4\r\nmTJ/G473jr/Fost5rX9b8Zo6AZBEpSFzygehLHzBh9ZUbAJkC8uAvCr4Oxhv\r\nQ2PsWTybRKWPFIDZCEENycftpmTYIT/4TK9eTokejTI3ZERXQBWjesLQlelo\r\nuRYxMKDvllhjfSNgNXwmerg4UB9emamCRYNjsYvCptj/1opBaGVp/xml8Phd\r\nEF/uug8bblHN41UmsjUIEjeP9RTwChpeR6v3W2SVIu/mT+a88l3S+djta/ga\r\nyOVULQc9UavKL55JrmEeF7FsX5L1huTetHgC/YBYnmAup3Dv0Fp/qYpQ93aD\r\nRIRsugIEhLBsPI6CWrjfb5OxB1tls26rSjA=\r\n=yWWm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e38ba17c5.0","@material/base":"15.0.0-canary.e38ba17c5.0","@material/shape":"15.0.0-canary.e38ba17c5.0","@material/theme":"15.0.0-canary.e38ba17c5.0","@material/animation":"15.0.0-canary.e38ba17c5.0","@material/elevation":"15.0.0-canary.e38ba17c5.0","@material/feature-targeting":"15.0.0-canary.e38ba17c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.e38ba17c5.0_1672785157890_0.5124922282466275","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/menu-surface","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.49041a6c3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"604f91e32e2dcf3ca1835cecdf1f295bfb0b5207","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.49041a6c3.0.tgz","fileCount":36,"integrity":"sha512-pPT0z1aqCdJAmxtJOou+O28u39jHn+bx8uwHUWOwmGUOvICfpPb3yG4dhbcNG8imHjY+NRdF/CrEghecEtMFFw==","signatures":[{"sig":"MEUCIQDIvb7Vr5Ct9pfIB07WQyHWlFSH7Sm4UQfR+pgaJxN+5gIgHjzZnSRl8H7xzLyfxCagT6gliJVpTaOmsSoUCJQEEMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZihACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqM0A/+MVikv2divjSSUSA4HHx+SaU87qPQ5o8CaAeb9GMYSr4K3Xzb\r\nUG8RsYVVA+rXZ1V9y04I1Y8bh4ANaMtBPVj2p1c+/Ggpgx4r2tpN1rXXX4qw\r\nE35qNZI24IzGWg1Zuw04ZS1yOTQqM2hz1it4cYf/2wVnhCARmrEpvzhnlqWg\r\nvN2Vs2W30Y15qwwGXTRfV+q1OQ6Kd5VFlSN/40MbuOwWOROmy4ow3HeXMEAQ\r\njcKt/zM2g+mteyWacmDj96QgN11GcEc/SIfRxisKT8KV070RZYLsI+dnR8sH\r\n/JGeiPzbk46YTYx8pjJ7z3HAn2XmjOETuLSU1YIXj9vebwnHpt6EtbfSt+hT\r\ndMvL3cyT2zT7FKh0v3v8MYEHwmw4WQBGqJOYZwt8B0Gq+mf/XqhImXGGHH9W\r\n+b7tErwZ4kDSTJzEKTw3NmDP7+ZSDfRPgjeY7K5fI+HfUDzVDHtpy51pmQ6c\r\nO3IzCNGBUPRM7KN6TSQ/aM0ijyta665opvF+4A1MujqOXNW1nqUcTXAInM8m\r\nsvtJORb1yBCRocdGDehOm6MsFmx6FsqkQJLrOg8Q0xXf8AlfN2SZQhPm4A0S\r\noJGnbH2cmWEbWjPdyaaJED628j7T6BgbMuV4WVhmeL9DmbFgKNVkBblaCo4a\r\nLK9PllfXCkqHluzmOxG6rIjqvM4tmpAt3Iw=\r\n=7Ssu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.49041a6c3.0","@material/base":"15.0.0-canary.49041a6c3.0","@material/shape":"15.0.0-canary.49041a6c3.0","@material/theme":"15.0.0-canary.49041a6c3.0","@material/animation":"15.0.0-canary.49041a6c3.0","@material/elevation":"15.0.0-canary.49041a6c3.0","@material/feature-targeting":"15.0.0-canary.49041a6c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.49041a6c3.0_1672845472863_0.38918460337954763","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/menu-surface","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.c492898c2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"ff63e2240644a925e130e640fbbd7ee24667df7b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.c492898c2.0.tgz","fileCount":36,"integrity":"sha512-VODnAZzE/oAAUITyelA44mNC4pEjUSLHQHNwyy4VirY2RpNxERkkCEwgo/E/WuzxVDrEjXhzq3qstQ6+CMqnOw==","signatures":[{"sig":"MEUCIQCwhuygSEIQ3iRSYAUq6qr7WY/OHvaLggBfWbBjVcn2dwIgYHkxAVl4YjCXDzCJtd5VWduuluzwRIWZsq957yZwsGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtblTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoo4hAAgwpaAu8XVaM70bX76zOzZRkMDc87LkuP98Gul0mEp4/Txg8g\r\nhgJF12z2/H2DcDYyWP6LTLKt9HRMr6zyd90VwHQd9mqWObxICva5QeMCYI8A\r\nzW4xdv7cu2rcgvlSzvR/fsyIvooLC6gTifCdCvH4DmvWuAVVTnt4MfN79s0v\r\nY1E6gCk7xaf+lPtA8GWHFHz46pCe1/58B5cIFt9deJ/YWmurfg3BXO0akCB5\r\ndLKJ4iloY5nBdWl528ark+oFG2z4rnKabAVAP6oxVndoiuAoeEKHhuHUSZcX\r\np++cmm+jWDPJhASC9YXoopDsfRf42IhK7Apo90EkNRDYzxp+1S3kijl0JnHI\r\nQmHCPZmPPh5+AvU/MtirJ+lnPagUZw350gAuRd05v222Nb3uoIivBgBWGXvA\r\nEKyFod1bhKjvKih8GO/aVAEGpot738PhTkrmmkW2bQ6JvSJ0MBtKlW40Ug12\r\noYp0jVW8GRcPdbp/1FkkyriPy/6AB4GOO8bomF4x+XcByksneSL78q0v5UMo\r\n4gClv5mbizTgumtAUm8wOreJDGhxQuZKRKPp4eWWC109wD2kEo+qjAFHC+cQ\r\nRxkF5JqR8cT19huj92zroB/+TaLJuv2si4QA3VJ+WrLhWYeH+P3ggggTrnZ7\r\ntKVvvhwKgstMe4wsMMEs/xj9Hh5aayNEwhQ=\r\n=ngAk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c492898c2.0","@material/base":"15.0.0-canary.c492898c2.0","@material/shape":"15.0.0-canary.c492898c2.0","@material/theme":"15.0.0-canary.c492898c2.0","@material/animation":"15.0.0-canary.c492898c2.0","@material/elevation":"15.0.0-canary.c492898c2.0","@material/feature-targeting":"15.0.0-canary.c492898c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.c492898c2.0_1672853843141_0.33448374095516487","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/menu-surface","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.d7a2277de.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"e59987260d32d3c9bd5f2767b4ab82406d5630af","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.d7a2277de.0.tgz","fileCount":36,"integrity":"sha512-4vuSDYIpfhmuI0Cik7moUdr0FMHtmgNvKOmEW5kqYiBQo0NDpqZWvQi2xf6vib9sfR+SGnxHfaXWJ51aGDqmjg==","signatures":[{"sig":"MEYCIQDhAxcl2d4aZzmF2jAKcwPPIITf/Cqo2cpwY678jWc8EQIhAIPyZbgmz4NwllnBpKd7KkvUPniUBnIga22rdjQ4W4Ex","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfE0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtMRAAjT9m41I7uGHFyEyP9hMdvj/HosA3sPhoO6sG2uzYDKlO8SUl\r\ndoV6OAAWAhktijRsE0OX/ZxuQ1+iplWA708xN496Sep36dsbfGb4LhnVc/q1\r\nJyFXhNNhfOK6oHjCWzFuAQpOf1FRydlxMyPwjWdrGzguhu/aMj/GoFUAMNOe\r\nno2593uGvaxqJAJsLkF6wcS9R1YoqZmdk4bqwGGhULTQPTiIpx9rHTk4F/Xx\r\nZDCijBPW94meNILlzvIRibsB+8ZW+9h5RVsEYAG+nsTAdUy0gODt/ggpAvJ7\r\n9zgevI5FsdttRO32om77LifQDVO1yktsPuBaHKUHgA+kuO95/fqq1Xff/iYm\r\nDSkF9aYcWbrmNsTwHgDJB7U2xfF/8n+Wd/TeGEAwL2DHApAKMmPpx+xFNW2g\r\nxb6+nktcOCFBP4k0XE8HP2oUlaGKkVrMQl1LWv9rlR7Gl9y9hy3CZ5kJlb6P\r\nZXNySEaKhatziKNuFRdJViYwrJQkiRqFljOUko/ry3s4LtIrm3dlTh647Kpm\r\nKEZLu8sTTMsB7rOyJyJZ0YBBkr5FMDHqq5eIei5AHV10LfCBHnV5gYq+EWbI\r\nMFr8JPpZmBAUxSedCtlkYvaJQ2unli2S0NrJVGnFpTMbv8hKOn4XewApsS6w\r\nZMShRiSFp31tstqHGxr+bfRj2uLnUgv4UMY=\r\n=vVMV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d7a2277de.0","@material/base":"15.0.0-canary.d7a2277de.0","@material/shape":"15.0.0-canary.d7a2277de.0","@material/theme":"15.0.0-canary.d7a2277de.0","@material/animation":"15.0.0-canary.d7a2277de.0","@material/elevation":"15.0.0-canary.d7a2277de.0","@material/feature-targeting":"15.0.0-canary.d7a2277de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.d7a2277de.0_1672868148779_0.9862130571389673","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/menu-surface","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.fd95ca7ef.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"d3f6ab85a2f872ee78b4843ff897c26f25325270","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":36,"integrity":"sha512-6jLY+JCcfGJKTEOKLztyp5VW1Y0Hnj6mkei6poAIZfRO6TTRE4qsdm5Yrlpo3XyRITBZYjS3M7jwz0n2naDMzQ==","signatures":[{"sig":"MEQCIETnmjcAG8FhdfqtKPTRFw9BdgEI8pphew0tTdJn+5lsAiAQ+9STgx2suc25W+gSPYCWFoIrDnoBLLrmuSQj4FWQsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiHCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzTQ//eu824O2YIYYwvwZyp1VSO7yqUljAIM9gl0BDrlgJ7bcBJtyT\r\npOzJlzsVzc2wgpmDty9dpW2nxwq+gJF6XWNSb3koanX2tFrJwrGjcOGU9eRI\r\ncizi1PyVrDD/L9XS6eRHWctn2s0hrO/IasFKVy610R6gQY8EZBc5Rs2+8Gk2\r\nX4p2ZKv3iUoxPyM1bKfz4zR8JKWVU+iNF2RNyTga7frym0tkYrscXgmJochV\r\nq1bffjsxsQSKDN+mIpFtdq/1bhhgHyWDMPreTWFkxbXhFJPum+XJyTTPeJBx\r\n6LH3QpW6C3q7ZKxsyx/9JIbknTWx0gSabn+lhRMZVszcfcebMOZNgYaipLwT\r\nRO14v9+BdZTKlgUiOsft+GD7EocrzOYAxxkhSX7qx1bCQYx60Hbeoaf2ju36\r\nyMJjhYU/GXjkhY3uOyr9wRw3TzTwoQJQiv/tTEwa+2GbP1sQWFRlt1SjcLyE\r\nWPFrR+yQ6ZLLEqrNZZ5zCUbMXKm23tX0E+WLIfQZj35RpYTcwTvWbH7fP11d\r\n31yEcD34ZXIxTmC4GBKdA/IPUDmVXMI/Myoje+Y5txdMza4PkPmWG9D9Evsx\r\nYGBaoSOeZgwuxhxpM9ik70pwrG5r4XI5UN/JzRtt2yuzhM3HoNpD5vSCD7ik\r\nS9cjhtLIhXcAeYio+Xlzr48UjiOmEdp2J/Y=\r\n=8eyl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fd95ca7ef.0","@material/base":"15.0.0-canary.fd95ca7ef.0","@material/shape":"15.0.0-canary.fd95ca7ef.0","@material/theme":"15.0.0-canary.fd95ca7ef.0","@material/animation":"15.0.0-canary.fd95ca7ef.0","@material/elevation":"15.0.0-canary.fd95ca7ef.0","@material/feature-targeting":"15.0.0-canary.fd95ca7ef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.fd95ca7ef.0_1672880578194_0.7753430525391167","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/menu-surface","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.1eb44faf9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"f78bab73317e18ba8af5015c996b6485f4c41067","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.1eb44faf9.0.tgz","fileCount":36,"integrity":"sha512-hzmLbisuIN+p1jUOVvMYVEq+aPs4nz3jzQfX5I/FzgmR6hSa025Kmh+IMMnjYRQ6ak9eKXWSIitzfM8Ab0pezA==","signatures":[{"sig":"MEUCIQDDzx6w17CSvmwLmY4r7xfS+LlxY1GFKQyi6fiI5RH8jgIgbKwIZqS66/aN+17QPTm7mU4BFsjjdfKUGKAkuR1usSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpPIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqz7RAAn11/Ia9MJzaOvxmSbqpZeJMAJ2iiEY1tOgsmPmWNTlVA3AV5\r\nuRStMuBCIvDhvcp0Vh5uACtSG7Vcxr+4ljzp/A7la5n9Qw5lhO+Ugdtp/N8S\r\nHaU1hJ9oB6Q11aAApQ1UaSdrD4ksgqJUtVyesKmzs5//zeYBTirkncvNku8A\r\n3OgR4R4lUdUtF/Fbh1rvsIRi2zcpJlN3txVn4IBLpOpW5EqlpOZzE3AP+e83\r\nm80xEZTyDLYZx4whRHH5Qr8nzUJ7FT4f7fWB7bH/SwAa3dT7WFSVaSM+JcSt\r\npqXaFob2IU1sIEFP3VwfgW8hDMn8ODKb2kPlTc5HtsrzB6m3wKOj7BMkumlp\r\nK9/+SXkQxZEqQAHihvPtRZZR6qp7c8KDXCdB8DWBy+AWvVbiaSR7DpirO1L5\r\nvE4kBtYE6wYeUHZ8ULD/hiXOf7RJc2NPHzD0qitL4zQV+qk+e3Qi80vSXzEs\r\nq0clMlfnJgJ7wV1wcbxAoKfZf+HXF9zBmInIwFUWCBvQ08VrtYhqWtmRQSLK\r\nrFPrtq29TqavrdAZKuU73XdE8pYISIojquIhZrEyPEM3/P0UDK/4bVfYuN1q\r\nW8crTHUE1WOyczM6Smd+U/q5Wp27EkCQIJ/8tqBPCDgNh5s3JGZkXpk84juh\r\np+9O5nPTVdD6pLXq+4m07j9A47911V8GPkc=\r\n=iAfU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1eb44faf9.0","@material/base":"15.0.0-canary.1eb44faf9.0","@material/shape":"15.0.0-canary.1eb44faf9.0","@material/theme":"15.0.0-canary.1eb44faf9.0","@material/animation":"15.0.0-canary.1eb44faf9.0","@material/elevation":"15.0.0-canary.1eb44faf9.0","@material/feature-targeting":"15.0.0-canary.1eb44faf9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.1eb44faf9.0_1672909768597_0.14407933701889108","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/menu-surface","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.adcdb7db9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"6de03430303e768584b8268d0747266d8bf967fb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.adcdb7db9.0.tgz","fileCount":36,"integrity":"sha512-KliJcK400uDKSmrFFE0z0x1Lk9Lo2y4qpbGbHPLJxGyju2dOi0Mq2RIvkW08RPjwVzhTlkypk4Ui567TPQbA+A==","signatures":[{"sig":"MEYCIQC8ZoaVn/rX0uZrofAdB/g7nKulKLFwZfldUA2SSNxaEgIhAKxcse/mizrYJ21I4kvzr0KWJvFGKGCD5vUz0LmQZ+Em","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvkcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4tg/+Mbb4lR+noPYtb9HA0gAQbYxElbbu8m2G5ZxudcjoXxLKwA0H\r\njPoP7HtWQL8ZS7WI6XeVMMpa5pE99ZrieuibsCGT/KdrSEmSGkUhtIjPa/UY\r\np1SeFSNRMYKX5PPHz15PE/x4KY2OayPZtBGpF83g+yCkOdZhS+LceszOdM4x\r\nl5hsib4pwxFvKwPS91lvH+jHeLJN43hNL+AnRHeCUEvH9H5xNsV40HdLjKRm\r\nFUR7bEsqsy24o2mgB/ZSiX2N26CVJ7132uzM7HygaOuVKbBrOP2rNOpXacd0\r\nZtHFqwmZ6CqVaZk9XKt+AZcT4JNvYsxcQHOnQ0JjpknQocNpuYSH8bL7MHSu\r\n5zoVVhN41O4XMCvmo3u8RcCYV1BwQXiefBRMX7kdwVwMfh1jSOHh6uocNScg\r\nHlDgNU10tljTHzhtCQJ/kcZe1mt4NdMuTzPYX7Q0SNYIkL2CBnFwHGa3+Vok\r\nlUykbcDdLcuSjb6rJjigcjEQ39HonFJbrfdTuQOdC4Eig7CnsIP4yuga4LEJ\r\njjJstm/47WfveK4lgd7F5aXMzrHitkxgqDwCuYBRkQ872WBrwczUa2X/r41W\r\nbTRHDdB0MhcQOwf8wlpfsJMh9pEDqbrIWJ3bOJJpfJ3g3OKa6iOLrd/uNjdl\r\nPVhp8XsrEadMx0OWKXRjRcsG+IRCk+9+lLE=\r\n=PD5F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.adcdb7db9.0","@material/base":"15.0.0-canary.adcdb7db9.0","@material/shape":"15.0.0-canary.adcdb7db9.0","@material/theme":"15.0.0-canary.adcdb7db9.0","@material/animation":"15.0.0-canary.adcdb7db9.0","@material/elevation":"15.0.0-canary.adcdb7db9.0","@material/feature-targeting":"15.0.0-canary.adcdb7db9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.adcdb7db9.0_1672935708645_0.40976505430881494","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/menu-surface","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.067af7eff.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"665376b1ba8449bf669c8e2765902fe3fffc9972","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.067af7eff.0.tgz","fileCount":36,"integrity":"sha512-U2I9f9CY/vAA9P3KpvgGVICJ60yKiGRFrIMJBDfkVIA8qEL/Jl8IGkauxAiH5w+l8wO6u+AlLnJq4FEtcVpRFw==","signatures":[{"sig":"MEQCIE31l5apSgGX1V1KQDNz8lJNIooE9rORqcbKYq0cb5jRAiBTWieQ1XbA/YZHNcxNEgng+z/xO/A3MfSvxMjGbGUe+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKu/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXtQ//SZik4qpsmWg/Uzg7q6kGUpHffaHYmpktYLvZeaO0AKlJk8xE\r\n792OJjkK/M1GbXU187+W7Kz1C5G3sjjMdBZebk4quz+CS6AWwuwTjNtTyAuY\r\nLzkL46VmjgAuVgZ1jyN6TM1X+9jnHG1UYJYSICxuG9173g1Te2U4DoO85Qmm\r\noa5meKV9RNlAYoyqgf3iCfWdP2k4F4nvllWk0hD2mVCfLxMsT4jBy19kdEtN\r\nBmHcDb/wKFr8DpqBLp1xZXYnZbLMQAW+peKIuIx0yFs6qRjnG4UxdsXVsCKt\r\nqgxOGwhX7H/inVEP5huXxOi9Lm2PIbZX4PqNAdDoMurfBRO6Kx2vP4vdG6be\r\nBCzyRfwpdwmu2A1IJsvBO+Ks48ZpS+6F2wmN8lLfRNns02p539yqRKc32P1N\r\nMMTG0Q3vJ5c305w8lcplnDj3AAwRiojNGobiWf0B2S/ZYWNfH7JQLx1P9e4j\r\nuW0VN7hXpG1ca/KYPZyMwOl1AzAt3qhiHzuiYcLY0HEWnXp26t5WceRWlzbW\r\nIVczMn1y1G2IY6r0y4pMBCmmMIYzIjuHkkosDvmIsXc+wDeyHsmX2ftd8e77\r\nFdDKbGVB7VzKCTj6Lr2uzV3Zbg21RKuG/Wm7ZxkjiyuNigsWXzblviFtCIxh\r\nQXjH9kMphcMlqGq4rXPQFUUEZOc9vmxfBqM=\r\n=Th12\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.067af7eff.0","@material/base":"15.0.0-canary.067af7eff.0","@material/shape":"15.0.0-canary.067af7eff.0","@material/theme":"15.0.0-canary.067af7eff.0","@material/animation":"15.0.0-canary.067af7eff.0","@material/elevation":"15.0.0-canary.067af7eff.0","@material/feature-targeting":"15.0.0-canary.067af7eff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.067af7eff.0_1673046975229_0.38019504934687554","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/menu-surface","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.21d1196a7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"8fb84da4b511d4daad77b4d3c2070be42f2bbcaa","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.21d1196a7.0.tgz","fileCount":36,"integrity":"sha512-Q8WcGCtpcSczMXDU/3Oa3zWlAukS+Vjg0WpZtVDCy2VJHTUZb3/uOo6Xghlc4uzvi/j1ZUYl02e7oP0WrAxVmQ==","signatures":[{"sig":"MEQCIGmB9FucMGt9K36vM2gh22ZTLql/zFmI6Gjpbj7X+tNpAiBRc/5GyycCaIlM/B5UKEixfYfgLVbgKUeJRvyK08HXYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju+/IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmowgg//UrSEG/BPBGuckrt/e/mn3O0wb9PyG3UlD1H8u68LJVRkl4o1\r\nx2ZDouCoa97E3oTwuvSYFalqWAVANwF5VGW1+mRpsn8SchbKN662Z64542TR\r\ngADR6L5VOxfhZ6VOth51OgQCTRmUMlEiP/GLjzWUvG3+BRILI8WO/m7TTrH0\r\nScx9d8Heb9J9xDCwJHOkeF69+ou4NirdR7JSL/tf88Wn8h2TD0F3cuuBwe4u\r\n8SD2OF1nQgULTXhvjvfzD/9OvQwfcpUqPX27qLc896Q8JV2W3l72scB4C0tt\r\nDgUs5iPJ7D1890KAjpiac9BHbKMRcDIJQlWmuSyQaVJyvwmzgo2xwxhrq5dP\r\nwOiPtDgDLvP/5F7N30v4O/p+pX3mwvfUwZVAezeqdCYWpwy1uxFKhV3vkH99\r\n/maa10JAiXYBc/OSMdZiTn3L8e/X/oWBW75jWakD3nR65J6pNWinoOiVaQPX\r\n9tDzgkXIo9Ol29wI9ieDr39nSBEsjcHRWoTBmw2gWEUcLnLVhSAYOP0odyN6\r\nSxUsa3Zn7Kb3lC9SOVl0EFoLXmeSd8lQSnc38M67CznkOqg9kxsWouNGsyvo\r\n+iqgLM249mkJrXvR/GQh4Hhbo9DIOpnthtrTiBQ23aCwjTk3FXMPtoN9Ap5Z\r\n/6zsvpwGOwB/NHcb6N93JHqeUN+RT23JlVs=\r\n=0bea\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.21d1196a7.0","@material/base":"15.0.0-canary.21d1196a7.0","@material/shape":"15.0.0-canary.21d1196a7.0","@material/theme":"15.0.0-canary.21d1196a7.0","@material/animation":"15.0.0-canary.21d1196a7.0","@material/elevation":"15.0.0-canary.21d1196a7.0","@material/feature-targeting":"15.0.0-canary.21d1196a7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.21d1196a7.0_1673261000507_0.5622452617544262","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/menu-surface","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.8d2d8d3c4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"e4e8871cc33c51bbf1f8de65e43696e6c247f4a5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":36,"integrity":"sha512-If62V+JtuiN2ob2ULpJeyh4V8eU3SsVHFZessCSnxnfqLw09+kjDl9xPjHN12202qgeBDHF0NVWWPILnuffOLQ==","signatures":[{"sig":"MEUCIBzYYsdyD7cPjdfVpLBVfJH7KRzoymmhQ6n5+0+7kS9TAiEAhoIQxIgCEHOSCMJVGh/Sp2BRuQ5BZ6552h4sw9Usl8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJQEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgsQ/+ONryzaM607sicMd96WuEk0F1kbvJhHmDqhs12t1dJesIR3xj\r\n3GJY4k4qD9aMNs293yQncbKyOS4iJM443YYslv5i3+Zhj1Fx1CNpYh5IxCYF\r\nBc4wn8e/+JaE+NHiNf6e1QTxS1l622aAXRA3Tu3zFexvHO3T1OTrCZOIpJJy\r\na04UErPvS+6Oh8b/oMXO/zNDBFzp1GM8fO8HsNc9lqrsr6DY5xRrICQ4IFyu\r\nuN/Ye4uCe/fLBahn84plT3uEh8u2aqPUirlBH3ICISCUzTz089oflDEaR0iz\r\nnuRCSPrAVfJoRJP8n5U6zZK7irG2TRBxuZVC/xe0Q3bM+aiNyYqNzKZyR0WU\r\nVKxfxegC0ni6uaM+zp5Mv4zC4IGLPGxmstr9iHHL5wwlHwslYSozsTvW/MDp\r\nkju54joSg8G20ymgEqLzPKwQOmIMtivMQtPWOywl/+jzM4yGuhsp27rAUseE\r\nyh+KfIP7OI63UVGGOnFH72rO8Dof4PjSLkYNhhkcYqi7xHSm/oCj1pJDDnA2\r\nWdR2OsX5EH4/Di0rJm2VXTefI581q19wO1majs6AIuFG6U4BWLoANlaLfNZ6\r\nsBEEJe0E1fqhdRpX6yfw+XIlVxJFDr7qupnPuBG9R7qrrD8X4jD2uuCFslXD\r\nSO8lcpFE7VWkeNBFOFr5Y897tYn8uXToX1Y=\r\n=Wc9A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8d2d8d3c4.0","@material/base":"15.0.0-canary.8d2d8d3c4.0","@material/shape":"15.0.0-canary.8d2d8d3c4.0","@material/theme":"15.0.0-canary.8d2d8d3c4.0","@material/animation":"15.0.0-canary.8d2d8d3c4.0","@material/elevation":"15.0.0-canary.8d2d8d3c4.0","@material/feature-targeting":"15.0.0-canary.8d2d8d3c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.8d2d8d3c4.0_1673303044744_0.40218584183542916","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/menu-surface","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.fc6ee6c32.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"af9f90444e4ab011d7207d0ccc9cc644baa2e125","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":36,"integrity":"sha512-u5Xbb3VzhNkl6+T5KoyJiW0INNQ6WP/5Xq/la0fipMJj5lgOcA7+8xCtwy2ORFWHOEjR9+mtf3XsCtWFMOVPGA==","signatures":[{"sig":"MEQCIFyju6/Rn5Xxgn76T7b2+llfdztbw+436UF7fXseN5STAiAshrHk3oKgYjcF9dElk6ebvtdZ18mqmma2MsGu/GAyiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZIcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7/g//XB72Q7L2XmhhOouu6yxZHLFX9AfrkU1ouUDunMqs8avFiFDx\r\nSqFybbfXv6ayjIuwSv2EjEj7bivzE59A9vAaQKk2XcFxYb+y3yereDiYUApx\r\nsYAll0ZWrj4na0tkGzXcqvpLrXGrf6Pz3g8IXrTXVilf8srE3OOGjs90TPez\r\nU2XipSTPAqhaXB4jXXNxtgNjEJMKmlCwy27AOz7EaCFQg079VqSvWGZBIFEp\r\nr5hHaGMxYAxi0mNuzHIeoXfFBDMNkkrt3XNqIO21axIOtof/76PwxNtoxtDH\r\nob0no7toWM08QEnwrD5oK28YAz9ia5L21zv/0akjBWBBNYoI+s3xXtMD+hcT\r\n3sE0v09x9IQ+yZj7q0H1S0kHYD6TSty5mD51AeX9VkA1nFxKJ3FtKkdBOX+Y\r\ngEo+SN+KJGsQy+YSylY+p/hdlHnn6pE74KAvibJ/L4xUKlzZdc2gmt2c98ep\r\nySUEwbOogUZgAkX4rdkxpdL/0btGCpeyoEBjLOMdeiqPSlpvXekVU2bW2xmN\r\nLLccFB3qgZ+iyHUerUcSD8PbZMipBI96hVDeyXL5yhKIlWwzRRoIqVyMdsvC\r\nc/tbZhHXEHsgrnlwCiknuMcLwDBZzz73iEp9oMB54c8DXARQ2eqswWarwd9r\r\nhMbMSOLgY4Fk2cs6cydeE4myWnIMpHO9xPA=\r\n=rZHJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fc6ee6c32.0","@material/base":"15.0.0-canary.fc6ee6c32.0","@material/shape":"15.0.0-canary.fc6ee6c32.0","@material/theme":"15.0.0-canary.fc6ee6c32.0","@material/animation":"15.0.0-canary.fc6ee6c32.0","@material/elevation":"15.0.0-canary.fc6ee6c32.0","@material/feature-targeting":"15.0.0-canary.fc6ee6c32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.fc6ee6c32.0_1673368092731_0.8307038201199493","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/menu-surface","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.73537ab0f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"a84114d3a1a9fb0eba068989fe2464c6069f632f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.73537ab0f.0.tgz","fileCount":36,"integrity":"sha512-HfgVJ53wuF8reont7PFU6tAoz5ew7NxVYSxRut2qYXgbk9sX/LCaNE0JmzTtRmPKgMEhC5IEdu+oj0PK1SmVjA==","signatures":[{"sig":"MEUCICVi3WYHxcebXL0UKbxFfZSimnIrsP5dg3LmWLvsncbNAiEA3LFmC8z/v0fSMLKuUuWprCQPGoGCytjMEoqvvEjI5Mo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvapdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAVQ/9EclOEKh8Mer45nK03lwt10xBwfLfhv/rpEpJWtPc6K5sK4Wi\r\nIwN1zOC6lU9dbXBjaQXMXwCTv+bjXSJbXyf3CKZoCjpcOEaK+B/Vphtn1png\r\ndm4mnzkGxLNH7tlZrZ+udcOuiROtDpLMmciZfHn9PXqQIBYAewjxP1qOjeRO\r\nQAuHuQFUe2RmufIOy6v2NcNKGxCej4G/5IVId7rel9K63saFj4pIpeDeBmrs\r\nkZtaK8d1ivmKl04Eby8Y0mIsHmx1MyeTBR3luuREKmPLInNxlriRosQSdtK2\r\nuQ6y2UhgssLOe3MDY3l2WsTTL6j/2iH2yW6q4XvT92xBikFahlb8c0tCANZB\r\nw0bWsRYbDD00Z2yWnvsNzmxvfspjoyZdi3r50CTQh3VsKSbuHV7zDtGHqSwW\r\nW8MasjvYr4CFzd6lgOCHI4DitMC8m9/S63fI8NPPRtDiAzjrrZ6tTKA+RhFc\r\ngE96U/lQHujGTU/FKK5TZoz6DhJEiOhOvWzSBN4ekRn5Hjgw1aAZzNPtKNYM\r\nFfyUv2M8bd7HsjmHkWhJZlVAa6g/D3KSVCTte8/dPdcuL/390+ZvRfzwEy1Y\r\nIjcsYYOFCdoRG9ygtNbxlDt2Xp7yO9l635BvQCPIVRxEYL7NZU2WLp18/oKJ\r\nzL0C5/3WPCqDbT7e+T5pgv9v6dFYDIWtLQU=\r\n=o164\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.73537ab0f.0","@material/base":"15.0.0-canary.73537ab0f.0","@material/shape":"15.0.0-canary.73537ab0f.0","@material/theme":"15.0.0-canary.73537ab0f.0","@material/animation":"15.0.0-canary.73537ab0f.0","@material/elevation":"15.0.0-canary.73537ab0f.0","@material/feature-targeting":"15.0.0-canary.73537ab0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.73537ab0f.0_1673374301468_0.11069981360057635","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/menu-surface","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.684e33d25.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"c397ec61703a1e6b24ce2751e959b5526c909ba9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.684e33d25.0.tgz","fileCount":36,"integrity":"sha512-RVO5GAYcfWPaKwxsF/NhUAmrYXQCQBKvRQW0TIlbmAJz6lcFeTs6YZqF3u1C7qrL3ZQGz+sur/7ywj6QU0oMow==","signatures":[{"sig":"MEYCIQD1JSNPE3b/FBqm2MvN41uJhFNhjcNm25cTEq5sri0ZTwIhAKZMo7wU9TGOjWBQqwLiW3HFP51zOeBn364FgdPwUtjn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvboUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRRQ//edVu0tusOL80TJ5qSs+H3cLI0+fGE+DHPCn5Qglm67wm5m69\r\nTHxeUScoP5IJLpts1G2yCW9tkSHUp570NpcmnrMNo/mT6bbrqrF+YgdsHH5n\r\nXHpWa/dlLNYyqa7ARf+DCPG+iZN6/nXpevadx4rE6w/yt1Qte34ZRPJbda7/\r\nyvECwRRJ+fxGxjNvuzb1J1+kCOVK5RHRRODIzfTKSEAEzkKWUbv1SHCHuKDR\r\nvOGoXQ/gbbIBX6k1E0EYqW1CQ8IYE4IPdLC2QzgUbOQU6FuV341rPZ+gFTBQ\r\nj6CF0Hq7ZNhp5s9+Ms0ObI48/BES/qyMX++A5yg+1crEejsUc8NHIzS3gBmK\r\n6114DgFchGoFVJuMx19l37qGVS67czwKJ6GysSKLaNATa5jK01OdC67cJKNp\r\n3Yh0gzxdeZpkcQTuYcnB5BkXu47u/wTTiRIkj/aJidC3c9tOPA6jV9H9skkz\r\nfSeoClqOgq/56MWGaM5Qa3mTXyWU0jgiz7VuqtdXHru2S98CR0zCvwonpvb4\r\n/jr/2jO/Xuu05eOIm6/m0aM6nqs90OSCM8o5nm1jscAZdjxecrbLyKZ6LcQw\r\nMNys4bqxYdzi2tQZtqgmwSuZPIf/NVwh6R+0/mluusSnq51bkuIEAOgkp147\r\n3L2Y945t2pHjx86row4pwDqiHSUx4Yfj6QU=\r\n=FOG8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.684e33d25.0","@material/base":"15.0.0-canary.684e33d25.0","@material/shape":"15.0.0-canary.684e33d25.0","@material/theme":"15.0.0-canary.684e33d25.0","@material/animation":"15.0.0-canary.684e33d25.0","@material/elevation":"15.0.0-canary.684e33d25.0","@material/feature-targeting":"15.0.0-canary.684e33d25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.684e33d25.0_1673378324089_0.6863383176478235","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/menu-surface","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.0e89aab6b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"431f2702bc4377003763752636760135619ad4c3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.0e89aab6b.0.tgz","fileCount":36,"integrity":"sha512-JgFvLA5QjIYzb7gUsHtCp8ygdPZPTQXtrJzUeRzqOAeQ2uyeCJJENcy4TnDOh/pKfecYt2BO2FfqZxxCELtizg==","signatures":[{"sig":"MEUCIQCs9s6tFhOHVIJQCS5E+rEjYocnZBUxCNDn8cAm1LjBKAIgOpHRlzkSNRZtan9woSjuLxjYapVKDT1qhUP7t/xSIXA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuEqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRpQ/6AqcukrNM3TJzWeLG+PEDgC9OrpcBKbNXF5+J9wRYeF2Bv/fS\r\n/BlNuCLK9B1FiB22whVwClgm3huh48N5vGjLkfAUC/iynE5MLBXe2OkTssQL\r\ngfc+4B0/qwNHmTUScT6J80+1ENjhTL+Ir/AUVxgCUwK901mo0u4OaRFn97WS\r\nC1KWO3lSn40gjuSnHVp0OAZogLRrTsHpMY6CetW6jEm09QB9EOMh7RoKsa9B\r\nS57eJczmRaJd+qwWwMAAdYAlt/BfFMRw/nEfizu2CRDaKE8ej5jcvUQ6K7Km\r\nL8FUUXBznDymQKM7vnvrnWE9t6zSBUI/Taj+OHxkw7amOiKaNucMjfkKdemL\r\n+EZVRNW+W4y8qHMX2dePTgIJCn7XYNsRYaq+D70n1XaTlAAPUxcX1b/P7z0B\r\nLsHShk3U9Kz5qGEd4KzePJ42dMaY6w3ao+qHxEkqPwgadT3Bed7xD5Q6glfY\r\nPlkV1vzApgz57nixlpmNr+W9CE+5JMuTnDGucoCJs4y3woFiFv9CHbkRSEsy\r\nzdZfjMWUimYkwWDZljJjDNA+OJ7vzs00dUNPlSaMQNt33QcGB4ej+nQ0Y9LO\r\nbdgj+OkiRFlgtthsjYfM5tc5/+QriEyq/DFZpQ5TJ7z1hlWD1nM1uQlvnwrU\r\nnARAs0d95gsDpQN6YqKTuW+xOng68Ffck64=\r\n=0vZV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0e89aab6b.0","@material/base":"15.0.0-canary.0e89aab6b.0","@material/shape":"15.0.0-canary.0e89aab6b.0","@material/theme":"15.0.0-canary.0e89aab6b.0","@material/animation":"15.0.0-canary.0e89aab6b.0","@material/elevation":"15.0.0-canary.0e89aab6b.0","@material/feature-targeting":"15.0.0-canary.0e89aab6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.0e89aab6b.0_1673453866066_0.08775581094932039","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/menu-surface","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.b0103d10a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"7929d7d8c340019855964930a34252bfa97b6701","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.b0103d10a.0.tgz","fileCount":36,"integrity":"sha512-Xjt6d6uO/4rbJQP0oKwjoLNfHtmC4U1o1U1K0RznzWVHKTa40Jll9VqMqM/6YpKj07oKxpPX2no6a8VJZ0OJFQ==","signatures":[{"sig":"MEYCIQCI67LM2Xq4KO5vQth7vmII5lEHeabJjAokdNhffOs9nwIhAPv9NCA4up+MiLEs8MgQFrY4mGGmObAjcIeSBLqYXPPl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwolACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHfw/+Il6dohgAu7Asc89/ciKg/4X/7XUnDfK1Rsb1vccSoAH6/o2m\r\nz1FwBq+9yLYnGFDciydYHN22Voq0jmK4vrRPvRSwhpeIeQEp5+eb9RE1K78a\r\nXLzasZLtakMD7ZpqjTLwC4DZuEKy9Q/qSZ1PdE6rpyUfhBt7aSGRV9ENApT1\r\nKxASphV/CcpfCf8A38Dgjf0YK4r40CyQGqwkrqLBMLcRTYVhlPOA0ndD1VCs\r\n4eI8US1pIUlj6mS1P9RWECP0gAJXXiinC69S7FZhYBQmJSZ9rEAniKWQLIdj\r\nWi9UKv+BH9b1oyT03h8bA0NRWeLKsEBbXISHaqJFKTu4vdq1j1Bvp/RpXLBc\r\nqfwSgxB/XEQcncobS9ZyyIcCAdhsP23HeedRPLzVG8dsJa95eZBAxai/0rjE\r\nQsKoO+nCnXCXAJJJvyBrdmz4snCh6kzabBKMGZ50+mxY9he8XsX0NU/SMlzf\r\nIH9ZRgu8qi9feEOd4z5/esg+eFHbzao2sweRnNWmsfXL/menU1YWexAGtOev\r\nThc23QQKlYGsUhOjx2/FGcJlXDwzjgpCaTIRcsG6wq93jXClkWXCUcPAMudD\r\n6Jo98h1ZDVMuuMpLnehy3fB3u/I3jjztKWcIQlPx4UTqQMZiHD1I6rqCxJ4N\r\nquTlcB14kaZ3P7TT8iqKaGUlogBw/Rm8ISw=\r\n=+y44\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b0103d10a.0","@material/base":"15.0.0-canary.b0103d10a.0","@material/shape":"15.0.0-canary.b0103d10a.0","@material/theme":"15.0.0-canary.b0103d10a.0","@material/animation":"15.0.0-canary.b0103d10a.0","@material/elevation":"15.0.0-canary.b0103d10a.0","@material/feature-targeting":"15.0.0-canary.b0103d10a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.b0103d10a.0_1673464356765_0.04687040252077246","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/menu-surface","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.50e7a5312.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"2be5210b0702dd6bd0594e5fa95e6ea7b89a322c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.50e7a5312.0.tgz","fileCount":36,"integrity":"sha512-4svKYIo5Ax0PooV3acbMijybFAmLe0zBxp4XA9pjKmPlweybMt8VLuOdnj4UlhuCPUJq51cWvMMEB70tqZ+m+A==","signatures":[{"sig":"MEUCIEJdMskZGo6t58WsHr10rYoUBmg/JFLZf2aYtb0vWqefAiEA+GXUwVtlhZZL4VDOnB+gK+h80ql6rNRWl2ovwBRDHLw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyH4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr44xAAn6roEt9MBRUYfFZhMACLjhlMFLhn9p45sXuKh37xygR51K9U\r\nngLNfl5DRS4rMnM6k8LO9CVmtBuOo+ZcL9sKy/kvgCiyXOBzic7Aod4E3tMi\r\nH+e4jo193AYfhGgbUP2RDvaKvK+g1GajDvKymvflwGOblzSK2n62wnQG5ojQ\r\nSbKQ98Cr41Ma1DKnZp/mvKFbAtxWOru6Ovecw6wIkCLpxuWMegi0CTl38ysh\r\nLpPSQbmuDf2pwpVegPwaEpAGv3rijLd3n0ZKUm93v5be+5qTHE44pC49MHeD\r\nLXELSY8qFKB6qyXbY1vu1RRp5Nw63cQ9f6x8U7DwEt5aLt28dpZnnxlISu67\r\nGIx7hQ9BmtZB0kPwofcjaWSC7nkUlSxUgHCd8HedHr22u+jE/OqP/Yqq5Ogk\r\ngka9WLWylAjBpm5lpvVugo+wXF3xiP+Ajr54EiywMZbPGq9DQ0kAP3vkf/S7\r\n67ZgZ9eg2Ql+D+n2/EYo3lWNaR9wObw0UZLm1HQ7oG5tcZI/AjHPLNmfcyKh\r\n42/NyyyasbV7wFaiMWkdNO6pO+2wAAWP/BpBKwCHxiajPs/5ndssFHzkkzyk\r\nnzsgPZEBEkMJMfwgBuZvcQ72GKYEApf0+im+FlXkoAUPAVR4/lzaD7ytL7eC\r\nduzjvEAnuOPE8uHKy5NOJah5LT1IcZW6RAg=\r\n=NGFG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.50e7a5312.0","@material/base":"15.0.0-canary.50e7a5312.0","@material/shape":"15.0.0-canary.50e7a5312.0","@material/theme":"15.0.0-canary.50e7a5312.0","@material/animation":"15.0.0-canary.50e7a5312.0","@material/elevation":"15.0.0-canary.50e7a5312.0","@material/feature-targeting":"15.0.0-canary.50e7a5312.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.50e7a5312.0_1673470456494_0.5981915649335046","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/menu-surface","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.202823f54.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"7e36cbcdf772cfa571b2facddd39d83c0cdc44f0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.202823f54.0.tgz","fileCount":36,"integrity":"sha512-GVMZZESAxrKUVbcrdtgm+10qk5/0YEG7c14UNYk1kgJ/5R0qWtxDsbtY8k2SP0vS27jSEDVHBjD1+1E1TnJAcw==","signatures":[{"sig":"MEUCIQDvji+s1NO3sWCzurV1vHIdDWxUescf5oWt7yuw7+qFzgIgT9Olas2RZjs0Qe1PdJChGTTjftX+pSfGu0GHHAFjyxs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyu7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEfA/+JW+JtwSQcRUmjgqj6Voo6cFw12eEExZX9GExSP1Dm5F/KUCf\r\nltIGammSxFGtM0Y9j8iZVLMrbDDVHJm1rXMejy5Y1K1am8sae0ualhutVo2O\r\nOy+9sfIsvY7uDPyNIlUXqiDoZ5QaWI0Jq8dYo2/32cLOdKkqBCrAOmTpfnLT\r\nleAQeN4lA+48Zx58Iq/bEBxVyxaHo3wUlJKSkJPWteiDJSXvYJuDMQmUzOxI\r\n9Qjldje0XRQfO7pPpu9rpLy3Im+CLXkYQNRUn1P9xfkgEJGIHbMvUuBQLoms\r\nH01T4qZ1nncCoYXwvzWuea9e9uNCQj4YcVG4iiTa47Vx0wYouyHAC0V0rMT/\r\nmZWBBWoM9S1sE3rLbzUs7YYwmrEzwRIDAeAfA9rleJy2tmbNJ8bcJNgTDoau\r\np/rQv/kLAih+v9fgfsuuEcCU8YFLgVyQ/J8bWEFOq45zzIGVVyJeRXYE9vPi\r\nkZAUv0TNhDJoq0SI26xb+9ZVflhq295v1prvqgNgWR8M54w4tan/MCeeVlm5\r\ngZ/gdxBL2ogkcUysMimfhaRNs4dAYFyvBM0dF11GmDfSo/lz0rYP/akyZe2T\r\neH/9wLVyyPKJ25RtCLE+pteBJHOqDha+tqilqwuCpbrJNGtaL+3jGdCGVaCW\r\nAhUsco9z7NHhHxS2RypKG3UDuxcAmx3dN3g=\r\n=9whG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.202823f54.0","@material/base":"15.0.0-canary.202823f54.0","@material/shape":"15.0.0-canary.202823f54.0","@material/theme":"15.0.0-canary.202823f54.0","@material/animation":"15.0.0-canary.202823f54.0","@material/elevation":"15.0.0-canary.202823f54.0","@material/feature-targeting":"15.0.0-canary.202823f54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.202823f54.0_1673472955166_0.33467226991811994","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/menu-surface","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.199fe2a2a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"f7d6e82cbed199f1f730577dee04593f1c8910da","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.199fe2a2a.0.tgz","fileCount":36,"integrity":"sha512-BjpX8dU3UopnnmtE0SBuxYVk8DTgu+0PTUHdcXBpXdml0z5I37m26bNqMxNgHdUw4uvAks+f/+3pAQ16Gc35pQ==","signatures":[{"sig":"MEUCIFyEjIczCt+fJmplBWg1PIzn3cNtGk2ThPqhwMj2n/LHAiEAqlr37DcdYa/pIWlmC8o9qeuVT5ga384v6BrHVp96EUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzBlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpe6w/+NXeTKCIWBJyOwbA+40Bj2qftWaxnGM3tIoScyHFLRTABuA9J\r\nP5SDYED6n4L2wBGamWXLNYN3ux9IMlWMZKiSjBQsADHY3yU/uJVNMKnT2loh\r\nev/k+gO8hwhKSn6UGgmvuz/pV8YBLxIZYWCFzXl/827IyjNzOHE1nnCwpsvc\r\ngrUJia+sl8+imlZqFRpy9cBsvw8yNluLJWY7iaImhuDQkYepfBbA0w3W59iC\r\nxtCr2NvwR1zRWS7YSrrI9QiotvlwnKMQgrScUtpNHEc72F2dYkPlEh3+j7E7\r\n8DEhrmblAGdpLjq3B9hgnifg/bKXXRztyLUQdeLs6bcfRpXwEBRFzI49yN6b\r\nquQc/2mTTJQEOOxPi5jqp/bPDhgSY2qd53A9EeaE8l5EKOTew8peLcksMit8\r\nWRuNJ6s+qO9zojGZCS0TDiBVD7UyRyXyjMRRyXmYgyQIb/teVcg33kGPSP8Y\r\n0S7if7UMEV+ITmncYSFuR5EtCjibYKEcz5CrhgOQjYKkbil6yLTPoWnr6y1a\r\nvVSyPb3Pks1GQDLm20SLH99BQhcOpgNtKKSl23HMYzyDwvqDlCAeT65t9smT\r\nkLdgm5KeXAlulSYfckFqButaQcX2uM6/XTiVs4vECnkceqfuAgris2lFOQoJ\r\nHzCFBGov61UtdOYi/bjEw/hKtcp7rn9YQ1E=\r\n=h5By\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.199fe2a2a.0","@material/base":"15.0.0-canary.199fe2a2a.0","@material/shape":"15.0.0-canary.199fe2a2a.0","@material/theme":"15.0.0-canary.199fe2a2a.0","@material/animation":"15.0.0-canary.199fe2a2a.0","@material/elevation":"15.0.0-canary.199fe2a2a.0","@material/feature-targeting":"15.0.0-canary.199fe2a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.199fe2a2a.0_1673474149175_0.04859042611497322","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/menu-surface","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.8c0786d6f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"b0d9019e3a27eb97d8a72250de1a3db7c2dbfa1f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.8c0786d6f.0.tgz","fileCount":36,"integrity":"sha512-5ayxuQb8Z/pfaMVwPLFwrOyZQBPWewXgs6M21X5egqDdlfg7v75sEyzMnGM/QLwwRWK30Lh1/mlCBKHo36e53w==","signatures":[{"sig":"MEYCIQCV1kfQa6cojdY4RFNJgyIBT1ApD6rQ/52dh378R07RegIhANpVQsiD7Kc9LfTckd5kZUFl0sWdGGJxe8e26MJh9F3U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBroACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/vA/8CVlRCeOqaryG1nOLfWjZlgPKPtalwp2wxdvp2mUyi92foW1D\r\nkR+XLDV0500KqShdZaG7aa/6aHFAVVWUWxhjR6lxqjTdSWb883uNXogut34R\r\nved3NrfSQZZPxjTM1Dt/IIBudAAM9GFRnN2UdkpxO7/UP1z/vIfDZxZyMHyN\r\naZTZ05e39dpiEi/CasQR7BrgHy6+toOZeVwyE9MjX4IhVpvnMQOamOvxx4P9\r\nVL0PYOGtekWoHfRo27a531NqOvA/6Dzh56kvn5N7NLSavbiamGGldOsOaLx1\r\nacYYExTD0pbBFcbNcLv80nSA0SxneS6eDkfDxQbtP0ZOFmDrrcF2vdhU/JeD\r\n0pd/YPeMxQhDpPUgTjSyKbxU5D9VMCm2sOQVRKCHrR+KfI/beZ31MrR2loF8\r\nCLZpbjyhsrnUSxfIQp+2yUVq/Hdiz/qjchfF5NSB+wwpysHj2DdlCHk737pH\r\ntiD4neVL1KfyExVGYpvObSMj0lDF/UWQcpD2obGBxUkjCUkCdmdyF2TlppjP\r\nrvPXdkl3fjrGM/kASp0Yz3rgeR525S9d2m2d05geucCiHWy9EwwxwoOXHnFX\r\n//Gz2CERNbDb6msYblQa8bLzRRfbLHDg3RX1HDC7jKe0PwKCpel+kPu+BA4H\r\nbCjjD9dUcv1TwrB3URU0XFDW13WZXAqgX9k=\r\n=6gE/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8c0786d6f.0","@material/base":"15.0.0-canary.8c0786d6f.0","@material/shape":"15.0.0-canary.8c0786d6f.0","@material/theme":"15.0.0-canary.8c0786d6f.0","@material/animation":"15.0.0-canary.8c0786d6f.0","@material/elevation":"15.0.0-canary.8c0786d6f.0","@material/feature-targeting":"15.0.0-canary.8c0786d6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.8c0786d6f.0_1673534184535_0.6893820452715633","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/menu-surface","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.8a74f7c6d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"341a059e11716634dcf792804ebdf11fd0f7e44f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":36,"integrity":"sha512-VKJq9QJYgvASsdVg2aCdonpAnSGGkwgyYC8A7trPyqcJDQzBNd7ir0nHQ9VtyBcMb/Vqivyt/2RTo/Ssf5d4qA==","signatures":[{"sig":"MEYCIQD7ff7c/zYmpz/i2qlpwm0cSNnhO9t90K2ub7HU/+FHGQIhAMjMd5mZR/2sOt/DPOkI86p87OGCxDlctWbnoHv0NEgx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvX2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHbhAAmqQmljPHEv9MKGMqjgAvPpgN0sTjfFftubhr5qToDao+c3FI\r\nhxEJBf28ytlfHuyTaskrIvc9y46UgMwEI4bJOgWpDC6ZrKau2nhLtfQ6QkM+\r\ne7b4NeVrlexT7xf9QSI1dW+ylNI+2cqfdMZ1sGHdFGsgi1V3jCuUOPmcBld9\r\nazehjHytUctmPWGfOs36Y1LTM3nxbmVsUn9Q8VelQObvoc0VfDaZprD0Z6as\r\n9D8/IA5vG5eY4i9YLmNfLw5lv9MNHm4mjuHGdDIPNdZQRz5otUaR9ztbF7i0\r\nm2BqE8FZRh3iDuMxSf2lTi/2u/NDBHNhIZJMyFMP1u2ANlY0YgOi9EF7/w45\r\n5AQrVUaWt/XPKJ/r68wjN3adzqF/ctekbCwg5wfoG5rIxDccptW/7sW+8NST\r\nofvSepiviS5mMVxKFYNwNs/+Z4Vi95kgCZjHNQVI8kA5oPOyfOR1t1JWWUaa\r\nbEKSKZPa90Os+tfkIIVC3Jomyq4XQnUTNLABNyi7ldCvTKgZpxbUJ8EPW1rq\r\ng+HJlgv+sdCgyNQ8B6hG1ip8OJDDAhx8cMV8hmZu+34OOJD1mYm8SgsGqRSc\r\n7B1xlPvFYhWblytYiErVOMUwx9LrvsddTsrcaqpEa1nnRCFS577PnkMGLk9p\r\nLoMueaWI4EN1Y2qCmy+JapjPNvUDWCrFh5A=\r\n=9cZ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8a74f7c6d.0","@material/base":"15.0.0-canary.8a74f7c6d.0","@material/shape":"15.0.0-canary.8a74f7c6d.0","@material/theme":"15.0.0-canary.8a74f7c6d.0","@material/animation":"15.0.0-canary.8a74f7c6d.0","@material/elevation":"15.0.0-canary.8a74f7c6d.0","@material/feature-targeting":"15.0.0-canary.8a74f7c6d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.8a74f7c6d.0_1673983477748_0.7760476341840579","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/menu-surface","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.b4687fdc1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"6b9d652ea855b5dfffcc3377ae48d24a34908a57","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.b4687fdc1.0.tgz","fileCount":36,"integrity":"sha512-PReiJOeVOT73uWw8lZzNFtGlz5hQ/J+CLZu7qs7sQ2m/5uS92bWA+ZWWl3VmGn5WB8EFI8XcDzHnxovJZptCpA==","signatures":[{"sig":"MEUCIFCzFZ6G21e3TpjYQyzbkYiDaE1PuV/yysGwm+9T27xFAiEArdZHBLvxnCKQwkliXiphXXW5rLgJLl5f0Mo8a92yxm0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ7FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpK3w//RgFW3PVPBsZ6Odb3DP9PW/rn3RYvAOfsUJ7DigFYoPoJdFzc\r\nt/o+nafD0aHLaMdfl1UrXfOGJD5IwJOTtXbxkbWI74LYCvtx41KhMoLY2EhO\r\nXvFhtnWTq0UIsH9m24tnH8CpaUw0owQQW+clLyHcUms5hOvxwKQJCc8magk8\r\nw2g1hoIPhRRMh59R8QapLujJjLyxh8AboDvDh7ECGe/PwayvJB75yDI135+E\r\nmuedJHZR0IJ6otex3+anpXQyXwgrhKr1FsGAk9u9AaywFa7ML0Wg/jWG6O5M\r\n+Y2nLzRLULVnyd9LJhuNE27RnCOPb3xs8nHCXZlCCxYbHxdn+MLyB4ikPwnc\r\nbBRJnz59LBiVlEY/KahJAEClz97kxqht889x7PnDFZlGOFpU1EEVb1i5GslC\r\nwP53+3WlOXoWayrTvatzY/nW26qwPk2RlTp2ebfZTXnzUQhQaz5SqbDK63n5\r\nfWSIL1i1ORsUOQ6nx/nmpSJx7haDGI3XDB2xpt21bHFekj30XbQms40LCYnO\r\nX7Lc60qOGgKiWu38ZDOz3VD/FrHRkk5Ryq/43A672TpgJ1eq3SFf6UhVIlLj\r\nBdtJoW/T+2CLrGPUfrwWZgFBKo7xV9EBf4nwDVZTP6UtIei5bDURXINzNruU\r\nNbfZAMC3Rs/MnCByak6TAIc7IxsqWfWX4D0=\r\n=1ytz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b4687fdc1.0","@material/base":"15.0.0-canary.b4687fdc1.0","@material/shape":"15.0.0-canary.b4687fdc1.0","@material/theme":"15.0.0-canary.b4687fdc1.0","@material/animation":"15.0.0-canary.b4687fdc1.0","@material/elevation":"15.0.0-canary.b4687fdc1.0","@material/feature-targeting":"15.0.0-canary.b4687fdc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.b4687fdc1.0_1674157764907_0.7836739689851637","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/menu-surface","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.b836b9892.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"00df37af02c1329744816a5536da5d68cd442e8a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.b836b9892.0.tgz","fileCount":36,"integrity":"sha512-GlQGVK9lhU2gjk6r0wCz38rTVANEd7ZW6gaOzQ7APXrL7U7Ll1qwvAw1CokAvHi7NCgeivvMmC0A+34FUJ+kPg==","signatures":[{"sig":"MEQCIAmIDWP0HDBNTxL+oPOb/cefmkdoX2tRCzehBXRYl7bAAiANpIwERyVfZl2mwVDqfNKJioMu7WgznvVepXPp+u2uIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F4VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/yBAAjB6q79sysHnZ9z9FX+xJzl1cQEn1Y6PaHPD7pgp8171rERpM\r\nbaTU3eoESqWfu8tGY02gFQZdEc3svgJPkiEVivZsWQ2v5PkCuhfiUgs4oTl7\r\n0kJvUTc6+pwRpSl8srqoWSmrpMQxDeZbO5gfv5Rqs1x5rmuttC/uiiF3NnXu\r\nrt5f1FRC9R2UIf6r4jDgStZn57ttbdofDXe8ODJzvl5S+geBzBGI0JUrtX2H\r\ngQclmfxyZl5OXOQSbhY7UpTyibgHQkvURYJA7Ky6064vgMK7tp3eVqBSl+Xj\r\nF9Qs4/yRw1yAPPeWxjtllA3E9Cz2cL363COHJ381qWQTJ7LY8IbrzBiEP/j7\r\nyivN+DWkXoblwQ9t0frqzkJj+xacE2bnZiq39OpjznXuZBLUnRhlf9Nzi1k6\r\nx52wYju39FuVDL1ScglJQrdh0zlRr2dd+CX8EOe92RCJVAtx6so7+PdmhFCJ\r\nSGS9b1NnZyam3zBBtrz6oFeMWSs8zFxBM6CxsKVyEVeN9g/vQd/M/7LjOtBH\r\nfBjdmM5cPv1QeR4U1ydbAeneKcOYB/FEurtriu5T0zCtnwZDln99xPLDVZiF\r\n9sgPwEp8sCV8bbakpyM9jG7uSVoa7OS3dWxD5Ta1n6qgyvPveZ2zrYjp3hkC\r\ntGeOkVVCKzYYT+Os9n0WxYmmmWNT4/NqzaU=\r\n=Xeg8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b836b9892.0","@material/base":"15.0.0-canary.b836b9892.0","@material/shape":"15.0.0-canary.b836b9892.0","@material/theme":"15.0.0-canary.b836b9892.0","@material/animation":"15.0.0-canary.b836b9892.0","@material/elevation":"15.0.0-canary.b836b9892.0","@material/feature-targeting":"15.0.0-canary.b836b9892.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.b836b9892.0_1674599957584_0.14492209873789696","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/menu-surface","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.e8912fd37.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"a4949b86886710c49489e79a42dbd1ff027a26f5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.e8912fd37.0.tgz","fileCount":36,"integrity":"sha512-OBOR8d8rF3MX/9eDtmhbfJ7AUBLdXyZhr7YeSKofMzERqAjGlgPOdJzCzmqzJ1MKX6KzK7xr37/eY3Tckvt2Cg==","signatures":[{"sig":"MEQCIAa2HpNWSNyUfPavjzXOwb051VrWFyiVo+zHGwDHYMCnAiASePQAIYEjry+OcqAhsYhHyyJRRTJzt2N/luK26in4Cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sagACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+pg//dLS5iFXNGXrlttNUeej4LglejYBciTwRCF2XsfI5XFvERhu/\r\nDsFHXB0JdHLxp6pEiYWtzJspw2EINz5xwo9xe5EkYckz7Lm5Qj2LojKHLU7N\r\nnjrZFIGULC5RYRKmX4mCn53kBOtLzOxNSqFydrP/ixwNHh/c38PBI8xvA5+Q\r\nV9J0kwY2DSbvIxbECXvkaKnyOCc6kyq6p0YLh3rtlZP0xsNSMoONsr4qwLIP\r\nQoiGeYgSZRXDfnD/K57K31wpwMEGekzgmHywL7BhZVuRnSA30iwQQpnIeR83\r\n9aYTn48sVgHY9SL2kYNiSL8ylgthKmtbmtGByXlA7XvG9ZpVMYE3goNRM+/q\r\nHoeJQRuXqmVGyiPPeeLDkPj+34tRpkP7z+4TdSE5uHjsg+wLod0hLvG8hSW8\r\nT0ygmeR83qCwXxtN9suSoj3fRftV8ib5FJBXZsQU+8Ihbe7qZxM4sRT/tcyr\r\nDXgUw1ceXM9Sr7MzH05hCVGDtAeKtaZIp09rk9/2AMLrVeOrUbntuBrS+6kE\r\nBqvhqfFKrOOZjktUz+YEABFtu6TbUFIUqo7sTog/T2euIF43s6wtSwqxPqPC\r\nt7rlhmsucn4O0kKgIJaEIBL1QldBXCNdUFpKb2vqKUC2AJLNDKxbHf1uVTnZ\r\ngxCwo2swWf+ZQKAVgYrLI1cqsvzatqaRtYs=\r\n=OeGT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e8912fd37.0","@material/base":"15.0.0-canary.e8912fd37.0","@material/shape":"15.0.0-canary.e8912fd37.0","@material/theme":"15.0.0-canary.e8912fd37.0","@material/animation":"15.0.0-canary.e8912fd37.0","@material/elevation":"15.0.0-canary.e8912fd37.0","@material/feature-targeting":"15.0.0-canary.e8912fd37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.e8912fd37.0_1674757792318_0.5183597625261831","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/menu-surface","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.16fbd30ff.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"0c11bcfb9e7449248aae4153a9a4501f18bce91d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.16fbd30ff.0.tgz","fileCount":36,"integrity":"sha512-LBAIyI7+f9/KdvBw4Zimi9ifsChS31FMOVjx2fqf7mwXwK565MeNarwsL80edwdTvMAqYbDnktMd9ee8SsHZSQ==","signatures":[{"sig":"MEYCIQCcvw0EO/RaPeVVf5aiikP61MPhGzq2457AmQdf/giLEAIhAIAzwf0NafDa2v56BBiHyQcU65aax+Uufyx/qgmm1zz5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sfXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJ4A/5ADSvdyyx4ViYRr2KnhOnjxDYfldYmUK7PzfSpiMjO9OhsJHS\r\nPaOMwn4hMwxfklX9ehkOtMPGz76bLoR9xrAbyrTZ8AJ2HwzxL9zkOrNm8MZc\r\n+UAt8cfSNV8OIyVEL6wovM47YtNmc3baBNBcy3R/qpIOxDyZXYAtGJ7p1rl0\r\nuFTgEDC6s4yodi/JG3QdNhm6WXykWWI0QkDWYl5VcGhzEhNlMdMIVeq+TQ98\r\nbLNJyrpAF9LO3u7ssDyXC/Wj1bl8bM83DbBSXmN4IdYpH9asyTWE3s6U5eHf\r\nV+LxoeXi/vjTEuE1V+KuVSBKousSLrc8+9E3RDs/8sbsKbMcutX0ZanwuUvp\r\nwelGqPeAaddCPKIjALe2GdRteLyCUB+tHioAHiXe2H56MOr3pqImLPjjI7gU\r\nQpYhh6h++q15gpET1b8rGjOPDS3BSUb/4ceCB4aVMEilVzzy+4c1g2T6CKJF\r\nQYBgvLmGs3NuOQN2ZWBKUTs39Dr6galS/iXX18qxvsCk6RaG4/XKJmsy4Fmp\r\nY61ZcJZqxRSzPTlwrezyQcAiShKh4hbCQdkLODmzxp2qoPFDEHzbne7KY3MV\r\nP3sG2JjgcyUidOMrd9sOFTHkpta+x7wq7Ep/oNM3F77wdtp0hoeUzWSGryJa\r\n3SCVttvnXd/j5KMU9/Aow7mx5EWyc/kHuek=\r\n=EvJQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.16fbd30ff.0","@material/base":"15.0.0-canary.16fbd30ff.0","@material/shape":"15.0.0-canary.16fbd30ff.0","@material/theme":"15.0.0-canary.16fbd30ff.0","@material/animation":"15.0.0-canary.16fbd30ff.0","@material/elevation":"15.0.0-canary.16fbd30ff.0","@material/feature-targeting":"15.0.0-canary.16fbd30ff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.16fbd30ff.0_1674758102874_0.192611702946482","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/menu-surface","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.033ae083a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"2b5e8cf2bb00a7db4b36a617950b4ee62f9e24b1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.033ae083a.0.tgz","fileCount":36,"integrity":"sha512-stOUl5sX/cExSOGenZYVR0nYf00NILz7pG2+bdcC/UHmfb9b8iBt0DL5P0o2LicY8FZhLqeF/wfNXnW+wIuNiA==","signatures":[{"sig":"MEUCIQCf/DY5KxQZXyyR4LuQEbBCD4W9Ac/lBRpXhfHdPnY/dQIgTj00XpGfjpBe2kEc+fMwnBaXw6ahNN5CKMm0lgq1hwE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tQAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1WQ//QWB7xzrWFT9wmO6M1ILY8x/yYsh2pA1D84YSqC3Q6JgzHr8m\r\niaMh2ZiFoSQfjT50EeUXt9JLZmP7JTUlahZiBjuN/oedkvftX/0ubqHII7aI\r\nleGnX4tbwx55CGNMhOxDTV7iTqFC7i37vKdJUxt5uwo+8HBeymc9KOqckToY\r\nrRwHTTR1U/Hcf5+ie+5jFkwAAy5mlOBQ1piHvtEyGyeDGHL5hWfUny6Rwv1K\r\nQ6jw2REb98NaRlTosc/TGhiHhIxsONGBn74VbzAp17eNcnu40cOKVtoqjuGH\r\nCx2Q09R0YIqZuWj2VZGrdTM6uacQRkazUbqlZisB1HktCyUzVMpPWJp6GlLP\r\nTCK6coizx9VWwEC4wAOXGUU/ioH/RU08yv1+7UMecmAvAt4Yka9uChYrYsXx\r\nMGbC8E36cDvaxR1EJ3rb0qWv/nXWsyCRA4tSvrU74hyLDv+7ufUfvHx2fijP\r\naLQn+bSGcZ1VdwNTfQNbj9/PmlY9qIhUCuwVZsXhtj+beqc1L7h5vRlvJnGA\r\n+9ionr9XhQpNeRTJu2W++ezyuYbB2i4wvwZjk5d22cV5Ioe4f/I9WpHaeQge\r\nitz6xI1oveqVAqIsN9WVwH+MLcOQkGHSr6B6qlCq1SDtN2g8mO4dm1uEXp7x\r\ntWYzMmTwWF1TYrPKdw8BdN/9/RFxBVb8gW0=\r\n=4z/n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.033ae083a.0","@material/base":"15.0.0-canary.033ae083a.0","@material/shape":"15.0.0-canary.033ae083a.0","@material/theme":"15.0.0-canary.033ae083a.0","@material/animation":"15.0.0-canary.033ae083a.0","@material/elevation":"15.0.0-canary.033ae083a.0","@material/feature-targeting":"15.0.0-canary.033ae083a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.033ae083a.0_1674761216225_0.877314473026733","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/menu-surface","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.3a705fa1d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"8d1dabfe06d12c1a35dc1dfe5733737c427189aa","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.3a705fa1d.0.tgz","fileCount":36,"integrity":"sha512-33MVhY/SjZcrX16wrNNgu7mPgO6hIHfLQ6mw79veXl4+Qe87faXBegOtpawbV4ZTjmCVqVhkY0mONAj7qRhQjA==","signatures":[{"sig":"MEUCID367fk2mlpRpSOI3zMGqKJ4o9g57nFzNOUWsFqbpB+0AiEAq8s/OOXhaJvgFwT+QgvZNXpTOUjNAgKj9C0xkoML6sA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FOeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqEQ//XZpGZxYc0UudGK0OdZOl6XTwxqtCzKOQBD7FWfT2gmhSCtLD\r\ny8v+4t4J3WLdw6JlCE/hAYxUhePdWlM3Q8yehaqqodIVC4E+Es2z+COlEdFy\r\nNBQmJS5YzVPIViZA4aoNA+0zKPtpTdcj9FcGWEgG8RFdlczs75KZSD6LHL8A\r\ngMyeBfeSQsHOmD7K1ucd3yagiis1qADmktht7vIaylQ/NGTpugAgUHJfLffV\r\nETLd8DK9/kCwqudZSx39B0OkIfF5Ar8m0cvQmt1LEbjO56q35NeUCQKMPiTe\r\nMizDXgFcCzHTnEfJ9iHsvhVHjDwErxnEGuGmftKyzrUJ7HStFdnkVtA1GXiW\r\n5OaLr37PYUIX9SFy/eMJ6HRE6vIFIK2/N8PSVYCUVNuJRMKpHWazvz+uD1tM\r\nM4Gpci8BxDZr2i1c8OZxi9Dc9tJdZY0fc2oxxI4NxQqskrrV3l0ChVvqV8hS\r\niJTUOu7DJfu1rXCd96ap/NF5rjLaavyQSRfsJ1HDVexSwfL5/xRYbhAJVBb8\r\nOPBwLGukgJzKDubedFq1klsFpdLdWiF1XKhR7yXsroE0gvR19wGbs57DBc0S\r\nsuGrFgMIFnO+as0U5FvizvI1ihCH8pySLNzQa39P87vKW1cVG/HbRlUhnKzT\r\nKirNyyiUb6P1W9FUv3/H4ts3F3a5R4kCF9I=\r\n=P1k0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3a705fa1d.0","@material/base":"15.0.0-canary.3a705fa1d.0","@material/shape":"15.0.0-canary.3a705fa1d.0","@material/theme":"15.0.0-canary.3a705fa1d.0","@material/animation":"15.0.0-canary.3a705fa1d.0","@material/elevation":"15.0.0-canary.3a705fa1d.0","@material/feature-targeting":"15.0.0-canary.3a705fa1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.3a705fa1d.0_1674859421792_0.8802940125766223","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/menu-surface","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.d6bea2ff2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"82c93329291e5513056a3f30a436d931cdc94091","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":36,"integrity":"sha512-Dr7JtULCnyvWPuN4ZxJy0+Bi4t8uqxtjnd97gnyt/QwNS5fQy1nYqUD5zJGqfQxV9UvEtwwARj51Pg0Y1L2onw==","signatures":[{"sig":"MEUCIQCLc+dEnpNe3nl+lFUX+Ccd3C/ToqlRWjMeso7pxiQ++gIgDVplG0b75BgNQ0kh8Io4Uwn+gRcgR1ABJAOjgOSh/FE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TQCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAnQ//YUExU24EEVaAa2oftclpLaZ4F5pPrxjFKEH77E5BTQJZCMQZ\r\nYqOGpqM2DDGT9z8eClslEb1pE9IavgndXNYfLqj2HSeE9sEsII/Xm/1BM+ll\r\ndAoUDwKaEeBUfcp+kxXScK8fH8E+ESs6tKqdN3USnDBZCRoaL+daF5xovEIn\r\nMeIxHvHNzY2kGpu26lImztVq8tTS8KoDqfwLsOq/UkPe81HT7cnrLEv5i1L9\r\nFY59rjsk3B/lcxZtb6FioeAbw6YBoHOOZJLpGWaiaZP9/nxay8iNwwu9Jlro\r\nLSQANZjfI/2nqqg2Xz9Yt++iiZYZp91R6NXU/eOhQy2XhrirVMHbIDbZPFhr\r\nL05K0tsfXqwuVuyhy7u8hKqGXd6MU5vE6WGX0UJZ0tgXlglXc64c7TbUx2AP\r\nx8TU88XyXO+qhldUXMm5o5x75zMF36SWiHoELtoZY6sr0ZleHWA4GbF/uUeW\r\nXx4WgKtcVpo66LRAYFWp+2dncZgkKxaMBhMwTK0gLnWBpIbKjftVTgm5KZrY\r\neK2vcFuQlCjn6s26YyssLXi5GcB7C0U2WPmy4QRa8ji0rjY4jdLw6TSluj6Z\r\nXwP7H4iUtf8ckJVe2bWt8LcZwrgk4XY19AUh6HOQPA21FmWeJUusrwHQ9mSm\r\n/AfZpVtCquri5bJEDjSoO6qaDTk40q4Qch8=\r\n=yJoO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d6bea2ff2.0","@material/base":"15.0.0-canary.d6bea2ff2.0","@material/shape":"15.0.0-canary.d6bea2ff2.0","@material/theme":"15.0.0-canary.d6bea2ff2.0","@material/animation":"15.0.0-canary.d6bea2ff2.0","@material/elevation":"15.0.0-canary.d6bea2ff2.0","@material/feature-targeting":"15.0.0-canary.d6bea2ff2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.d6bea2ff2.0_1675179010304_0.07348168157440238","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/menu-surface","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.0c94182c8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"6b2783027b12360d779a60d78b7429b2a03bc6e5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.0c94182c8.0.tgz","fileCount":36,"integrity":"sha512-hSQOX/eekAqkaLoVy4pToDO6CfXFAgOlZ9vh9mYe5bvlfgzAADxPCRFMNkdYSbaEWLhjB+4OR2LnNFuC78HpAw==","signatures":[{"sig":"MEUCIQCRJVjLxLRaKExoj1utavqbyRBZx3YLreypvIg84MFHfAIgNVYRc46iqDBklnuzC0qPTSWqfRczuya9x3nXL+EhyO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qTwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmExAAipoLpfzdKwdN/cFFCC7mpwqPKpccMK+bGgCtsQ1B7fo6hboC\r\nQ/n3K3mPARiDAl0tVe7D0MZrRlkeEe+lwU/i4M/9Mpa1wex0fJAH6FYrEafQ\r\nJcUFckbpP2b3KAsxvjwNV6FVaa6xayQ94FSS3y15VqCszxyBrNl86Qs9TAWb\r\nBEVBg2K1X64bOLQUvsoNyCvey2dfCCTAk7y+PLBvMiN/yrq1/WxxfmR/Nead\r\n/ugmI4Lt8mbwPCn7O9EeGayUvTmKyZC3U4SLAikAPqFj8IfD7ZyCjXJNnI+n\r\nbS8LKAAk7qzcc8VH0dM1uldAw+h/wGFhQKAhb7Dhkjwj/Y6TIFw5897gsqGP\r\nc9wVua0FD8O7akU+gyu/h75QuCvw1w9nNFjCiKmbq+MJhYeQM2lJnXrCBgNF\r\npzydnm4xKC4QdJaY3IPYqs7f6snlO0ZWfDElYxHBESzO/EAnWlJHyqA3tcWa\r\nDNX0dwu6L6KVYnG0RJANr1NfP/RSybJVFCNeVjGTZmgsoUjtm61EvVjXIKR5\r\nBXPih9V8gAgSLybmANAeVCShZJ9ZxWnq85g+Ea2EQ/ZpJ769Ow4KUcQMmGPb\r\nQ76Nyi6TToNS6T+mn3rCWA8OuEWOei5Pfw7FcvRG76mcXurHmzRCWeYgo3sV\r\n8HmROTKyywSV87nyRmOiMnOjUDIZl6VocB4=\r\n=H/t3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0c94182c8.0","@material/base":"15.0.0-canary.0c94182c8.0","@material/shape":"15.0.0-canary.0c94182c8.0","@material/theme":"15.0.0-canary.0c94182c8.0","@material/animation":"15.0.0-canary.0c94182c8.0","@material/elevation":"15.0.0-canary.0c94182c8.0","@material/feature-targeting":"15.0.0-canary.0c94182c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.0c94182c8.0_1675273456673_0.8751468575265697","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/menu-surface","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.15b221540.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"96089a8d8d73fb85c05a0e74773e2fd555ad4ef9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.15b221540.0.tgz","fileCount":36,"integrity":"sha512-cgzvjnrcuxrEuSCCqhSRtrV64Wap+3GfR+VQ/roBU4mFoo/9jyU3GBbxWDkQPxr5EJiDf54L+jvNMrEMUCLYHA==","signatures":[{"sig":"MEUCIEdxa/v+L7HTStFTwA4LutuzRqnxYzuDlyMME9EJPU94AiEA+3Nyuu0uTMz4jtX0HIWm/El0U/HS/i83itUSvsgUkF0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qbmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpn7w/+PwaNjekrhwzGGGYr0l8mocXCalQwTpg/JrULGWPubarD/lJY\r\n/NvGpnZgVbTzRhyesosBBbp81BZDj//Wd/b78PGLYscdK/tVXppVyHYyObvc\r\n7XDzDdqQgJsWxAvVCblQLFRnRq21Is29Ry9LOIpjUPxmhSy7CbzWiXClpwmJ\r\nVeivo2i9cYQfcDo8GMLzEvX1rqYecGXn0EJfhIxQSEH3yN8bF0JVm/1Fi/lW\r\ni2GsLkhM9rXBJ5BpLJSTTTnWd717WTpDp5L+pZH9ZJDCf50dh9txR0xz8h3D\r\nL0URoacty2ivXdEzp3xuD11MQTiWmcSB1h5XsEVuFTarFqt7CBBfbRPktEJV\r\njTciDERM4/G74XjK4jhw+P8lxUVVdGWTffuDl77n+vBkfwt1NrkwLapJcf+r\r\nZDlJ2rxZPbJEXV4kKuYEU47qskH7gJOLSM0ED0urRd9VpaF0HZCkSBCqGG+E\r\nnCViUaJ71nD0vsDfkO2fNi9sIXvUomBFE5gETHcQBsdISK57RNKPsHOcl9O0\r\noQxcETTVNXC0HM/Bn4c4fdBsySbFFRdPhUbKU/UhgUyrJTDUMYhnd9XTDaMU\r\ndZK8WxHAGmkmUAHUQN2oCXpIqPY4CV69BC49QzEgNwuiDcXF0AGX5ZfIp0KZ\r\njxFqdFQGY9X9YESNg7eg75Hk+TvdwCX8GN8=\r\n=P2Xf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.15b221540.0","@material/base":"15.0.0-canary.15b221540.0","@material/shape":"15.0.0-canary.15b221540.0","@material/theme":"15.0.0-canary.15b221540.0","@material/animation":"15.0.0-canary.15b221540.0","@material/elevation":"15.0.0-canary.15b221540.0","@material/feature-targeting":"15.0.0-canary.15b221540.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.15b221540.0_1675273958110_0.07565005130144309","host":"s3://npm-registry-packages"}},"15.0.0-canary.eeebb8bba.0":{"name":"@material/menu-surface","version":"15.0.0-canary.eeebb8bba.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.eeebb8bba.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"89775a9bac8accf6f5de52676cb74b59ddd2c40a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.eeebb8bba.0.tgz","fileCount":36,"integrity":"sha512-TwJ+aN4T2jfrw3cNNEM+Ru+CihYvfJOB7VTw0MRZWKhJNhZQk+n4v21heBC0kJwlsWel9YxDDfdbI9Cp4U+6nQ==","signatures":[{"sig":"MEYCIQDKOh1XvJAnZSWF8zcVZh1mtL8fe1myYerO3ZV9qjObdQIhAK24X5s0iPu4MLb28PO8ya1lVl5lvM9UcY7eEgX3VHRJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2q3ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3HBAAligzHO97VGpnw/A+OX38FQmRzXykfb1Li3BuTjIQ9TC2HsW0\r\nOn2mqAU9MKHf/f6D0qrDGEOGqADm4y5iWt2iw1uy/3F5AWAo3sJgL7QZT1ax\r\nLusbXZSQrd/02Q53vgGnc1yK2mHgo8oqCwOfW8YSWjrF/mMKjvo29PcmMPMA\r\nDMqSXNGM7FcTfY2y09Q3s3l62Gs43g0ggvpl5Il2uaa3fiUQ69+uaxrOHrSS\r\nuDTcpQSWo/PT74OetKREiNDaCLSOJgUIwtrKId29kOxqS99S5SDqSGDdzvPu\r\nRDM2I3+/aMd6ldgvVCXacFAB6djCArNQwBMj9YOO1or2RfBIrD63GVagPzbL\r\nBiKQpz7ir09pXVnlvxt0U/sDijHaHXyrBwhY2v1rI77705rQidaIm9QmttHc\r\n60TwQqj+IrZwkRvLhfmEsLpx9Q8DRm5rWr/urbbKlGSmOnCBW7Jv/Kpa2ymx\r\nxtoAlobs6IZHBadbTQs8dn8gcTh2Oi2CEFTTnP8YAjUH+yGdSK+ncdEMz1pC\r\n6LUlLnl+qUQw1C6Au9dFIjlYyxf3x/3bJgvEXHh+L0JJCDWPygV0KYyHeEL/\r\nQWnF78pnMZOAbwAACjIzS/2FYhcRQou1FB8Qe2lYJK+CW9QXpt4mu6MgdbTX\r\nCWhuK4awPLXJSKHz6RzaYRry8PFlBkJsVjw=\r\n=hvTv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","gitHead":"5c8d0d2ef793b8bd564888fdde6b97e8a2502cdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.eeebb8bba.0","@material/base":"15.0.0-canary.eeebb8bba.0","@material/shape":"15.0.0-canary.eeebb8bba.0","@material/theme":"15.0.0-canary.eeebb8bba.0","@material/animation":"15.0.0-canary.eeebb8bba.0","@material/elevation":"15.0.0-canary.eeebb8bba.0","@material/feature-targeting":"15.0.0-canary.eeebb8bba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.eeebb8bba.0_1675275736986_0.3874763466030182","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/menu-surface","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.6a4b3f834.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"b1813f068428ba4373bfbc785c1319c7ab03edd0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.6a4b3f834.0.tgz","fileCount":36,"integrity":"sha512-6BOU+C5OtbplEqgkCbgEsXQKMSi9fw9+O3qC2DUXb9KSvrQzd6f/tk2/u41yB5feVrWG5oAst8PmODU6SNhOJA==","signatures":[{"sig":"MEQCIDO/AAipTzBf5nEA6GvJgdADRAZamXW6FNTu2XJwb23eAiBKYtb0PGXOLF7Fy4TCRYtUaWXvTXaqkgUen2spi2QoHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2rZRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUzQ/+LdRA6kZD5wpkclw3D61Qi9B9CqWKE3cuXAalC9dz3dPCNMKB\r\nqcHsfnS6Ac8XWeM2DIb8Oyy1FKO237KO/KiP+tLtsRNTSmg7KVNTBtHzr8a+\r\ni/+zgQVLwL4vyppMfVaOWkFbVSuYQ3ISpTxPeodmmz16ylTcYl6oNTy2T1Je\r\njF+djI+ZivdsFTR6ACkACsNFHSh0lAnE6YG8aEzLQNOfwsjN4GvoibhitvBi\r\ngqUawnhfkTtrCavgBR8ogiKnd+oafdrDd05W3AXr/vdcKEkIDdS+YTk93t2P\r\n+6naud2Aqk8XGazTz1w86cD3mSOdfG5tVWCyJVoW8hios6Xp5/I7efVoXN0T\r\n5cAHTHSNxJoDQ77zNmT7sLdGgu0UYd8g/598kuOgTj3P4ebWX95Iu9SvSHAU\r\nafEutennfSZ+P2z2IWAYDuKOOO0OyQ7F0X6qWSqBSSY3Dyhjkfqt1T8Uoc/w\r\nozPK8JFwlNrrWZic6E1aaGdvg9P9ph1LXLACR923qGN6u9SbYfRQbfq2mXkp\r\nB42yDXKm1zVtf72a4zJC894veFH8Vg3SOELxEq2J1aDi9WfEsBLQFnOcojTd\r\nbauTD5iisD1nfwyrEDnEqSV0GuUcJf/jHR/7+8zvCeKFI9whTmXhGKrIt6bg\r\nx3Y7otDxJUBlAhZiNJkgiXFiG4NRz21//Vs=\r\n=rbXs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6a4b3f834.0","@material/base":"15.0.0-canary.6a4b3f834.0","@material/shape":"15.0.0-canary.6a4b3f834.0","@material/theme":"15.0.0-canary.6a4b3f834.0","@material/animation":"15.0.0-canary.6a4b3f834.0","@material/elevation":"15.0.0-canary.6a4b3f834.0","@material/feature-targeting":"15.0.0-canary.6a4b3f834.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.6a4b3f834.0_1675277905401_0.1963428736660695","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/menu-surface","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.b177b40e2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"9822dfbddf123936f8c700316679cb346b25ad64","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.b177b40e2.0.tgz","fileCount":36,"integrity":"sha512-KWan5i25yhDc+0KMdGuPQGkVx5gIfPeBCrabxZPSPwHv9TfRzV6iQQtG12jB0OUIwoTyOY/DV1Nfkoe/pVgFFw==","signatures":[{"sig":"MEYCIQDvZVqWY762X2qtgIgWokJ6k7wfwQnR/0jzZMcZq2HE6gIhANo0dHJryc4p28wXcRvL4H4Y+6Q3OPqItYMcHeLoHWFG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y8xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLiRAAjIUj1m6EZisP6K4NeJxUMuOv5oxaGDs8Zo7MsxzgP0iVsDax\r\nXgnlezhRzjHqe7fYIRmMOqvv35PUHf/8cmQGAFCNX3FcP5VsTgck65kKDzzi\r\nttZh6bsOE6B4eBWzEm9KJYJzQQP9c/vVWXv6x2GgMfstTsnVu7F+H8hlBDlr\r\nUPrn0kA7a+KxCq/xWevHU/vMxlKmq1Y526M7q561Z4+LgvQS0LxsbeJ+iSkt\r\nQcicccwY8cPd1Nvp/NHJAN/lqeK3xvgTZcDEbz9W6bvIuex9nVF6U8Xp0tHw\r\n5S/9P1jqlT0Qwyl3jjt0QLchptbJLif4B24tk0NqowGqt7mknM1PY7dwhcec\r\nakn6VZSwCDt8G9zj38crgStSwN9Oj/otdUUvueC+EuOq5/e5ru4EOmec7c2v\r\nZkl+pCtoMPKt6tcJlHbOt2euY0O3e2bO9EV5Y1DJs4k0d75Mo2JfEJ8P5zEp\r\nmZypnu4A29f12I4wNaM4jc5+dx4yC8SwT1TkLNiij0KCif70gv0pGU1o9hrO\r\n+1B1C6Gwhq4Wu0lZEjM/apOB5FpW3KEv/8NaF3WSNaqByJE/YAxus6J9qQMV\r\nOxNEk/u9WunVrUeQfzNAwdBME+SikBoSlClo5Cr4b3lDulQCdctUNs9yPZfz\r\nKyClUqgjHoeR6c7xXreCXIG3rARdcZB31vo=\r\n=/U56\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b177b40e2.0","@material/base":"15.0.0-canary.b177b40e2.0","@material/shape":"15.0.0-canary.b177b40e2.0","@material/theme":"15.0.0-canary.b177b40e2.0","@material/animation":"15.0.0-canary.b177b40e2.0","@material/elevation":"15.0.0-canary.b177b40e2.0","@material/feature-targeting":"15.0.0-canary.b177b40e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.b177b40e2.0_1675308849388_0.1692379194014777","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/menu-surface","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.d9f821042.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"e0d7f213d51c76e3d738e3cb8610f56c68f04396","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.d9f821042.0.tgz","fileCount":36,"integrity":"sha512-9Y4PAw5KI2XMB216hGwGD/+byHwnFwTFRlDB+i/jETEPwXOp/r2gMWCn4C8VOjc8JFBTHePjine0xZ5VrTKO9g==","signatures":[{"sig":"MEUCIBjWrBPHAU3kCYnGWdyyElrmM0ts3EnZi/03MfRvEeKhAiEAk2LX/1x2gQm8DWgpcRP0xsVwblfYkak2dALdum+Q/lk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/UKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7Fw/5AZwWQ1eDWwCQ+gS+cbqbICLpfRsqCHJZTNBOoU7VJmGsN3ED\r\nCNKmIbjUanzKroQLdrlg5usaPUd91EHCSbVt6jhfoZaLmEnpDSBcdco47F4O\r\n0OJt0DZM1ayYiZR9vyBW3oUulBnGiZUlwJh7UOxsUDz/C5jOKY8MQPhUWPo6\r\nqLfk/e7IAxhvbDwTBdZJSD3cfrkQnABPkFmZMndG+gVBV6oUjehMIK7TNvOG\r\nCLyTdYH2682mUPLVkWMXeneT35oVwvb+zS7sRJggATlXg/NBqbWH4LTM9LQx\r\nM3vv0//yoJGvwyS7rexqRh8kYD/yErt+TY6C5ApBI9KG6mqS4TzKj6ReKdvL\r\nge8KyVDieQwUXmZp5DA8JpNcV5pJ8LjOnkXbGDc4fqhcdr1f+XDO7AIVyrBz\r\nRG4sAp/9A+FBuxRLdGSuc4x+m96hoT8VEMbSrNdIxE6vFgn9EPBDO66dY3SF\r\n6giXql/mddVCGVQEPJTOx3d4AIL4Az9KHmdj7WeKO89nRJYgauJJE++56BSf\r\nsllQ59XciQb6++sFHD8uZxH+nx31kBq+mqRej15ixojkSCSCQflF/gcXrh0K\r\n4u20pweQYhcfbERC3233l5cq+tz430NS4p7Q6psxl0ZkQJXFve1ZTjB/g9mS\r\nfzquK2pwoOoogzWAYWCgOXZaoyHDQySrc/U=\r\n=je/w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d9f821042.0","@material/base":"15.0.0-canary.d9f821042.0","@material/shape":"15.0.0-canary.d9f821042.0","@material/theme":"15.0.0-canary.d9f821042.0","@material/animation":"15.0.0-canary.d9f821042.0","@material/elevation":"15.0.0-canary.d9f821042.0","@material/feature-targeting":"15.0.0-canary.d9f821042.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.d9f821042.0_1675359498744_0.6867938623349257","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/menu-surface","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.47c7deb19.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"34a9945035da4092dd207453f07ff71927d8646e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.47c7deb19.0.tgz","fileCount":36,"integrity":"sha512-bcuhPc/fxdycw3IRty5adfDBKxj53Ze/5Zyu8qzjZKqmKnVM4yB42DTYHKnXdCyLbZFzes05ne18l5DTKkg76g==","signatures":[{"sig":"MEYCIQDLxVQFC7FNJSSrJgE0DKbrWjnQFWcRdKp56oPMV1il7wIhAIxevQqMvN4fFkY6P86c2omdbRwCyat/C6vxRwVNzT+d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M8sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1Qg/+Pd/XTQWOVOzHRlIGPnhqORlxe+1PHk0BTlwcnP7mAd8in/wU\r\nF7zx1kqHxvcXyhurIN2LQKUZuN1k2wKQf5USeHLwkiatqFDeNHwxXzrG4rV3\r\njW+dFJDgpVNWletSUCl1RZVTHZrijhjv5cRu2POY3EaPEdVP2DD1FKzbaNvj\r\nr1D0OKarRk0DDd4Yl45enZofO52X96IjY3Ld/Wj6ON/xn3W/cJD0aWgFX8pi\r\ncAtVbhmhv02Uem3ZqEpPDkos4FNOev/Bhm3cn8M3zOpwhwFfbko7P+HA/N0g\r\nLVEVTbBlPMZDgjV6VrCyFlXRcgPXGSbC/rNnmzvLBt+6O4TGXCpwQ21/bker\r\n+vsLUzkbxaqpqs6xgWN4X+eHeME3HcjTdkWRqMpAQW4yvwaZZX1qhDTdLMKN\r\n/97Y4DSaYfpD7qb7+aozdpwmiB5sbTagAdG1FF8h5AsqqEIR42QueiwpxDPE\r\nfflMz+Hbois4GLXk8bok+1XyfxYxpXYBRLwYA23G30SgstHMhyudBqDT3eS8\r\nqTxDtQK7lPyBF3rM3evbavoi6PNz+R0KYj49xPZIOmZQ0eDDPL7av+wglWtr\r\nIRMdn2ABWWWdpCSWsWSv9VLlbHGTuY91T+HK3/++h8JW6AMudjP+0z9Vt2VF\r\n/gFmNBj0npaqMHpMn/RMQGOL3cFi7CEvWS4=\r\n=X34j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.47c7deb19.0","@material/base":"15.0.0-canary.47c7deb19.0","@material/shape":"15.0.0-canary.47c7deb19.0","@material/theme":"15.0.0-canary.47c7deb19.0","@material/animation":"15.0.0-canary.47c7deb19.0","@material/elevation":"15.0.0-canary.47c7deb19.0","@material/feature-targeting":"15.0.0-canary.47c7deb19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.47c7deb19.0_1675415339720_0.3667321173074256","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a16dbd1a6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"8e5a0b58e506b2b75bd2837e1bfa79fe415c79ad","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":36,"integrity":"sha512-8adZwYw3TR344lgwzloyAxLIFedpgx7pZ49XP9WZ2yo2n280HjN1q7BMNA92iVwnGbPlSd2n4Ip0naO55jUUtA==","signatures":[{"sig":"MEQCIDAZxK/xCooONKbqpsKYSKU39fTObojJapCB2HFcJRRyAiBi/6q1eflgNYATmOd6D7GXGJbp/c2lmQYCLs4sU/wEIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3ffLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0CQ//YhGG5D0cT6ivoDoTN48ew+yd0zezhoWPA6mJuU1RlvxXKdfx\r\nRS8Cj5Bi/4LT07kEahlZ9zJ/BMV77SA18qHO7LJWGah5hmbHt50oyqtXS8Fp\r\nLRznZNImR2i7Ib+PGjl2dPTcP/zkyjQhvNHTu4vFEn8atsG7sMfNLJPmfWdu\r\ndITSNhgQHtGStkMHMyTc83ShztB97x4+7zb32zQt8c/F8GfgA845ZWXYDk43\r\nPY7T5yhSDwtSPbPbwKeukL6ubm4HV0hsJW3GE6ClMQkLrDrDrQLitUjYn81P\r\nuQO5klY41a+XYwZgs9E5uF7feoAZu5nvOo0Hb99HB/fXSu6tfOAfk7pTMxEZ\r\nrYCktBB582IDmax4lmTstNn1kbi/ium1WoOQG3ebhsqyTObsEovZCJeutYTN\r\ndFw7f5fy5HlfuRgnSL+Bt2QnV527LdRjkQJKWc7qoG5i+Ekr/S3dN9Q/0+D+\r\nspzESlmyt/trPjgm0pU9eojEgjDjxgOKAocfcHvH5/N+G7akEmRTOsZcfdOT\r\nrBYcdMB+pe86hJT33yWHFxzI0k+ngEs4O3sZMWNhphdimYKuZR8jRTscG2//\r\nYQ4RFTB5t0kTeXahI2p/v/in7C9m2qH2BXvo3LIbUw4i0T+NOMOzaj006aBz\r\nmP3rU1BBLogjYeWvRQfuJg3QHs2vRxVpdFY=\r\n=M/dh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a16dbd1a6.0","@material/base":"15.0.0-canary.a16dbd1a6.0","@material/shape":"15.0.0-canary.a16dbd1a6.0","@material/theme":"15.0.0-canary.a16dbd1a6.0","@material/animation":"15.0.0-canary.a16dbd1a6.0","@material/elevation":"15.0.0-canary.a16dbd1a6.0","@material/feature-targeting":"15.0.0-canary.a16dbd1a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a16dbd1a6.0_1675491275562_0.11977828456997486","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/menu-surface","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.93416f87a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"19cb72ff8bf7f30df47e4a865d7ec61171179932","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.93416f87a.0.tgz","fileCount":36,"integrity":"sha512-pXZY/xbij4jleyND1zkrHVKJ84EuaNBYdoHPCXr/GteAylLrzQDEE1pqruCmTc1ZrGIwZeA0TShSIkW4No2adA==","signatures":[{"sig":"MEUCIQCHJA+1dC51vAQqM3YrsVOAAUV1JYz4GJNhMC/+LcHG0QIgA2kEnDL4I2tbMESB3Lf7PVDSZTwc70v+zea1FF+u3Jw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lDzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyIBAAnwKGRpwq7Wegz1ehvluc9DXDoyKSk94XHCW1QQaRMT6Xa4U7\r\nEvHdbO/j/kbM9Koka0D/IkqW0jvawRSrUwlyIMWemicxxFxBHkZzvEPBtsVg\r\nsWQg90PIurxGmrUZjvCPlrrdA2jE0Ek0hAZIMkEQhfTiv74jH/rQg/AeXGHV\r\nAooQ3ZGgCuTb9VUKNL21ZruTIizYOufbjHWLu6xd/VD949fGMXEgkSXnkvyX\r\n6qU95ytaNNw4tIvQrZOnbeFK7omtmZleXhSwzJUGeAJIEG75Fv+wEm4WlqfV\r\nVhuie62lD09708i/ajM5wgRZILUWLLcG9FJkna98V56HVR3WnujA4nbnqrdj\r\ns/bTaTLAlfTibvPuwTtAKxkP61CyudPkm5T1izKLKr22A2DSB7K8sAopyok4\r\necVpbBI/ljshVT6y4Zr8B31nDznAHt48UpxtoI9jmILGzsHwhv9Obv7yj/S5\r\nPq56qNbPt6oSO011ydynPmJRr8hx+3OIOtsdF8ZIVv1ogiAn6mjAgl6pnTf8\r\njeRQ5Vilg+jYmz9/kLASdDqGCh0rHlVyMd34gff60bpIy4OMuJPr0yMZ8dNM\r\np+17AlbqXtOjzGDvavRL3JSBLihPizhFA2zRFaTJCGofbvhEENlrgI4h2Dge\r\n1enSUhZcJ6CzpI9QmCsb/S+cNviftgIqnlY=\r\n=TZeb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.93416f87a.0","@material/base":"15.0.0-canary.93416f87a.0","@material/shape":"15.0.0-canary.93416f87a.0","@material/theme":"15.0.0-canary.93416f87a.0","@material/animation":"15.0.0-canary.93416f87a.0","@material/elevation":"15.0.0-canary.93416f87a.0","@material/feature-targeting":"15.0.0-canary.93416f87a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.93416f87a.0_1675776242971_0.07201261521781999","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/menu-surface","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.49b8e7442.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"f233b8c870746a0cb0668b4ace62f5a60f1efb58","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.49b8e7442.0.tgz","fileCount":36,"integrity":"sha512-DAlb67UVy7jUZxEaWh4NkQoajawLZ7823U4F2fFwyTcz9ru/jZASR/dd2uQWBLKtFaq8V3dsSDmw5XEvagjIpA==","signatures":[{"sig":"MEUCIQDr+3F49dTGN47DK/uTQf9FzzNz6y8azhcdKNuOe9Mw+AIgOYR8om8Ay3Gi0deI+0ZrvW8e4lKEaqW35ov83gpQPlI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4totACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOdg/5AbHJvVPyL3XPeAmoCwCCIapM4kGrqFcoXacVZ1D+TLJReP1p\r\nA0Kq+k0rUH+AE1vBEq33aV2k5d/9b50KCZ+VRZknwtlG0sg33/o2/flaxxHr\r\nHoTOKmSR3DUIsXi7hZkxdLX4XaLw/fTn4PpvIcK4kmj1zyzpYX2RJyDZFhsx\r\nw6x0/GwGbSJnaiWQYc9z8Ja3NfpbGWPZKFL4/VN9fM/iIKS3YsuU4RP4Llsr\r\nOaUl4eGn+d0ZaMQHZ29HwWpddb9blddc/juI56iDiByWSzZ5cUJscLSNfD59\r\n8TnRMjxSGsWUpUlfCARxq7MoS6GRfMhyIeGN/7xS9baZUDNHJ+VS2peyHMwN\r\n3Gk0sPZQ4nU+gPywFmV5jAqCv4Yc/E52XcEMMiOXXZTtWNBtGEcsBvg1f4Es\r\nPnNEZTYWu9rD6m7IGni4mifp3gvA8o3Z0EgkXKXgT/vqr0Guuo+DvpJakt96\r\nC56ri6kNQ0mHpQuYmXBKzYwdlWu48vR2PTy2nB9QGZaCceiuqjbjCNoH2Wlr\r\nCOVZoByiAgvE9VAXGg8WgKcJA0PkRwK97TsA/HMY3ErHyGgbcqYYRxvFN+OH\r\nAKWpmaugHDnJFHnYrGa1kpcXmHfjtXD8EGyTT8klLCD+H7ynlhe9/kjUxFWt\r\naha+rGALv2eUmz5VC9GdV6repk48eVdUnQY=\r\n=3S5g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.49b8e7442.0","@material/base":"15.0.0-canary.49b8e7442.0","@material/shape":"15.0.0-canary.49b8e7442.0","@material/theme":"15.0.0-canary.49b8e7442.0","@material/animation":"15.0.0-canary.49b8e7442.0","@material/elevation":"15.0.0-canary.49b8e7442.0","@material/feature-targeting":"15.0.0-canary.49b8e7442.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.49b8e7442.0_1675811373229_0.32950861172331236","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/menu-surface","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.de38de758.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"e6aaf641e45dfa8773901dccf1c547f2a0a27798","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.de38de758.0.tgz","fileCount":36,"integrity":"sha512-3U3wNx18O29u38XiFnddhU2/o0pvvwcZnPuHCmX1w19xkIntY+CsCcARHrfex0igWvToew2mzhiPin1jm+s8zQ==","signatures":[{"sig":"MEUCIQD2VSgP1RO06uUVbT9rx0wuktaEqLgj0x/Z9xAQX2IcjwIgPHfRENpDSGt+zzlFQUg2i+OutC26JYIV5/H3npCjcrI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RRiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFcQ/9GiM5UmOx6t2dfLY0MUqXDH4wvo2Xq5Eu4PSMKbk+6qAb5L0u\r\n4+SgowPqiKJZx8SwjRO5ERivANSmHcYph09AJvrb4DkNweXPKF3xBiwT6vqO\r\nwnifEQYNX993XmyfhcJRVf2jpuMOfZdx6kxrlLknCR6jlktUSLlWK9PPE8/z\r\n4d1+62Ge15thHgWYKqhHHBsfFK9EXFLqPN5Z7Xc0v9ZkDu18bjvu98+Vocbo\r\nIw9c98VArUs3vuT1Flg2JZKconC11urz0atMoG1Y3fIFbj/aaAZZraw5fIW1\r\niTuxQNLF0qYfTKyxoj32JGMDK5+wKOe9EzJoUuaydcAc+0RnhGi7N0JIqAmG\r\nYOnOZDKYBkUD08jhEvlbQDwy7J/V7Vf4EOUzwami2pHW8HbKPGmLmxhjp0q/\r\nK1bSME8YiVTJ1w00dSIq3apuouTLvCNrpLn3QR5kVmcC2CUrVTUKZgp9ebKK\r\nnJowsfmMmOqbhfII7Amz/5g8EgLSo1kGPa/epx6zQX+46INquUOiQiXZXPXm\r\nPvXLxcpC6L3domLVF+41KpmOL2Bjw169VCgUKVQBsTXPO5m47bxvYNuiexsh\r\n3uBibofw1kfxkXtiBfQS5ctkV88/GLRcVJ04kE3qKWRU1d925Yy+NJIbvewG\r\nav7V6msj3BJqTh9PI5TdsW/vz9VFoB/WIxY=\r\n=dg0v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.de38de758.0","@material/base":"15.0.0-canary.de38de758.0","@material/shape":"15.0.0-canary.de38de758.0","@material/theme":"15.0.0-canary.de38de758.0","@material/animation":"15.0.0-canary.de38de758.0","@material/elevation":"15.0.0-canary.de38de758.0","@material/feature-targeting":"15.0.0-canary.de38de758.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.de38de758.0_1675957346569_0.23127274441829182","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/menu-surface","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.4d62de70c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"fb10ef7df1cb39f6dbf61d468cb417b6f628b099","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.4d62de70c.0.tgz","fileCount":36,"integrity":"sha512-dfUxpdAwvZzaelQ/CBQYBWNd0rhrouLYRb+80vtu/FuhYjZX/3OPnQXXWaXGJOC4NJRL/e1esa65sXw4q5tL3g==","signatures":[{"sig":"MEUCIQC5U2igtV4XlGd3oPhNhDu93x7RLyTXuTjXp74lpnHHlgIgTSx4ZerW2YGMhHQGGFt+z1qMFgRJ0qgsDa09dq8umFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W2WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmobvw/+NzP8opykFqTclEB1WOGZfEftzppGFhwZV0Je3cuqDvvL7wrA\r\n55uPlpikXRY8++fy5zl6fk/TshaCk/e+ogQAM8J4E1aXg9YG5awVAOvMOWGy\r\nr5la7DTd1Z151Y+F+dGRw/3sOQp1cpm3PD40Xyu7N4ZdgGWGsDheJsMsfqcv\r\nyJJya36Y9ncDBfia5H17TmbIWvPVjyDAZSzUgrsCywojh5BWg1hhMbjcx6K7\r\ny7Dn1kVahIjD4FHhCE3MxxUeJ9HH6FE6O2ptMNhFdEJW/aTyozu+dyFXqb6W\r\nFIIpMEV3i+xTuGvO2/0O2AWLhjSEgva0UqY1arCQaKRs7aq58RRwRRhDY9gC\r\npmjT4mNH3jDP4pE1ib1SapkRq8xQ2NdSjCln2vJ1Gav0RpskMa6YiKI0Wm2Z\r\nVKUsJNSEQ3uHOgVaN6hoahly8QzafQCfcg0SsKg4dpcfSA48SIhlTBaDUPGk\r\nteLTNbHWiluOjryMYmvbgz2hhHb8dttgKhISIJW4nVNaGC4JXPe4b/QwqD7h\r\noHMXwQLdLhpFWOFEo4aCbezzEA9ro6dHg1G6b8bSZBjuuWXUJ9Sn8qE+t06o\r\nwixSQZOhUo9MQUTzl4sbmuOBH2Cxqh4aPTVulDYUZT2PJVGo8+D/tjXZiqvF\r\nm9o6ZZsA00x37Lc3l4e052JZEnyc4nhpGWo=\r\n=0yhf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4d62de70c.0","@material/base":"15.0.0-canary.4d62de70c.0","@material/shape":"15.0.0-canary.4d62de70c.0","@material/theme":"15.0.0-canary.4d62de70c.0","@material/animation":"15.0.0-canary.4d62de70c.0","@material/elevation":"15.0.0-canary.4d62de70c.0","@material/feature-targeting":"15.0.0-canary.4d62de70c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.4d62de70c.0_1675980182410_0.7161940110578342","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/menu-surface","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.6fcd8d418.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"77714b2a3e4c8c8b94a08228e5c0a2f8efb67952","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.6fcd8d418.0.tgz","fileCount":36,"integrity":"sha512-Z+aFVqF89q7bCDLJagoczxvQEbHMqjpuDoDFT3crt9w+hPqpL+Rxz5PPRMjEoSuiaPog1A/G1VoxMLjW83g6sA==","signatures":[{"sig":"MEQCIFEpihNi7n5a4xex/qakwYIaEWIlzgszjBBOfMj4zGl+AiA6mwvaZbyOz+o/es2HFQXNl5ZMnwqtxmdvnoPLbm4Bjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iPjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoynQ//YnXp5EwsdJqQycCHvR5Ztt60d1OhuFlg9cvg/lMWrvaqyDK9\r\ntcMIwVHN0OKa5SLcGHCyrUvitC8LwDHwlXMHmCJF9WuJyUJly08889v4sHKR\r\nKC3YpyFcatCBVkFXqihc87Wchhoa97rqbug3nGm2t41r67NUFMv/y9vJHrX0\r\nWjHsYXftdE6CyeJBt3CauAZ0xaDz/XVcTr39FKMFZTIwnsSrt3TflQ49XPVl\r\nVdNWloLzYRURxwJ9s4iGMuIfY1M0mhJfO9Ur/81WjWqybO7fSwmbLLE9BwB4\r\nrMBxMIwcEZu+8hEXtDdltT/FoqOljxLAlI2XAzLjCfN8SkwZ5v0k5lxXXd9s\r\nLxd8T5R4pgxE+qChf+vj11W6/ScEzUau40NkuVaN6pnx0HEBz0cUroRY3MSy\r\n1SXBFTf8m6H1PqSfcQCTKMl3tzqRTWLxkelLxn3TcqVy6hccS4dZo6WUhd3i\r\ncmED/A1i5PxrMnQFFJKaPazPRHqZeDb4cRLRD9CRA263E+N23pYQhmXJGnJK\r\ngQeN6m0b4ubDlfVJUsQZK1ZewtSVvtDWnro8vqOfe0wP9JnlN/USIN1oi/iI\r\nmijyHQghu099BYfcx+zHIhKFj8YZWtmxp1c/UtjDiFJ0BmRVC0FTmLDBeQot\r\njc9rcJSefJULZBZw3SZwjvFBWoUKA9FN3Nc=\r\n=ShF0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6fcd8d418.0","@material/base":"15.0.0-canary.6fcd8d418.0","@material/shape":"15.0.0-canary.6fcd8d418.0","@material/theme":"15.0.0-canary.6fcd8d418.0","@material/animation":"15.0.0-canary.6fcd8d418.0","@material/elevation":"15.0.0-canary.6fcd8d418.0","@material/feature-targeting":"15.0.0-canary.6fcd8d418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.6fcd8d418.0_1676288995049_0.9232198175032693","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/menu-surface","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.066d9439b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"2ea22cae53a1fb080c68653d24e42eda517491bc","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.066d9439b.0.tgz","fileCount":36,"integrity":"sha512-HoDWGk23lHxt3Y2LA8tln86npROJlH3HnfbsG1qfdW21dQZyPpyBd37cleAOsYKj5EMJJHY8cFSWBsy7/Obwug==","signatures":[{"sig":"MEUCIQCG1vuizY7mG+1k+Y/vRTH1t/ggfnPMwWpU3PQY87VlpwIgP1iQnuN3fkdyswE7ULfgc4mI8LNppSXlhB2Rp0xnxeQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7Tk6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMpQ/9FcSjNbaX28CQ7W4ZcPq/s7nSlz5mDKoT/aDf+txAfEiOZnB2\r\nPJDCX5Uj3RFOVgkw05sfG/v8NsDB7NTTrOYk1+fRVW5b7llZkfdyARek9d5p\r\nTY8fx06k2hAPlLZva39iAvzSUtqYNc1td0q7KZzMe80zz1Pg/0uU19VgEXLI\r\nRywENoQHVqG9uji4jW4U+9o/KkXywd8cd1da+jwBUd0fE+GpiQQaVcO66Iaz\r\n1N75vW7wd8uuejd5bL+p6A4x5wyX3msOFxecf3mq9nKLPD0MQpJyYovHu44f\r\niBUaKL+pGEUnVVfjlXHZnXF7fiQiPDxIof8TcIeX0VxrKKFd578Pd5kpk3+E\r\nxatF5EDeFGlGtKfNCmjKSM3HdYWH3UbN2ut3KfN8ZmqXq4+N2g8VNMSpuIi6\r\nWvLvwuX9fILaiAnSp2SZK45/bjCY3Kc2BEWY5BoVo7FDZrM9H7/knz7aQhXe\r\naBNO4nk5C+WGfcvVhmlz3XwG3gM434oq2HtMoX+rn2aPZjKSxRD+u6/urMz7\r\nXjgO4Vq64/KFIZcSsm7zm/uw9PADEojwVVvmvcDcBgPousqf5PdHMlqN9nCC\r\ngLWBM/Ui/CasNVTWBPR5d20XUqQwLL+jt3ikikSqUd91cUodX6ZNCpRMz9xf\r\nSiMtZbmsrXo9GVFxYXaAO0iPzewn+FrVeqk=\r\n=Ic/c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.066d9439b.0","@material/base":"15.0.0-canary.066d9439b.0","@material/shape":"15.0.0-canary.066d9439b.0","@material/theme":"15.0.0-canary.066d9439b.0","@material/animation":"15.0.0-canary.066d9439b.0","@material/elevation":"15.0.0-canary.066d9439b.0","@material/feature-targeting":"15.0.0-canary.066d9439b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.066d9439b.0_1676491065749_0.17070848789000936","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/menu-surface","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.7ab32468c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"2e25fc46f6c64c8ae87091d25adae6dbebfd124e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.7ab32468c.0.tgz","fileCount":36,"integrity":"sha512-SDnrhYYLVLCB1emzlKAVUP8SggYdluebayx1THGeq6Zb3WFrLuJdCw3uJdYKarjImXhkqZTjBOOjgCSxkqMr7w==","signatures":[{"sig":"MEUCIQDEU7JY8qW4j0o1/P3ooTMaKb1qn1wT2EqGQmVNz+cmpwIgdIq3/MDw1q/Fe6tQY/qQFKkvOsBL7egwgSdUk3bCjlI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q6iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCfw//RitQEIgGB6inK2Ra9T771D7RYayvILU8qB4VIkHq70dO3V1C\r\nPQLXglaF/zmX01wqtq3bKSCksxdFuHwnQr7Yw4t3OZ4boEOgEVZFUPD9kEzF\r\nq5so4D1yfq3KF6qKiAGv3nqm23YD5ZePgsJRtnVkACbM0TkEynHsjsEiB6BT\r\nmgSnEbqW1YZYNOV1F6KnRhIZ+txR72DTioQejpYpqfZE9Ea4f/CfEZFIwUul\r\nE0LlHZWNL3zhsiXF7Psp4V3lC3Eld36+9SvmMmhsjDxhvc4blfX+J568J/4c\r\nwdYQV1Mb+bBtg78xxE6mCK2hZ54cvYyySdwKEeHyE2T6GkGNAf9/wH0CjCmz\r\nznPG+UiOGIJDGXg4VBwNdQ//5Ktfkbs203l4wuwedIHUU8D2ajh7ECVhvRnA\r\n98OBLiRxHT/SgrJ+zjBLiX9pfZg1ZqmLH2Z1sE7jeXHiZuPn6Um/AFKkW/b/\r\nxn/W5cb+kRaUZ79CNR6BUsHBUiUHvoMQ4Nea2bM5zE/PUjjDsxGj3j+3Pdbf\r\net7L0m4uzN9ZSoxT8vXPXa7TE770yotDROpwkDUhxV5PVkkwlahEISuL2NTd\r\n4es502+9bhKTte527guX7n2fs8drgRw9Zg01YzPt+7WVkfBG0Odoix7nSTpd\r\nwuggJZMI/ZfENNSnr6Z6pnX5foO65Z+BkBE=\r\n=He3j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7ab32468c.0","@material/base":"15.0.0-canary.7ab32468c.0","@material/shape":"15.0.0-canary.7ab32468c.0","@material/theme":"15.0.0-canary.7ab32468c.0","@material/animation":"15.0.0-canary.7ab32468c.0","@material/elevation":"15.0.0-canary.7ab32468c.0","@material/feature-targeting":"15.0.0-canary.7ab32468c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.7ab32468c.0_1677004450367_0.031408634693522286","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/menu-surface","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.fa27ba61d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"713393edec0210e2153de072c27f5049255c5c7b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.fa27ba61d.0.tgz","fileCount":36,"integrity":"sha512-aezUn2i5wnTgNgrPawR5Pdvo4OewCdv+sAvio8RIJbfZ+j3HyubiBtX4suomD1jFX78QStQQI/Z/xBJGlQAxDw==","signatures":[{"sig":"MEYCIQCBhitwYQfIhb8kn/+f4Xini4l9shz6pX+UwMlon/2IWQIhAIDySQ7OxZ38BUVRPCrqJ1pFTetAA7VcLDkBc5zZONyl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NgbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpz/xAAnuAHa2gAxlGJf0gq7cWJP9XMB8bmlK9vmebA0CfY8n7NbciW\r\niaaFnnlGKt5s7lOPUZjgHvpmWrb7tcFBEG4TiInC+X+/WEsGQpJD7gG7HUAA\r\n4ziq8IRHnUNvSVTOwoOuvn+i6hFAl7mxqpmG7j4zp18CIkz60frtpJ0eZEwO\r\nhsIPGacOzyvRYFmxL0HxORU8tjAMM2vTw3ldPVC+3EHbRNfCa4tcj51dH55W\r\n9CumHOF+jvy/oe5gAFx47lDI5zuio14MPLNfzVHUlfiJT/i2/45vbs91b0Fw\r\ngIE3hPnupwxPM5ZWIiaVaLHZom+zNZa+thyAIMjqjW7y6/dFhWSG/cqztuSP\r\nPsf58IBRrGifwfIBKa9JaPTpNm5RnimTvUC9tqppWHn+/ye8fY9pQQnFawCO\r\nphd3t2+uZBYBdt/EojNVHol320Sfb+n9lxpdGuRUaRVw643yoRmSiBoMycZR\r\nlI01whztY6T0MdMJi60m7E7wxES9SN0T/jdVXsD7EVo+kQWAIRWwpIwZ28nh\r\nW3xv5lZfX5rxj9iEeEJjV2Nq2V107Og/3ioI71S0NMO4ha92sjpm9EKEqEuq\r\nNkictekk7Sbp3nghz5QQBYTtqV8+HJPqtuJHWg4V7apNmB5vR3CAuW644hoA\r\nYKlazRI6l2kNg+ZsnmA0KudEDbIthteVoyw=\r\n=MJU6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fa27ba61d.0","@material/base":"15.0.0-canary.fa27ba61d.0","@material/shape":"15.0.0-canary.fa27ba61d.0","@material/theme":"15.0.0-canary.fa27ba61d.0","@material/animation":"15.0.0-canary.fa27ba61d.0","@material/elevation":"15.0.0-canary.fa27ba61d.0","@material/feature-targeting":"15.0.0-canary.fa27ba61d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.fa27ba61d.0_1677514779526_0.9143638109537033","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/menu-surface","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.311ab4d4a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"5008363395842444fa7d025c03351d8f78807149","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.311ab4d4a.0.tgz","fileCount":36,"integrity":"sha512-GmnKkvB+CE779Gk2Y0iii/2ERs8RIAsfHuidwdTb1Id8T0dAmVhmoIXPSVIJRXi/gDPyRyvBJc0PUyQr0U5I5A==","signatures":[{"sig":"MEUCIGT5kSbebzv+EBC9k6StGgQsDvCdo8l1wX67xHEL8oUkAiEAnQ/vRf03gnoRq54+MOezkts3Vx1P41ouXVZ2l6cB7AU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/N00ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWcw/9HvQO90Y5M5IjmtyTeL/Hp3k/S2QRWfyEGhSgvbCpCuFvnzcI\r\n3nynhH2lvA49gz6bMRziRSbdsjm+H0usFmnyBSJlE0agnj7wFCI62AZg+NkY\r\nPGDmJHPEsp/17/FaqUxA4XZNcTYnMa1HYaqgLmHKFT+wWLiVOxTiY0diz39E\r\nlQU7jAJNShQS8cHUPuJxTRj4kj0/lt09aol86YNARwFhJYzwAn90TMMT+D1o\r\nlnZ+ffimAM/2BOCS157bWm7g6cN4gQ1lPFTRMxnKKmvVD8KoprWHNC23KG3H\r\n0MYGAPErPP8t/XJzIAClX5lLhmN+h1mqojCAkQBHZsyWxgjUwXXyCap7ZYlO\r\nnEwiuDLYJs8JIZlMmtwk44MSF85F1QSlw4fye1FIiH8LJ1SjG8XmtjiXfFi1\r\nC/jdA6ihM9YBSm2myv23SzONLpmSYrgx79UxCNXIEFuFDCZ/WfbVtJxDCqiL\r\nWfoxmneBtdm+moGvWEaQnkg/Ay+kytD/bRKUg7U9ar7pHL3J3K5/3as4ksO6\r\nNh8S+TuiEZ0tCijrTmUu/hJBvT5B3DF+hy8jarmwVlLva6IXsrugv+OJG2GZ\r\nKxdHfS8i8Ntb+Vtuv52sB+L9YiwjlBUZbF/0p5v3REaB/vqRrt9FL9eTq6zS\r\nSvwj89dZvdxvwmTQnG1KIaumvgXWra9pU/o=\r\n=RrmV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.311ab4d4a.0","@material/base":"15.0.0-canary.311ab4d4a.0","@material/shape":"15.0.0-canary.311ab4d4a.0","@material/theme":"15.0.0-canary.311ab4d4a.0","@material/animation":"15.0.0-canary.311ab4d4a.0","@material/elevation":"15.0.0-canary.311ab4d4a.0","@material/feature-targeting":"15.0.0-canary.311ab4d4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.311ab4d4a.0_1677516084464_0.7280290414426025","host":"s3://npm-registry-packages"}},"15.0.0-canary.901c83e77.0":{"name":"@material/menu-surface","version":"15.0.0-canary.901c83e77.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.901c83e77.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"095bef719f745308e50640f8a2b0b3f06c0de77f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.901c83e77.0.tgz","fileCount":36,"integrity":"sha512-pUi86oYiq0SScTTBCiPW1t3BEY6CworwauDDBKEW54SR80eFYPpjFlz8x28fWTKpLrpg8XVGKoVyaSu+03YJig==","signatures":[{"sig":"MEUCIQCewDExvokj/21fJ+ehNuGRuBybabJPcXviySKSM1nYEAIgdqQ8/xr5F2xNtDjBXSutomGjfjckqpvV0+p3CTGZPJ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/PETACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMuBAAk6OwJZwhe/km1R5Rxk+V8XUSxfyMl5IXpm2IX0I3bH49BU0n\r\nkS1hlOYq7SeRFTny22kzuM8wee85CPVjtCfSnr2NBPpXqT2+ZsEBHyRLX4FD\r\nJP1Sokd06WNoKAxNwMrzdPIVe6GsxqRpCEHdmvsC9tdDWiwPB3YhT6HwdDzp\r\n+otNawaVW8CXqEBan0CpbccFvDr9/K64PZJxPVwYnSEARSFnfOuaGWpjSMLH\r\nppSt5+QB1ryQde4gycquKbs6QUpYHB+m+cYS+7J7CmCSpFB8+hDw5mWgu3hW\r\n9gZliOO3p9PUZTme8eTv4aCSO7Z/0tlRs2/p4uBLAVrf5na3Jaf7Cvx4uE+4\r\nQdxlcJEwub978brtFQHgSpsIZ4jCNKozY+rTWZPXpBb/lmEFpgGbdsuhAHvt\r\n0K2ph9HbetgXj3iwYXDnJQfecDJ72dNvGJrBCGphI4PLZapTckZrWIPfe+Et\r\n/ncTxpryXCkUc+wEkmFSYX5JLRt/e5EJfDb1IwD58Tup16kHr6STvNEH02f6\r\nPCh+6rXrSCkAeWUpD/4UggaWEQDelWS9bbfUsFLuWvBaR0owcJ1efSrCGWX0\r\nbFFnuy8jwOOP6PW954wTPZU+n068trS7gP8wo/vy4A13149JFafeiJniscuz\r\neA3d6yDdWmiX6WV5EsgWrpCPOBG1TNHypYY=\r\n=ZW5F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","gitHead":"86c988d321eecbf29bbb6cc63f7dfa18cda02d4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.901c83e77.0","@material/base":"15.0.0-canary.901c83e77.0","@material/shape":"15.0.0-canary.901c83e77.0","@material/theme":"15.0.0-canary.901c83e77.0","@material/animation":"15.0.0-canary.901c83e77.0","@material/elevation":"15.0.0-canary.901c83e77.0","@material/feature-targeting":"15.0.0-canary.901c83e77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.901c83e77.0_1677521171699_0.18940334775020662","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/menu-surface","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.5cb8e2174.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"afb0de22961147c54de202356d49e535a14b8946","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.5cb8e2174.0.tgz","fileCount":36,"integrity":"sha512-3L/XHyf+FOEIr6limi1UenYzu1StOfZEq5FDN+FIbFuLe6997opGXQSEORs1SGTnOhRNqcJPzN81y4a0ZuNvcQ==","signatures":[{"sig":"MEUCIQCuei4Oi0H4xZMfj23Tt2nx3kcoo4LElSnrIz1UTTqgogIgau8mUiJVZZm4G4k/PQ5rmeuC8SV6ZcqMQOKWrh1+RWg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/37mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXtRAAnmSwczFj7UN2PJ6m5LvC/Ss9+osUyrAJlPbESbY+wucmIbrj\r\nq4JcsS3vkrsEOTpxn8HnyRcvADqK+guCX4Qjcd30xP7FJ8lxG89h6v50ocUR\r\njHL8D2erwd5UVWTgFK0KDr0g8+UAG7A2SsKegkeKtZLTcnyRNMCQ7QwbEd6M\r\n8cv9Xfkpngh4zccC2rGoanncLqte9unQuqOadGDvILEPcx27kwsonlqFSTcj\r\n6d9r0gVjw3/53T8NZGbl5vBH2kko4kICzpLG1557mB8oQtvHX61yoxS13MI0\r\nH3Dyat6xsKWMkFgx2fouzcGt5WmRz9o5Jqe3Y772NI1v3KDH6rejRU4HMWuT\r\nI7yRtxqyi1Qj/HvB8aaTWhnf5hsou+e3hMEfXgUvjaCa6q0YOBZu1rWGrY1e\r\ne6YyMGMOb04BqamWzy8PiiomiCUV76ZR3m4KnZLtf88g8Pc/b0WIRVuOeCob\r\nDGe/BPnLTKx7ZrErw3EKEdDt1WTNAnxMk74AMiejJYTdl0o3CaVpf0R9QsSP\r\nw8bABUxDnJOl7Onkw31Z8/R7AtD0TkdmkpLJWVSAUsyKJiDfwfhTj4k+wdgy\r\n7jri7QLUE4kVCOv+SGWsK5mncO7PBl6oBAT6QoRkKSV0GYFSqIEwerhAM+ci\r\n7Uphsmhf9gDt4ML06WK/IOOJ/CnHUqecoiQ=\r\n=10bM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5cb8e2174.0","@material/base":"15.0.0-canary.5cb8e2174.0","@material/shape":"15.0.0-canary.5cb8e2174.0","@material/theme":"15.0.0-canary.5cb8e2174.0","@material/animation":"15.0.0-canary.5cb8e2174.0","@material/elevation":"15.0.0-canary.5cb8e2174.0","@material/feature-targeting":"15.0.0-canary.5cb8e2174.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.5cb8e2174.0_1677688550407_0.1573778860450974","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/menu-surface","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.f32339937.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"6feb1aef164bb686bf39536718d1042e1b7b3338","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.f32339937.0.tgz","fileCount":36,"integrity":"sha512-G/izww9zYXWxyS9372lz7kIxR0mPtKldLMNurHUpy+JqtZveJZvK2YafCc/uZJy4bxPdxo06/ZDYBfTklYAgyQ==","signatures":[{"sig":"MEUCIELJ7Gm3Ygoq5yh9lnv7D36biIKzb5b7PSs42NQ2PNkbAiEA09ijK/usgSHwg6q7RP05TkOcRFzBGJhG47vsJUA5C6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgOZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhlA/8D2/u5WVXNx+uQlBMzvnYsVnz5CYRWdwoy661v9aC1sRFmy7Y\r\nwKoRQe+jOdb/Hflcch4bgT/WYEgLkr5ASkUnbbV1iPZR79tWhtsA9pFUQLKz\r\nXL/QKe01ys4br/0n+ZlwkT07CikMach4xtY9ZiEQgb4ZGzY1+5H2X3HNk+Vn\r\n8XSX9gb4booOX+MxsSSdtxgdheHRXSk0hKn/ksbgOC0pCvQ3cPnQom5Os0U/\r\nvZxwwMZVxmYJwRappuZalZsxYaPPAQFW4ixMCYJCsv9/g6cnexGusH26OhwC\r\npjEmQwpazXqiYGi7WqfD/0/MW95Isl93HM663E+awzJoo30B6tglx0Or7LjS\r\nraVQygbVw7r7k0lD51rvHwEgBAzm/kmUjXwtKuHwLA0JTWihXKmeFEjwzanZ\r\nYo+J1XwPo2dTfeeLMmFfd5mPoWkE8vYy7GWPpf5u0KtK813YoQwkivgnvETN\r\ngSJc9yuk/NYU6Oop125pN/jJTo/hgl3voa94bli8WzHrGa8GQgao7C75R22J\r\nLDG1eFDhl72j9Ji9bRTznC3VV5c2HUI4L+tMxhOwvmjGdpvVo2Ckm+MF8j3s\r\n9tklpYzqw2A7cKZMJhnvPdXuhIJvN1Xxix/pH59Tvdrp2SGxtLmgAKxj7EIH\r\ngCIInZ6w2bzFICsKtEr7ODSJGslQFWEYFHU=\r\n=c+sL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f32339937.0","@material/base":"15.0.0-canary.f32339937.0","@material/shape":"15.0.0-canary.f32339937.0","@material/theme":"15.0.0-canary.f32339937.0","@material/animation":"15.0.0-canary.f32339937.0","@material/elevation":"15.0.0-canary.f32339937.0","@material/feature-targeting":"15.0.0-canary.f32339937.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.f32339937.0_1678115736921_0.6374881668404422","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/menu-surface","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.7644d63d5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"53689928386181de52c905b2ad57b4168868e355","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.7644d63d5.0.tgz","fileCount":36,"integrity":"sha512-gOL+a2ORzKRk3sMIOPpIY4QFLuqy7w3yKP74z3aKjzm2zwVj5nwNSx2vlr+THo5QPrfE6szfzWsKKLpTzB5BbA==","signatures":[{"sig":"MEYCIQDGwELTrRvfxQ6qcauWWVnJDybGd268LRSgnTs1gif9hgIhAJestsmGD+zn53sRCJC20pmzUUv5UdO+nKXO4vW16OyV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmjTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoe6xAAi6grMNWGi8i3lHGBILs33YggVPFPE07jRKFo0dkTnvxQ4d0e\r\n4XOMOYXQEyHbKUXvbId+kcfxk3Hf82wovK88Mxy13Y2jBNmB0dBjklyXtFg2\r\nDVvnjaY/qZ7ZakUpMAg7yUPkkH2Qzzz05fYSuDLJX3osVQa1MzXUz9bhCiLb\r\nd65OHZqhh4p4IclldWi3UynMuywKwO7Y3XelE7JSQ1GLsZR4Wph0dLQ1Rru1\r\nTd4+F7crdMdO7+1nh415GcM8pZh9Ma/2vv0KPqabz6k3ui2ReeIkrMQNETCL\r\nHu+gIePNNZWkTFkMau9UqM2no8675d8gYdwnNemyJZhWU65Y/EHboDNhnrXM\r\n10ppDbQs2cjjqBA8MOddgmS0k/vpNxYK1aj2AgOUc5+TEoMnurPDUtxAUuB0\r\nINqL9zKI3/RMZRNKcJhPdTI+H47WOb6yAl1eO8xYv4094iBYTLWw4B8VjFfe\r\nkfiyYVckILcvcuDAKCq/5Kvyy+s/EkUIpR0rnvqbYHbgWMzBRbbDRCKSMPDU\r\nPiZ2cwnqauk8+puX3RAGfyaDtpSxFpS9TBdunC7OEQAvTSoos0YQVMzzwyJd\r\naytuB9OZM0jLNlc2B+11stY3w4hoDXw+NTiFSOuIqdbrUFdu3k9lnNr/zXf/\r\ntrnB/ittHpHJPx9heOWXtI1f4S483YdhGiw=\r\n=2zk9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7644d63d5.0","@material/base":"15.0.0-canary.7644d63d5.0","@material/shape":"15.0.0-canary.7644d63d5.0","@material/theme":"15.0.0-canary.7644d63d5.0","@material/animation":"15.0.0-canary.7644d63d5.0","@material/elevation":"15.0.0-canary.7644d63d5.0","@material/feature-targeting":"15.0.0-canary.7644d63d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.7644d63d5.0_1678141651120_0.7719206304772721","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/menu-surface","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.d96330c08.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"8d36d5e7c5c8714a4da9ecc14b07949fe023564c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.d96330c08.0.tgz","fileCount":36,"integrity":"sha512-NLTCayG/5Yn6Sn5AH2GIYKJ2K65UOg7pQrqhoSdja6vuHR7FVjvDzZL2+KoF42y7LVGllugfHWylq5hhT95how==","signatures":[{"sig":"MEYCIQCDdH2phud0qk/f0IBY2aA/lo/t6KRSttiA5zEWlvK1/AIhALzAAWcmecLKXLTVdOTzvjdxfpQRhSuvVwSHnUO0ElGY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHR7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcVw/+NYESo56/ynKdBVbopQeM9GXvPHnHSO5EYGEXQisY+BK4EfCM\r\nECSPObGFHQro9dsnyqULJbCkFQumvIgrvGqa15fpra4twSpQsWoM8u2gFXdu\r\nIAkC2UVXK8qq3Sdemzket5CCPTFNjFx6U15IQeWpOYFjYCzNng/2c2LNWVWB\r\naWVVqDDj9cVf0v6Eb2s1hctmyJCY6+YMDFVEuG3SfjCkgmbixiD/qBAuMdGh\r\nTb7hEr7qB616A9KmnNoUGjRMC/IB8m+8WTWKgoUVhGadUkszhLoEQJseD2Fo\r\nz5F2UNzN26/X5GLArsesQMEeebhmf/sbAHckP3KOldIQikoQXkvO6nvcHIlz\r\nYjDMxyPEKLRMycGFoW7g8DprFbCCYMoxc539Mnw1+DFhbGnMFxqY8Nip56T8\r\nOF+GhLCdbg6L9Ka4pcQhnguu+8wLNK+blWd6uCVMZPndaf7auk3Q28Xup8nR\r\nfBhHMPFuWiFQN8409dSLgkAYmyjCg9gCZRP69rQ/cK2JDUcwjj1Z+0SUJwmw\r\n5tVgBKet55u8bg/K/DAwkM9dq/od5I2547qc3+2qMX7svR5IxHK9yO0Wsv3F\r\nm2frBYduUBeo39aT2Z2LnER5aW+wQhMeEZi+kcYlW7mdwmLO9H227I4YvzAm\r\nGirW1yIqvR85VX/ktRsLpW22VPba7CFTDFI=\r\n=ORj/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d96330c08.0","@material/base":"15.0.0-canary.d96330c08.0","@material/shape":"15.0.0-canary.d96330c08.0","@material/theme":"15.0.0-canary.d96330c08.0","@material/animation":"15.0.0-canary.d96330c08.0","@material/elevation":"15.0.0-canary.d96330c08.0","@material/feature-targeting":"15.0.0-canary.d96330c08.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.d96330c08.0_1678275707475_0.5919228774625487","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/menu-surface","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.c99cae77c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"0efad0192a16dfbf092c1b1504d8a66ad09021b5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.c99cae77c.0.tgz","fileCount":36,"integrity":"sha512-OyqM7VLj9qxgHczPrbcSorRSfqz0UZnAOlnnLjtfwBrAaLWmBJjDwptt7dnL+rDPDDTXkkSFtVn1LEAsRm5X8g==","signatures":[{"sig":"MEUCIQCdKag4FPH64KfrapOBRZkH9Ig+bL+GR6xlnrtyuVtI4gIgGbL/LfWLCCFebJ0O9GD6KVxQrr0E+FQMqFOaTVFL7vw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":672614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR2AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEng//fEZoz0mv7dSJdeKbfGul7KQNMFaZsGNxlx2eH/FQOAqyCB1/\r\np9ejMKvB6Rp/6iAxHw2CiSbbwNyuDZF1mjXBwr5cTRDP4Kf9oHrVkWjKj9Ha\r\niQiwiOFHoIOcxfpSWsNABm/xvShk0sQfWloiO1x35auOVyIz3JcnNpskE5GI\r\nn41wTSG9ySiXlAiwq3JFQaDUuIxEJMX2WuEbUM5PdNcTReC40+73KaQvW5kx\r\n7/NHUBvqw2ABekEbcsDmM888b0V0kP0AflbJmYYdyan5JSGK4Tvnw8W1mNAn\r\ni1aA8DPjVHZZSwIyF0BYF61BjVjbsHMOPcnAlbIEDWlb/dyii7Lfrq+ygUXX\r\ndFizSWsad/vDKEIRcL1FNobhZdY7diLmkb3ORzcimQ9JpzrKiJ0SUsuWASLv\r\nFP3V4d6+57ufuuu5wU4XjjDgob8pcow3bXvj7vIltIxfKKwUnafRgPuvLhf2\r\nW95Jl9an1YvT5NKno7tuSetvC/jT5AR2klaYNPrX1/iUEzc2PjG0uXQec52v\r\nEKjCs6RBfemxZzTjYZ0CJqnjxoz10FVUdtSmkf5MH4qR5o3v0PFccyM2YV2r\r\n3T82MXUY9+FAPUoSdfdFbjidDd2qw+RB4nAaTqCKYIFapahxlysJ3ihu9x+1\r\nO3eMDDkoAoa1oJy2zSomZUznvcLv9kPXAg0=\r\n=0Cwz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c99cae77c.0","@material/base":"15.0.0-canary.c99cae77c.0","@material/shape":"15.0.0-canary.c99cae77c.0","@material/theme":"15.0.0-canary.c99cae77c.0","@material/animation":"15.0.0-canary.c99cae77c.0","@material/elevation":"15.0.0-canary.c99cae77c.0","@material/feature-targeting":"15.0.0-canary.c99cae77c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.c99cae77c.0_1678318975894_0.8904393748681969","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/menu-surface","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.6023b1cd3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"0d628637d45ce76e6dd2daecfaa2d2c768543fcd","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.6023b1cd3.0.tgz","fileCount":36,"integrity":"sha512-3M2HqEsbiWqlFCUjgrGUPUokwXvJNzNGIjDHbwxNpwrORjZpD4PMzRm7Q/Kubfdr3WzTwVRqwVvJpaeqHpFlIQ==","signatures":[{"sig":"MEUCICnS8eGHsO3L90fLb9IYRbnJ2W+bp58eANBSu8fsoJF2AiEAkZZMJK99bkYYk6LVD/OqTbuLKOs52TMPifhyRf8HcH0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCeyQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2xBAAkYY3uKT7kjBjqWYaR0FSOGIU+ApLAPyIf7PbfxO+GEHDoFnh\r\nhRLzx6/kLSshEdkgzGZP1aodrkSF9O84h+CW7zBc6zc3iyWrbst3RH1MfOKT\r\n2DMPNYa/hObIiNkR8xQaYoyT0JsSmxfIGl5/LRFFZAXVVf961XOVnu06OdYp\r\n8R6E/ubq6jnlIp5GhljIhrgDz5DIEvM9lnOYd7NyLYjMYy/DtMo9mcV6F41v\r\nHZSmW1Rw2fWhlLzNMjOK5nMyhf3yGcfX7oTJqLSK9iO34M42M+xmioJLK+ft\r\ny5IkSXZah+KaN2XTiiI8KAkqpSSB1pdpMh6ESqPavuK853L+Oo9YVSWYZv3j\r\n+OtDjqORze5bsQFsB1kutoodUo3xXkn1fgI8t3houeM5G1ZmIa8Hovmk8w+P\r\nW6LglT/QcnAF2OoOVECbWC4z9lmk1aYecuOhfJOamot7P1I9FcVwrsJsQgEN\r\n2dRu0I60V6/cZUZ5k/Q1mdKKm5pfm+HPtezVfktWMZEgLWmZHdgul6+KmglL\r\nQeWepBE+ZG5lFQPvxoXkrWXNwPJN2E+SCsMUzKIga75r67lLFrrOzFrnFEPY\r\nFlfskq6oMsY3YPfswHiSjn1dF4CJB6WBcXH/6bZzKO4IwqAjZeMpgvRXzCIM\r\nV50DRnzTyYEWDMDTdgKe4mtynGl+3cE2nOw=\r\n=LUOd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6023b1cd3.0","@material/base":"15.0.0-canary.6023b1cd3.0","@material/shape":"15.0.0-canary.6023b1cd3.0","@material/theme":"15.0.0-canary.6023b1cd3.0","@material/animation":"15.0.0-canary.6023b1cd3.0","@material/elevation":"15.0.0-canary.6023b1cd3.0","@material/feature-targeting":"15.0.0-canary.6023b1cd3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.6023b1cd3.0_1678371984666_0.8396087731450479","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/menu-surface","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.274610c77.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"3b073285a3e6d444643d8c6b122587e8b8c7034e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.274610c77.0.tgz","fileCount":36,"integrity":"sha512-+5ve34u5Jsssp/7eBsPGS3BADLXIpfNw0tkP5unV7FPK/DNtKWa0apBOPi+o6NKIjTV+Uj3hEDT0fP8QaQA0AQ==","signatures":[{"sig":"MEYCIQCd7HM8Hmzo4Iel59LQMfRCvYtjr8WyTylVbaKt+YX/OQIhAKB3nhd6pBmOsRNfINqfKpN9oKb8iBIn0fo+7KdjqnES","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfQiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpORg/8DmMOOvodbOP4E9qq83blr+ijamWWz7ujuDRVQANZFMRY7Un0\r\n6YrJqHyfAVcqo9iqHcXVnWTtiWhK/JZA6jl1KIfrdpl4EA0koQnPB8Kk3sQ7\r\nsuMHDY5Fx41fQXJH7Ji4SfvCeAucQb6i0fjI8SgZm2tamPGZ+loE5PgOXas1\r\nsfI1uAPD5hRJ/gQLUlZ/N6SOnSsXiFMg7RghcDAcVVtjyqh79ocXWEqlqv01\r\n2utdr9M7Ked843l8yVGJU2GtGvTmZ3AGKiu9lJCsKDALfmU+6jrqN+GaCvo4\r\nwsEb20zGClNDE0zaAP8xiGLWxwyyBIQYgf9ZUOZDr/ac5Q9D/KLSilTx9Los\r\njgyAcajAF+pJjbjo5SbT3DTd/KCaqsDSxAIafluehlmR5qDV3Rv/rAI2PPJG\r\nVfIs3x66CFMeU5480SLEi7WLgZQOzmvIHcUK8W5VL4VXW8HHnW/AgQKGhnf5\r\nORAOHeLxs8h42D/XIuPVx7bnmmaRuVUGqEXAHQ9D2PX1pIWI6Yj6tMUZfXha\r\nbREjgU9Ie7p+Ip/vhqSyB3jiol1kaNeW0jwLvHf4j+C3ljNqA9iro232gLzs\r\nMr5rbEZhrkpAdj05ZTcnck+xrwSlVq7EruU/ybkkfPTSxjuAGQYqK8xsVlyF\r\nPfEi3DQeDHnTdXtira3U2YyCmcHTLl0jB64=\r\n=584g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.274610c77.0","@material/base":"15.0.0-canary.274610c77.0","@material/shape":"15.0.0-canary.274610c77.0","@material/theme":"15.0.0-canary.274610c77.0","@material/animation":"15.0.0-canary.274610c77.0","@material/elevation":"15.0.0-canary.274610c77.0","@material/feature-targeting":"15.0.0-canary.274610c77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.274610c77.0_1678373921871_0.39031427892863957","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a274583b9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"51677c6205ba00c871075fc373d9db8c48ce38e2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a274583b9.0.tgz","fileCount":36,"integrity":"sha512-p+acSYHHAuJubQnp4+xq4LGpTbRZTBd8DKLpMtTfJMgzIJGGmuzCcJ3CIi6+3SNcetEEomd0zXkFRIlQOJwCkA==","signatures":[{"sig":"MEYCIQCyC0S3z+F0nSQ1P0bapc0OTT92u6K3LhEEUjQ5IqQBZAIhAPE88RUTObBwZiD9JDVCstHkoX21ulXSqPd/Rlu+b448","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":678903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjkKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7NQ/+JKJYC7RmxhsoB6tlpOvL0GrHEZo8cvDT34YaKMXMIZ3wROi4\r\nL2vpUksLHXNtyyG9IDvyt5q/VPgc/S34DKJTGQZGiw9Eo3DhjVXURAI3vUBV\r\nYDfU33LPAEdNlrMEdphopEQI0Ip+9XmOFaZmNN3zBuBn/VVvscfRr/zRb4M+\r\nXZnKakpHdrhu16nbfrHkgtSb4bew0J97RTIhmfXBlNRVDHld4LCKIldVFhed\r\nDpAYm5qOD2uJo5TPOy3JBYuNGphnDTUYNOCEe32Vqwuv4gd7ZE3k6wzXlc+u\r\n4yM5x/eSi6VcNHNtHYQH3ueKGApTGjIhpzmOekkr73L0JJ6btLu9zNvAO8Xi\r\nqIwrm38BL3G8/t4IEZ+p3gToNOCeeZavTs6QztLBUB5s+6dnFpCVoe5MTcxQ\r\nMzvUBIOwjBqPnLthhSkFjyw329JUq7sWoS0wdlLEQSDhukYO4O9AgpUXdH/r\r\nwN3FB4nhOeO3gDHF5PH1F9gXPe+vbQCCfR1p2/DBbMtmJMBGkpL7zh8S4sUi\r\nEhPpFG/xOdvWRJ/nLunOAxxopyh9JHZYTzWH4LvI3AJj0JVu33VUP1nIITWP\r\n+xJbcPqAfNQyRipGQ5JtO7/4YMnGZjSl0FHqM2rFplPrDVzBJbPtbLa9MaYT\r\nvZg6pXQXzuLPva2Rti9w8SqGXh72/6Mdd7I=\r\n=btu0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a274583b9.0","@material/base":"15.0.0-canary.a274583b9.0","@material/shape":"15.0.0-canary.a274583b9.0","@material/theme":"15.0.0-canary.a274583b9.0","@material/animation":"15.0.0-canary.a274583b9.0","@material/elevation":"15.0.0-canary.a274583b9.0","@material/feature-targeting":"15.0.0-canary.a274583b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a274583b9.0_1678391561726_0.8454215181381786","host":"s3://npm-registry-packages"}},"15.0.0-canary.da22ca960.0":{"name":"@material/menu-surface","version":"15.0.0-canary.da22ca960.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.da22ca960.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"13486a0ba2b2bb0af2bbc36ebb005e4fde5d0d10","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.da22ca960.0.tgz","fileCount":36,"integrity":"sha512-Gs5kfKZNdtMq/B5PIJ6Qj/HvWNUd11zI3wPtGyPBKCcloSJ+/FxXk1kTFN+K+jb4lynQO3t2rNWEIDR9/C1s+Q==","signatures":[{"sig":"MEYCIQDQAn/YwtMM0RqwUweGieRpFebQlARXXddgBswEdSLiZwIhALUJf8y9dKLM7ekXKGr4+4HJOYy2swerT9Ievbd/L1co","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":679089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCj7yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrq6A/6A66SMQ9bIUwgiuOITna4BTcHHfVkX1Sq47l1bd1geTtcfXA8\r\nn0NVtPbnZGHW78K63BIC9s+ALDd4+wGJouEXYmXxUMsohgNHBH+pRcnqE7NC\r\nfw+bNgwkZ+UwYDILbVXl8ijgHV8t4Oy9Bvmm1betmKODfamN/SpHigUMLKXW\r\nrL2XTk+61Ppfw84oIu3+91uJHAbiNP7BXUrrgSffJlX2UdIcGfTS9cWzXOOp\r\nU74vEYPDZSFPgJZSdu1iMDagPtfSjAIZ5X28Cz+t0r8vF+4jO0gzobQ1e/zO\r\nC9bRMypuAu4dqYbRYpmolN+0CRpKdopxCh7PPtnF6+K/wkxgAo0qCz8iv5gt\r\neS0HJ6Diem2dTvWlE4bS4yOY6lewK+NY5JbvQDFjI/dMcorK9GssEUY55tEn\r\nDWx5OYeO9REJWypAFitOLNbWyWHuN2eV7SI/P16C8AOz4DhzMMY0j1SnE1zz\r\nz+MQM5+Qj1QscdLsFi+s49sKGRM4a1yrhJmyDlM1NHJVmbLkgwywU9Ykq93V\r\nvP5895Ad+TFz6ux17T/P9R6lbjqT8E5/nNyUSliogC7N0XC5TpJzVX6krtKE\r\nxursslp6rSi1GlNzObdNb+iVZgWvBOC+MXafsjxXlBUAJ0vPxpzQyEmGJEkk\r\nQahK4CY9ULkdLC9c2g6R9mzTS/0Noyih8Jw=\r\n=v82w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","gitHead":"1b58f37865efc4ba8ba06e1190cef502dee9f902","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.da22ca960.0","@material/base":"15.0.0-canary.da22ca960.0","@material/shape":"15.0.0-canary.da22ca960.0","@material/theme":"15.0.0-canary.da22ca960.0","@material/animation":"15.0.0-canary.da22ca960.0","@material/elevation":"15.0.0-canary.da22ca960.0","@material/feature-targeting":"15.0.0-canary.da22ca960.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.da22ca960.0_1678393073513_0.00008229618704191921","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/menu-surface","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.304a94e8b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"a1cdaba5a35b0335d7876f7a774fa9127a02631b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.304a94e8b.0.tgz","fileCount":36,"integrity":"sha512-XrKAc6La/H85zeP+n4i6ycE2jwM6Eqour10tHpVdAKzW2EaYDLWOwpcHWonOuUF6K8QUtvkkvFwnTpJqlyyeTQ==","signatures":[{"sig":"MEYCIQC9ICmOan0GFS7Qttwy/+C94oDMV6csMEAQ5a2Vpp+02QIhALXI+UOw6+qYyc4u+TikQQE8NnIMCJy+DINftV3i1uLJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":679089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkVNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsHxAAkCKGnEwjIjso2a7gaXydKUDnfFodJwviUFvAnDOONMCxt/tI\r\n8F74c+iwklleyAEIeZklqaUtgYbKXblOWslsTnHhSCjWXC+d2+0Pz63miKav\r\n1irDvkso6fIIRCBpyyFJnC0Wpvd5DJBC/02Fs06HiD59ZHe+Cb83l4Gddzro\r\n1vtyt7lm083rdMCM9uw2y2KwcYZ9YxlaSuoYbMy0I3S8Ji7vAWd/AxhRtWwT\r\nw7qCZsOfyJhejaPC54cbs8C6D4Lzh5jf+cjzo3RZuftctcGI83ZrRYekRd5Z\r\nUSKi2WpsLnVsnb2Kzd9vTMfIc4fNufXoS71p25qLhMm6eiGbRlvWAWGXKHF8\r\nVKMQtX27UwmUvt0ox1d/G8XyjreJ1h8vgPLMKNAd1chhZDB0+L4Tk+6oGCIN\r\nZVnbez2UTQPW8F0p0vWm2RDZ6ah1NW+cGFAWUtrUgnYgvP95tZpxR/shvHLt\r\na/SWcnCObzwWPEJ7+u2+M8L9uSm8Mr5qAxcf+9yjCwsgplDKIdUYOzK0r8vj\r\nKu6qO+8GNNtUVN8eUn5rK/dLpDzvYx0+VqI+eiXHGy4Zko75FocZIlBgR0Bf\r\niltoJ4vHpg5Ukcoo4OjQWsHQ0IHle1Omj5q+hDzVFbLrN6TpATt4H9MuNBiR\r\nVAYyExmWymHPc8LzKwVJK8u4esvxa6WZF/A=\r\n=73vS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.304a94e8b.0","@material/base":"15.0.0-canary.304a94e8b.0","@material/shape":"15.0.0-canary.304a94e8b.0","@material/theme":"15.0.0-canary.304a94e8b.0","@material/animation":"15.0.0-canary.304a94e8b.0","@material/elevation":"15.0.0-canary.304a94e8b.0","@material/feature-targeting":"15.0.0-canary.304a94e8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.304a94e8b.0_1678394700991_0.9338893211488604","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/menu-surface","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.6c265915c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"da233eb7d131d0512e70d1979cb51099898617ce","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.6c265915c.0.tgz","fileCount":37,"integrity":"sha512-dWiQiXqMbjdwYIV+badmK6ghy2WVvCekoViakHxGng2M5rXOCGtClk9u6z0IIkhS8ESz+VmHG5d+tdH2Z0MULg==","signatures":[{"sig":"MEUCIB3YrlsWUB2xuDztBoUMyh0E1ZG7574IqSr+36b0Kz0TAiEA6S0Bd/e8hY64PL4eKHF7JysJhk9XIVbvySEtDO+VMHk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":680376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClPnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0fQ//QJDEDEtdUd8L5locYWRsso/9/fsfamsMy/YgWh7J1ql3aSfm\r\n/hKE1FRA37uCJnMvw6IzHTY8sq/xWQxrux7MflzK/iFkR85an4H/MzH8Q8/3\r\nmWSdqZCGZaACzL2Lm3QBsze4Hr9kaK/k2sG4RvfNgRYwloX1ng4Ac9CNg4mC\r\n7uLKIq+EiuldE7qgFfxXDkX68cH2TrdNr4rSYK4S26KhQWtSLB3qgunA2GcH\r\nz4nVASB9x9xAhXKi144niLJT1y6ogUFnixwMh34eJftPfTmAPTWYahygWXbo\r\nPZ5RfRyMtvkD3GfR7o9JYL2Op60L1NgZYdJ17/xwlzbpm9HgpVGqcB0gwv3F\r\njJ+gXl/PIfJo03XS6nmi6hLOAoMi1zfYvuT+/MRPiBhsc58biZtVuYdqCsky\r\n/HI7DLfV2FCCIBIhnSg6AfOuLKs8T7ttepOatAHiVwpwdfIumWldo9BG7jeK\r\n5BHb0iMoW+uBvrv8WWbWl/StGd/8NS9ufMeOho7bvwIHa8YZNcQPOb0X9CgC\r\nyQDfwkSZ00NcSo79TfEoarj7r/lcaHLkWhKLYXl01lmKFt7TrQyxJOKlikfv\r\nLZ5RCLA32r67AEDPoXDsio8gHHvylyW3FwSusPHAFw+UP03tyRZqDG24/vSV\r\n6OtvAoFhZVwicxSM1B8Sqm7CRL1kKeBVw2I=\r\n=OxUf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6c265915c.0","@material/base":"15.0.0-canary.6c265915c.0","@material/shape":"15.0.0-canary.6c265915c.0","@material/theme":"15.0.0-canary.6c265915c.0","@material/animation":"15.0.0-canary.6c265915c.0","@material/elevation":"15.0.0-canary.6c265915c.0","@material/feature-targeting":"15.0.0-canary.6c265915c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.6c265915c.0_1678398439266_0.7343702766385147","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/menu-surface","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.de5224633.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"df6b72cff6204e8a8accffe38262ad7e74548d3d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.de5224633.0.tgz","fileCount":37,"integrity":"sha512-1iKlgut2Om76WO6RooGo8uZLhLz8Eig5fDPn3TnHTa2ymjJE67MZeSJRYyJ3P10ASH6ljnRF5riVTsPDKko2bQ==","signatures":[{"sig":"MEQCIBRGChY2J/DaLkJjJpchbn/DTK93LDQe143VxFGDzaqGAiBFVFYgnb5xsePEfGUES6kVxwXxt6fdM6lU9txg39dfTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnIBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpr8A//fKzVfBuUJ3C76h3ZGK40Sfw6KdRvaB/XqgusEC4AmfoGoYt6\r\nhdkZuZAK4XoZrFTqs1BL34u9ugh/0FeLMRup/fRNpd0/y+4kFrnPlLy4RhCZ\r\neLAt1jTF/cCCprb2NWgfl+CozHl4Mvbcgeyi6RR4xBXcZGMeG4722pmTcUuH\r\n/A1+uwAaasGiQ3iAtic0bLHrrfd055+2e5osyv+0DNn9UergNUzd6cnGNFND\r\nfEcUoKF/NRKNRoq7ck3KknOnE1ZBdtyR1BpnUI7tjryPIrNZyil4H7fwm67F\r\nmE64byk+QW9uvryf/ibo/DIbZ4CmIr30HcDIdVu93N6UIVM67UJLNrGsqE/G\r\nYx1wJmsuCtdgn+QenIJbpAfswWfgRRip/c08kO/dQcLfOUkTmz2zajRJaYpo\r\nmeBxi29cT1bCcZIOihN3kuR2qobkewe5UuOs4yja7g/XnUftc1OcNPpnVMwb\r\nnwJ9fetA1BsZUCltI98pTuHoVnBiZVJKOGvrgb28icM/1X5oHJ01IkjUyY//\r\nGyT6aP4XMErZ9/ZgSmyjlHutHCMXIbSIxwyTMZVJs7mUM6+bIz4KDwOzUV7c\r\nV86NOqHPhEa3TYNPKpExGaO+eD1TBVxQaIvg4dJx7EGeViFKykSirDsU7cpg\r\n9pLafLqyolT9aqOQqXKZvYWpOnVm1L+SEIM=\r\n=4UF+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.de5224633.0","@material/base":"15.0.0-canary.de5224633.0","@material/shape":"15.0.0-canary.de5224633.0","@material/theme":"15.0.0-canary.de5224633.0","@material/animation":"15.0.0-canary.de5224633.0","@material/elevation":"15.0.0-canary.de5224633.0","@material/feature-targeting":"15.0.0-canary.de5224633.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.de5224633.0_1678406144992_0.576287245268422","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/menu-surface","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.8879557e6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"7b367e65b88167f762048b718c7b8c4ff19f493b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.8879557e6.0.tgz","fileCount":37,"integrity":"sha512-L1ZHsmLSao/fs2XOVlcWtNpa6zT68/Jrq2vkfmTHDlg5jIm9VK9ZBkfwkQlBEckadBdvWz3AmbrHqPoQgOg1YQ==","signatures":[{"sig":"MEYCIQDwJ8lYpJpatHEjIbHHA9hnIDGIru4sbpQ0DAUMtw9/8wIhAJQXfbGbR8M/FANGWuUe2Xnur+k0cdIzAVH+/9hhD1st","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzm6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7AxAAkoCbpAk1kpyp23WXkt+kThiX6Cfv77haV4+kBPvdIVjZo50D\r\n1qJjANvfOpNIGJbocstsnGfzhujdnKoumexOw1ky2Q0A+4pVwR2JURLxyqsQ\r\niJDeeerfLA5pnfcwgTo21B69R4xkmk8IxdpNZ+WTwMVLsrAV8JKlvq00OkhI\r\nRrBPxAmBvLabcpkBRHHuDvn8t5U7XL+r4yB1HStGQh1piNcMZK8QC9040iJG\r\nGWm9ibLp/tO8R1WJ0dYrnCMXTWB9S0RnXQ1TZ+LtC8fWynfZrjIufSv28h5K\r\nT5WlbOn+1Lg+srj+fEgDBAl7Gl36LWfndl+gYxb8QOCiwD69bkLSK/JN49pM\r\ngqqzIFbnwvNLMAiEhRy1dxMBvgNRjTMj5cRn/ncp0175hcsuYcJ9SEo4eXp2\r\nDpK3YIMkeILXt8nv0c1EVPCpGeJ48PuEr/R1Z5kp8UQbyppF6vkn4o/hqKCe\r\nrtshadp1QaOtA6w7jKnOkEAiL8BDSp72bWXvqjKVV6EuyRakf60hHZuX7yvV\r\n+hx1zY5UwvCQkmcWUUtxW3RIPeZwQ6vcE/2ZRIWigQbz2jjZJfuOm5E91dBT\r\ndn4BWyOfj2p5gCSRSB0A+I7DH41cWOTT2kOT5cwQmUrxZZU39Ur5UOsTlB5o\r\niNy4UrlzyKGKoCb6Ki2MCjYt6fd4TyBa9IY=\r\n=oSm+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8879557e6.0","@material/base":"15.0.0-canary.8879557e6.0","@material/shape":"15.0.0-canary.8879557e6.0","@material/theme":"15.0.0-canary.8879557e6.0","@material/animation":"15.0.0-canary.8879557e6.0","@material/elevation":"15.0.0-canary.8879557e6.0","@material/feature-targeting":"15.0.0-canary.8879557e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.8879557e6.0_1678457274273_0.32317320755036505","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/menu-surface","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.23073a303.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"de0c78a03cc905be32a4b0d032dc932c6190b7de","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.23073a303.0.tgz","fileCount":37,"integrity":"sha512-S/E7D2Uh9XldHeKqhzJYBzTDZvxuTnkQLnFIeUS3P5lFtkIT06I3/SlRznChN4lWx7NORUTkIIoL5FjfNuKkxA==","signatures":[{"sig":"MEQCIEZo7yT22YmR2jlXwnd+JQiMr0U+IPRqHuh2suE2mKTBAiA5U1d4qwZsqbpXPevXJlHy5HAhuTOR/u3UgVGah7AXrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCztYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqe/Q/+K1G7MLaPuDFIPV1XELwcY18+xJGnRdLhdcxRnjFnvadfS7qI\r\njlr5UJtkeftrbUgJ7/SPj8MsktDblf+qi7xISB7LL55wGeaC7EEKKRGSboMs\r\njqywJOyxLuAuVGHmivdr+/PGgT5fKKcCxFsNjpZ5fZ662bIABL3PsNWQ0uoH\r\nBVG5xE+9lWiYdBjmr0liLFNJnHz0ova3fQ6gAZmBqSJvZIveIOpEhkDd12F3\r\nGQpIx33OQN+j9nyGnAyZJ4RVz0dJ/dXHrwGa0KSMeJbml2Rmh1kWBTzGmiOi\r\nJjK6wxgiB2Nt0MQKMqld9QPAxPF9zFRR9F8Vm4ZJA9qAC6/iv8DYO/2y2uHU\r\nz/3A+hxZhvmBXB4ZyeacSJsOakGRElyD5SN+54URWUulc904rL+xeGcgFK4m\r\nAzpHh47avDLZiUt/SD2PhvLZNUn+QWUoQcZdEAC0VYheVKk65th/0IAJQRcf\r\nsni2C9PIdxgW6bwlTeFTmLcqSn97NJv1t0KorC2b4pxVZfjMi14dpy9J1fMx\r\ndJkO/Ll/DL5gBk5EMQq2xmwin5cGfFALk59cTqJuRwvG1KM9RHhtPUPHyHpv\r\nLL4GGqG+ujLEiMgO/3SJELQuT/C2G3n/5JEX2pN3o8BKyLeRsjH8qVqcKTFr\r\nZmS+M27CA8iy27eHqRElVh7LLKdktGYPDgc=\r\n=6iFS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.23073a303.0","@material/base":"15.0.0-canary.23073a303.0","@material/shape":"15.0.0-canary.23073a303.0","@material/theme":"15.0.0-canary.23073a303.0","@material/animation":"15.0.0-canary.23073a303.0","@material/elevation":"15.0.0-canary.23073a303.0","@material/feature-targeting":"15.0.0-canary.23073a303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.23073a303.0_1678457688121_0.8447248832097305","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/menu-surface","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.51c7d4014.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"8b96cd11c1e31f295015e490d984d7ada3d19474","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.51c7d4014.0.tgz","fileCount":37,"integrity":"sha512-95cttOAMVobXk+AcclIwhmzR1++pQKC3dLPkT7tTWfXfCPPWibpyq+6M6AvakGkfpyWlzFgKKPnlftOir3d+TQ==","signatures":[{"sig":"MEYCIQD7Aufcf9JRGGIwuCwDSibWM+5BUEJ8UTqYFVSt8+rd7gIhAKngWpQxSAMCqq/yIxICE+q5pcd3xRtRvwPBpLXsfgvV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC18aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoDw//UPrkO2GrK0zicg/yW2XDJmNkP8/uq/cU+2zjt6hwlMBEtgh7\r\nLX0aLm1eoXRRJ2D/rsXbfQfvcCJLIUYyb6uCPHYSrDXMVQ8nAgheHnhyjh2S\r\nBrPgMrR81jAJFomOh90i9ZzaLteyR90v3C8CO+UtgrAsfGQfre5MJEZIlLbs\r\n5cSqf+InpomODsUPLPiYSjGm+5Is3tULRF4GUcARC426xQZ/3QD163H2xr1e\r\nhGPbihixZuseIVucGu4bqun1QrK1G4DSnlyLh0S9t01LXErDQR1xrhvDyMbD\r\nFXM4CW+hODUsdVUxELhYWRep37G7OW2iRBalcY/hP8rj6txbfPbY79hEZuWy\r\nRDMrLLKuMEQ4R4D0BDq6HNJU2zbCaqFQHDRwOYst2JEW2V/VWipbKFNc3f8f\r\n2ojaxEq1kSwAJzR+6ZRz/AUIV3JOBuUyNkqYNH7qOE90kXkQ3h9X0v5BM5qo\r\nW5LT0oYkh/AsKaHLA0uhltcw1aXzLNScPmb4Aoz3PBGxia5gQrJkpmKI17y5\r\nLZoRmIsI0F5ozxoEkuVwN5AXGiCMQbU8qvjnH9n6ghubeIY9Hvx8uDhEKB+M\r\nfLC66T7Zyq+ltQ6Th+YLxisKTGKUpfUiXgXzEzCT0xed25eqlLeAxwgZEunr\r\n4Dq3s05gHi1ljdNN9zkYSZM3/OszINLk1Go=\r\n=jOfW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.51c7d4014.0","@material/base":"15.0.0-canary.51c7d4014.0","@material/shape":"15.0.0-canary.51c7d4014.0","@material/theme":"15.0.0-canary.51c7d4014.0","@material/animation":"15.0.0-canary.51c7d4014.0","@material/elevation":"15.0.0-canary.51c7d4014.0","@material/feature-targeting":"15.0.0-canary.51c7d4014.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.51c7d4014.0_1678466842276_0.8093138259501651","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/menu-surface","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.1175a5be0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"6668b0dfac4a10d8cbb9afdb1849c27071372fc7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.1175a5be0.0.tgz","fileCount":37,"integrity":"sha512-QPvN2pkRMH5bQ7gn/ECqmNeN+pnfyBKc2vj8gxRkq28n3kb/u+xbnW2fQU1Hp6w6HozLNdUcpe4/oM5Ycbc7jA==","signatures":[{"sig":"MEYCIQD4n5euLRYQsUq2fFKuV+ksx0hyfxEIqw6UYns59CCNDQIhALdR8uFd0ccAPv2p/b63sZlOtg65hCj4nt3OJ+TOHMid","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5eCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcCQ//XcKj0kYQREbRInGO0Nlm+wOlRH+gR6WZn/5zfp8O+C1moQYm\r\nfCHfwblWxMYfvkQLcRb+c8Y26YrLUhq8XtM4yMk8G8XxiHihiji8BD2vksZh\r\nG+m1WWTAcUCgWl+kkpR7tuNz/lI/KoRAVuwT8m3S4UQD3hoz8i6VrcHfKKNS\r\nh+DO7x18YZ+Xym7RM74kQeo2TV11m1CahN177YRdrj7xp4QvAWkDKskLANFL\r\n2pRNboI4ls0+7EPkQAFX/I/K1E5Lt1M72V9lXxG3O/NFdZnffwpmqSY4r/IY\r\npg2NBXCFzVR+YU2AQfWTvhk/PqrGYnQN6XpBQrffiLmXx9uBfRVUz5LurdUH\r\nMYxD6beu5OaEpCTYgiHyxqAGF7IwcFX8T7+yoHVgTbknjjdd6GUVa4ZWQh0O\r\nwsXRGLQSM7El6vuG/6do5fTgJBXem8tYSeVXsD7Ku6DXP74NcC2i2CgE/4ff\r\nf2sAfYelAEKDO6q6zLeOi3Lh17ynnqN+x298jXnWilDzp9HcEDV430GGVwZm\r\nyo1GYBVKFm6EKDqDiOs+fa+w/kJCrcy+VkzgTMmBRbDsoHGyi3Z2DwE8pjvw\r\nTwHvaUErpKuNtOXuEwHvbSfyJ4N/aT3/Hhx9lT6AKzLh9xST71aWxTnBLN6W\r\nLDi9Cv8W9uIVi4ZvVkpkL3plrilKql4T0SE=\r\n=9cm5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1175a5be0.0","@material/base":"15.0.0-canary.1175a5be0.0","@material/shape":"15.0.0-canary.1175a5be0.0","@material/theme":"15.0.0-canary.1175a5be0.0","@material/animation":"15.0.0-canary.1175a5be0.0","@material/elevation":"15.0.0-canary.1175a5be0.0","@material/feature-targeting":"15.0.0-canary.1175a5be0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.1175a5be0.0_1678481282698_0.0804598062942048","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/menu-surface","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.7adf3af80.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"f3128e6a92cf00431198da03a4fc82449d1596df","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.7adf3af80.0.tgz","fileCount":37,"integrity":"sha512-lxMYc0d01E1/Hj3AUBllDCdAWToinskJIKCXL6s9D3Pybeim8DcubWVbd6U4W+vMzlKYv1jZwfLyMEWBdM2XAA==","signatures":[{"sig":"MEUCIC8vegLeNfmD1vQNH58yMuh8gkVv6rGqhsn9+ppVgcN9AiEAxpjbfg+5/G1+DFI2ONehgJN0g6CktMPqlsj61e+ZfMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9hsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2dBAAkTa8VHFVroeu+seo/LKabkhW07CckGyNC6YBiVSoNDYvFNG5\r\nPqfLXRHj0s7j2reXP2Ni6dHT0N03D0Qme1XQ4TWwv1MJONcbk/3ERoSaTHkm\r\ncjK8X/rx01IPUYKepkPV0V1DwAZcleJxKhya1KvCfCg4VssfK5b5qrepJoDu\r\nEsKY9doYc60qGmINC0U8DssALMrGJQKbJ7iLs8JZdCHSMR+s7Y6CWolUJknX\r\nUGr5g7dPaEcnefPWanw575RHTTvC5ds8wJxEQymxKK5tB1T/x5AZslADrQOk\r\n3z5I2JkvcQA9K16PbdBEqfYgEsWF1tVlrV4onML/NUKYm6N/BxfT0aThgndg\r\nF01BXn2PgGzRrRBT03UhyiMsifWGRFQcCnvId8OIcRXXM4PkEee7lZsXkSoD\r\nqjpAjgTcwP+U2xtTSYlErYsARnn0LEjFIGL2eM736KJNEBrVUZ+8e8kxqlMv\r\nO2PLsFP9/nYxo3EYYs9ijMBenKFrosNjsLlO/PjEOYca2jBfpWzfOnx6Aq3L\r\np9CMm00QOv7qnXvUQyowOd/yZdXIy/9/ky/vf3XDX9L73+OIea3mITTBd9Wp\r\nmjE/kdCjeaZeJbkid0CTix+nBMCXScCgdxrDEsNq2OSCEzucuMUtn8nb6Ulu\r\nqWjvOxi9s0uKOcY4hE2YtmC+ZHltt/v9fDk=\r\n=5a1h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7adf3af80.0","@material/base":"15.0.0-canary.7adf3af80.0","@material/shape":"15.0.0-canary.7adf3af80.0","@material/theme":"15.0.0-canary.7adf3af80.0","@material/animation":"15.0.0-canary.7adf3af80.0","@material/elevation":"15.0.0-canary.7adf3af80.0","@material/feature-targeting":"15.0.0-canary.7adf3af80.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.7adf3af80.0_1678497900507_0.7173189893213034","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/menu-surface","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.82554d770.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"2bb4703099eff4a3affb0da66e7bf22e1459e76c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.82554d770.0.tgz","fileCount":37,"integrity":"sha512-0UrVPaeWaJfTWim38kdcm9k3ZNcuhyVBZUgzYnTSbnUT7PGaCGRvitDQYKaROzxSmnKJa/7Eow62jocWvb8MaA==","signatures":[{"sig":"MEYCIQCAhUlGzUi+/Ta9375ndUVTz4XE26x25XWdmpvpDXlhLgIhAJnpo7z7Xu4TvzK91f5Juqk1pR1gN7MIa4BkijgN8n20","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9tMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpg/Q/9ETnptVyo1eIM2i6B0TGe7jHqVfIpoVQ3OZ1PZpTdsTr3PUA3\r\nozWELbimanymJQt4pK+Vvta7/shHJyzTREDaeZjYjeTiEEmiADxEIiPXoy5R\r\nItyd+E+a5l8FAG5Hi7wv+ve3RDJ4NaTJ3ikitMHCvUlkSbvsU3is2Be0oCPk\r\nTgcL9NNc3/trAiSsU9h7BCHDVSt/bUwrL8SZBBxght/5m3BLOGRifjv9Get6\r\nHCwKcrzWRZ1fivett425ML2HXB84P3a9GgzcTIegpta91w8Haz4gSWW/EM8m\r\n3LNtTTvVilndP6AkcZCYGE2LG3uTksJhJFUsj2Ncq3Qa0P4CWrY503fej7/W\r\n8rT/ZFRFrzyjvly4/p6N90dyfyJ2FwsPqebiMxJ6pzp1y29pLEpw6TLhnFpB\r\n4qthSk27Erlr6v10ogFQMQeJzAy+HB3y+NCvaixPSUnk342Lo8xhur2IiVP4\r\nN5zgwhGmkwXdPwZiGvIWktu57j5/KG1CMQJWMqV3+h6sMQbm+1ta9+O+keQ0\r\noqLYTYpyb1zpaOaito7jcq2xWsGyGuRTlakouoxxHyg12rgFBXdFRpop5Erx\r\nfxiPNu/JVZYYSD52g3AmegSJDkM2OueEZbR+l18VWno9brrW28x27cs1LMzL\r\noaIkcFPPn4fQX0+h41JjfOFWyfg1I8SqYhs=\r\n=5xgJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.82554d770.0","@material/base":"15.0.0-canary.82554d770.0","@material/shape":"15.0.0-canary.82554d770.0","@material/theme":"15.0.0-canary.82554d770.0","@material/animation":"15.0.0-canary.82554d770.0","@material/elevation":"15.0.0-canary.82554d770.0","@material/feature-targeting":"15.0.0-canary.82554d770.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.82554d770.0_1678498636682_0.9200046758501266","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/menu-surface","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.93fc524b7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"d1e011067b4554688835af598cd21721dc1fe87f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.93fc524b7.0.tgz","fileCount":37,"integrity":"sha512-OBpAT38cUu2g4GdRIroOqru/jPTdc6iGHBpJ2VvTmgEoEy5vj8dXDTywmVAkjjp8YGy2dAtZlXOnFWniVs1Nng==","signatures":[{"sig":"MEUCICEdGW3drUI9tmPwb5d5W15qYb6eZatcShBOcyDOPfFVAiEAjtbeESopnQB85JDfA5rM1+hEe2MxKgS2aTkFcLDgxqo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuEWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCaQ/+Ntmg9eDUmBfI/vGdYXm5y15QqptgFq2LlzBtvQXEgIAoKxGK\r\n9A3KjZPUv6fT6qdWVBlxFF1okz7RCrUoPDIff1pF8JD20pGan4Ve+01S0sGI\r\nlEes+FkvwLpW7zdkKMFLyd62D3ukau3aBqOBu8N/DmkVgZ8osSln6dKar6XJ\r\nG7lZWQDUkx4v9G1R/7B29oxBd1tSCTgb5VGuw6iOz1gZOo7ijSWFz+yJ6+3a\r\n2wMTNoP4LuhGS/Vz53ZBAyzKdMl7+qpsKJgWeHtTwaw28ndTaICJiry5yx3E\r\nrfKdwOOtGcpevWbXFyLe2Iedpgaa+i70r7gAh6A3eG0/q5OxEhV+jq3lZWP8\r\nRe+ZK+zoQLJR7gL25U9reQXTsYry7Fznz7IDrqpbTJODaGOS3HGx2auvEINe\r\nXW3MZdxPVHNH+ybSLU9mXruJx0rekRGQlDUG7XH3OLF2bE1decerhH6+L5pO\r\n8/KNJc0fG7pjShhSV7d/JQrslW0vYJ9B+GqY583CqwT3WTWxMLE3t6Px09dB\r\nwQdHpydVcZR6+EIFIIjZa71CcmHfKVc9yhO+qXyTF6qfhCk1tbLUewvnwEIs\r\nRHVkPjyymNDWgwhnvs0vDFB6SDzTdmGTIwHESL6gfeeUAugak/mLts3kF2y4\r\nZrocXyMd1ySAnxhAU+cS1XTFrkpbG3WQWqw=\r\n=dhi3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.93fc524b7.0","@material/base":"15.0.0-canary.93fc524b7.0","@material/shape":"15.0.0-canary.93fc524b7.0","@material/theme":"15.0.0-canary.93fc524b7.0","@material/animation":"15.0.0-canary.93fc524b7.0","@material/elevation":"15.0.0-canary.93fc524b7.0","@material/feature-targeting":"15.0.0-canary.93fc524b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.93fc524b7.0_1678696726473_0.6221166202367925","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/menu-surface","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.50be0fbae.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"5cb1afa170dfccc781b6c639ef877e938172d015","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.50be0fbae.0.tgz","fileCount":37,"integrity":"sha512-avkaj1KNlQeICTzLbIbjrvaoDV4az/HOp6v06FfO8xwfZBva0xBEcvW1JHTDJDC1eCFsjBdd7tdn+vMt58z8mw==","signatures":[{"sig":"MEQCIElvJvmJ41cLmcE7nqhxVrX3cju5BcvOA0KYkMfbDUItAiAvr3CUEcEWhiC6CcK/bVPAIJsFkQ37kkoXFvTxF7nOhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2DtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZYRAAhuTXPCFPi0jsX7M+wc+RVUUidz1N6RRt18DHFcma2X3j9iYV\r\nbTAazKxTHb4MkxIN8IPdUJtGfuX6TsIs0Mcv510MzdvSEXSgvxF77He4R309\r\nCMxuEdya908RJC8RThRtbfoevn/f2s1YsUP1UkQbKjRwlvgHPjDs9TKRRdC8\r\nNM4D2+bsm9X0v/tRvJMCIz26AaI6covaSVON2Pjddv/6/P73ENTLMpCDwNdn\r\nfSqXJDPjuN0qvO141itFOih7QmuyZL2YKi2s6XhpzbORV6bYQnw2sK0vmJUJ\r\nhj4d+xg/xy7hA7FUKE7mF5KkNhhHNLn1myG4SdAVH6BwTlbRQ/LIAB+zQHzB\r\nQj8DfxgOV7p4DG2GVMfdXesyf2p/70PxahHX5YmMNIPiOjvxpHjDINAMenBw\r\nxXdgZWv44SKQ3SkwliWJujRN4pM4qgFbPi1VhJWJ8mq9N4J+BeVxDIzo/pUo\r\nqI6GUhCUUnhUFnPnhwHpPVLn0acRUexCo50Me3MDt9dDVO8cbeBk1mPOOApr\r\neVITsxnXgk2dfwiPbr2tFMKEwssf7Llk5ISK/mlav4f8FL/X67juUeYCuIhY\r\nwu221hczVAmfYw9bdSjfXZanq9ndq5HcM3qz9PGPoKuvqAgIWfZqpc29AZGP\r\nT/tqitv7YYVnln5kNfh1CyVOzqPWEoMtV1A=\r\n=cdkV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.50be0fbae.0","@material/base":"15.0.0-canary.50be0fbae.0","@material/shape":"15.0.0-canary.50be0fbae.0","@material/theme":"15.0.0-canary.50be0fbae.0","@material/animation":"15.0.0-canary.50be0fbae.0","@material/elevation":"15.0.0-canary.50be0fbae.0","@material/feature-targeting":"15.0.0-canary.50be0fbae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.50be0fbae.0_1678729453197_0.9178202354224545","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/menu-surface","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.6b5ffccd9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"16a08791af80e05a50a5f1ff32a21e9f584cdaee","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":38,"integrity":"sha512-y43ATLwbDNdb5YwMUvpK4YfBCQ6iizwERpVoqBR6rhSNyOY9EFJROwUel6USOxRzpUWHlM0zXGEvnrNHv6WLNA==","signatures":[{"sig":"MEUCIQDnYXRTlqK3QUqFULNPpcCO0MJg5Wzb/EITyWCqqwgk9gIgI3jbjrBRSodDQYtSLButkohk4XxsKtFv8Ebs8zHQnZ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2GxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEUg//clDcyjeftp11jxoA6HFoylsMXF6xMgI2Utf/JbxuDmkkXreF\r\ngeQ1lLkadFRnQTdVrlUkHj5HxYG9aNoJOyjjLJQtwWdPNVUsQtUZPzlDySWr\r\nWjlcuMS+dL0H3hRluzfW/cZG9G5/3zRcUgLFOvLe/dhFvrakQ3/hjFtodGP7\r\nTg+pRsZ5dNFD4PORpWaQgIDhvGpRB+OqE/xqcoHVbldZjzZH+cFvdjRlBCYL\r\net0B7sB/+OiE+JNpUXw32Tu2tLWpJKNAqxHKLvxKY3tQpe0bepV8Cz5deY1Z\r\nxyve72yubzH1b1f5vSJA46Caf24Z4WHqJHPeu49WhaK0HA/TVjZ5bz0x3fIu\r\nx3ATC5V34vtMRITPH91f+T5H+1Q46AWNn/0BRiyDVw8NUDpgqbewnHRyC9FF\r\nw4HZ0KkOseDOeru3vF7V8/oPWDfL1vMNjPC6vlsW2+8oiI2sT+Srv218icpS\r\nb+hiiHGPbi3pDiviwWDEd9T+/Tyf+zyPhoqMTLhOWTE/gNkVDqeHioSWsiKs\r\n100yF7zrmZMhzU/b57Y+d3IByFA94LYtufjGARh/zMMe/BuXmbdoxA7KHtJJ\r\nLrhOZsM3f9+5o8LUnV7Z/eYphLKFbMu7rrH2maXHE3V+nrfu2AKWjoS0eP3b\r\n6nlO9IGqZABuAmwPSZIuqVDscJFH2hbWovI=\r\n=hfSR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6b5ffccd9.0","@material/base":"15.0.0-canary.6b5ffccd9.0","@material/shape":"15.0.0-canary.6b5ffccd9.0","@material/theme":"15.0.0-canary.6b5ffccd9.0","@material/animation":"15.0.0-canary.6b5ffccd9.0","@material/elevation":"15.0.0-canary.6b5ffccd9.0","@material/feature-targeting":"15.0.0-canary.6b5ffccd9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.6b5ffccd9.0_1678729649080_0.931444751774934","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/menu-surface","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.1c8013f4e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"8f0cd71f4d82db7cecf7ff5de7c9f27c2566f49d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.1c8013f4e.0.tgz","fileCount":38,"integrity":"sha512-cH9wHUpjqx2KIzAV+O99ksk1CB+G8pq6XBSdwTc/ptaCFtjy4wNn2qKxg8cRwxcm0FBmLOnDvPg8Hm5enVLfPw==","signatures":[{"sig":"MEQCIDti2r3rCnBUAFsgFUWLD64C3QgOi1s4f1G01ZVch8qMAiABrQo+0zzvKpbGRGkVKVb7+PLZAju3yOMO4SWO8hlz0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2VCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsLA//QB6n2sQu3JGs1oPgOW1RVx9QH4xcHhAhTrlBClMgNMFpf9A/\r\nRUukTHYlKwQTb+QfhsuQEoZP8Sz0/hjCt669C7yaV87IRczjPkTH8EcW+XKn\r\ngl7BYcH/USuJgOMElSkdWa/M4JJnpq/QGyLzFzTL4nucUqa0HqlOSAo8yDmN\r\n6d49KdB70xLgHcqJew0MbaKUI3pgcUoGZNyY5HePFcNivevYtW3Swudex2WI\r\nxuNKB4B6MjIRcA3JFjHu2HSZzfV0qwabCYHDmHBcRrrYn3Sv6Dnve3C6Fh3v\r\nVYVrWbPto+JA0Fzm9fQrdaARxn/zO/VuORHSlH6twfZMgGblDQjbh4f/PmHW\r\nWLU6V1yB1q8t2L1Udt5QibnIfHCbMu0t1stL2shAXz1wdlx5qIQ93Guy/Nbz\r\nnVHAKBMPrpLrCF5kX9JfY0Srb8wjVvxAUuuHxr/4qkOHlBO57R+ygndlhgxU\r\nh4iFP2FfavMLEW4avXXoN0J+idA9n1XkMKzB/wJv0NeOW6YTvkwGY1Y+O3EI\r\n9he0vsjSMJ6L3E2p2aSMhB9le+viAbgqGnk6gRARhFXvYLkvjXxDNtyYcV5L\r\nlAr4T5rgkSpb90E4EIztYT5RdwvL92booPrcy36izaWg8e+MBUkAJ1VM4CDG\r\npnELCgAOSBPKTsIXSwDBgBmJfR5I4Sne1GA=\r\n=3OmO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1c8013f4e.0","@material/base":"15.0.0-canary.1c8013f4e.0","@material/shape":"15.0.0-canary.1c8013f4e.0","@material/theme":"15.0.0-canary.1c8013f4e.0","@material/animation":"15.0.0-canary.1c8013f4e.0","@material/elevation":"15.0.0-canary.1c8013f4e.0","@material/feature-targeting":"15.0.0-canary.1c8013f4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.1c8013f4e.0_1678730562106_0.37631141776816635","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/menu-surface","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.112715df5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"61dc0246a8c0811fa8e22a01ed5444dbfb4b6277","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.112715df5.0.tgz","fileCount":38,"integrity":"sha512-gfqcZ79YG7fKpp6wKf25jRNOm6n4EnFdmocZCxqkDS8kDzT1eXbJtf1BB2YX6lUiyvB9g9+kDT0+D4cR1IP28A==","signatures":[{"sig":"MEQCIAsWHO0PwgOlzgaRsx0MhkyVmWD4X/Ow5h9yS7OSRvYLAiBoobu7heV418JkU28BaU+OcTWKCiMOHko4nlC1yCybqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD23NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprFA/8CfM3OIy84VcRrNAV5WsH27+V0zSqOSUD/5yCMTrL+dOWw84v\r\nU6cWo49olnY5/nH4PLAQUoyQyZtK1g4yKWkidGTE2Cw/XFo5pWFFjyMrF/1u\r\nSzNDXYafwb9uHNk5QFZzJLuyqCBsjJgmKekJogritxctcTO2quF+dwKieADa\r\nvdFMWe5oQctoWS6B1ZhQdL7xLys7DoRufNJcQ7NqOknw+/eBEJenrQHx1RCD\r\nSgzC8nu8xWXmbCU1tjTdSrXf3mefe3k2ZIer7W7WePgtPyHPVae7yKo5ERdv\r\n80yqhqK3NBRPAlQFrwYwg9ZOpruyfLGTK/+8lxH0ZivcZkydO+ViQn2AKPsD\r\nh/cXaMmCzalsTmgRx10SYfYSbbE3wptRF9mAMbSpUu+BTLvACfLMtr4FX9/C\r\nJgfsyWdTOO08fmdegQcg6rmdaT2okxE4TKBa0XHpYAATIJIBEYeuedvs8H73\r\n+pimcJZfq9VjnBUpWadDRxIqbTJeDvBe7LKKCWgONn492fKp1jG1s4O4JPr2\r\na8GGIfUPnaAb9/esu/W6ClikuGd+Pgy2kA4Ulx12OFC3pAXbpxxLYqYD6WI0\r\nzuD63ox9us/grZBayQNJD/C8G99qYCc+BYc6giFWL9a0MQBP9AH6N4bm3Uf3\r\nh35xfWkjDlHeHwDjipvihM1+hsmofnNUg3I=\r\n=QLRd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.112715df5.0","@material/base":"15.0.0-canary.112715df5.0","@material/shape":"15.0.0-canary.112715df5.0","@material/theme":"15.0.0-canary.112715df5.0","@material/animation":"15.0.0-canary.112715df5.0","@material/elevation":"15.0.0-canary.112715df5.0","@material/feature-targeting":"15.0.0-canary.112715df5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.112715df5.0_1678732749756_0.893559721912569","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/menu-surface","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.d250911f2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"7588688722d76f73af82e80d80b5f184c695cae9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.d250911f2.0.tgz","fileCount":38,"integrity":"sha512-c3j65gEEuI7vJCMnWM/5eg1WeAFphB3gbaZ7pynYMyFsZSBS2V4iOrEqnDhmyUlbtXHpMz7q6gkC3ZozCi7AFQ==","signatures":[{"sig":"MEUCIQDeHKQyC5TJNh0rt/Hd6y4aWvGnw7zwGm8yrwAudpG6UgIgfxLcm7WGqMa5X8d+nYUqbhULLyLrAZJDSVdwa+G+EJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3oQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJSg//Sfh+CQMw1MsFLvWXFm252ujnYA3w6LVLYEIqfioyblxzIHpk\r\nnyZRc7mGZ3fsQeBrGxqod10HETyR+S3O9V26DbFGxhpnzBjd70owNfw2ZGCw\r\ntXnMXslmPHSb9evdBowspqxULjrMRhknXMS8k6hk2N8DGqo8qnyGErqP+/FM\r\nvHY5Khy4a7CAkfksDikq4Be7sOxe2mQiyEByc14FqWroSE3DDe3dV3sWk/XW\r\n8FgVF/7A9LWmp6DB2sjMnePkKeD56A1kiuijAkLPlOeJHs2PWjeOGCjbsq3I\r\nRK9eZ9y73cJXZ6eKssUnUVj234Tg3gDc4i9koy1HnASrLKY6+LuM5i/8UhjX\r\nmhUiaSQ2dMzSX6+BFysLt8n1Zd4bf8AUhVyYRoTtZ5YHunNz7QsBShaGbw2/\r\nNvGr5fBrh90GhVWLnTy6lSYh2ajcPedeLLLJdgNYoPhJMCT5EQGvB1q6jIhR\r\nqI5cz9lt3164g9ArBZyaTESEF7rXAU2rjMWHP+rjIncwVGdw7Am9XUZ0cP4A\r\nZ0t/weDDheJAslcxSFGQBMmtfhP8Gc0PRuJq+SBZrw0XWfehIBzp4dvYS3R4\r\n5f2jCW7jxFj8mp0YyVunx96XXUoc+psrnJK6xdBZp2q74hsOj6t8hvXk8emc\r\nL+qsVSisdOBo2lJpS2KDkCLgl/vfEjwzXKc=\r\n=6pMP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d250911f2.0","@material/base":"15.0.0-canary.d250911f2.0","@material/shape":"15.0.0-canary.d250911f2.0","@material/theme":"15.0.0-canary.d250911f2.0","@material/animation":"15.0.0-canary.d250911f2.0","@material/elevation":"15.0.0-canary.d250911f2.0","@material/feature-targeting":"15.0.0-canary.d250911f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.d250911f2.0_1678735887905_0.14567526987246127","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/menu-surface","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.7cd925c12.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"6f796967e27f24fa3760eb95b08b3695bd47a06e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.7cd925c12.0.tgz","fileCount":38,"integrity":"sha512-2GqTB40+jQzy/K8BEn4sc/TA4U0q9GbdqtTusSrK2xswbTAAGGCnJo+vvrHF3Tuil+MVkFs/Ucfv4L5GAxodwg==","signatures":[{"sig":"MEUCIQDdW54WPThlM2DKdK5XOH85bO6HLTPu8M16WgYlOR7qXgIgJNmpFikDBFCzlMB61ZDLIArtikPvPGojdiMxLgaaPvY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3vUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0kg//T1b9VG4BhDbdYaGJd1XDdgBBnxBGxBZOr/yflnV/rQyC9XyS\r\nQjLb7hTlgymp8Bl1KzAUJrsw2SxSQILdjI3vpw2iRIoAbo5Z8eEIeKRT5BGd\r\n2KCnDlJeFy7PE04OUosYK/2S3fi96eCZKl/wKtMpDll4rNjkiqk3SNI3UMtk\r\nWMv/8DX+ftQVz9DaEwyVnBRVXE7VeaB+6KwfhmwCgOMXr0QmYxwPckyIhRv+\r\nQUPr41uvk8o8rZ8wZUelT+Qq8ZzGFvbXWeCX6PTRlpaEx9ae506JP+8YE0V5\r\nh5iCO15RGnoYowRaneQhZ+zM+or6fUJu2gn7+eu8epoWU0Lp8taL+0jn4DRr\r\nKS7urNWjzwLFRHyzBrJgO6DdohKxMy7g3WUACZrHHtfXdf/VRIM3wxA0w2bL\r\nuuCCwIgcFyqVawaxr/CpQcWT9QE8US7RnBf8+s2AMQvm8zqdI2yFI6+XSu9T\r\nUjUo4/mVPEzNSZH8mp+DyqzRgtkd4mNecTwBA8iktQ7clSOL2umhpWReajUP\r\nkynZG1YqLCaLlYYQQw5FT8l2jvkL/Z5XB+uclmkMQJine5s/jgclwE/7M/Rn\r\nRhS+B9YfLuywMJSb5ArMVFVFTHFri+EpNOv7eYaKALPC819KE16PdvsLS4E4\r\n6uD3vriQWDA28SaDryNSPXidKnn/Cy7+Olw=\r\n=wTv1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7cd925c12.0","@material/base":"15.0.0-canary.7cd925c12.0","@material/shape":"15.0.0-canary.7cd925c12.0","@material/theme":"15.0.0-canary.7cd925c12.0","@material/animation":"15.0.0-canary.7cd925c12.0","@material/elevation":"15.0.0-canary.7cd925c12.0","@material/feature-targeting":"15.0.0-canary.7cd925c12.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.7cd925c12.0_1678736339979_0.09039317394314761","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/menu-surface","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.b2ddacf73.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"f943af2b2aa3c102447e290b633ee2060bcd6af9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.b2ddacf73.0.tgz","fileCount":38,"integrity":"sha512-Q6m77JXoMsL+3aFwIJlfJmMwnRXFkK+PFtOqypJYLpcKmLr20xdrnR04fnGWX8n2x071XkCdQqNewYWqnIwbLg==","signatures":[{"sig":"MEYCIQDbBzsRK/11+KB2gwuLCj9hBmIpmjOM9Lx+1nuTtv9O9QIhAMnWnEGNvZQQ2ZeuWnhGV3jROQTSVNVjvHgcAa5/2GWv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3zdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoROw//XOAFp0E7XSrQOtGiEijrHfKsDSVquODhQyc7XCX+h4cjMnjz\r\naQ0LhxKGb64eyyoCEchqH5XUIaXCUNjt1alcpUnyH0LGQQxkhmT/i/kt8VZ2\r\nXxPS+jayT+JUk2khFkgTNfxDrrDN9Hgnvor+gl9nK65Knw4GK2wPTx6IniK3\r\nYettpR2O3L72T/Rb2vDh74OPgAWHH1+qgzHyJ2DqI0HxtaZYHaiBBggGPENY\r\nCd9Qn5DsxmO1H/hk38X23IPOodgPW5g9p2ulPnLLjbnUN2mcx3u/Qqt6L3z5\r\nanerJCKd1C5UxWWP0AI4T88ypBd5cr61Rwz+ZyfuMRpfS8owlj0dslMlLMXC\r\np9N+5Y9Zrn5PBUsxWy4CmQF1KwM48CUxLHmshIVagt69D8H7xpCvtao6IuIf\r\ni8IT08ndYaFOiEeW4VoX7xTIaTNvaNEE6ghHFWf9KHFVFPeEiyply+3+6iyA\r\nNWLWh9I+KNA9Gqo+0BZa/QzmMqga5v9XnMPbpZwuQprAcydW+3u5JlFA+8BV\r\nqPx/Bu1yGIs7F/CqFwZbonvI2Z63C5ysrQdqdBjhAFWEp591/wI1by+EGuiL\r\n+jm/jnQTay9/ygT5gJNHpsai3Oe94yXGrQjreR1c/A6U89qdET0yrdULNvdI\r\nJ3OGfSze/gGGGzXDp16JxhyjprA56vtdCSs=\r\n=VJYn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b2ddacf73.0","@material/base":"15.0.0-canary.b2ddacf73.0","@material/shape":"15.0.0-canary.b2ddacf73.0","@material/theme":"15.0.0-canary.b2ddacf73.0","@material/animation":"15.0.0-canary.b2ddacf73.0","@material/elevation":"15.0.0-canary.b2ddacf73.0","@material/feature-targeting":"15.0.0-canary.b2ddacf73.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.b2ddacf73.0_1678736605390_0.2532505566494827","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/menu-surface","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.989ae2ecc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"a9512e5ca15551e57f8646bb878218c592bd5d52","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.989ae2ecc.0.tgz","fileCount":38,"integrity":"sha512-jpc5I7vQxmUCOW5aO4X3YwnQxqCnEqq/5w01pOB5NdwD0gAGl/BYijOQPBvSVdYmqffvwk0xrqYt32F0uDxrSA==","signatures":[{"sig":"MEYCIQCJlehmWaolCnxb+e4ApMuZdhx5IctvRFwOhBrsHjp6qQIhAKOIHvC0VZq22zLVqThxysNwza8LJQMbhAiOGJtAefaI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD38GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpg+hAAhwizg737WL0E1Paw+ebFXej3KCApA4QAq5vHD3Aw/+bRZ7Zb\r\nDg+pcrZKoLU0lcmIrG7EmaBAjpuoPXgbZrxxCiGPXs+kbl5fm17Htv1XCKGj\r\nktKzOZouHbHflURj0/BHBtJ//M6cMv8WngxFvRSo6Voie3/CMSsxbdKSOD4s\r\nRHpWRHnUwDjlzYUjgtOCG+JuEO4NdVuT+5yXi+9VtnB1zfQqGweDsUYUNigU\r\nZseXFmIOGU9xTbmZQqJtt3YqKUum3wXLduUgkliovi5ghMWZPh6cAwdYvxk8\r\niXl7lwS1Kn7aFxevO3r84OxTwcOPhAU5QXz0onugdCr4mJfWmJbOYFO4BQDq\r\n/a9KA1pSf2GPGYx1p9qStMxhJMeJhBFmMWOmeyIZUQcYe4JehhpU2mIB3Ird\r\nUWFWxkcvSQEELzRnb9Bscikh5nyT8gIpNrbdV/7JXFxgjJlNCiuZcktlLYBH\r\nAFiiU4FpGY1b/OlDrlyzqTj/tgO9A6pscO6Lk49NMI/+r5b1+74CePt79ak5\r\nQzoSdWpNEPeQlRxQnfqaqIofZaKv6RHsp8Sm0fFA/KeCKDOCb9OmoCiIyVnA\r\nJtALxBmXeNL+1y80qRbP/KcGep5t0Gh/nu07BCqRnOLZbK1urEhHwMFvTywk\r\n92jC2CA7QYaZuY3m5dD9QYshaeNZoIuEJQk=\r\n=F/Ix\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.989ae2ecc.0","@material/base":"15.0.0-canary.989ae2ecc.0","@material/shape":"15.0.0-canary.989ae2ecc.0","@material/theme":"15.0.0-canary.989ae2ecc.0","@material/animation":"15.0.0-canary.989ae2ecc.0","@material/elevation":"15.0.0-canary.989ae2ecc.0","@material/feature-targeting":"15.0.0-canary.989ae2ecc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.989ae2ecc.0_1678737157890_0.5533003598869182","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/menu-surface","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.89c66483a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"9084518c15004135bc00e7f96b18fe51f797ec2b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.89c66483a.0.tgz","fileCount":38,"integrity":"sha512-Z4rDtD4vIaGbt+6CwVuXSDs8FtMa9VFjYBLASG+wa54o/7szmSFwrnYrIaOACNObFuYdx5rwsQi+RqS26H2lBQ==","signatures":[{"sig":"MEYCIQCAAFLPJpGOwgspEtq/klR2ah3WiRPVLfe8004yIkf90AIhAN5tlIrlzFJe/J3ymc/9Ycxc5lTSF09dmOSLnftvBhSM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4SZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcCw/+JFFGETAmce5KFHeV8MuZmV5nm9MV0PG4vacIfXIiOMfEwu3E\r\nppEnZxMX5j0WT1cRUFPt1H1CAQzrxVur3yRPZsRQTODWDtpZAHg7BdYQnqzw\r\n36C8Ll3YiM5Sv4SCoGgsGbF3+hs3akatpVeTvhBAsKEiLDG+CVI7o9wW4+4C\r\n3i9EymXqr3sxNyx4YVfpKMM9e9XySrtGrqk5BlCXRbHXRjZ1EqKj/XMb/+rP\r\nYTyUIVa2/lUCeAj0sKPb9hDQ16K14ymJhfdBdLdlWRIrcqtX/o36qZNq437r\r\nfGnk+XVzT+baFPB/3loy8kzMeKZydBP61Vo08foEkGe0der8MlR4kg7f56Zf\r\nNsXvRGloqaFHyONj6eT+wlB+lSK6/pAtGCLsPSZJTyI3O33ze4/LIOf+4eKC\r\noDZeiYLYX4qlAY5o0oN1xFEqfTjkVnua/iFuqGOfqcag0OlRD8Bak3/rh/Zz\r\nKfWoWKOIFIWSslV5NVF9gHqQf9+/4IYuN81gdB9qcaVTTniQNs+Uu28QJKzO\r\nA5WpEqY0cBHDvJXXtsFRUr0tstqtTgns4MFBICQs8heexTw5iaM0qpgqI+TN\r\nzik3AyaG1vStP8n++9bW4s4M6UirnLeLXEtWWmsUkKwLXH8vv2TP8r5tfSjq\r\n0Mfh4I0cbu+c1D5G5DnUodRCnY5YYLlcivs=\r\n=b4go\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.89c66483a.0","@material/base":"15.0.0-canary.89c66483a.0","@material/shape":"15.0.0-canary.89c66483a.0","@material/theme":"15.0.0-canary.89c66483a.0","@material/animation":"15.0.0-canary.89c66483a.0","@material/elevation":"15.0.0-canary.89c66483a.0","@material/feature-targeting":"15.0.0-canary.89c66483a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.89c66483a.0_1678738585263_0.4676574043360826","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/menu-surface","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.6a85742c2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"01ad2c9b730fcb4520bff10a43d4e51d275d1d1f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.6a85742c2.0.tgz","fileCount":38,"integrity":"sha512-z2kkaEvD9d5EohVsmfRy9KxRdWmhwM6yN6ylEOKjZ/pcSfoq80MkZohYA1Va8BGYPYhRowxckcWAE6kTT6tb4Q==","signatures":[{"sig":"MEQCIHgvMrHYqBNliwswQIjdHOc+TqibQyhI4/6NHFAMhXRIAiAIG/SyaexD9iIzQ8/J0BQUHSFfc/O/wNOyt79FiHtk2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+A4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqlmg/9EMmojSxiOeg9wdpqyBFH9oFVUbsG8oL5Dd2DZfJ5q0/qqj21\r\nj+dhV1TuZ5YJpBchYM0IjmabfTKm0SrkMuKFSimD1CjivB8c34sEu6bEioEH\r\n4pGBc82HmmtDsMfO+ydF1UjGKcKlztRMeqhbrPWGs4LYCLE+HTXoj07/yzDt\r\nLr3IWBKdTnZq6uLExASgzMJ0ZM6DtrTxcY+yWdl+PPNDb1nx8KIRv5jpvFbe\r\n7Q4hvRe8cQAejvRiCNU1yJpGUuNP1BVL73zTC23KQVqwdBzMSQigs8rRX8Fr\r\njkrqL3EZf5tD/ItibNT7v991aSdAaI/lbKXt/eHVyRNrmhpcQ/dmDZw5uMrD\r\nJoHewH2M52i/YwV2d+tORiBC4+SPbXyiyWoHcU7/QuyB3ZeX4S+gdrLxv2eG\r\nv2RgRxZG2odwC/JomaeA49ab3ntPKTq+j7X/6fjdyEhfmHgfEda3Vk9JDMIa\r\nlrcXPU/vaCaTyTyVP+YWO52MFyLpJSnedH+VEgKLmMvDfnnDcoU/iYaput+K\r\n7me9tcMTfdgEWU9aYR2FR6vb423KhxbvybboBJO/Q+v9LCgkkiyfvSDP0NHp\r\n/BgsmGttbnbn6mZT1uSJKeknxOd8KMIdSDkgKOgfP8OsWufxigOUPjv7bSoA\r\nOtJvb1+Wg+JsWwJXU1mjpG3asoDAixPJDJU=\r\n=BiSu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6a85742c2.0","@material/base":"15.0.0-canary.6a85742c2.0","@material/shape":"15.0.0-canary.6a85742c2.0","@material/theme":"15.0.0-canary.6a85742c2.0","@material/animation":"15.0.0-canary.6a85742c2.0","@material/elevation":"15.0.0-canary.6a85742c2.0","@material/feature-targeting":"15.0.0-canary.6a85742c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.6a85742c2.0_1678762040424_0.9952245612620709","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/menu-surface","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.bb6cd78d5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"cc05675a44af061eb26c3caaf6de5755ddc4f2f0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":38,"integrity":"sha512-qputcaqh2zXON+LLIFIMztcWVembNtorIkTImQAI4QXCSTHBgikNHk4WeAndihLZ1IPXZUhrurSrVVXa4g53bg==","signatures":[{"sig":"MEQCIAp7VfaAWc2AEfH9Rjx7vOCWQSd1FF5RZd4QODSdJU5HAiBn/8euYqh7SSTGJlBZiaB6a/UhTKFRS0wjCrs4zyQ5sA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":682285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELoOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWCRAAoNMTv1gDTHqPfwX4b8VVvqN1U1qK+eiIkGTt9GsO8p0Ui9x8\r\ndm7KKS48m3CnYOGABHpI0r8FtS9t7XxzrmMuLBZcNQcVO0sMRE42BQy04YvT\r\n+AozT/R1i3vNamyJH8MG++mTj5CV2ZHldjreswZcKRkPmKkxCzOAZ/eEkp3y\r\nk4ZqeduZPmyE3s9TRuZcvIKK+GaejNLS8FnCjP/7gmbT82LjF/s2gEMjSCbG\r\nluFcQ3tqhrWGvlBQrjpBIiXHqnL3fDCqwjBkqrXqgOcKUDH+Y5DCrRAOtk+y\r\nc/0KURyw86WvunY7YQlgJe86X+gc3lUwReZsy92M2yB9kIuw4VW4qXJRnbT4\r\nfDL72BDm9QI/szCOzOrmxrDf26CunssBaRAsr9UuiVDfbgCDOFuf5zQGJPQ5\r\n1eHk0V9QIrTAlW9OPO3+pBZ0b1NJYzaA2xIrPmVI86wEeGGFNk+2P7s3z8q/\r\nu/YmuVNv1KEbruTLAhtug47zzsPVqOkYjInT9g8K5WxoQyS4s7BDYPBHaRPx\r\nhS9MRpWTbfx5GpbvwMDRVQ+5IQcLAyBW+auFtvFVB/beuw6eNN5JRhsvkM6J\r\nlKQw4XiOtyq9JciY5xkecygSBEgXjeye+LOaEPMGH2uj+RJWl2CRGL9lQfVZ\r\nBKyQmg3ZoottFTE3Z1Qbgl76N73BesH+Vz4=\r\n=wJmW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bb6cd78d5.0","@material/base":"15.0.0-canary.bb6cd78d5.0","@material/shape":"15.0.0-canary.bb6cd78d5.0","@material/theme":"15.0.0-canary.bb6cd78d5.0","@material/animation":"15.0.0-canary.bb6cd78d5.0","@material/elevation":"15.0.0-canary.bb6cd78d5.0","@material/feature-targeting":"15.0.0-canary.bb6cd78d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.bb6cd78d5.0_1678817806627_0.26186467301481264","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/menu-surface","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.5f94aa37d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"31cd976ff5b2970fafc71a84bab053af5952e4e5","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.5f94aa37d.0.tgz","fileCount":38,"integrity":"sha512-TaGUcSVXQkWo3Sg4wylTTU7TgR/Yr8LBGp3BHSaTPRIhLWfeqEeZDMeM7c6pAgbgfRBKQvJgkv3/6JT1Ny94fg==","signatures":[{"sig":"MEUCIHoayMu/0x/2z1Qs5489vQemMMx9xB3MzeSGsLMc4y5yAiEA1ViWwKcRJ2l3T+XthZp2RN43cXFz4sd1mpZXJXJxJ7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELrZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpK8xAAoB8OIbrzWpqPgdk2ue/1kIot+tRzHb5cmKHLxBxOrtbTEgPK\r\n5RidLVD/8wnxIR3DDxF/0hURcBtlhA5xWVxl6+MCZ0qfXWJSzKrkUOl07CZe\r\nHuoCrCrUF0Y9cSIZBd8U2zJvQfEWc79kvsnJBbqAWNSGP9iyyjbIZk7lxpWh\r\ndrw9uGpRQtdNPR41osKu5MyGwFvQxrKUihZAZORzDZfb3bCiHdgxuSmBr0uo\r\nmvVMY8J7EurZDBZH/G0iQVXN4dRWxcZ1NdyLu2VmNqmkDhcOGisZOoo9EZDT\r\nswkoN5xp/gUesQXAncEljj15fIeFmJQ4zi4qgrX8xdgLsSKiUhLp3fiGRkO+\r\nVHm8a+wKI/p4v1zAsFOuPJa81mNwh83fwFtAbVj8iTw2qXprrwWL3zpCVwXk\r\n3kSO+oP46WisOqogXOgSWn0PakCVMjusfa8eDXfpYapjDTIWuP5AAFpnO6He\r\nMxdyGF4m14xxoJ+W7PRdmrvGSL44M8voeIKU/0x9GgHY8+P4qnzgbVDgXMz5\r\nsn6e954IqiYNHpAt/bWRRPHzVYDL3CeBeV7Z1/n/9RuuB1ljTBnOWLyD+GuT\r\nSGaVwD1WS1gEBB5pktMILEBziAIguUO3CKnwo9eY92bVcDYsOQaLsBnH7IVb\r\nfWRD7qcLBvWPmxujMwkcqkFutAbrUudndjM=\r\n=0bIs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5f94aa37d.0","@material/base":"15.0.0-canary.5f94aa37d.0","@material/shape":"15.0.0-canary.5f94aa37d.0","@material/theme":"15.0.0-canary.5f94aa37d.0","@material/animation":"15.0.0-canary.5f94aa37d.0","@material/elevation":"15.0.0-canary.5f94aa37d.0","@material/feature-targeting":"15.0.0-canary.5f94aa37d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.5f94aa37d.0_1678818008985_0.6545266324579078","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/menu-surface","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.1bd317240.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"c9b5ed91426b23f50ed4d9714bf0bdfa642bcd44","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.1bd317240.0.tgz","fileCount":38,"integrity":"sha512-y/sW83Kauq5E2V5dmeBCb3ezbrKNdbjIK2jIhDXTGnT58C7pJ2aFtZ5haiCryqbDFsBs+YglBmn8fj3a9UnWWg==","signatures":[{"sig":"MEUCIBPKhjNinyZdrj2NpXXH/9lfgtVZp25p+f+8b0MzG+ceAiEAqhrSP9dNkdJjzdKu/5onn1CISzdpp9dpB9OktN840ow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELu9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoePg/+PAUW5F0aQrHRzEEVgx1NM9nhfwF5LCVPtFYXpXJN5teSaeZA\r\nJgsy0fHfUjADINb152A420cHeK8+HqbeiVv19za7iq3+zH8aVr11oVdhPVAe\r\neysLp2FJ3WEvDa+46aFpXJi6rAxDxShvDXH+hovQhFkJgEncPHmnb8Skrlp6\r\nGH04bm9oagnyXjC45ys0MWq1aoJU+cprefctVEp01MyUiw6/I4iisA9ggMZD\r\nz06nFCM3H/X3BZT8qo9BVnDPUbo1q4xP3P2Q22K68doCiOxnBWQU4vCgllWw\r\nF4EKEP6OmkqZA2kYdOP3a6qNRmjKRn6QBEqOwgd32sbFZUBjHSqp6LNr2BsM\r\nTpnnRbmVHPRS3Wyrt/tThdkV9R6glZzW/RhuOQQB6smHXFnsom3GCBPY1Tnn\r\neNBwBwQmc9ug2yTVQNmHXKWHZwIgI3kun1XVCXBe44JD0YHELkXmFFKLsGeH\r\nfK97eSvbyGHqUyqvREVfoXK89ld6ja9UnCMJmUKUHpo6DvTOfs+/ob9rVAuD\r\nu2ssYju4ETZqDR7/VcTiD6fI4Pko7SgI4j1UG5qU38vB+M9c/5Wc0kRPksCP\r\nPmuaUBGqwFMmdbGSUK9BhchFD2YFeUB9z1CsGPo5srk8VHpEeCICra2cVUxW\r\nxuFalIjEarR+0xJeFXWy92dMjQMDjvaP6UU=\r\n=8eZB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1bd317240.0","@material/base":"15.0.0-canary.1bd317240.0","@material/shape":"15.0.0-canary.1bd317240.0","@material/theme":"15.0.0-canary.1bd317240.0","@material/animation":"15.0.0-canary.1bd317240.0","@material/elevation":"15.0.0-canary.1bd317240.0","@material/feature-targeting":"15.0.0-canary.1bd317240.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.1bd317240.0_1678818236857_0.6585241429718129","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/menu-surface","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.d441d2a2a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"40c7b18db6aa851dca3e196de042b388bcb992cf","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.d441d2a2a.0.tgz","fileCount":38,"integrity":"sha512-46wTjTtjnLS3ihJMT6vtsYvQCy7AL+Zycg7Tp8JPW0whrC6eXECOzd57oRDT0iwFM13PBd4RMB1ndaAb1xWVaQ==","signatures":[{"sig":"MEUCIF70ArK0jsq8ONpvsOc9nsoVax0lvl4+O9tYDplB+JzCAiEAp1+JhZ0I9KqJWmrDdUM9FGxQmP4LUKhZ9L+Igrzqw38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELxcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDNw//TMGK+1KHEsXuETQ6WK0Tfs15Wgqo75pFNBWwveTGYmDxX74T\r\nCqfzNh299kycPWLMGrAn9bEjLG3m7P/4AXP2IN/fQYZhPj55i43Tocwbu5Nu\r\na7NwXq6sXuISyW/WUcWzxfY+Cw2+OXsweUVYc9TT+gO71TcqBvx4i7UmFRuD\r\nxqHSOaIZpqa0+8ERjJtj2vB2P54pfA6HtaW/PTJzg+bgp+BDyLlqmsdldQc2\r\nyTnZ/lWOMHhvVKeW9pfjExO0BFfgg87qhCzKKdKIU5GFk/017Yz7hbYHPxEb\r\niRR7NJiQ3zANhrbnG6YlgJUiG51RIDksQ7dDfqL25Ox66TQYxwbzn2uHLbwG\r\nVfAqk7uUuNiE0QJWcZS6L4SwcFNIrX/i62ccmArrEtkDXtxlbT0ukQmfzEAd\r\ngoAQwiygwyiHXmZwJ8nPuF8FsnZAFzj4lObQmS+UN1jx+VFBT11UMNxRWrSs\r\nTokRy91qSVr7Eek7koZ+uxRLE4JTJNWKrd0KUKg1IQhtm8XxJwoMVdKTrbIx\r\n/JQ3bxB46i2iErasd8dda+F9gl+Q2TA7X4XzxhaJqPG07zmN4JmNsFuLsUO3\r\nibYdurmT6ROU7sM7bApXbFVZXzF06Njn1NaR7swwPsF/sJdezNoLm6GoLQtk\r\n3NsnN7krbpVKOMUvLreMfNoj1uOJAv4hM7k=\r\n=K7tX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d441d2a2a.0","@material/base":"15.0.0-canary.d441d2a2a.0","@material/shape":"15.0.0-canary.d441d2a2a.0","@material/theme":"15.0.0-canary.d441d2a2a.0","@material/animation":"15.0.0-canary.d441d2a2a.0","@material/elevation":"15.0.0-canary.d441d2a2a.0","@material/feature-targeting":"15.0.0-canary.d441d2a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.d441d2a2a.0_1678818395913_0.3661120988001765","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/menu-surface","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.fff4066c6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"8f31cf734024f07241b257fc87bbe45ec5c8bbed","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.fff4066c6.0.tgz","fileCount":38,"integrity":"sha512-sv5he3xnUzYkrbzWI9HING7C7rFlqtvyplWtkfUQol8rmDW7NvCVdkdK0zPeEB8dQSTaO0LrxiKyhGzJPx0bRQ==","signatures":[{"sig":"MEUCIQCl7eMXWMwfrn9HefMlenQkzfHJMvZYlZqgRruI2XgadQIgY8zr63ffc2Fofs1ROo/leSDEz92sw7F2YuyHWzMztpA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELyCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqaxAApGL8zhIvRT1//9FELKlPtNgamyPFlGW71FaoCxsjGQhJYMsj\r\nD9iIlqx8YlrcB1mRc5XGJP6FuFCgZfR81I4PbYSYBY5XnPS30DxFZmosXQbh\r\nJFl+UAyKX6TkRdYBDUL0PS6zgbWMRA37Mx4PG/xkPDzCYwu3ea0Z75+yq+gm\r\nOclIbny3Pr/w4VUJIc+dcQiUegrreB169PrbIC7B5YL6pWCnJH6wTg1rmVy9\r\np9sj9CA9zel0wFNTHbb0jqO4jA7MV44W4SfAXBVFQitVTwAaQ72gB0IaHrDo\r\nQnBvemr0fvc8BsYdyHxPvYVfidaDi0lb3xhYqD3xVZH64X1sUn39XzgyxeyR\r\nXVhNGb9ZjT/4I3vv/ALhDe2rZr0xvHhOAW+kWnGTSn38KZ+YzfaEykesNDFI\r\nvXBcHjxkWzuWZGEsCkC8KqbM7Kjll2+3b81I3Ib2kZ/zjm400lvr+LnrIqEI\r\neOPc6ryMJkGGPbH+P4OvViji9Orco2chacufJFM9OdOWXzOJlxOqg/00OsuV\r\nHOlMqZznlGVN1C/+jhvOrnQ6nqMfKILkbUNh6v5I67oOtK6SLmQxY8xy9r8h\r\ner4/yiciKYgLs5zvB+F+daR/ptWKPfmpRtIKHEz662Itr2hDbgH1l5Cnakrr\r\nuJ4idxvy/t4xFyDpfL4zpxRHkFxvnEmhscA=\r\n=yN3b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fff4066c6.0","@material/base":"15.0.0-canary.fff4066c6.0","@material/shape":"15.0.0-canary.fff4066c6.0","@material/theme":"15.0.0-canary.fff4066c6.0","@material/animation":"15.0.0-canary.fff4066c6.0","@material/elevation":"15.0.0-canary.fff4066c6.0","@material/feature-targeting":"15.0.0-canary.fff4066c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.fff4066c6.0_1678818434398_0.7808882838188858","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/menu-surface","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.87809c710.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"685b853a298c1055fd58d8b0abff0c2cc6940bcb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.87809c710.0.tgz","fileCount":38,"integrity":"sha512-A1PI6NINMC9uhOVYsNOc1W3EDqwS7zCAAz0ELYi7yewwKw13cVkFYUFy1t8BXWcVkk836J/esjvUYD7hCvxNHw==","signatures":[{"sig":"MEQCIE02dCI63zhQ5UCvLgBeuKeTYKqWIXoNDHbXfe6Z2+USAiBLiVN1zyuPJaSeWs9L7ms4WaKgHHMwQQslxDSIei6J0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMBMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmosxg//eRzPH1/0cwf6A5d4AvRUNSBQTIYCRxZvpLMSGx2BxaR5ZzPS\r\nHbR6CGKyftwjmZlkg0ywPU9251hw/ERDwFJe8X7UF4nbqRLR+OXncdE8cdMU\r\nfvgZjBfC5UiQ1GYW/Lvmf7R1achZ/emYP2AZyzB/HbFQCs7/6l/gLcp1CbI0\r\nnLYbcgNIoHQ2jvPkG5tzkorlJsxDNo+TiGny4+9uNON1iw1U8hHafTn9I64n\r\nZN/wfl4VsUl4orF1qWNxAXfmkG4srcgQGb5xq8DG92BFh3pgDZj6ifli9GCd\r\nN5fnNvmOs4nIlST89Q4cMJQZgHCW2lLmM+qe02E8Pgdjya+T6rnZa1EaEty7\r\nxB/LccQgq22ASjjNzbRixIB9RfJ8XFL4np+LqpLuiVSY8HrRxnvct66zJs5n\r\n8HIZd6V3giAndrXem7x5qW3jSuq1jZrpWrQIdBuWEAamxwEf0qGud4bpDUA1\r\nFxzuVECc8nKm0NCFcXq3glIV/eugJDpO+f3ma0kQy357T9Eqc11vNwPqjfWw\r\nOA5PHweHLskzkpvSH/YlBWM59HbpJ4xj+bihrwYewsUyYAC31fc6XpUQed9b\r\nFCNFvBd3gqth/An/eRPVyfexp/miov72pSa4M8HL8wRNocg3F6RopodZGZvQ\r\n7cxRkwxnTHWp9a7d6nEzrJxb3TOL+voxQ5o=\r\n=WCjZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.87809c710.0","@material/base":"15.0.0-canary.87809c710.0","@material/shape":"15.0.0-canary.87809c710.0","@material/theme":"15.0.0-canary.87809c710.0","@material/animation":"15.0.0-canary.87809c710.0","@material/elevation":"15.0.0-canary.87809c710.0","@material/feature-targeting":"15.0.0-canary.87809c710.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.87809c710.0_1678819404231_0.8684649693716759","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/menu-surface","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.48d30012d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"6ed46c4b9e81e30c132e322f7cfad8fc64546a0f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.48d30012d.0.tgz","fileCount":38,"integrity":"sha512-8VuhLXT1XGhyFr+gZlf2/6MP4ofVOPx/FvHzWLxVw/aNCTDKiicUCvNmzIHafoc5/5f6yS9ZC+kTdc68i43FOA==","signatures":[{"sig":"MEYCIQCemRzL0y9XzxtogM9VAJAV3yDD6O1nVST25/XivMyyhgIhAI9v/LgzSBV4A8v6uEzTITISYWmLnb70YUlM9t3FP+XM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMFQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBcRAAmj24luTJdSJw2vAvsgxKEv1dE9qMb4WYvMlaZi0223K5JNG4\r\nwpvzeMeE2SOu4ObrZ0hAzTExGZOBinVs6cvtMHHt0tVtZgIIbX3iQnvrADch\r\nrdVYgKs3Fgo7Y4DMTJJ+ksgp4RSkKzk1zb9mFvj3yGXdSL571MnVLGk52E2S\r\nvTI0eNYkUN3hJFqmKc8seVcEY29TjW28TifZYo0IJSA0i07hf9o3aU1lZOIt\r\nEZq6HkAsOzEC3MX8INWSosuMOpT0nKeW9nEIcZ9b17BA40UrU0v0Sw8gBGP0\r\n2cen1vucAltD1eUhDBka12SAqF2ulZyt4ZwcXrMB3cv3HDMVnrcirROMw+s+\r\nGm99ZB6fKW/YD7p9nnqJpNOgP7vhEj45Lw3BYIzxngCtC6njNPmmdOAuDm0t\r\n1MbyAppG9HTh4B3lXWuN3MY75VpL289Dr3DiLaz1HLpCjhq+51FkbovAk6uy\r\nbIsf7sLX043pOnlleLfm9wvAXMCmC29E1KuFT+u+V5/yVNCNneNpVNGmQQ+B\r\n7SlqmJBt6P+dxOokgEJVGmiN6BL71uxY1yVyBTrtRJDC88WJzEtvn2DylNcw\r\nuTrsDN5rhZzz9CuBLZ8yU6L0zEBeDr+2O3/nkme3/kgJWs/i8L2uwZ6hRfqs\r\nUiYkqOaZu9b0mlTazfR6+RpofH3/D3FyepI=\r\n=NiWK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.48d30012d.0","@material/base":"15.0.0-canary.48d30012d.0","@material/shape":"15.0.0-canary.48d30012d.0","@material/theme":"15.0.0-canary.48d30012d.0","@material/animation":"15.0.0-canary.48d30012d.0","@material/elevation":"15.0.0-canary.48d30012d.0","@material/feature-targeting":"15.0.0-canary.48d30012d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.48d30012d.0_1678819664580_0.06949406978148742","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/menu-surface","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.419b23cc6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"8e157705b33a7655cf016e8fb88b6259bb04a90a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.419b23cc6.0.tgz","fileCount":38,"integrity":"sha512-H9bFQUJlkSU7W4ySoq6UH4u72/i7QZD/pqj3NgzqUidrdKiIwbANV0yP7DAS/mCRYpJvSReoyo3v/dXTA0u8zQ==","signatures":[{"sig":"MEUCIQC5sWsSQacLPVlT26ZlIySTWRO6CexyYWtmR9r7D0c+2AIgF4HJmL7wM2AGApA1b+hRZ9P1Emlmjy4MI8FCFx1Eejs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMPlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfZRAAkaQBafaUtrjGa3H8g4i9j7xi+hDctH8Nj4eiGu0TJeuEAjRc\r\njT5SpeT5slA+VnV+7CMeq+rARh1kk6h52lXakxgFh+zmAfeDVZJsfj/vrcP2\r\nwtDiXSvVdPvlcrW4kf7JtcTIAAK+nvfjmskgh39kGWDYJqlpzPN3v766Deak\r\nlulvxFeZuSH9eRw8YmZoW3tNQX7ZqT8gT/8EhlA03q1IYMuLsNPuyynoQDry\r\n6ibpoHOODJXC5DQVMs5QbGFHrPnsSSew8nRqe4L7MPWkmczZqIuV5tDYyrOK\r\nz+c6IY+qYgHpkSPOYkzpcUb6tK/o5Mk9/JtXtBN4PSOvWomZmSL9htZkV6gz\r\nUhRcO2kJhX3hYfY7N53CR/GXhXjfZsCbNucgNQdUJjyjwZHOo2J7MiwMmgpU\r\nPu61oQFG64e0zDhavkdVp6Vhjqm9C3sxhQ349qEykWbgUBfHln6d3Dxr6nEe\r\nBzuru2uDDgel3EWvUUe2PwSnADDlgXAAzedrBvVzikpt2m0yUZmTwuizvACh\r\nVQu5wXMTIcTCZ5FKK2/e+ZO5Y3sHNEviDpWBgW7utdJkghfBzD3n2l/mmNBm\r\nhfWGYLScOjPd3YlDiFxuZbw+wrKeCKdMfl0dwSe5Lo/83lq8KZGHCAmbRWKV\r\n8u5HF4IOD9OSBO0T8VFVOWRwCLMsT0HoE2U=\r\n=KBU4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.419b23cc6.0","@material/base":"15.0.0-canary.419b23cc6.0","@material/shape":"15.0.0-canary.419b23cc6.0","@material/theme":"15.0.0-canary.419b23cc6.0","@material/animation":"15.0.0-canary.419b23cc6.0","@material/elevation":"15.0.0-canary.419b23cc6.0","@material/feature-targeting":"15.0.0-canary.419b23cc6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.419b23cc6.0_1678820325106_0.24829969310493505","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/menu-surface","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.bf86521f4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"83b2f138320d298bd25416d264bff784b3c547a6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.bf86521f4.0.tgz","fileCount":38,"integrity":"sha512-I5NOmCfeMpQFtm5+Vnio1Ybvdey97QfBmH5/NtDwkWIAKt3CAg2PXRLiEG0uz2SGYfmIHADPRQRY3drSnXN9AA==","signatures":[{"sig":"MEUCIQCBB3KA6H5i3UuGUkgrzCd5Tx+p5D4ULDrvr6ASsGbsNgIgXmrTsv9B+ECiHTQ0gLUPcCfzNiY1F6RUJL10+Gccres=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEP+UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrw5g/+MC2YyFyZSH1+NnYtm2YszSQaCVmw0cOoqBwLDXOfUdBOqpXt\r\nNZmFjYkWr6l1VPwru2BM66YKjsRfqO2I41KAiamNAmZ6UQuPRb0IUhgWfyC2\r\nKHOLPlPAhy+OxR5lA1jtZBAWOPFHrclBSdl3q7JuDT5if7hnZSjRk6DN+Yqe\r\ntWQjFJD+hGmX/xf1T3g/dA5QQNkuZfKBzv/6TwVoW8dIZws5E4INcNwvYe1b\r\nKZjEvDxTq6LanDCLpdGKiOra+R+ohl3iY9FuyeTG9U6/ELFmCPpIx9gDFTSK\r\nXk0nwVzQ0wGo77K/TYYOb3gDYk0q9dJdVEhMzEsxmvc8TGt5y3AmxvuXE/R8\r\nSXelUT7tylTN0XiDO1tzjwNPai7utNfzDSoaGrFGafBiO34RBR14XVZlrDBF\r\nbUqdctHR9eFg1ui3kM1KJeKboj4/FoApcNPUNQxGJeGdyT9eTadBRahwyCap\r\nZX6FO5b4+Zht7JeB0CBwKabgyn2WUiIfLeuV/CAPlPqnlXebYBo0joszdiBr\r\ntz3iNjNEdiykElBtYkmyG4gr08EzPR1769qSmIgXCHOoOjMABt7Dugr2k/rK\r\na9TK/JnCsYO0LUHKOwW1WhSeNAEcvBAwdJf/qHjDKkTTbaR1KZJ0X17xLcdX\r\ncZuVQqIqReyscTMk3dSsyk3mfRL68BJgSTo=\r\n=Zi96\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bf86521f4.0","@material/base":"15.0.0-canary.bf86521f4.0","@material/shape":"15.0.0-canary.bf86521f4.0","@material/theme":"15.0.0-canary.bf86521f4.0","@material/animation":"15.0.0-canary.bf86521f4.0","@material/elevation":"15.0.0-canary.bf86521f4.0","@material/feature-targeting":"15.0.0-canary.bf86521f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.bf86521f4.0_1678835604067_0.6760595778299823","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/menu-surface","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.11f3d280e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"ea5c809a28d3141f97da4a82bd92a12c775a5226","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.11f3d280e.0.tgz","fileCount":38,"integrity":"sha512-WjNi8C2F7HULUjutS3cD5pXHa7zb7Oou28p/LTdwddHqRB6c+sPqkJra17uCWdEbj1LZ+OKIxDjjSjCQsrq+LA==","signatures":[{"sig":"MEUCIQDrJ1QHJia4b4vXkuOBSB5SAeJdGy/t+RKEVHye24M49wIgd6JwQtR2F0UvNEdzDNTzhh4jdqzbo9kM7lUTvR3VQYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQ0iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGVxAAjnMRysrmWerJPObEygU6Jv4+7ZlIcBaaGhSsnOAqRlsfTKFA\r\ni1zytKqNSPaPWoRSNpatAfsH1bwqa9SFVoFNio+iuLKiyn4UYtJkTizeseqF\r\nwBKDK+4cz2Izv6yd4UQAyvFOGA9ZBA/voFTWLF3pjGW9xM1QqVa0g/a/I+2Q\r\ne30XN6D3vDMMtLAeAmLfwq51yRyRTrWZccCz9EJ1bbUAMv3wU2iKy4Qhw1sp\r\nnVVVdBmEocVgLicZPQSA+hUYLfrS7VlwivksOWvM7r0cKU9TEVTcBdhxJHkC\r\nYKg0BTdsg7AsFU/kqU0GMKtXufH9YRO/+1XuVfN8aBo/BM83g2O3nxADDAjS\r\nGaWBiI1TUkUO40KRdk/GRYCN+eS0y2Ms8wpiEAl1eYfmzBe444FjUetcrAuk\r\nvw300qlqluPgR3ZKPuMNZrlXkQutLednTaozMO2Zo1HM33O3D8axbos5ZvC2\r\nW73c+uNwLH705uqQ3UGHsbAlCyXABrBzab0coT61/hsGgfz/xlbOU030dsAP\r\nDEZnrYwueG4/Ys8OdihQUJwKvocdDsgCyYCt986dAHbDLi+xqEB8tuKYXrMx\r\nGOdXCw5Y7Lde9iep+Yg9XE3jpxqbUGTeIuNIpE6AkHPIUZs+RrO5Lv/Ex1ZR\r\n/QX+4OuCzq9j5RsEupNA/AiCdWfmHuBLxFw=\r\n=esSx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.11f3d280e.0","@material/base":"15.0.0-canary.11f3d280e.0","@material/shape":"15.0.0-canary.11f3d280e.0","@material/theme":"15.0.0-canary.11f3d280e.0","@material/animation":"15.0.0-canary.11f3d280e.0","@material/elevation":"15.0.0-canary.11f3d280e.0","@material/feature-targeting":"15.0.0-canary.11f3d280e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.11f3d280e.0_1678839074362_0.2406359032988612","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/menu-surface","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.b281a409a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"eb06da3baafb149b051ec784f7f0d2695d2fbbfb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.b281a409a.0.tgz","fileCount":38,"integrity":"sha512-GxsfTgvOdcNnyv2SFUvuKjuebqu7EinuRFXOYBqIhcdayzIvOOtEPcmFvLcPc3zQRwsXD43Fj3k7+9FJGhyekQ==","signatures":[{"sig":"MEUCIQDfO5ZpHIrEQtSNcOJ6FqtYU5r711uFNGaJ0Btm+rtozwIgO5v2Tqt2VsuIBIpYXhc/PJSLVYoAttn22EILpjyMNco=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGdAFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRaQ/+PiH5BqtUC7rtlLkVe+B8BZy2UOLmXBt8zPy2ECS78YV15D6Z\r\nSpigOlm3YzgsqME3H5SKXRUf9byS3+nkuc0PlvuJAS0QASnWuS7J3UHc6uAD\r\nwyZdEX6x1LqxYPM2B9l4zoH5xWiDA/R+y5zEleG+hVE/ZiVC74GDbosqXqjy\r\nMJqVQ+KYrZFZkOnGubz8nkIVkR3NSKF1CKZqrQdFqfVJ/54yEmr79TD9XWSH\r\nO/mmqsl/cVTYIq97MSnWamlkZBS2QpX076iPMLZmwXQ5v0hdzmBHR5q8LKw/\r\nmxDV+FS4yUk3Wfq7J6f18NzRTXzemCvI+3iI3BuM3kQvwre31EVV/1w2lEO6\r\nb9Ie4elJ1dRCuNKoL2E1HuHXQ4kFew5TgA3ih3uCVfWkdrnnjncyqtQtEVx6\r\nZldEVpQde6Wc3kVknwaFGKmtgn8Y6SImD9t/9A9AR8pPB4JmPwQXMT59pAea\r\nBjAKVZAK3dJcwJastRFJSoAsdqd3MkuJ7AmiRoyzXC5mPVusNYDgi1oNoTEn\r\nzfmzv+AbbNzABWf8NEI/mWfIbtBfNoaDEA927wPxFwWAp58CGJbfjb2S86ta\r\naA9wAw9f9gN+/XS/NyAbEoqlTaTLaeKOuTPCiaPemIqt57rAu2UWsTmmomWN\r\ncymneCf7jQygtfiWP6wfVEbdmnEXP2sPPjU=\r\n=X0HC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b281a409a.0","@material/base":"15.0.0-canary.b281a409a.0","@material/shape":"15.0.0-canary.b281a409a.0","@material/theme":"15.0.0-canary.b281a409a.0","@material/animation":"15.0.0-canary.b281a409a.0","@material/elevation":"15.0.0-canary.b281a409a.0","@material/feature-targeting":"15.0.0-canary.b281a409a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.b281a409a.0_1679413252838_0.8491838829862353","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/menu-surface","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.39e473690.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"87c085ce32e7390ab60b4e7020c28c32c7e29c4e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.39e473690.0.tgz","fileCount":38,"integrity":"sha512-YBQpLvJJGN5hZbA/bSK6bvQV6xbVAUQLdqqbR/Im/IDA51ydOZL2ptcq5ooNj/2s21uRfr7w4WPHoKBZc9mADw==","signatures":[{"sig":"MEUCIQCt0ao4qGVPUIGf1K6T+eQPNBMoevo7N7NKnCjs/RXmawIgH7olJ979rnMfrahJdehczlIFt101pOYFNbCplxCNlz0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe6VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp11A/+MPm/AYGb9YbYrEYT5edKn9yeUQD78M5mwXWRyYdw8NdAlv32\r\n/Ko8XL4JchPOjD6+g7ndeyl67IzsXWKXMt4nO5prbYfHT6dlIsTeGyaHNFrB\r\nf+4n7/OkrghBK3rZNuSb4dZtu7jq9mrhdtT/57EwJaonW9zeBsw6Hxsy2i6V\r\nT2y1gXFs+FqWARCOl9+vOSBnc3JrZBbtqRw3XidtZGXXLYe2WqAboS88L3F1\r\n4twk3zlGQbsTdpb6J+U5qYR0cY/BUeoC0mejdEsCm99jNyFN2MbqZEsWSHZQ\r\n1YGVtOP2M3TZRk+Spn+sKXOVObeCbTn8JEKDTIwzPROLHb+zim0JG+feKegS\r\nI2fg1168BbQQJV43IhjVz5szDdPNS4vGs83/U5JD2T4VoFqntvMIELbdXCYM\r\nI9L9El8LKj869B6KnnGLEKiQT1adbUQN8YBG8VUyGCtfRRBn0S9Z0L+6YLEq\r\njnywiXJMmOVaF+O0iuvYwdZ1TaUKH3rRBjkzxPMfoMFOf785G+LNRtbjoz1x\r\nXlLd8J9/w1iueXG89/yH+2LQBACJx+gU/Gs7d82tDa/sWDrd/P9pSOZAO+da\r\nuDrt5SBAXyv/iAoi1Qa/rgdxDVeC1weZH4EUIhnjUoyoS73/8lujuQ8C1jgy\r\naucX86DaNI0F/WcMWsEvPgSNtCIKL4J8ekE=\r\n=RKL3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.39e473690.0","@material/base":"15.0.0-canary.39e473690.0","@material/shape":"15.0.0-canary.39e473690.0","@material/theme":"15.0.0-canary.39e473690.0","@material/animation":"15.0.0-canary.39e473690.0","@material/elevation":"15.0.0-canary.39e473690.0","@material/feature-targeting":"15.0.0-canary.39e473690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.39e473690.0_1679421077662_0.7816705450164865","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/menu-surface","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.cedffb44c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"6bbe6c87ac806a74f04beb772f76a2b06cff1c19","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.cedffb44c.0.tgz","fileCount":38,"integrity":"sha512-4Icwt6Sc0VxnXN3yyK3+qxZ89WL/KY2iA7QdUxbZFa05Dvenag98gvIafu7SUGb89tU+x9tmpZ7/FM5yjaYSTg==","signatures":[{"sig":"MEQCIC0lB5HLhOaxQPW36y78GlpUMdaeLk5YRh/7NluTUJ8JAiAx+sVkXmKRaSA70gdrzpHByJwQe9foOmWebC7lQFRAAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfA3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJdw//cK+G2mvEnnLm7c2XS2599RuEJLjD++Mezd/MpxUt1GThOlDa\r\nIndWQekh4mSIM2+imNqfhUhTYGFbKi0oLagnTkBBm1HnjVRKjBZFTwv51u3X\r\n1WQooUGyNnzHLRUfSHxf5ssG+j5GW2g5bhXmdPqR9PgT1Lz8p8pwKAbh59wk\r\nkC/SJDFDnRQwhNXzm6iKn1J5Py1l16aZGUA8ZEQWTtt24UbaPC9i7Cnblbnd\r\nrBSGpbpMKrr0nfDKLg48cV7JD9NbyNF79WFR8z0gNdzhjLSAEFNw+voobCtG\r\nfnzy7hj3J18ZrE9MSeAzc7LhXL13GUE8BWNlZOLDd8QlKTJ60AAgj2/CLrtN\r\nBEHvJuyl82Tb/gisYH1HeiSUKRiz/6k4dZ0uth/m1h9Qns6Uot+485arVrOd\r\nSLc31l8gc9MoVkKxpP8Y4mxd5yUTg9eQT6sdVJF/J+gkfxg7lvVYLrxP+9oS\r\nRWAtHCBow0eaTVyD+O9O5MvZSdLslgQCXFZEEl5SG9tg9Nx0End2z71hWL5N\r\nhxDzKA4zqHizvCmq8ZaDwvSEPYMRXHlhnTPiFsph1rBy+gvKxv+Yl8GEL1SK\r\ny4/LDmAzuHhO1R3DM4PnqtRxx8K4UbZeboywLaqG7LuzuACgCIKDCfIs4mHU\r\n1qvGz+Cs/0xgW0WhNmfFk7grVAtXGVodsgA=\r\n=rUjq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cedffb44c.0","@material/base":"15.0.0-canary.cedffb44c.0","@material/shape":"15.0.0-canary.cedffb44c.0","@material/theme":"15.0.0-canary.cedffb44c.0","@material/animation":"15.0.0-canary.cedffb44c.0","@material/elevation":"15.0.0-canary.cedffb44c.0","@material/feature-targeting":"15.0.0-canary.cedffb44c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.cedffb44c.0_1679421494966_0.41937798007903226","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/menu-surface","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.36a4cba99.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"48236b60bb8fb462c061ebca4c3672dd3246b828","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.36a4cba99.0.tgz","fileCount":38,"integrity":"sha512-zBNI+V+xBD7aHxN0W3v8s25sGI/nCaoBb9mG2UlTL3c0i5wWJrxFAqPNFzCN0U6Fz0gSHiKJ24UgLs7sR4fYrg==","signatures":[{"sig":"MEUCIAyFxX2EWqlNiT+zEcuvSgVvlw91DN1M9tCyWvcq4FFfAiEA5XSi3IeJdsU7R2AwWpD3NC5cuICvZ5G1Ve+FP0IYbM0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIyjKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozYxAAhCorlmKCv07tkHgkECVnhHQbjc5Cqa5VSOXpqCGokVdCH5za\r\nPUHq1xi1ZzuMBNGuC4Jq8w2peg3+HIfAAzkXZTSd5PQTuqdhP/xZOPZKiy2B\r\nwQXreheN15pZwzjsv8YxFo1jsv0DTk7HZ22dPa/LLzBh6cHkGhwC2mkkfOjl\r\nKqRlVVxKsL+DK/GYAJ3YY5ZVgzJ6V3y/UW4XLNdGNqJCu7cJSREIxdO/Blsu\r\np6iiQ6MhSTzOIU463v+d+IvjhA/WnuaRNyGLBfZQpklOFqI8wnG+jKypJ7OM\r\n1++Ig6m21i3+EEUGRySTuMm8dyoRgiOH2ao2ULKnMj+ZVSZBP4nXDarRU9+q\r\njKeqDHZ62BVqqJPYAarTffa2g5ixd7Mg0OIpcjzUgbXyPz8njQtkwIr11Nho\r\nQ4CK70p/hGme9x2/wD1g2QjufAFDTqK94gKcsUbYC0JAYNmoTcIW7XB0yt73\r\n2/39iKOpIw7bXO+Vlo8/EuqNqoMEBw40vS5Zvo5EC+3xvaD96WGIOjZLb3oI\r\ngwwNQy/Abx98v+qF3goc4Z4v1fFhkbFq4sP9hd1v6XuRN9nRIDpGLtTkc09A\r\nT3ek4Syzy5mWmCC9uRX5I/d9Oj2bqfInuKE4VfoxuPxwPyFIZLSkQi1KrDRz\r\nPKdqlUXluurX8/h/gQJucNPuUxpD8X9AviE=\r\n=K4Or\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.36a4cba99.0","@material/base":"15.0.0-canary.36a4cba99.0","@material/shape":"15.0.0-canary.36a4cba99.0","@material/theme":"15.0.0-canary.36a4cba99.0","@material/animation":"15.0.0-canary.36a4cba99.0","@material/elevation":"15.0.0-canary.36a4cba99.0","@material/feature-targeting":"15.0.0-canary.36a4cba99.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.36a4cba99.0_1680025802078_0.8487227941582596","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/menu-surface","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.ed7e82ded.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"369928f88fd82edfe2d3d08cb0b4ea497880e57d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.ed7e82ded.0.tgz","fileCount":38,"integrity":"sha512-CW1a80tLiks5L1+N3Ira7dcRtcqad5N3SAsCq/7V1mo0Uj9XkvpvLlnDWeloCuJe0Kmz0xnDhfXIh3KsEpEWhw==","signatures":[{"sig":"MEUCIFck+1xxFyJXe3dd/c/FvdmRdyh9fZy3pXzELgRtlQvNAiEAsuw33p5Lrc9inKhKjsSRY+eW/rOZe0qzIk0WWNAKFlc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI09ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpO2A//WUf7+acrfIwk5mVoBrx3AGaPu5YcDwwJp5eqEJHxb8WctMYS\r\n247j1b42+So1jSvr5d+Zx7kghDqFR+jLRJcetcpb18ywfWy1Fk4aykluDPlt\r\nYimYJNl2eVS2IJ1nQSgjozaOh3zSViVX3D1a5ScnJxQstVLAEDzjID8Gprcc\r\nJfqWpNwDFhI8XfxSqHOHHmfT1gzEPhQGob20YRb0G9TJTAfmJDuf22rOwMSe\r\np7tMKYvk3i1gXc8G6pVL9rOK/J/Xl0G5j5DPY7bMb5j1MqQ/bLQfaLX1tlAj\r\n4CoNsC+bCEba8udpm+K4mLajUGE1L/1RJS/f0+M4xz5bW1QlufjXqE2yaUML\r\nuzUfkUpM6rwyOILP/CuA7UVRm6/D1nCoEVPDEszvffQ8fMVPaLOk+01T9gYv\r\nzDFyCc4yF0CsGzd3dYZ54cKBgU0fEOaRDSm45Sc2wNoEUHavrPX1XuLJLpXQ\r\nb7mib97cTDWfz50QHCtKq/2ch2Ru+s2zBChmgkJHIOjKcXJ4pcaC/1iFWNc+\r\ni4g7H+9JegK7JD6fyHJyXrK/KEmjws/99Kk7ZuMGbyjdL1v4IaaktiPE6RTx\r\nEtHuT+y8ioV2dYH2THkLcoOhcg6TE6rwx60mEvfDvTOeWiXZLF6WuOE7M3+v\r\n3Zwfx8tbiKnrS6OKtkK9ygcBH55SHwYxvkg=\r\n=tB0G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ed7e82ded.0","@material/base":"15.0.0-canary.ed7e82ded.0","@material/shape":"15.0.0-canary.ed7e82ded.0","@material/theme":"15.0.0-canary.ed7e82ded.0","@material/animation":"15.0.0-canary.ed7e82ded.0","@material/elevation":"15.0.0-canary.ed7e82ded.0","@material/feature-targeting":"15.0.0-canary.ed7e82ded.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.ed7e82ded.0_1680035672841_0.27601324977620356","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/menu-surface","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.55093ee1e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"48e9be1cfdbcd628f2e0667d868458ea7dec6266","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.55093ee1e.0.tgz","fileCount":38,"integrity":"sha512-MbGPby3E9K9Ku7rcIba0x1wU1qI9sM7smbyc7h7aVS22/ShuDGrGUvAT6lh/sf6pIuQ+YPTJwDMvASYkUAUzLg==","signatures":[{"sig":"MEQCIEWCuPhJmH8vhqNcyx8OCDIrR7bqGD1fwuMaqKybFzHjAiA0Rqk+kjfmfAb0oZTb4umFgCjAp8SygR6dDfEDkHoU2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIgAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmow1Q/+KQZG7suVCQR1riLxsM20GSeTJ7z2XMW+X5v8rtnBeoQx31a0\r\n3/DSxIYL7u6DK3h20rZAmDx4jvuI1k+2Ioe639O9p9KPRHA2pp9HG6SBoQJi\r\n0+PqiyD6ryMWyPY2oSvoMbAlhQBmCwetKVVR/XW+KBwv+O83XWt+qYr0msVR\r\ncnBDeM45hYl6NWNV7f/YNQFx0GuBkvPhwLuwf8zX0IYQqXfMVEq2dSJ7PPur\r\nPQf4Ai+sD+PbneK1yFQWvAy4+NTuXWI0d7EqOMCenYwGRQYuOtCar2LHseOR\r\n7Tgf/4bBADckTKB8m0n7hdd1uu+u3kzn2DvQLRsTDebCdBVQxicd/pPBMuRB\r\nW5riDTTldOdEt1RFzNsxoSd6Sm5nqbgMsCFjTIqOU7bLfBjgUxMGgwwO6jo+\r\njimLAOALfTpyiaKEKX7VTKqgCtFAwFkt5CA3+R7etZYrsvGhjghDgMdcmTsw\r\nE+8cKpWsFDqI7XoHyDQ5Os7Ty+jDBnFO0/w1AsIAhr4ArCgwY28oO19hondH\r\ntFINvbDI1K/DS//RCTod00V6KA4Fel/GKtJgBcp7hkMqPiL7IwDORDdmNQr3\r\nV0u/OO64ExXLexZJLIiMX9I3fYDWPfKa9o01dB+PROpK67CkfJe+DLetSX56\r\nX5ILQkSEH+LmiaeixgntRjvttgOwmzCCZWU=\r\n=7SnI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.55093ee1e.0","@material/base":"15.0.0-canary.55093ee1e.0","@material/shape":"15.0.0-canary.55093ee1e.0","@material/theme":"15.0.0-canary.55093ee1e.0","@material/animation":"15.0.0-canary.55093ee1e.0","@material/elevation":"15.0.0-canary.55093ee1e.0","@material/feature-targeting":"15.0.0-canary.55093ee1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.55093ee1e.0_1680115712305_0.8289014180007754","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/menu-surface","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.0c53abc81.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"23e0891e447802ab200008676271e165730a2793","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.0c53abc81.0.tgz","fileCount":38,"integrity":"sha512-FQd/1AnR3dZ3fhQxDebxMU3clMtk1Nqcuw3FQr6fiieZiuj8HMrD7d72gFCjlKQvRrof03YwomDMOGcqBETdzQ==","signatures":[{"sig":"MEUCIQDXKKkLtZNc0dKby02XUpEiJDnKY2nPfKPIf/5A94WwdwIgf1dek78KYGLwD3yIrOrNMRWMXuve7QBPqef+9hDI0wk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3S0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDAA//XDshU3Pzj+1K7MwEiSBd9lkZ265hVgObzPIxYOoPH3EsfrQS\r\nfshPtVY/UXcFxUlJl7KW37PwhPEfXd1xQqqHn/2gh0VTNMcJRBMakufJSC7K\r\nCyPYUpsbpJMiGF4Z/W6P9mHR+0FS+4AWfii+j4i6+JypmmOlULAk/gn21Mmo\r\nkkUuOnYYkTbOtm+5zTBTiFTDpE6x5/yXIaDOEILaQhP1AXKQ8r3HDavRNsRj\r\nhS6y0D4cboaqsm0tJPm/gltYPZlwtWA+NJ6b2zmfm2iymnfmJnNSojazVMdX\r\nVrlAPJV0xp+STyFhWovnF1qG92UXEcSibEdKInvaL9utT/pvRBDX1cJkVWsW\r\n86/MBHRSvLJMbDlfUXogwklobPk17i9jedgBVVRi3soN2yG/yIkH0byXZjvb\r\nJdeh+0/pHkGmJWVXIAx+dge122giHIQGy3HmwzqyqZrlU4ro4OF3ocosmrSd\r\nORKvN/2RtR+joIwIZ3cAs2TL8EEKslXDxAOQ/Ynqk4tyj76DoFIwddKfsnBj\r\n72JkBVlxq43WsCtrVa5GoNFpdLlMcl0ACkIqbO05fjH+IFQvUXK6mIERsphe\r\nrjImX02PRRydJi2tTB1eTHj7qWUeRC+vXIzkLm+YymLH+yBSXmOZ40qM8qNb\r\nVBtrodzFwZs9SDPAbotlyfvyRhK8t3GdKlQ=\r\n=zQSx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0c53abc81.0","@material/base":"15.0.0-canary.0c53abc81.0","@material/shape":"15.0.0-canary.0c53abc81.0","@material/theme":"15.0.0-canary.0c53abc81.0","@material/animation":"15.0.0-canary.0c53abc81.0","@material/elevation":"15.0.0-canary.0c53abc81.0","@material/feature-targeting":"15.0.0-canary.0c53abc81.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.0c53abc81.0_1680831668263_0.27375355684480085","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/menu-surface","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.51311e69e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"66c457c66352739c80c68646a6eeddd621fbac5c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.51311e69e.0.tgz","fileCount":38,"integrity":"sha512-bCiLQ7hl05eJNlm71N4CPrbG0N2d1b5MEymjzdz2/d3xm8jttNiTKD6HtDv5o3CNr37bYoZSPFWxVPXUMxt4fg==","signatures":[{"sig":"MEQCIE0vdJqPYjXuoDmzdzSK7B/qw4gYZHyL1LteGmAxQwYBAiBJRhaknLcMSlcOgd6ujHVppVwrh5TDbP7YsF2nHk+Nyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFv3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3yw/8DM3UbJg+aw8bVQiII7Na4lONUlQAc+0fMEAJtnjmohlFFlyJ\r\nVSP2TDwltEcz37ywG+p6HX1uFV4LRWx9DMTNTSxbkctNt/kEzHAU6Q65ae0C\r\nsY1/YjBZN1jo2a2pMr4iqiCP/foTClg1/IgkFZAXOxa8obpe7CKwVTWnIi08\r\nguWC99DGz5wW1tnaWYeAzhsu+I9/gdG5sqs/o0wdrFrzljFSFoAbWPN+uYbT\r\nILcUlK401xCzwCbN7lPAgtH6PA7refI9QqobFkAXUYPCWCKkiuqklCUlS9hC\r\n8Xwzi88DQo4KrDDdC9kg7MfAe25xD5htGPWcVEZaN/+G19vkfMI+vMRZiqIJ\r\nTIllFrgg5iXxKeNHd0oMe2GBrGoyBZQIgzh8Rn6Rcdzr6rrJ3BdC3sTcMsgU\r\n91Naz8ElR+f54boPd9HoAzSK1M1f/rzshxyuGyzJ59Y5z+MbIm0WBxfkq3ed\r\nGlRQCbN19RN1k3sAwhVaaefwhdvrXxCaZaLH8XLorEFViGoFHzae82z6fZp4\r\ne4YoRrmvLJN/GhUEOWRZCrM4OzY2VPGplpeGwNqj/rG+CNuAP230i7d/JEVo\r\nloPIGuOlU5lsUWiQfbHCOayu56+poVE+hYMjhwIhHz19QD9zS0wQ0WnEAPVS\r\nNFxsVTFwp/Q7UaTLZDuWke2FSn2yYMw0bQY=\r\n=8eev\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.51311e69e.0","@material/base":"15.0.0-canary.51311e69e.0","@material/shape":"15.0.0-canary.51311e69e.0","@material/theme":"15.0.0-canary.51311e69e.0","@material/animation":"15.0.0-canary.51311e69e.0","@material/elevation":"15.0.0-canary.51311e69e.0","@material/feature-targeting":"15.0.0-canary.51311e69e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.51311e69e.0_1680890871467_0.658440618565634","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/menu-surface","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.113b1a38e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"4c54e9156b5bec91e083588e3d1c0b077ae667a7","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.113b1a38e.0.tgz","fileCount":38,"integrity":"sha512-FZN9IzRfrCvVAOEeViTzHeWpBA+8lz35mjguq5ZRfHAI17hhCW5roMRaHMjqVGCGE/hitP6gxt4gM3Puj1ebxw==","signatures":[{"sig":"MEYCIQDkfzOGV15HD5fTFh18OdAStStR+SbHUDfuxhDd5SiJFQIhAL9N2t71CK1eyYJAjP0pa7LMKjRhgfykePD2wM1NWdEy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIVpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUOw//YSpSOuyiGOdcnx9b23huEgjmryKCrABfKboAWfPlXdWvwXrt\r\nl0vzaQJFv4h5wpfnEacrN4hVMSWCkXZ3S9+9zotJsiDsXaFJbDXj1wVYigWA\r\nWmC8ioJrsiEidxS0jo2XbQk+qEIWkegJQHhLqp05hM3+eVRAtGnoHbeJ/kF3\r\nstJtdFV34dQC08Y/yjh4xJiiZoNfQdEXijLm+bbkulXMORBJvjFkIB6C1W7s\r\nk38FJE3pRG7VkhWN0KElX0DDosj2MWqXJCfk/uoARl043ShHse4cF7FpYmSW\r\n0OFZyzjT4acKklLMb+aAMNK/0LCE0fUYEoPaBkIL0s8huXqWMZpqfTtD8xOB\r\n28gL5Le4BX4sUMLRrQixJKYzcOUXCZ7xqgu2FzgLgVI96RYDUMiycIaY6/M5\r\n8cskypFuUSe9CKZk1iZofr5Cw3FFswa7QgO8Umh9W9NDSTPEzhY9fDhWObX3\r\nOhO/p68+uaq8IXbZw2TO9alGcDo15CWeX7Ox+CfIu4wfeKKCvzCuTOT5HqwC\r\nfKYO0WIdK7S6w5Wihk34l5jlVKsiPyp0A5oxqwQbCmkKJL4tFVyn2E81VnAg\r\nlHahPyPJNv8jSTQ/tyovBk5Lp1vEXDMOsoXdSfPsXPoVYK18SU9K4qP7XS7j\r\naFxJN/yXuBe+95w2VYLd39oiGFWhYe858ZM=\r\n=vu/n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.113b1a38e.0","@material/base":"15.0.0-canary.113b1a38e.0","@material/shape":"15.0.0-canary.113b1a38e.0","@material/theme":"15.0.0-canary.113b1a38e.0","@material/animation":"15.0.0-canary.113b1a38e.0","@material/elevation":"15.0.0-canary.113b1a38e.0","@material/feature-targeting":"15.0.0-canary.113b1a38e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.113b1a38e.0_1681163624709_0.42613738987098104","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/menu-surface","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.ea2191426.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"0a24c3ab658559f296fdca39e716cd6e3b931d6c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.ea2191426.0.tgz","fileCount":38,"integrity":"sha512-CO5t+2Gn4n1FaqRMQldmtDFKpRbXirdqjpRwj7naYC/v+8ib7I/GBea7Y3+idbgo42s1XV+/uCmOVl86oIpkqQ==","signatures":[{"sig":"MEUCIQDDZRv32qJaKaCas+tlrDCVol799DXuaqTlf7h7er9bvQIgNi3y+wQxFmsuIEbkFiD1DZ/72uu6Ky0eMVrFLixUb3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNddYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVLQ/9HlWOvjZ54OmAPoczv0SVbuY2ZbAh8cq9kzyIxoQZToyALnQw\r\n3aWPfXMvlqAXd9+erPcReMqdTx64njpgzrjOVK7q/70GUd1h+Oi5DUvEXwnL\r\noZ9yqWLZ1VWglYlLj7SVA0t+JZa1SuKyHOXCu8hkyHJebKCGKgXz04tJPJT+\r\nj8F5BsigV/wItUrPFoy86ZPWFfA5Un3hTdoP746vL1xrUbV6R5jsQ9ErdIg7\r\nUzf6LBHC5isC335Rgp26Qy5kNraQrhHYb1qkj0ZF1OWZfadxbBFZF8jWOy20\r\n7nkUX7i0CIkV74aAeNi1F/EfhvZIceEmPzQbdbioeuNns8ebcQ5yNgGNkfwN\r\n8wsig7QiVEFcYJR2n9VS+Zfz9BWIYjY/AjSbvO1qJIiOU2Hbx3WJNAJxk0zU\r\ns4uUTBo3XDVozZzTQ8S759n2yMHt1NzH+ODkP8bEAHsWxXpqZcenQgkRxTjC\r\nLYXOe0uvBQbm9ggo9UHbhuh7tG+oovUEL46lrziqvmchpg7swpkEvJtffqNA\r\n+JzmZ8l8v5OwSmDj9LJGIyfSwcpEcqcfiqtUzkCjsJCLwUw/jMyTUGvWXXc/\r\nzsKWNARXW+r7YG1EbXJe7Ry9mmMVsPc1ZpFd/UdvRHGdqgwCvgxGsW9DrBLN\r\nqdSICCZUTorv1/y2zG9pV1KKuYv3ZYWqb3I=\r\n=JntF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ea2191426.0","@material/base":"15.0.0-canary.ea2191426.0","@material/shape":"15.0.0-canary.ea2191426.0","@material/theme":"15.0.0-canary.ea2191426.0","@material/animation":"15.0.0-canary.ea2191426.0","@material/elevation":"15.0.0-canary.ea2191426.0","@material/feature-targeting":"15.0.0-canary.ea2191426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.ea2191426.0_1681250136540_0.5692455522997883","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/menu-surface","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.5a5c38538.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"1310ced5bf46c5d5c962618e04e885b2dea8bc28","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.5a5c38538.0.tgz","fileCount":38,"integrity":"sha512-37sa+MS9q/+J5//Wj2n7LDv3IcxcvUmL/gD58wuf3GOHYDcolA8yof1X7KaXvCxdLjSpfqKt9SIsB7dtAhCZ3Q==","signatures":[{"sig":"MEQCIAKIUoYzHHosFaoDbZLC0tx2yQ53ntM7CkA8Mvp6G0DrAiBA+xEJnvm75jNjKaaXAbCrLhV43IAhswSFBudVJMJa9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd94ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmjQ/+MvstU4Y6Q9qStKSy8EGOSYQ84tTi6WTHjYSq6J8hnzLK5SG+\r\nyMFu43nr5zNazzkbkwErghCdJB+r35TwRD0NpxG3zsA9wsfiZ8H4/SQKpbLg\r\nK5A24z/VcHAywk/qPUeVIRof4r7KWvdw5zE/noGUimbdP0wWil26YxcWOKiG\r\ncV2hXFHZ7Cm5+4rorFnoqlWdAk2bJhy+ivlqTp/amMUFi09wvF61/2CyYq+d\r\nJ9zsCU4qDRU7DXlNifln+fi+euMYEckTy88qixtb1OgdVjokx/wAIDM3wQMj\r\nLyJ3sXGk1mOlcavNkQFELz3qDOTgu4N3n2sKEDph4CPAACs6AKtSc3mnqv1L\r\n8UtEjmj3UVSogqctD+afbQg8472uvyWdZPuvK9FGtZZwAzwecCd8g98MOzkD\r\n+Igb0/CVEawXOwYz6OcOwE7eKXKdL0dSIph7G/0FxDVVGfnsffeg1wJC+0CW\r\nYFpQoR1Lq+vt2vdXjjfVvkBx71lUN9zr+kd1g7/RRr8R2VdsU/lWvdiExQWN\r\nR7/CJqx97SqCqQuNnm71hhbhY+xLyKlyYqZ5ujNAuBQmJrI7fTANxl77Aovk\r\namel9cGrCUpJZ9tLkNTBCrKHr9p7iH/USUCIpiIp3fdXq7zND1ANfjgdS0jr\r\nhUzWGMHfcM14nV1OGH1yUnzdkdygCgDRMcY=\r\n=Uhai\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5a5c38538.0","@material/base":"15.0.0-canary.5a5c38538.0","@material/shape":"15.0.0-canary.5a5c38538.0","@material/theme":"15.0.0-canary.5a5c38538.0","@material/animation":"15.0.0-canary.5a5c38538.0","@material/elevation":"15.0.0-canary.5a5c38538.0","@material/feature-targeting":"15.0.0-canary.5a5c38538.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.5a5c38538.0_1681252215887_0.37815077566639443","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/menu-surface","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.e4b5ea7eb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"cc44431e9bdd250917df3a3e56794807dda4ab4b","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":38,"integrity":"sha512-R9yfvNEnXh9HhJ0DPMaXYXWRhbW9KjHSC/nUsNTxqdsjKCaytcyNPU2Ui95e7kPQ95O0PPquC1p6r9sr0WFkhw==","signatures":[{"sig":"MEQCIANdkJuO4V3YhTifKQZT8FJgBCUdLpFqAzobieaQk8aeAiABxQRmBVsS/YoTcg8gxn8LhFe1SYh8KBuvphFnryVxRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNedvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqobhAAmiHfAHX02ny7bFBai55XBrpyWi9orDQIMHyvSBkz6c74n0lG\r\nzlboxzOe0Gk67KVmn5LObhaIh2Ys7d+7OOFJRp7yy6p6z8cDtF1lhVnSemoZ\r\nRzQlf2R4DJ5GhQOaRUiIeHqNNy+sU1joKDlUE3t8Te4CCXgPsf5friE22N0w\r\nj+bOthHK14xPBBjuZXQH5yRe/0Zgzp6M8uXy+QAcNMYmo2shcGywfF7OX6IE\r\nD0HE3mCvCLtUd+Pdhpdvjg6DqFOQYOX0uP2Nv4zilZ5/SgWorKq8j2Fsel72\r\nK8s29qyidl8F3qNrBLZUNsMiyvk9fyMEyc52OU3UZhdK0HkoS5qlYKr14WOm\r\nSvHj6pOS8yKdmLsMbwu3Ln3FnkisyIl5N4hhcsW/bq9gU7e8w6cbugOHLZTj\r\nm3xdpylFDpyGw9V4lgIa0IOlIFEW6W6/CJBeQPj673eLWHHMjZXAr+8yflUK\r\nixVSTLJ6GQ8MmYhofchTdOENH93gzfBRb1bZrQ9PSAM+u4k39sIXCIW5wo5s\r\nAdCNDj1aWbo2xziA49OJehJv/grHUNbBRAeAmM/P5CaHH+C0L23P6nItb5Hl\r\nz2rb5kM//QY1KbjAQvpuCqPrJN2F3phGNhDtzYh1/JcWCFSNm2Jff9lhMxe3\r\nGSIfrId/UwoMnDBMN4ebL4XWU+/zMyYcjoU=\r\n=nESL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e4b5ea7eb.0","@material/base":"15.0.0-canary.e4b5ea7eb.0","@material/shape":"15.0.0-canary.e4b5ea7eb.0","@material/theme":"15.0.0-canary.e4b5ea7eb.0","@material/animation":"15.0.0-canary.e4b5ea7eb.0","@material/elevation":"15.0.0-canary.e4b5ea7eb.0","@material/feature-targeting":"15.0.0-canary.e4b5ea7eb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.e4b5ea7eb.0_1681254255345_0.19753752133659175","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a094dd9c1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"0cf9a3caf3baa01ca3202db6d59417e9f64a44c0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a094dd9c1.0.tgz","fileCount":38,"integrity":"sha512-igFxmKLJjjGfnmt12y/GPKeznQHFekFJ6yasUpwXrfMoNVRh71sX5NJ1zUKAcOmRPvTGs0pyXE/oeGYPYbxJ3Q==","signatures":[{"sig":"MEUCIG4t6GC9U0XXJ0NosN5qPq40tp9nuzwQ8G8Zbn1DxIi1AiEApFGK20xn6jI+nCZxW/UNvxSkAbB7+lMLCKl4SnqAFBc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOdbTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq67Q//dNi10Tp+2QRl1yP7Y3JRBNLCmC2I7D9TNV6em2HNLj/dwTiy\r\nVQMlL9k9OPtgJrgroFYbe4M4KT7j8zAd2O6tZqbWwSwONE0LuI6dMcB39uv7\r\ndH3WLz3R1VIhHydzybSNXvBS0Z26nFpARnwyyqbRS3IIdh27nKPFKZc+OF4k\r\ndwoey1vDSBJg13QX5HsMSo1AUCONtChT+5cCkNUMtbhL42V8OtHPSysABmCp\r\nFj/hhpF04pGdUtHM9caxQw/L3CEtaR/8ha52aUfouMotED164fQz//a3CuZB\r\nzgVoECrEXEuBc3ihXWS+de1LR9n3+LV3T4IRm2ThaHXGK9DyjeumhLAoqinq\r\nHpXKoZ5UOzH2mVTji0EGIGstv6qpH0kc4oE9m/jXAEIEhDM4BucmWEkh1ViJ\r\n663nVxi45CVAsltnlfYzKfxsxOUCPs15u4pZ+xeMn8M6MhPJXReJSexFf6u/\r\nWnkg4DIy7sAxsajoQVzsndMcEus219vLdJzyy0zyA8qzMHvFk4+jNopWvT2z\r\nrWGex8uspbjXyhWPWEYgQxcxv0yd4A0mOt/a1LKhl52ZKvAqU1abjWGuW20g\r\n8l3MxGLiV6d7Iz6o+7Q3luzEU0UqisGM2ram5NJ6vNKCaQJ+BwFMwn1UJnXY\r\nHp9OVgBrTKfZmf2FjSbkH1HWJ4VrEzl6Gpc=\r\n=0kmK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a094dd9c1.0","@material/base":"15.0.0-canary.a094dd9c1.0","@material/shape":"15.0.0-canary.a094dd9c1.0","@material/theme":"15.0.0-canary.a094dd9c1.0","@material/animation":"15.0.0-canary.a094dd9c1.0","@material/elevation":"15.0.0-canary.a094dd9c1.0","@material/feature-targeting":"15.0.0-canary.a094dd9c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a094dd9c1.0_1681512147579_0.09612292694864943","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/menu-surface","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.f771b091c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"59f2a679707c2e2af68eecc1fc47c23f43d500a8","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.f771b091c.0.tgz","fileCount":38,"integrity":"sha512-OOZvxFF4NFOWX/jw9NFk64Y57u41BR85/BISya1lXeibKQdTI8V/GvT91ve3ytDQva82ZwaotO94MXUGeO9VcA==","signatures":[{"sig":"MEQCIASOkAtSRHwgV/ddtyA6CULQd7bqThn46TwAHsFQhEZOAiAdeGwzqXtRmOWK5hhMsV0RnP5jDQeEQaJSJzPfmypgLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWfcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzSQ//UMp1G5PhiCclwRZLTPUUF2TVa2/q1sBAzbkZn+Fal/YEGOs0\r\nN2GNn66Wp0q2j7XzeMKK84Z/vOChziLTWpEG76zKbsCt72or9yb9kNzIvqDx\r\nTBcS2KiYPCiWEchR5kOJbN/T9K0oi+Q56emPOdFGREW8wilaw7r4fFwQx3Dv\r\nJgXhqvO2MGB/2+9ERlvBG141jAvhFJ/VTb/vFk7YjWlALSbFDcCuyEpxRyzQ\r\nqf0nxiZCo3FvnDyEsRXDYbiXFfU5ixulCKTPjVFaQ7P7pbWxt7xXrhDuzzS8\r\nw+fz0s7OB8KtmPmn6hfVjGxkzjnIs/c0iVHimznRgQd059og/4apALmS7Pdl\r\nkGA1SBnhJanZXgfuSiCsH+htRGs/5CgJZEFFs4/Dff1/uxi2xzUrCw2ja2+h\r\n3QDcbq/oY1z+fX/FDZJJD6wMyR2GUQ7Nlc3stNyTe0F6PeRTb28eSd7rgP4m\r\nx9GOHI8PRxeD2MBL5Hhg567Sa0u+4tn2zeRsqixlBBDnH5eYUXBmxqWZi1XS\r\ncGnq/jFhGy5NrZWzxd3fYRIKUlz78W7l0q1Z8yIQ38cUPrUZEh6VbDaFEAzp\r\n60vsGZz8cqGMtLGbWAOydMeqzwOacUiQ6NdimRGdVmSF/MXl2k2xE4+3TlX+\r\nkPncICNxR0WlAY8Yg1v7S2v3QChcZ832iy8=\r\n=z2Jb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f771b091c.0","@material/base":"15.0.0-canary.f771b091c.0","@material/shape":"15.0.0-canary.f771b091c.0","@material/theme":"15.0.0-canary.f771b091c.0","@material/animation":"15.0.0-canary.f771b091c.0","@material/elevation":"15.0.0-canary.f771b091c.0","@material/feature-targeting":"15.0.0-canary.f771b091c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.f771b091c.0_1681745884565_0.8585344981014671","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/menu-surface","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.79b1b612b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"737c0d07a494a1bd6f3b55c942e0e00d97d04b21","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.79b1b612b.0.tgz","fileCount":38,"integrity":"sha512-qbH8zyMhMZ+0gVwXYIpd3+HtRLKJ25dLLTtfKIjIETHglmxDabOnZusTQPXaRK1AW6RVEMWWR4u0nMfu8nopdQ==","signatures":[{"sig":"MEUCIGyPle2JxUFsB0SQd9Cj8vDrOFVPm69XHY/bGqA4J32GAiEA8dL4MIenK4kO/7ejr327FQFO7ltb3Zsag/HScHd6dmM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHvbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+Xw//WXHyJ6T5HBpL7szMt4mj3oRiq12mbgZ+v+Teeq/BKvnS1JiK\r\n7xa1WBr7Z0OkvGOGuPq6HK9+ZyoQcI6CZmSkHFXRAqtq8syH0aZjtQDm245g\r\ngAdGTyMKNhX82doINcbvd+6tIY1TFCyOtBU7UlUtTSoF6EZ12VoMjcV++XgD\r\nMJuZhbiYu/Evg8aPp5wV8AiF1HTZ5xOmRhAU/Sky13KOhUw4/mlhqsFJF7dy\r\nGAIHMVtuoeLNxylLrPsVD3mSv4OiB1fdFicaFu2RPuRHGE9FAWR95kSUKwEb\r\niP2N3c7u3KtpwRAKlWlKyvVwXkcda+9GR6Z79bS5Gtsd+z+SeHL82jwINvKz\r\nycLv9k2mywvzUOBjwhNfdrfhkeUClOqhRka8V8RpxltFyojD0wvokkqBweb3\r\njHKchOD/I+m+QfMZBR1ZRYbxXtxsi1m7QoxFLFLA31M/Rupij9oci7h91L/q\r\nCK35WJ+CdQ5m+cBdhFmQ00QJ56eM8cMVmcnSgEK/EM/MHpK2fafraOfReOgC\r\n+c051n5VyWwIhTGtPVObf0oIDV1RVrfXdyMVdIHLEFbev1cfeW+5iS7E4ZzN\r\n8ZvGCAdy98Kv9kQ3LYDXdpvSgWfw8o3FeCe1ijunDGWWKZt64xLQtaIyNqV+\r\nhwuIQSTXztRVuOmtNNokQS4oYZlsvWAhe58=\r\n=2gs5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.79b1b612b.0","@material/base":"15.0.0-canary.79b1b612b.0","@material/shape":"15.0.0-canary.79b1b612b.0","@material/theme":"15.0.0-canary.79b1b612b.0","@material/animation":"15.0.0-canary.79b1b612b.0","@material/elevation":"15.0.0-canary.79b1b612b.0","@material/feature-targeting":"15.0.0-canary.79b1b612b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.79b1b612b.0_1681947611628_0.16777743178445204","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/menu-surface","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.6f50071e5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"e4f4d095687bd7a2d6cec74c88011a18d955b655","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.6f50071e5.0.tgz","fileCount":38,"integrity":"sha512-WxjsfBCZsdZp0neOHkStdc1snTwODXoizT7y+5W31qmh0nKuUpdVzLfq2clCNHejs8x4e882Zt+unpiRCq6y0A==","signatures":[{"sig":"MEUCIQCVcHaa+cEkvd4hZZVI0R3AeRq7NEUM03SRnEmln+f84gIgHmq4tUgErkmOt/n0QRsr8EthoDmoTA1+Un5OWVbzs60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX3UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBNQ/+P23Db+J/7y4T+pxbdQ8k3zAdIYT34Avi+GgdReMuzGXRnzId\r\nW5kWLLISKhfHAtOWu+heW9mkUAgKnQ+kQJPCo11gHAAK0UoYyiFpJfP97061\r\nTwSjdPpAlAjv+Ge74Kt4Av9EytRY2rdH5juMH55R9uJrCQUxDrb5e7jJSffJ\r\nM5T0yzBI/LpHB8bIpjbPb96Lzns2NFeOD0N/GQvQ4kgEW8TMmyuWgBae9Qua\r\nEbYpojOB33vDvfkxihJWXBKUyWlH2aBC/ytKIn1NbE9plnPlOnBH4WVblGYb\r\neI/QPCxBOiuzs++UX5jzp3dumH/yRqXwBlcWYkMxDbuSPWC8207I4HvE4w/+\r\nE04UWAv5dh7+wDQeMx0C+yX9CBZaLEcrklIdFCts8K5wpLiQiNlL0A2WFwgZ\r\n3/6jQAZm4zVqcEk1t2IRYgx5Y2+LWzNOFY6WbJZCZ8NUTNMHs7MTgSPI6k7U\r\ngOHW/xZ0ISiGSExudr7XQBl5B6n3V4qxpTBdnnJpRE9CurjC/r4p9ymwW2Ma\r\nQP0jczf0LDexSYMuuMU5g1CLQATJ4yf8D7jJGUdiNHNOWh3ITfxuKwdXeHVa\r\n7kOlif1LwVsRmttdGVEU1AXt0rkNqiebZrn0gRriQTKqGQ/nHJFMO56Jtf1B\r\nMdOjS9YTUre6bFY2VeRZIJn5jAtUkNI0F/M=\r\n=xvcN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6f50071e5.0","@material/base":"15.0.0-canary.6f50071e5.0","@material/shape":"15.0.0-canary.6f50071e5.0","@material/theme":"15.0.0-canary.6f50071e5.0","@material/animation":"15.0.0-canary.6f50071e5.0","@material/elevation":"15.0.0-canary.6f50071e5.0","@material/feature-targeting":"15.0.0-canary.6f50071e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.6f50071e5.0_1682013652185_0.3013042034919302","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/menu-surface","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.ef754381c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"febfe59099eeafb5cea8563337930a1987a0bc54","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.ef754381c.0.tgz","fileCount":38,"integrity":"sha512-4LLaDXaDNe/gX6gTl0fCybulwtsmbQanQVs+/gD2yANZLNKGOx3hLDe5CXPOkKEVwjlyjHtfjyqx0a2gf7vk7Q==","signatures":[{"sig":"MEUCIQCl3/mXUztparySpK4ybV5iWfWXQGgv7YNhysZ6ft9X2wIgfr4g+7pd1cCAK5WBtEpf9HWCj+QYKeIFzSFDS1SXYNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuutACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomFRAAiys7klrcn/xGmvLUPtZDnT7gQ2wxUXxPCqzChWvHx+ICbEIT\r\nzTELXWuL15E45RD5qvGRx9jI0BVt/8BFKpQGWnW0NtrbariBrLy9pw37pTTe\r\nVYxQFBfkbDli+6ss/gKHBldc0vQxlJEfqs1z6V7m1gL1qsIiTARIn7uMur+k\r\n0P3EtA1GtCk9LILAB+D89vmesIEDHKhID7Q5GKnMASGgw7y4PMM0qb/oa7Pc\r\ni9FqkMmBs54NJ+PkcmPgFAzuH2bKteBmf0Ic/WeVWDD4NH8nC4DeX0FEyAi1\r\nONTQCpVjCk+u8iUvwluJ1idItSyjQrKXdSmGqR55Vq+6tmXcDntFmOFxdvNy\r\nxDA6jfCbIt1pjsfjwoYnpKZrGnNH9oYc/fP6Dy2Igpm6UHQJ4lcXC3S1miaV\r\n+2oPLMX0ZRTuQ2kQ71EBB0KuWHN9PY/rovW12s0bq86IpelKdEzWIbSroNLN\r\n8u7IpMeOba5g3Lnvl8YNeQ2KqsH41oR0NGmc6dl2mQeqFWrqVEuRjBwQEaZ4\r\naS4V2W3bqL5cc5pRoAhQb7T+cfGp4gRZmsXGLOXjgxn+D360jIcujUiCgjfq\r\nNcGh4FFXJ1+Sb3kfB3qqBCTlzO8P/INNAfd0d3wf07alzDbCv4E+dxBfO9AE\r\n0C9MRYl/76+dBNaX7mt/NRwwnKGfAT+XFxY=\r\n=56Sv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ef754381c.0","@material/base":"15.0.0-canary.ef754381c.0","@material/shape":"15.0.0-canary.ef754381c.0","@material/theme":"15.0.0-canary.ef754381c.0","@material/animation":"15.0.0-canary.ef754381c.0","@material/elevation":"15.0.0-canary.ef754381c.0","@material/feature-targeting":"15.0.0-canary.ef754381c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.ef754381c.0_1682369453731_0.8034334384540307","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/menu-surface","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.69ebf61ea.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"ca015de88fd438fbba7511fdd861714646c6adba","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.69ebf61ea.0.tgz","fileCount":38,"integrity":"sha512-g+BZ9ffxc6zNR2WCPf+vXNQML5uFQnIokPBUoZpMkaKMnYNxVMtacOE17T+QJZ8bGB1q8Wf2lT54HIXrV765bw==","signatures":[{"sig":"MEUCIHvixXPDHVXS61NF1bqyBRTxskvQAOpJe0zTkc+Wgo8sAiEA9v/BZV1+A5ebZv17YNfOGTsIHn2gXJsOPTLiRwQrVhg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq8ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKTg/+OqWAy2mYnQz6ASSmypgzduSvSS1oBNdwdzavhSdFggbJm5Iz\r\nJD/2l0I5qR8UEEenzZCE9VlVf2Qc+RFM7IAqG7bHPpEsouU75IB1pSFWcZl5\r\nrU7ioOLYSqnRp72PhFZCB+Ne2FwbVwdnjU+X1CA4Xosy+kkwkzwAqZYXoG4a\r\nMAhUclChsYwpvKkv/4jhUxqg/X77JSIq63hOvT9O6XOWYFoE/WEMOuIJQBBx\r\nm6grp5O1qd6Hei2VDEoZKycpJ3ewNZsBVjeOiOtYoD5DaOkdDQVZ6dMJgDT6\r\n111K07RMNbhokXGWbYqoq6NTTDSobD0dUBuPjqqyZt5WTWzxzwhSukHzNH5a\r\n/aKwQTgULpYe22z1WJU3+OiuNeJKw0b9RrBCYKHONqkXsNjaQCM3m9Q3FisX\r\nARagDdMbcKmJ6kKhVH1y2Z3Q7HVjrB6711+Cfaw2L5zNFNYk2K4dt7ndm9lm\r\n6HWocSFm3pTr6FBR4JlN4F4c5YSGE/XvFZUyNr3qAr3aFvmuvaSFdZBpSRcy\r\nd07YTDAR3AP1omvvUJO/D46dw08jIAZSgb30COgqwIOi7itvtowlRv9yER8t\r\n2QKhxvwzF5aqYbM0ov9arELr4vCkntXoPsqzP/z2qjg1ttwUFQvgGFdK7wTZ\r\n4ErEzRW335u/mB328d4/sT48j06DBL4bSBE=\r\n=kVmN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.69ebf61ea.0","@material/base":"15.0.0-canary.69ebf61ea.0","@material/shape":"15.0.0-canary.69ebf61ea.0","@material/theme":"15.0.0-canary.69ebf61ea.0","@material/animation":"15.0.0-canary.69ebf61ea.0","@material/elevation":"15.0.0-canary.69ebf61ea.0","@material/feature-targeting":"15.0.0-canary.69ebf61ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.69ebf61ea.0_1682616088713_0.3261658972212196","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/menu-surface","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.b90be86de.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"46d27a061d32be658beb6f922cd640f638b317d1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.b90be86de.0.tgz","fileCount":38,"integrity":"sha512-IRKrOFtOKFgO4g/xqOIUPBeadPR6BOVoMvjJZ3tpvicuAGCfFH7gRqL5Pn6Gz+xB7866xROwVOtHA34FI2U5lg==","signatures":[{"sig":"MEUCIQDXoyf2Lo2UHC+owOl/Om064YR/gjXSM6aQabh4wbk1CwIgLnSFWooMhKYSW7b0YK5NT9l+C3N8qB9BVj3OcsR72fQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGMQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsaQ//bbzbyBftvrDhUQEgZWZt9tsE9E/xgwAnnCEb6zeF9xRSsMYr\r\nqfOvR1poQYueosytcQeetgm3A21wJL64j+DF1mPVmYVkM8pYDyUdYKaBO/lc\r\nv1b8I5hjqwpHb5D+46OsDjLTkz7y+kaDeL6sfcWBgcyD9pWcAil/h2oeipr3\r\n31XHzFlOyzF+WtiaaVc2hohNj8qltgLBKL6a8W0mYuWbANmVt+0KYpuZpVPR\r\nsiUPv1Lz3yxp8BHl7LyqIg01vHNCuAXdGAx0waPfx8e8YTkdwnqWg/2HMHBQ\r\n2Bo7IO/tRkxo22KX/9nS/NyUwNllwR4ol73T0sEilYUtWPZ6l2uHIkzDzC/2\r\nKY95I4z/H1mI0CrHQHHoO+JeGLqFPv2qdsKnF7t0sx1DG3IX4IYvYbeLkFdK\r\n6bU0NkvuvWalLNI4TeMZEOpi2H6vBirurisUQY9Z8jP3S734kTqf6EUu/5fD\r\nUzETlaqsbsDe207QxJQhVGZN4QQxud5U3HKIZlDz0liIv5DBnVY3zdXR8DLT\r\nqgwJ9G4uOCOEJwE3YOtUoDCem4uprVRP02ykZM6XLGDDUrtM3KLlkjbG3idi\r\ngs4VSC+OLuWNMCmI8mrba3kroFz7hFtO+yByU13AJf6VxMAR9qQVNTf48dV7\r\ntuRSrgjoeWpfIhmunrRhxUeP5pyQHu+VEv0=\r\n=DQn/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b90be86de.0","@material/base":"15.0.0-canary.b90be86de.0","@material/shape":"15.0.0-canary.b90be86de.0","@material/theme":"15.0.0-canary.b90be86de.0","@material/animation":"15.0.0-canary.b90be86de.0","@material/elevation":"15.0.0-canary.b90be86de.0","@material/feature-targeting":"15.0.0-canary.b90be86de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.b90be86de.0_1682727695501_0.24404360202767217","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/menu-surface","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.51f9c0c28.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"81abbe5e4c1e691bcb45a87d72e12ff9e0a0974c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.51f9c0c28.0.tgz","fileCount":38,"integrity":"sha512-aDGmwcZ2nI5E+gJ7jn7QrihJ2p33nU5EuKs9cpBZSmYZKm1wcfFcb2CR07ui1WBT/zaZ9CNaXnIdcJsKY76mSg==","signatures":[{"sig":"MEUCIQDWwC7u/sOjD5W/OKGkY3IxhE00lVCGiI9jRrNQj35YrwIgZOlKfCToQwDeDdgZ0Gf/yZsphZNeJSGZAV1jxFtJ+sY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGVZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9Xg//REDeyw3xL3Bgcj70BQ9tkohokQ08GPaDD0h6pcEKL4LD6JQK\r\nkAnl4qq+6TvtWqej66U5OMdQ4H5Hrt4rW9Paub0UjSxHsRGUZSn1EmJXokV/\r\n+fJpf9xwiS6lNZCAbfsvMZIgrmFwTKq1WMhNpAp6Y+aJsMmGjUfHcaIQrX+C\r\nke/mGkHFs0j2rwUKNSs+WSzWnO6hxrBu3kF2cmuTI1+ffAlUaDGKhA9n6CSz\r\n+PDY6BvM6GTl6lcU1yRULii8Af/l32Q43q6xG7tgD5ZrM0S+1KMemSJA2753\r\nNca7e/yP8u0jPvng9SY+HC5d3x09N3E+3Jg02BBNW73MmWKk4v+YlmdwN51R\r\nxYuqlLUr8OTtL5SEcgTa0+skeKDUiW5MKXz7ZoITFCC2MD0lJCTEcI8GsPoR\r\n58AsyqfCNcOCttoOKDoe4vz11IxwMKSQXLq93culOdsnBfiueCV6d7KQYTpE\r\ng2Y7uJqQfmAkQOWLuh+QQLJnNrcS+rDea7tcHd5jtwemXv9PdOy0RV87uKn9\r\naiBf19lLnY0IbvUKwVUue6jpL4LeLF5QQRy/QKorQ9sW7wRC5tUXrxc6YOZr\r\nNTaZqrvHM5OIClgetyZAxhBfBszpvrlK/cQQv9kMtJN7gZYsoE0nfSpWh/11\r\nrl/6XP0uWjerpdn6fRT7dP+DfL6ngNrFv08=\r\n=HbMa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.51f9c0c28.0","@material/base":"15.0.0-canary.51f9c0c28.0","@material/shape":"15.0.0-canary.51f9c0c28.0","@material/theme":"15.0.0-canary.51f9c0c28.0","@material/animation":"15.0.0-canary.51f9c0c28.0","@material/elevation":"15.0.0-canary.51f9c0c28.0","@material/feature-targeting":"15.0.0-canary.51f9c0c28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.51f9c0c28.0_1682728281177_0.5696642055694108","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/menu-surface","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.4e840d685.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"a48188f9cbe566fda9007739e9dd10c33f23da29","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.4e840d685.0.tgz","fileCount":38,"integrity":"sha512-hlJswKj0/amkikSZPc8Iu9IKDn+3LIW4uXpD3xmsWl7Ib7pVYw8L/5icAmWjhxsHE9wp/LT+YjnNl5/NiGJwbQ==","signatures":[{"sig":"MEYCIQCSu6LntGCRpwf8AGmZXkA0WYnxa1Rx8ByrEV0SdZV12AIhAKWNsX9ry5i8bDN+4t9GxEnfud3HVsjv4SlV4GLVzMY/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4e840d685.0","@material/base":"15.0.0-canary.4e840d685.0","@material/shape":"15.0.0-canary.4e840d685.0","@material/theme":"15.0.0-canary.4e840d685.0","@material/animation":"15.0.0-canary.4e840d685.0","@material/elevation":"15.0.0-canary.4e840d685.0","@material/feature-targeting":"15.0.0-canary.4e840d685.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.4e840d685.0_1683041610532_0.5881200141632925","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/menu-surface","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.10b8563e4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"dd1911785780eb3b04bcfbc710475dd6b153c775","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.10b8563e4.0.tgz","fileCount":38,"integrity":"sha512-ZmG4L9v5U8TuEFwSQ+GZSz7Z9IKUG1G/mMSRx0zZsf8sKLixN4uvI+2a3sBiqPFOZwab53bkaE35MsL9q1o3Mg==","signatures":[{"sig":"MEYCIQDn3B5TSbqalh/lcvjlQjGvdwl+f8bLB7QX49/XAnNCTwIhAPqnD7VUm+dKcA75KGR9k35UVfeDaQqxi6NrG1Y9/Xnj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUZ+8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3Gg/+Lby47GYpseb4whj+8m8gcKKVWnOlGHFdZKbrnqpSJua8NVCj\r\n+CRIUOb4zVbFRrBknCtgzexQK+ybgEB76PO0wTjN3hxJSoNfkSfu6KG1YR62\r\nKGNnUiHZ5WGvcc24KjLskn22s33+i9u7nErf+tFH7Gt/k7NUX07mSjczeEQp\r\nr0JhQbinyL9n39MeyNExjkiDHf4ZOEHU0VTTUG1Ij36+RqDaIHP2rAdGPRY7\r\nrJKC8r7O56edN1J0FlxMfsUBLdYq6UX67sCs1/vYD6ACFBAt6/wyDO7lDNEE\r\nZUW69zZKc29FVapYNmQ1VErrOFc77rdNGQGwJHLTcb9ZolM0HB9frxkfnbvw\r\nTBxpDh/y0wcAKQVy9ZbGR+jDOOIdNOoqxSHVOrwzL2xLJmBilp10URguOBRK\r\nEV3pBbC5Nc4nEHCHwlbVN2UVHBAuu+/kBtaO/3tAU+n9edd0SEP/x2xJVedf\r\nGwdVn0R8hm78Of1dKMpvanU80+d5RPlY6w06SmCXbSl6igLdgmMsy4/z/A3N\r\nubidZV/3+3Zd28D8Xl2b9T0W2ZESUJXn9bnfcmDPRvQUhe4tdyPDmfAA89Xx\r\n3M4JbZrElMKO54ZuWiiV/eIU+VBfsfIvFuDNgG9FZhF6+kgt5FK8WM7X4ajd\r\ni4rN5Nrs19Z0FisS1eVZH6rMKkR4qMFR07E=\r\n=L4tA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.10b8563e4.0","@material/base":"15.0.0-canary.10b8563e4.0","@material/shape":"15.0.0-canary.10b8563e4.0","@material/theme":"15.0.0-canary.10b8563e4.0","@material/animation":"15.0.0-canary.10b8563e4.0","@material/elevation":"15.0.0-canary.10b8563e4.0","@material/feature-targeting":"15.0.0-canary.10b8563e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.10b8563e4.0_1683070908217_0.6566147010131844","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/menu-surface","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.736b7fda4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"fd4c160e30250587101b099f9cb97d4df571267f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.736b7fda4.0.tgz","fileCount":38,"integrity":"sha512-QkXg0Do7IuNEd8Rmmd/wVgqwcT9/FX4+rXab6x/MsR3Ikr+vKlYCtT6JpNcNr/6AHGzBZcQe3YVz2JZL/uYtjg==","signatures":[{"sig":"MEQCIF+oCSwTWrf9SeAg2d4oh2CEPMZrRTszpjVv74e4UTyCAiADcEF55toFwkd80CJQQik24HgGP9aquSG7cY4AErwklQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnkiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNbxAAmLTu0K4g59rJxU48yBOWDye+No3XNGTWPrWMDKzmm+w9HPKs\r\nC1iU6SFxTLxlTUnbHxKEHq/01c0kLUfxn5+ewYQSJ7uQHvoos9WqRlM5Ihci\r\n2Qo4MOjNy/DysiE9I5zAD4SrMxOexp2C40I1mJJcIk0TAKt2oghgr/tSfDvK\r\nKpXAiQrNGBBdCBF0YG4tBIk5VcQj0kpxOOskHt9yBO76ni65TuMh56CIZy9c\r\nWAFdnSDDudyDAqw7ABOOXx5U0MVoe/OH04BMroSoFQARwKoX3wrw+O+mDKT4\r\nvubn1q3+r55nz+GaQrpCdRub+sru0Uxi9dHRaRxKBvlRKW9Q4r6KydEuenhw\r\n6nmK1+oxxrQ2GOwr35LUhnzL/FggI2IGOXTwKul1+MkhxHH90cq0X7PU1/Cf\r\nRxEDd467lSPKmdYmKBDfIyVmcJnCK26oH5mmf7AoHLwYb8X0XJ2BWpzMxSQD\r\nSizvmhkh+W1nmP6uxm346gHIVMnU4eUiexovQk/c3zk1p4N3PcMEs31ogx4g\r\nzzJ/zx5kSZ7JWpA5RCxWy6dppjcrrfAOFqSY86BtG4uSC42UmeE46uMO6fF7\r\n54Eu44MtkeH6Q0W60HrqhywAKjCgVJzBJgK61OLIwUZJQs522+zPhoELHr3t\r\nIzvOYKrSYomJmmUE6SkYxGa9f8Px/Np9QrU=\r\n=90Ot\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.736b7fda4.0","@material/base":"15.0.0-canary.736b7fda4.0","@material/shape":"15.0.0-canary.736b7fda4.0","@material/theme":"15.0.0-canary.736b7fda4.0","@material/animation":"15.0.0-canary.736b7fda4.0","@material/elevation":"15.0.0-canary.736b7fda4.0","@material/feature-targeting":"15.0.0-canary.736b7fda4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.736b7fda4.0_1683126562212_0.20134733187940634","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/menu-surface","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.0e533c5a1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"bb27fe7c1054c3c78e24df801c0f689b4195a11c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.0e533c5a1.0.tgz","fileCount":38,"integrity":"sha512-LQO0AYRHeI+4bJPE4d+egqwvFqQemXcZprhyGRTcF+h/K7+zjD4ceBxkEjCfeGUI9K8xLOcjFXCUfWX+AhUT2w==","signatures":[{"sig":"MEUCIDdEn7mF4KAX23Z8Ox+hTvg6IvHoZ/WWkHsJcvbXbYhsAiEA7CXiIPyZSBybxXOeFZ/6HgLHQxLkXH/3kWvF/X0BfdU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0e533c5a1.0","@material/base":"15.0.0-canary.0e533c5a1.0","@material/shape":"15.0.0-canary.0e533c5a1.0","@material/theme":"15.0.0-canary.0e533c5a1.0","@material/animation":"15.0.0-canary.0e533c5a1.0","@material/elevation":"15.0.0-canary.0e533c5a1.0","@material/feature-targeting":"15.0.0-canary.0e533c5a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.0e533c5a1.0_1683305767270_0.26308070682107965","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/menu-surface","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.5f01c15a2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"f851417eb36ea9828a27fb90cf6711a4fdd3749e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.5f01c15a2.0.tgz","fileCount":38,"integrity":"sha512-ld+j1MDGsTW9idtetl6ae+OB6d0tzfkLozfEqTc1b8Q5M8w5/mrnaTH0VZlMkbhNhw+2WIw4mqq2tsrwKPZTDg==","signatures":[{"sig":"MEQCIALJ8itDaP9yFqWbU3nDPu59/iTzOmb74qHXRWB3KLGTAiA/5/QVorsoKF2Nq2at/9TX3bogWCrrkx5d4RgRE8JDQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5f01c15a2.0","@material/base":"15.0.0-canary.5f01c15a2.0","@material/shape":"15.0.0-canary.5f01c15a2.0","@material/theme":"15.0.0-canary.5f01c15a2.0","@material/animation":"15.0.0-canary.5f01c15a2.0","@material/elevation":"15.0.0-canary.5f01c15a2.0","@material/feature-targeting":"15.0.0-canary.5f01c15a2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.5f01c15a2.0_1683307574766_0.415002690234874","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/menu-surface","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.3b5b55e31.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"2e2a7d55982dde1d334bb85f5eff973f3ded7ee0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.3b5b55e31.0.tgz","fileCount":38,"integrity":"sha512-GPJeWN0dbB8kDyRpD3kAeYU7DbJPVK0B4zR35K5snKRZZ1V6uTYQfdeCjzZgSU5ivfH4/jxGS9NK/7SnVykOxg==","signatures":[{"sig":"MEUCIEZn9ryEV/+kEJxydbWbF1ehqw7KM7DUA+7/3sdWl5DbAiEA7h2lpo5Kd5T+wnM8j0SGYXwmVRaSPxRzL4BPMyz7USc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3b5b55e31.0","@material/base":"15.0.0-canary.3b5b55e31.0","@material/shape":"15.0.0-canary.3b5b55e31.0","@material/theme":"15.0.0-canary.3b5b55e31.0","@material/animation":"15.0.0-canary.3b5b55e31.0","@material/elevation":"15.0.0-canary.3b5b55e31.0","@material/feature-targeting":"15.0.0-canary.3b5b55e31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.3b5b55e31.0_1683311947113_0.6606042206117204","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/menu-surface","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.d0788120f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"43468305047c1a807ce33cde7091cb7ed4e3eceb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.d0788120f.0.tgz","fileCount":38,"integrity":"sha512-qZQeXnfNTHrjuGfr0Ejhrqy1LFtBEeVrJs+BhhSb+DRYF/X12pGxpG5jTmfq+9BNu1JTm4FlIsZ5sCbU9bQNqQ==","signatures":[{"sig":"MEYCIQC52alQ1Rdw5JBZ4s6RNQK0zc2he1RzYsTU9SWGQXHzzwIhAOPVU52pF3UGHHn1cLbhxG+Rjp+rWvdOFua8/3YUv4HK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d0788120f.0","@material/base":"15.0.0-canary.d0788120f.0","@material/shape":"15.0.0-canary.d0788120f.0","@material/theme":"15.0.0-canary.d0788120f.0","@material/animation":"15.0.0-canary.d0788120f.0","@material/elevation":"15.0.0-canary.d0788120f.0","@material/feature-targeting":"15.0.0-canary.d0788120f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.d0788120f.0_1683620578736_0.1967362515070472","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/menu-surface","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.f52358dd0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"569c504e0cd0d0e6aff2be08b7f22128fbe233e3","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.f52358dd0.0.tgz","fileCount":38,"integrity":"sha512-v2ioaFNpdJP+MxCCfTDPg6zUk7nQX2qOjez/wX5HXlgzvBRbzdDr1GivP1qrcEo9ae+2iTCZ9aSvjN+2wu64fg==","signatures":[{"sig":"MEUCIQDeZzGDQGqi9YDdIXdjan3JMJ43pBEQsteFDu9eZXDsEQIgaACyENssbjeY0Zxiax/doXOu5I9QHvGxcwv9mlGPEQY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f52358dd0.0","@material/base":"15.0.0-canary.f52358dd0.0","@material/shape":"15.0.0-canary.f52358dd0.0","@material/theme":"15.0.0-canary.f52358dd0.0","@material/animation":"15.0.0-canary.f52358dd0.0","@material/elevation":"15.0.0-canary.f52358dd0.0","@material/feature-targeting":"15.0.0-canary.f52358dd0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.f52358dd0.0_1683901823195_0.0061586161558861985","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3c3fbaa3.0":{"name":"@material/menu-surface","version":"15.0.0-canary.d3c3fbaa3.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.d3c3fbaa3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"9311036e4a11120fd3a9c84d392f8d9c65cdc295","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.d3c3fbaa3.0.tgz","fileCount":38,"integrity":"sha512-zJQ81yBSj6bUtsB5RkO8IAsSpqj9PFNlfwQpq81TbuktoXLb7vM5/lBYLaHIZHyd+PQbLNs4rm28w67THOMiIQ==","signatures":[{"sig":"MEQCIGSrmRmXbmggvZ8cYu8W5mmxH6dr9Iv9xCb6wcbvrdu9AiBQKyuALQtRkIZC99PucKnN4WZ2tHXrB5A1FgSbY242vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","gitHead":"3b7f31c254605439f8fef56301c46f7bcbf3a9fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-menu-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d3c3fbaa3.0","@material/base":"15.0.0-canary.d3c3fbaa3.0","@material/shape":"15.0.0-canary.d3c3fbaa3.0","@material/theme":"15.0.0-canary.d3c3fbaa3.0","@material/animation":"15.0.0-canary.d3c3fbaa3.0","@material/elevation":"15.0.0-canary.d3c3fbaa3.0","@material/feature-targeting":"15.0.0-canary.d3c3fbaa3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.d3c3fbaa3.0_1683914451571_0.7401826623710717","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/menu-surface","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.576d3d2c8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"a7ac9d400aa0a7b673887ba6e8f9692e48356630","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.576d3d2c8.0.tgz","fileCount":38,"integrity":"sha512-BLTOgfVR96uRE5vvXy+ZO7A/NgzMjT7YhxRbODYv+vSi46Gmdyx09GQcOKMUZspat9vNRqh/AYSXpJ6j5E9U2w==","signatures":[{"sig":"MEUCIFaWuHJgb+egJkWErXtc7ZMmtJZLcYZ5QD86cfc6TRfjAiEAuf2J7RtoR4GuI5b96jZPRqOvL0vP0JdUWPolevEKXNQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.576d3d2c8.0","@material/base":"15.0.0-canary.576d3d2c8.0","@material/shape":"15.0.0-canary.576d3d2c8.0","@material/theme":"15.0.0-canary.576d3d2c8.0","@material/animation":"15.0.0-canary.576d3d2c8.0","@material/elevation":"15.0.0-canary.576d3d2c8.0","@material/feature-targeting":"15.0.0-canary.576d3d2c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.576d3d2c8.0_1684202398103_0.008454883038092165","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/menu-surface","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.19bb36a46.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"124fb0bacab7f8e0a2cb980d8a30018562923e43","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.19bb36a46.0.tgz","fileCount":38,"integrity":"sha512-pwK2QRpbgBPPAforPMMYqcABQxEJkiltH7yLvKzFmqsVEyXOaWziDJj5IcDB4vbBjQ6kTq75LilIU7+SIPkuXw==","signatures":[{"sig":"MEYCIQDS3LDZFDOQAjAFr5mV4ZY5AftyhkXpWBL7v3XtTF5VygIhAPmCcj4pUjkY2V2V9urfLm0iTpsXfVS3MjBROwUtvjDm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.19bb36a46.0","@material/base":"15.0.0-canary.19bb36a46.0","@material/shape":"15.0.0-canary.19bb36a46.0","@material/theme":"15.0.0-canary.19bb36a46.0","@material/animation":"15.0.0-canary.19bb36a46.0","@material/elevation":"15.0.0-canary.19bb36a46.0","@material/feature-targeting":"15.0.0-canary.19bb36a46.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.19bb36a46.0_1684266838004_0.698149427535522","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/menu-surface","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.aa5ac7fe5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"c05444f6ffae1762435e3c64d2857eaec0cf9011","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":38,"integrity":"sha512-vF0nBf+x6Zi8fENXr4iqLu9WSVwvANUKT6Hs7QZml0w+x5Anr9qJ9fQyKlvkHGMcrY1BnCzwsE6aN3/Zxy8Eyg==","signatures":[{"sig":"MEUCIQDytUt1tCdyHHhOQpCy1K3Y+n89byMOy3NlXigrLbADwQIgKSQIf03FP1r2H034gzGMUW+emEtciD9jKEsgJ2r0R1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.aa5ac7fe5.0","@material/base":"15.0.0-canary.aa5ac7fe5.0","@material/shape":"15.0.0-canary.aa5ac7fe5.0","@material/theme":"15.0.0-canary.aa5ac7fe5.0","@material/animation":"15.0.0-canary.aa5ac7fe5.0","@material/elevation":"15.0.0-canary.aa5ac7fe5.0","@material/feature-targeting":"15.0.0-canary.aa5ac7fe5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.aa5ac7fe5.0_1684776325084_0.05479066884214001","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/menu-surface","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.90291f2e2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"629cc83b7ef9edb32c05062bd7904d692808b08a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.90291f2e2.0.tgz","fileCount":38,"integrity":"sha512-AkRpOjFOJi2ROZPvFo1z8ik61eEyJEew8NuvlzCE4S3BX/RNFrYVh4W5ylo030S01ALCS5zhVOeekxa/4eokZA==","signatures":[{"sig":"MEUCIGqVqXHs/j6n3zcfGvy0SE75fvBY6zOnn+XmRsa0K9ovAiEAwe+5sejWmmi1aQtKfyhEUDGvrh41+LUlsnn3Lwoz0K0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.90291f2e2.0","@material/base":"15.0.0-canary.90291f2e2.0","@material/shape":"15.0.0-canary.90291f2e2.0","@material/theme":"15.0.0-canary.90291f2e2.0","@material/animation":"15.0.0-canary.90291f2e2.0","@material/elevation":"15.0.0-canary.90291f2e2.0","@material/feature-targeting":"15.0.0-canary.90291f2e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.90291f2e2.0_1684863756611_0.5043495483477365","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/menu-surface","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.446734f27.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"fa0daca7348e61cf380849abfa41d8724b708f53","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.446734f27.0.tgz","fileCount":38,"integrity":"sha512-iIOnEyP/d4EKcVoXQw780pyWJE7A2qCzYgCGDiGgTZxGhjk7iClTU0NFkKGJw51U8cYsE50pQy6AbamPnM+7rw==","signatures":[{"sig":"MEUCIQClPh8raMMi5k0VqxrOFj09UfPHMRZW0/zahMJliDcslQIgcfr4WTth58DvfmuymonuyOxSX4308W0/7cZeY9o3m/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.446734f27.0","@material/base":"15.0.0-canary.446734f27.0","@material/shape":"15.0.0-canary.446734f27.0","@material/theme":"15.0.0-canary.446734f27.0","@material/animation":"15.0.0-canary.446734f27.0","@material/elevation":"15.0.0-canary.446734f27.0","@material/feature-targeting":"15.0.0-canary.446734f27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.446734f27.0_1685483292286_0.2833486018122269","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/menu-surface","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.19de312d8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"edb0db50332273bce81e387aa12ff9d7a4e10f84","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.19de312d8.0.tgz","fileCount":38,"integrity":"sha512-Hnb/pKYkCRNH3Y/nX3xGiShJNOJ5fhV04afWvHcFBNxqqAIiwPngCIVi/G/9CtEDk7wJA60pZUXj5swDPiv90A==","signatures":[{"sig":"MEUCIFDslMVWaJmn/DZF2d+tzeYT4hTQeXzOSU0/eR09Ed0FAiEAyXWUyCmZDcMyzqXmAvBnLwxD9Q/RJf6xmAllYwu3khE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.19de312d8.0","@material/base":"15.0.0-canary.19de312d8.0","@material/shape":"15.0.0-canary.19de312d8.0","@material/theme":"15.0.0-canary.19de312d8.0","@material/animation":"15.0.0-canary.19de312d8.0","@material/elevation":"15.0.0-canary.19de312d8.0","@material/feature-targeting":"15.0.0-canary.19de312d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.19de312d8.0_1686071898604_0.7142096737264332","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/menu-surface","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.6081d829b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"4d3c1e6beb3c236f2a02df22cd142970d3afa354","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.6081d829b.0.tgz","fileCount":38,"integrity":"sha512-ULhrO6l3nufXarGoeptvIwY/WXOXP57VCVvSNLYrzMMVLVEb03N41lKMPeF/4Nly8qZ5yVCvcdWXLRuYFkaHvA==","signatures":[{"sig":"MEUCIBm9+NMPSGlJrutybFGsRRb8AfPuS5CybqnueKzlJG3tAiEA9fWvdJD38NJGPzaB8pNr0eRjABYOp8xjvJcbTreWsCw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6081d829b.0","@material/base":"15.0.0-canary.6081d829b.0","@material/shape":"15.0.0-canary.6081d829b.0","@material/theme":"15.0.0-canary.6081d829b.0","@material/animation":"15.0.0-canary.6081d829b.0","@material/elevation":"15.0.0-canary.6081d829b.0","@material/feature-targeting":"15.0.0-canary.6081d829b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.6081d829b.0_1686100437357_0.21128901938532985","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/menu-surface","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.b26c34a68.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"6a8677213ae61e9760b81629234168896f2bc052","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.b26c34a68.0.tgz","fileCount":38,"integrity":"sha512-hGnAk3D+jYxPIE0v6KSE4OlPSDHbUOQ+GCEXvYYMw7j1uElmw2B+zIdbTBjdfJhzkd2p/nG6JJBLBbPyTEhofw==","signatures":[{"sig":"MEUCIQCxt40eKnRXMZx9kUSjdfJeWwH5PHUz7LRFxgYuLDbjSwIgftP4Tb+rq2rcX61UXN6zaV4LCe0Fod+wqoqpa//O6YM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b26c34a68.0","@material/base":"15.0.0-canary.b26c34a68.0","@material/shape":"15.0.0-canary.b26c34a68.0","@material/theme":"15.0.0-canary.b26c34a68.0","@material/animation":"15.0.0-canary.b26c34a68.0","@material/elevation":"15.0.0-canary.b26c34a68.0","@material/feature-targeting":"15.0.0-canary.b26c34a68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.b26c34a68.0_1686169089712_0.42475979080549453","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/menu-surface","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.4fe911371.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"d182a75b205967f25c6194403e97ac9f43f054ff","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.4fe911371.0.tgz","fileCount":38,"integrity":"sha512-s3cdx82WHVjUk2Uz5d2qKolRqLXWcZttsPw9i4KrxpLVP9JMUg7xIfR+m8qsfAnIUnmFtlIQ0KSBilHEzejDng==","signatures":[{"sig":"MEUCIHehyqFnTqBrQDTMKlWQARr4H01PTmtRKBgfeYZ4M97kAiEAkO2uQdTIHdVO1hJo1DPfWG1ib0O6JXHIuX/d67kouTI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4fe911371.0","@material/base":"15.0.0-canary.4fe911371.0","@material/shape":"15.0.0-canary.4fe911371.0","@material/theme":"15.0.0-canary.4fe911371.0","@material/animation":"15.0.0-canary.4fe911371.0","@material/elevation":"15.0.0-canary.4fe911371.0","@material/feature-targeting":"15.0.0-canary.4fe911371.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.4fe911371.0_1686179155316_0.4940047539543726","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a9ff9866f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"f8cf811fc549d4e7662a14ca30f6fc8c0d6f2511","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a9ff9866f.0.tgz","fileCount":38,"integrity":"sha512-ffyXPHw0wqrh5E+pl5/w6ZxYgLVoJRVYEhBDrExeMRZdZV4aAimW92PGHzOzB6UGqYhA++1wGdJgLnq7hRwn1g==","signatures":[{"sig":"MEQCIHy5r+lgCLCaQ6wjF0/8K7LPnrS9KflLa9qI3gEZOkqnAiBcpBzejatJyXRpBFEnU5QFjMQOcvsgqsN54hm4rNPZyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a9ff9866f.0","@material/base":"15.0.0-canary.a9ff9866f.0","@material/shape":"15.0.0-canary.a9ff9866f.0","@material/theme":"15.0.0-canary.a9ff9866f.0","@material/animation":"15.0.0-canary.a9ff9866f.0","@material/elevation":"15.0.0-canary.a9ff9866f.0","@material/feature-targeting":"15.0.0-canary.a9ff9866f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a9ff9866f.0_1686656288867_0.41596363821259974","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/menu-surface","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.b994146f6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"9537b6bf8b8499311d82cb39b1367f03ab7b73a2","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.b994146f6.0.tgz","fileCount":38,"integrity":"sha512-StmM3lrRn1iMEZfq532jpMNppqyBBy68FbPurKEsHuP/3q+CscfnwjrS9ym+JcHqXKMHnQXbL/49ymffRGX2AQ==","signatures":[{"sig":"MEQCIEgak8Yl3Kw/dZxTNjDDaEG7uiih2KZJNli3GaZDAuz4AiBPPeO/uj7OBSX5qyUVWqsOXCbUu/yAGZOT9dMmRRPiSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b994146f6.0","@material/base":"15.0.0-canary.b994146f6.0","@material/shape":"15.0.0-canary.b994146f6.0","@material/theme":"15.0.0-canary.b994146f6.0","@material/animation":"15.0.0-canary.b994146f6.0","@material/elevation":"15.0.0-canary.b994146f6.0","@material/feature-targeting":"15.0.0-canary.b994146f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.b994146f6.0_1686776623924_0.5162240587981739","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/menu-surface","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.1fb4b1a06.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"f84e8ec9a7cb1c03fef703745b83750c10ce31ca","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":38,"integrity":"sha512-DmltXo91IEjwWB0aY65jXv152EYEakm0wb1PiRd9LXWLilgMr00aYPlS0yonq5x9av+QqsonA4TI6tLNSubr+w==","signatures":[{"sig":"MEYCIQD2tI942rWhw3eIeYWikKP4oi1OKzNb+P3Kw9x13iuYhwIhAPq29flLvGsM583J5G/iCSg/NfzXg1XS+r0KoksI6dqQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1fb4b1a06.0","@material/base":"15.0.0-canary.1fb4b1a06.0","@material/shape":"15.0.0-canary.1fb4b1a06.0","@material/theme":"15.0.0-canary.1fb4b1a06.0","@material/animation":"15.0.0-canary.1fb4b1a06.0","@material/elevation":"15.0.0-canary.1fb4b1a06.0","@material/feature-targeting":"15.0.0-canary.1fb4b1a06.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.1fb4b1a06.0_1687892226437_0.08152183160141546","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/menu-surface","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.c64a2776e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"0845c8146c6abfa09829c41e778ae98d9599ea30","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.c64a2776e.0.tgz","fileCount":38,"integrity":"sha512-hll5lYkU/49/pBKY0WPrtui5ZxrBEfbnhHdKI1KlVn2LjTwEWLDHOEfIMvVnKslaD9FVy7hjHPgUbtAnIp8/5w==","signatures":[{"sig":"MEUCIQDYRxnuoAs8qrF5dSBlHa47B3UE5zMAP8XgjV9VcqxefQIgDEmSYlaAupJ+mCev9lG64AeGHGA4S4Uc96CoUHSL8xU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c64a2776e.0","@material/base":"15.0.0-canary.c64a2776e.0","@material/shape":"15.0.0-canary.c64a2776e.0","@material/theme":"15.0.0-canary.c64a2776e.0","@material/animation":"15.0.0-canary.c64a2776e.0","@material/elevation":"15.0.0-canary.c64a2776e.0","@material/feature-targeting":"15.0.0-canary.c64a2776e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.c64a2776e.0_1687896987666_0.4623074315722906","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/menu-surface","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.b05d9eb7c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"fd71464d30ad5289410155f8d66711471d61f122","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":38,"integrity":"sha512-iyhip5GLtjZOKgPuQqvZQHXf3ZVHKg1FjpX3xyNFQNee5QsZeS/L+a4pg+mzR9yauwW93Lm2Y8LbSYFTWI5vLA==","signatures":[{"sig":"MEUCIC3XA6un9NFcxN+a4YNtM7EIYlGoImx0NcTdfZgW5XBIAiEA54iAN3yXqQusmu3qbEw/oKDoR1IVMaPcTf9aoRv3/q0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b05d9eb7c.0","@material/base":"15.0.0-canary.b05d9eb7c.0","@material/shape":"15.0.0-canary.b05d9eb7c.0","@material/theme":"15.0.0-canary.b05d9eb7c.0","@material/animation":"15.0.0-canary.b05d9eb7c.0","@material/elevation":"15.0.0-canary.b05d9eb7c.0","@material/feature-targeting":"15.0.0-canary.b05d9eb7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.b05d9eb7c.0_1688055818820_0.6999986141111076","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/menu-surface","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.2a9697dc5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"38fac4c683a17ca1d6f650b713f448bf728c477a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.2a9697dc5.0.tgz","fileCount":38,"integrity":"sha512-gb92a98Wdo0MCwJHNHhDjN6kIiUl6GVXYRhRU6VK0+aSqizF8NggkMEfotrDhOfRI3qpyuGK1sjHh66xQcDlPg==","signatures":[{"sig":"MEUCIQDW0gYjgK+pq3mt9wzEVrvypp/cWkI6MZRzzLCNo+MewQIgIRM0hFqv04wOE95uS9q69qmU/55OiYvykxPffsLZ9jE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2a9697dc5.0","@material/base":"15.0.0-canary.2a9697dc5.0","@material/shape":"15.0.0-canary.2a9697dc5.0","@material/theme":"15.0.0-canary.2a9697dc5.0","@material/animation":"15.0.0-canary.2a9697dc5.0","@material/elevation":"15.0.0-canary.2a9697dc5.0","@material/feature-targeting":"15.0.0-canary.2a9697dc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.2a9697dc5.0_1688163231610_0.16271059513100927","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/menu-surface","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.0c52adeab.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"dcca4d892701c4fd549cc9a610255d97c5e04d28","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.0c52adeab.0.tgz","fileCount":38,"integrity":"sha512-RHWQiq6wYtcN36TereasAtusbDqhxWYS+Dl4FMdDPcCx2Ht2neDAretmLgZnJur3Hrftq1+5zNYeelM1b/zjSw==","signatures":[{"sig":"MEQCIBcXs12Kt1r0Hxj7wcc+xXG+njKoMv/iUYwW6wI5RTZKAiBUoa3vn1XQj3SmSWhL9GLSys49bJrSQq7GFLmISjgKYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0c52adeab.0","@material/base":"15.0.0-canary.0c52adeab.0","@material/shape":"15.0.0-canary.0c52adeab.0","@material/theme":"15.0.0-canary.0c52adeab.0","@material/animation":"15.0.0-canary.0c52adeab.0","@material/elevation":"15.0.0-canary.0c52adeab.0","@material/feature-targeting":"15.0.0-canary.0c52adeab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.0c52adeab.0_1688574344127_0.9071011034521297","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/menu-surface","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.83355c322.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"25eaf9c854943d1017a8e8e0da4880a356d3a73e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.83355c322.0.tgz","fileCount":38,"integrity":"sha512-Qzx7jPVVkNMwB04SjfO2QTW6TZ1pcS+2f8xsEEzJAV3Bnb3k95LVDxGk+18YBosE4vBFfrJM2yRmfLmP3BJsCQ==","signatures":[{"sig":"MEUCIQDQaEXNCehwjQG0mM3xAzSA0RLyW19zEvJimo0qndfkYQIgXJCI67KdgPfSmp1H/OG1ig8Cjrlf2ClpA5eDRM1j4OU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.83355c322.0","@material/base":"15.0.0-canary.83355c322.0","@material/shape":"15.0.0-canary.83355c322.0","@material/theme":"15.0.0-canary.83355c322.0","@material/animation":"15.0.0-canary.83355c322.0","@material/elevation":"15.0.0-canary.83355c322.0","@material/feature-targeting":"15.0.0-canary.83355c322.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.83355c322.0_1689001530327_0.5838509225472832","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/menu-surface","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.bc9ae6c9c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"213cc9b251e626c54e1f799b3b52d74659b3c549","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":38,"integrity":"sha512-dMtSPN+olTWE+08M5qe4ea1IZOhVryYqzK0Gyb2u1G75rSArUxCOB5rr6OC/ST3Mq3RS6zGuYo7srZt4534K9Q==","signatures":[{"sig":"MEYCIQCgPEF4Q+oo9W+HJi2HEFiuVrIkzwQrF1WnKWjRg2PNPwIhAP/tDb86Mdh+ez+pKjTB6fYCQxiwx09O8G2k69kDSHNt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bc9ae6c9c.0","@material/base":"15.0.0-canary.bc9ae6c9c.0","@material/shape":"15.0.0-canary.bc9ae6c9c.0","@material/theme":"15.0.0-canary.bc9ae6c9c.0","@material/animation":"15.0.0-canary.bc9ae6c9c.0","@material/elevation":"15.0.0-canary.bc9ae6c9c.0","@material/feature-targeting":"15.0.0-canary.bc9ae6c9c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.bc9ae6c9c.0_1691097650260_0.7616857533858614","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/menu-surface","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.3c44cd956.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"35bec28965fb1b45d23a863bca941a93a07744cb","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.3c44cd956.0.tgz","fileCount":38,"integrity":"sha512-Vb5ksDhSLyVRV2XMLXzhOLQ7yTDnUlkVevb7iaYNqTjldptmCDbLjNgH2uHMqMQ76yMDuldARa+p1V1oxMMW+w==","signatures":[{"sig":"MEQCIEpmWog/djQE2CG5yo4ZKhKBfIxMHm0AtRozSV/pML5jAiA8vV3yv1Fn9mXVLZuBSAkLLceNYInyO3wE1kvdFBBzAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3c44cd956.0","@material/base":"15.0.0-canary.3c44cd956.0","@material/shape":"15.0.0-canary.3c44cd956.0","@material/theme":"15.0.0-canary.3c44cd956.0","@material/animation":"15.0.0-canary.3c44cd956.0","@material/elevation":"15.0.0-canary.3c44cd956.0","@material/feature-targeting":"15.0.0-canary.3c44cd956.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.3c44cd956.0_1691430432706_0.023230237892000183","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/menu-surface","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.02702296e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"52027757f6cd51d73f577382f80d2e2fa7cef874","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.02702296e.0.tgz","fileCount":38,"integrity":"sha512-+lIJuWA367wEsHOn0TentbwZPG+ZvEzc0Sh7CaMA1brfy05mdqSuZ4BbG8xMMYGSi/CRK99YDyQN2kSi1Wl7Ig==","signatures":[{"sig":"MEUCIQDVY+R6dPgdl1s+jkjyCppGGQRoungEz5ti9Ungy3+fawIgem8E/JdkQGxapYPu7XEPT8iQJ8OdV4izJx8Zed1IFaw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.02702296e.0","@material/base":"15.0.0-canary.02702296e.0","@material/shape":"15.0.0-canary.02702296e.0","@material/theme":"15.0.0-canary.02702296e.0","@material/animation":"15.0.0-canary.02702296e.0","@material/elevation":"15.0.0-canary.02702296e.0","@material/feature-targeting":"15.0.0-canary.02702296e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.02702296e.0_1692965094998_0.3482249261358019","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/menu-surface","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.872b65832.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"b4140db4dad836e1debe0280b42a9df42c646866","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.872b65832.0.tgz","fileCount":38,"integrity":"sha512-AwXY9CGE2BQ/IzS4mYuZJNHk7yrX87WDiEII2WjCecwOfWOqjqXEJQQxu2aIMtIKNhJSQCEGjsdWbhuMgxjuYA==","signatures":[{"sig":"MEYCIQD7Am0rJih8g0jwWDUAoncEYFFfoV59f+dEXoCHWiBn/QIhAIctdy8F8GfM0aGZUZx/pl43bRhCn3iLUg5sHITLj2Ov","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.872b65832.0","@material/base":"15.0.0-canary.872b65832.0","@material/shape":"15.0.0-canary.872b65832.0","@material/theme":"15.0.0-canary.872b65832.0","@material/animation":"15.0.0-canary.872b65832.0","@material/elevation":"15.0.0-canary.872b65832.0","@material/feature-targeting":"15.0.0-canary.872b65832.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.872b65832.0_1693397597464_0.8775237720982294","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/menu-surface","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.89b2e4122.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"95be7f8f436f5dd3e854a2a63f459b37063eb716","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.89b2e4122.0.tgz","fileCount":38,"integrity":"sha512-C9F0ywfq6T+Uz9JYkKN1tB9xwoCo3BeI2KxHlzajZWJu/71+soXMH+POE/GwV9LWmAzi+NYfR8cnTW/UkcAYsA==","signatures":[{"sig":"MEYCIQCCGXl4jOlv0dckA/8yoKEwMFtx8xxVPzS0TrnRJYwKjAIhAPDYMcJlih2yd8CBQy7TcAcvVXEKv89+6jOCpOfnetxA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.89b2e4122.0","@material/base":"15.0.0-canary.89b2e4122.0","@material/shape":"15.0.0-canary.89b2e4122.0","@material/theme":"15.0.0-canary.89b2e4122.0","@material/animation":"15.0.0-canary.89b2e4122.0","@material/elevation":"15.0.0-canary.89b2e4122.0","@material/feature-targeting":"15.0.0-canary.89b2e4122.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.89b2e4122.0_1693498003739_0.8553557091974522","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/menu-surface","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.7a3942e7a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"1c41518e4ef3c2647424f04fb3b1530b074e59ba","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.7a3942e7a.0.tgz","fileCount":38,"integrity":"sha512-OK0my4HvMAaYQg24+RZ/MRYh+iZ03RtQqBwvJJKV+6+IVQGDsFmUZtbrh+dwZD0kiM+Q3VBM52FOP1TqkBQHoQ==","signatures":[{"sig":"MEYCIQCxCxFLqEca8XsJRrlXEs4cBVDYBmRXqkqC98r+HsKB6AIhAP0omjtHlplAeN7RDQu3CAxUSlC2r3wqf/FU0hgQO3z0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7a3942e7a.0","@material/base":"15.0.0-canary.7a3942e7a.0","@material/shape":"15.0.0-canary.7a3942e7a.0","@material/theme":"15.0.0-canary.7a3942e7a.0","@material/animation":"15.0.0-canary.7a3942e7a.0","@material/elevation":"15.0.0-canary.7a3942e7a.0","@material/feature-targeting":"15.0.0-canary.7a3942e7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.7a3942e7a.0_1693507180374_0.8160850869388481","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/menu-surface","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.54feb3020.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"0a8019640a77e6058188aac8c41f0fab7d6fb845","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.54feb3020.0.tgz","fileCount":38,"integrity":"sha512-W6AkUi7ivjcNj4i0RldPbQ5mwiiYO1CrsgeAenDYAmaHFvvD1saj9UvTXXcUtPMnP/S69UUB72cg4h4dsSMroA==","signatures":[{"sig":"MEUCIC+HvtHxzmBAetNIjRv2c+vMtCyPeAtMDq0wzf1KBOzqAiEAx66mxLsvw6OVLtrGPFDvgCgq7zUCsuQ+tt+iYrXUliU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.54feb3020.0","@material/base":"15.0.0-canary.54feb3020.0","@material/shape":"15.0.0-canary.54feb3020.0","@material/theme":"15.0.0-canary.54feb3020.0","@material/animation":"15.0.0-canary.54feb3020.0","@material/elevation":"15.0.0-canary.54feb3020.0","@material/feature-targeting":"15.0.0-canary.54feb3020.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.54feb3020.0_1694466302361_0.6981919160784962","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/menu-surface","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.6cda3ce8d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"97d3889a2893bcb0fafc9777ce3f0e5a1fb4efbe","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":38,"integrity":"sha512-e4gLawXt9VbSB3qKo5Bk+KTekWtzdbLDuZ+wvN3mLyz2IvQJauIjWRZ+4XWRoN4tveESeKoVTV2waajk24dvOw==","signatures":[{"sig":"MEQCICouX5zgW7udxB3EAmA+ByLliyrSbLM+TuKdAhfUx4UjAiAg9B5jB7vvVCrTEJr7yPIWbGckQ/Hf3uXENvTQfAV1Vg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6cda3ce8d.0","@material/base":"15.0.0-canary.6cda3ce8d.0","@material/shape":"15.0.0-canary.6cda3ce8d.0","@material/theme":"15.0.0-canary.6cda3ce8d.0","@material/animation":"15.0.0-canary.6cda3ce8d.0","@material/elevation":"15.0.0-canary.6cda3ce8d.0","@material/feature-targeting":"15.0.0-canary.6cda3ce8d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.6cda3ce8d.0_1694483098004_0.1712735701943766","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/menu-surface","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.205b20b36.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"1b97b8b9aca95e79ef421acba3289501aaa2d0ca","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.205b20b36.0.tgz","fileCount":38,"integrity":"sha512-EqJtzwTy52k3IUwPAU3djM1aWJKnXMlHBCTtNJ4oGFP0CSYfktXgz97H/+b3zy403PbVDEND7IEuaBrIBqjYvg==","signatures":[{"sig":"MEUCIBMyfc04HXdz550rtmxBM09UsVgUi7YMN7wq7JmXqwf1AiEAj2NGckWIqEiZkwpnEA29lkP+1X6xnpabkm6CMr+bQqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.205b20b36.0","@material/base":"15.0.0-canary.205b20b36.0","@material/shape":"15.0.0-canary.205b20b36.0","@material/theme":"15.0.0-canary.205b20b36.0","@material/animation":"15.0.0-canary.205b20b36.0","@material/elevation":"15.0.0-canary.205b20b36.0","@material/feature-targeting":"15.0.0-canary.205b20b36.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.205b20b36.0_1694625408076_0.7664453040567631","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/menu-surface","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.22bf82024.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"75ba229e1930002b54d29e50bf325da5d3d850da","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.22bf82024.0.tgz","fileCount":38,"integrity":"sha512-wcXbGkdIs97jdTHkdj/aVvJHytC7bWtiI+AO6m1bbU6wOp4FN18IG7qE1S9kNnqBp07f5ILi6APRkdjsOoAkWQ==","signatures":[{"sig":"MEUCIBdqXnDZfdmuHPY2PGjI+5y6ZTp4vXGt88qCuM2KNUgnAiEAuwOY2k4PgB1DRozqk7+cbbezY1NdYmZwYeGYomC2PpM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":683937},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.22bf82024.0","@material/base":"15.0.0-canary.22bf82024.0","@material/shape":"15.0.0-canary.22bf82024.0","@material/theme":"15.0.0-canary.22bf82024.0","@material/animation":"15.0.0-canary.22bf82024.0","@material/elevation":"15.0.0-canary.22bf82024.0","@material/feature-targeting":"15.0.0-canary.22bf82024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.22bf82024.0_1695028309053_0.809721632314625","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a246a4439.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"e03cf761cfe331af3498bcbb5cd1601f83e9849e","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a246a4439.0.tgz","fileCount":38,"integrity":"sha512-4h4wZ0Rs7qBg1Otldw8ljp+LCULNL42pqbqcTXhKAkJM7pHcSw4k7IfoThSRLU3+V8T3/+qiAXyeQix2OGHzwg==","signatures":[{"sig":"MEQCIF+V9VuVw367YB+VGFdHVBeWf2Onlr7fq6GXyVk4YvB7AiBpvS5gpRLrrD2Hi10Czgi8RVBmrMGEJ4n5PYMJV97SrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a246a4439.0","@material/base":"15.0.0-canary.a246a4439.0","@material/shape":"15.0.0-canary.a246a4439.0","@material/theme":"15.0.0-canary.a246a4439.0","@material/animation":"15.0.0-canary.a246a4439.0","@material/elevation":"15.0.0-canary.a246a4439.0","@material/feature-targeting":"15.0.0-canary.a246a4439.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a246a4439.0_1695059155414_0.4071818077752689","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/menu-surface","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.d153db62b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"2aa3497297ae5f32c8522b9c1e1257b22f6804c0","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.d153db62b.0.tgz","fileCount":38,"integrity":"sha512-G+Tg+3YP2rbxzJEs8IvcUCRQGTkZfjBjHenOQ4JL/NLexeE/VQ3JIj72aTjbyHFw5WCp8OAaII4OlPk8TUpwaA==","signatures":[{"sig":"MEUCIQCkuhhY/IYy13IpPKp2CyvXo2s/rHbBRU3sAaTqHi9jyAIgCXZ3ycA15iA/AnJ8h8qqIR+ysHGeudNJRW/mk01ghzM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d153db62b.0","@material/base":"15.0.0-canary.d153db62b.0","@material/shape":"15.0.0-canary.d153db62b.0","@material/theme":"15.0.0-canary.d153db62b.0","@material/animation":"15.0.0-canary.d153db62b.0","@material/elevation":"15.0.0-canary.d153db62b.0","@material/feature-targeting":"15.0.0-canary.d153db62b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.d153db62b.0_1695150901555_0.8506491074618086","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/menu-surface","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.2528c1c3b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"67888a2e0257b53b097e5ffea49868921a29849c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.2528c1c3b.0.tgz","fileCount":38,"integrity":"sha512-JR7A3qVrct1O2n/izbPTzgHMfqoLuuc5I7b/+wc7xTN/CouRNnhYQqtiVSvGlsp/Q+p46OiDjQR5yu4UvWVB7Q==","signatures":[{"sig":"MEUCIGGB/95d62E+2FcpQkfyqDGzwaZpTEioFVnJFAcLc0inAiEAsVVWV5cBBXM80F9xUeQM7YUqaOQUsZrTxag/VKWMWVA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2528c1c3b.0","@material/base":"15.0.0-canary.2528c1c3b.0","@material/shape":"15.0.0-canary.2528c1c3b.0","@material/theme":"15.0.0-canary.2528c1c3b.0","@material/animation":"15.0.0-canary.2528c1c3b.0","@material/elevation":"15.0.0-canary.2528c1c3b.0","@material/feature-targeting":"15.0.0-canary.2528c1c3b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.2528c1c3b.0_1695233177355_0.669692495490785","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/menu-surface","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.1728a6dcf.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"ab55d3c013b681d07093892527d8b1112abff37d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.1728a6dcf.0.tgz","fileCount":38,"integrity":"sha512-MhIxVxFwrp0zyrzajul9xZenVKbp85z24zKJS4BphzE428CJubghUdXzIRXzV3wXIqPpqVpwoeWHA8qu4L7pPg==","signatures":[{"sig":"MEYCIQDjVzElzKuovTJIRa1YJQkNajCejm4fmjbAdsfmKJIcBAIhAJDzs8XG/AXi50UBDkN8s1HinmJmX0UowsJba79vOsV8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1728a6dcf.0","@material/base":"15.0.0-canary.1728a6dcf.0","@material/shape":"15.0.0-canary.1728a6dcf.0","@material/theme":"15.0.0-canary.1728a6dcf.0","@material/animation":"15.0.0-canary.1728a6dcf.0","@material/elevation":"15.0.0-canary.1728a6dcf.0","@material/feature-targeting":"15.0.0-canary.1728a6dcf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.1728a6dcf.0_1695691383955_0.19214455958730303","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/menu-surface","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.ebb636f3d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"74a4626b7754a622aa1ff99f5ed8cf9ad52c7051","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.ebb636f3d.0.tgz","fileCount":38,"integrity":"sha512-l5/qQUJNL3Jg2sY6snAn+kLdI1eWf2SQAWLj1xHWKUClPJgc0U3bDmFnbYavwWWKpgtbQD820TThWmoUQlpavA==","signatures":[{"sig":"MEUCIA9EixWpMKlYViskfJXwgxWeMXqx6U2T5gJMqfarIfwLAiEAyJ8XyvlNqLnzfTgHw2LfStn1un6+LhRaSEysxc6tmBI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ebb636f3d.0","@material/base":"15.0.0-canary.ebb636f3d.0","@material/shape":"15.0.0-canary.ebb636f3d.0","@material/theme":"15.0.0-canary.ebb636f3d.0","@material/animation":"15.0.0-canary.ebb636f3d.0","@material/elevation":"15.0.0-canary.ebb636f3d.0","@material/feature-targeting":"15.0.0-canary.ebb636f3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.ebb636f3d.0_1696016658412_0.9564440884372984","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/menu-surface","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.c0d21ecc9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"247ab601b29c3dfc705546e021c41e461cb75dea","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":38,"integrity":"sha512-TH+9fNds+IIW4n/3Oww5VtI/NUqMqV4Z27SFQfwf1zIWvwRqQuwfIpSHu+16G2qXJ4eaWkZ3zqDCOH2G0G9WoQ==","signatures":[{"sig":"MEUCIQCj9Agfn25uDZmOpIhy5Sv5i/99gCFmy8drU1YghRopdAIgSvfKzsNjOHHpT3f/jucAoQ4p8Q5RSGuJKxsoSaOeOrk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c0d21ecc9.0","@material/base":"15.0.0-canary.c0d21ecc9.0","@material/shape":"15.0.0-canary.c0d21ecc9.0","@material/theme":"15.0.0-canary.c0d21ecc9.0","@material/animation":"15.0.0-canary.c0d21ecc9.0","@material/elevation":"15.0.0-canary.c0d21ecc9.0","@material/feature-targeting":"15.0.0-canary.c0d21ecc9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.c0d21ecc9.0_1696880199190_0.38388552746879023","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/menu-surface","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.127a44b28.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"e9785a326dc223e12937c774e819a20fd7001eb1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.127a44b28.0.tgz","fileCount":38,"integrity":"sha512-vrrnrIZaYeIEinXqrBzOMNo2QqkpOYk/fJlfC3W71ljxjn0WGjGzGbYIFDdAEYp9rfB7COSwgtK2xIHgo53+ZA==","signatures":[{"sig":"MEUCIDjfuaM/c8PjwT3KA93vuZ8402/QekxrK7uMIL+VbdbDAiEA8KXPBGyluyaiX2dLNq1C8By4HRFX1TVzZdOcS2Kd2Dc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.127a44b28.0","@material/base":"15.0.0-canary.127a44b28.0","@material/shape":"15.0.0-canary.127a44b28.0","@material/theme":"15.0.0-canary.127a44b28.0","@material/animation":"15.0.0-canary.127a44b28.0","@material/elevation":"15.0.0-canary.127a44b28.0","@material/feature-targeting":"15.0.0-canary.127a44b28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.127a44b28.0_1697140808323_0.014048688119775665","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/menu-surface","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.0ad128337.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"a18df0a25d57305ced9f73ff0256a58d349bbc47","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.0ad128337.0.tgz","fileCount":38,"integrity":"sha512-GG1YT2ikscOGHhfdrwhdbAQYc2dWHwWVdSr1EEvtVWA9M0c+EIYl1ltoBzkxWK/DKA1kUe5MmbmT4hglrAQD3w==","signatures":[{"sig":"MEUCICH5usThio69bVP2pmyMOB9VEidsumA+tIPS364z7lL/AiEAnYWWOnBOcHkeTLz5v5y+gDJVM2t0hjR9PesY+b58OrQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0ad128337.0","@material/base":"15.0.0-canary.0ad128337.0","@material/shape":"15.0.0-canary.0ad128337.0","@material/theme":"15.0.0-canary.0ad128337.0","@material/animation":"15.0.0-canary.0ad128337.0","@material/elevation":"15.0.0-canary.0ad128337.0","@material/feature-targeting":"15.0.0-canary.0ad128337.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.0ad128337.0_1697741503027_0.6123772604435778","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/menu-surface","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.9cec94097.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"1f87327fcebe30d45d77fca7eb4916a0fe543433","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.9cec94097.0.tgz","fileCount":38,"integrity":"sha512-xjRyiihW/6kyUvoK5h1kjQXlBRG871KWY9MQYb0cfTsoP4ok7UbE8Ir5fbfg3crpzgmCWd/T349AeK7Zz32Pxw==","signatures":[{"sig":"MEQCIB8PF2AUHTz/3A/XoH0SdJpu5GDUFfnZvhbvUN5R3qzdAiAnoXBbDrAUuzSVlNMfBDKJfFkum3WfFCR3OBz0ERPT3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9cec94097.0","@material/base":"15.0.0-canary.9cec94097.0","@material/shape":"15.0.0-canary.9cec94097.0","@material/theme":"15.0.0-canary.9cec94097.0","@material/animation":"15.0.0-canary.9cec94097.0","@material/elevation":"15.0.0-canary.9cec94097.0","@material/feature-targeting":"15.0.0-canary.9cec94097.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.9cec94097.0_1697756952673_0.21286398620212688","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/menu-surface","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.c51a0bbcc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"8c474d88cb3a4106d10ac4dbfd976a58cf5c281c","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":38,"integrity":"sha512-301q1ccgeoEk8Eb28AenBW1SpJw9shKVuS3x0SX41z8Z7zPxiJFToPjtvAdSFS7tD1/FvV5+YVtdH8WLmONpcA==","signatures":[{"sig":"MEYCIQDnQyQCXAQyBbVvFC8/nm4nKr7WalfzT95SoUgTcwRXxgIhALBXosux5fhkFI/1nu4EQS9poBt+otxtrTWTC20X3Fv/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c51a0bbcc.0","@material/base":"15.0.0-canary.c51a0bbcc.0","@material/shape":"15.0.0-canary.c51a0bbcc.0","@material/theme":"15.0.0-canary.c51a0bbcc.0","@material/animation":"15.0.0-canary.c51a0bbcc.0","@material/elevation":"15.0.0-canary.c51a0bbcc.0","@material/feature-targeting":"15.0.0-canary.c51a0bbcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.c51a0bbcc.0_1700081911685_0.655180670438303","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/menu-surface","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.d76666ad4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"8d96ae4b24277465aee4cce911ee619fb2b74753","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.d76666ad4.0.tgz","fileCount":38,"integrity":"sha512-+qBeDodGzMkSmv8CxZGhIwOYYn/6U5QglbS/W5rmGx7pCsbXYF3yBKaQ1BO+L4r45dJK0+E53JAreNP4RV+wig==","signatures":[{"sig":"MEUCIHWMYWeCZIHPAz5tJPGByx7VKc7SgtHZJayBJwniSDCVAiEApiNi3QUAXcw3nfq1FlHHlbnm/EAjXoNCDNtraeJqnZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d76666ad4.0","@material/base":"15.0.0-canary.d76666ad4.0","@material/shape":"15.0.0-canary.d76666ad4.0","@material/theme":"15.0.0-canary.d76666ad4.0","@material/animation":"15.0.0-canary.d76666ad4.0","@material/elevation":"15.0.0-canary.d76666ad4.0","@material/feature-targeting":"15.0.0-canary.d76666ad4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.d76666ad4.0_1701123175996_0.24861210472071948","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/menu-surface","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.8656bf0e0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"3aac247ec1008b235a20eeb1c8e4e5b7c41ed7b1","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.8656bf0e0.0.tgz","fileCount":38,"integrity":"sha512-uzkWyRL4Umvqp7OLD+DMb4fj7zoRDl6jO/5bbQgaOHV5+KX339VrQTRJEu43Q9WTijOQH7DkIzOe8Qkzl+62tA==","signatures":[{"sig":"MEYCIQDp7+/R7A6D1T5hh363cNgcPJdQ0rcyuaYsJiAyS/FzpAIhAMfsJ1KLi9sPmwxvHWQBF19WbuHmfxQsMLREdkt2NAug","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8656bf0e0.0","@material/base":"15.0.0-canary.8656bf0e0.0","@material/shape":"15.0.0-canary.8656bf0e0.0","@material/theme":"15.0.0-canary.8656bf0e0.0","@material/animation":"15.0.0-canary.8656bf0e0.0","@material/elevation":"15.0.0-canary.8656bf0e0.0","@material/feature-targeting":"15.0.0-canary.8656bf0e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.8656bf0e0.0_1702415907244_0.13767042591827905","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/menu-surface","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.7f224ddd4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"80678f927beec0ec22e68cb05b9242dc0b99543a","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.7f224ddd4.0.tgz","fileCount":38,"integrity":"sha512-7RZHvw0gbwppaAJ/Oh5SWmfAKJ62aw1IMB3+3MRwsb5PLoV666wInYa+zJfE4i7qBeOn904xqT2Nko5hY0ssrg==","signatures":[{"sig":"MEQCIA2t/sVp79a86+e73WZs7nqfLBXr0UxA2LGlTEuAF6aQAiBMGBuwe6SOIZfVyEx76lP9XVUnZuZk+aQTp/Te3VuQUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7f224ddd4.0","@material/base":"15.0.0-canary.7f224ddd4.0","@material/shape":"15.0.0-canary.7f224ddd4.0","@material/theme":"15.0.0-canary.7f224ddd4.0","@material/animation":"15.0.0-canary.7f224ddd4.0","@material/elevation":"15.0.0-canary.7f224ddd4.0","@material/feature-targeting":"15.0.0-canary.7f224ddd4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.7f224ddd4.0_1703743736294_0.8956814713582257","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/menu-surface","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.a0b8a90c0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"f1ad7189a8db53bcf71db0486167d738cb736e29","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":38,"integrity":"sha512-kxT5wOdl4VfSXsRzW1T3kmu9MQ481XMlKC2rYQ+aJ6phFLmvzqxsq44kaUTjtT952N9t9syuBnAkZbH4PHXz0g==","signatures":[{"sig":"MEUCIQC2yNSd4VdCfzstPC8TDSTqyucuMmhN/DLGjW3iGSuupgIga4u3EPSQOV+xZYRz2+wvJLXPDv373PH+bW0R/IaS4HE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a0b8a90c0.0","@material/base":"15.0.0-canary.a0b8a90c0.0","@material/shape":"15.0.0-canary.a0b8a90c0.0","@material/theme":"15.0.0-canary.a0b8a90c0.0","@material/animation":"15.0.0-canary.a0b8a90c0.0","@material/elevation":"15.0.0-canary.a0b8a90c0.0","@material/feature-targeting":"15.0.0-canary.a0b8a90c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.a0b8a90c0.0_1707333559022_0.9183907492590997","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/menu-surface","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.e50b478eb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"74ff243a8f7883118b7ab5023f905bd947bb0785","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.e50b478eb.0.tgz","fileCount":38,"integrity":"sha512-6VvE7BbWNjsVp3e33y2KfpzyNRRrP79OJdBMG4Ao3S7Mgw9X7i9jVWIjdGRLsE4T6t/deRrjF6IrWBj7S1Z/4g==","signatures":[{"sig":"MEQCIBptN5sbHR/DvhqX/DNnO0PuQ/cCToP5mO7zyCvaitKYAiBrFauQOWtxIyVVVPv5vRESzR+IX0wPrGxZcPSedDpQ0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e50b478eb.0","@material/base":"15.0.0-canary.e50b478eb.0","@material/shape":"15.0.0-canary.e50b478eb.0","@material/theme":"15.0.0-canary.e50b478eb.0","@material/animation":"15.0.0-canary.e50b478eb.0","@material/elevation":"15.0.0-canary.e50b478eb.0","@material/feature-targeting":"15.0.0-canary.e50b478eb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.e50b478eb.0_1707415668918_0.1308987895859539","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/menu-surface","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.c43b3438b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"7c7dc5d4bb35975e4f85cf1fa9bab3cd9e959e58","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.c43b3438b.0.tgz","fileCount":38,"integrity":"sha512-lrz61bU6lQ40izptscCnBOmaGcEBuJvFBi6AiRZGvvYxJUOZSO70LHYksOEedBgWIT8Hat7tzUbXFwdwvoPcjg==","signatures":[{"sig":"MEUCIQD8CiVzATNZ6gvIM1dajcRDKhcBzXtcUOLpawxpLhSgDAIgeWNiwaHwBY5etQGgDHgOp2HItGm1Pe2sHc/PcSYDvP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c43b3438b.0","@material/base":"15.0.0-canary.c43b3438b.0","@material/shape":"15.0.0-canary.c43b3438b.0","@material/theme":"15.0.0-canary.c43b3438b.0","@material/animation":"15.0.0-canary.c43b3438b.0","@material/elevation":"15.0.0-canary.c43b3438b.0","@material/feature-targeting":"15.0.0-canary.c43b3438b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.c43b3438b.0_1708719440233_0.5784689159486438","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/menu-surface","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.819498d8c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"43cdbafb6af67591433a00b4dacb3c8ad1357857","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.819498d8c.0.tgz","fileCount":38,"integrity":"sha512-Q1++KWRSxNVnZ6WYimHYCfLkDSatv8P/wHYVlN+iZpksebI5UdLn1093mL2glno8jRgr3E+nfEuch1MejJrsFw==","signatures":[{"sig":"MEUCIQDYEBYZARHr7lSTBt7btKVadqnyx4XlKM2yX5UUXjC7OwIgQyCpf61E4FaFBHtsLJENngjuSfjNhp6/dicnjuKjQcU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.819498d8c.0","@material/base":"15.0.0-canary.819498d8c.0","@material/shape":"15.0.0-canary.819498d8c.0","@material/theme":"15.0.0-canary.819498d8c.0","@material/animation":"15.0.0-canary.819498d8c.0","@material/elevation":"15.0.0-canary.819498d8c.0","@material/feature-targeting":"15.0.0-canary.819498d8c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.819498d8c.0_1710515676258_0.8426279324471573","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/menu-surface","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.453a6248a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"058e8db4e6e902973635177abb67e7149ee7f467","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.453a6248a.0.tgz","fileCount":38,"integrity":"sha512-x1WZJeEQW1l89dbHQmweFknhP45G/xS52UhsNgcHSxthMNl1lZNaohbzkuR5FzAwSKhAuYzZRH23B/xcASsIjg==","signatures":[{"sig":"MEYCIQCIq+JXYh1nYydMjNf0F760t4Mkgf2ha1LtA+dQOGiA9AIhAK7x1300NuJ//Ku1GOvyseUqt4yKEKYuMJxnfLkyVeJX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.453a6248a.0","@material/base":"15.0.0-canary.453a6248a.0","@material/shape":"15.0.0-canary.453a6248a.0","@material/theme":"15.0.0-canary.453a6248a.0","@material/animation":"15.0.0-canary.453a6248a.0","@material/elevation":"15.0.0-canary.453a6248a.0","@material/feature-targeting":"15.0.0-canary.453a6248a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.453a6248a.0_1711386800091_0.9606303549745567","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/menu-surface","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.68edc03c6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"3827a6ec3dc20970af8191fee03f2e2a07fcd403","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.68edc03c6.0.tgz","fileCount":38,"integrity":"sha512-GqhbbGM7vWWUf2p1BFddlsa6iWX/7dA7EKXmM9rl5gudf4yYpSAFXRbrhzxmUdI215PiP9ExcYjrxZyX1EVJYg==","signatures":[{"sig":"MEYCIQDxP+ylHKl8ZXvlxKtzdBgeQ27/HJlAtj7ijm6tDf8yIQIhANxeWb9Rcb/VmWIf+5B+brX7IdOLAB84NKW1O/eMpeif","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.68edc03c6.0","@material/base":"15.0.0-canary.68edc03c6.0","@material/shape":"15.0.0-canary.68edc03c6.0","@material/theme":"15.0.0-canary.68edc03c6.0","@material/animation":"15.0.0-canary.68edc03c6.0","@material/elevation":"15.0.0-canary.68edc03c6.0","@material/feature-targeting":"15.0.0-canary.68edc03c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.68edc03c6.0_1712603146060_0.93681326854461","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/menu-surface","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.5bebc0064.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"b73c34e99eaddf6ee45a024c7eb1d35f824b87e9","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.5bebc0064.0.tgz","fileCount":38,"integrity":"sha512-PaAGtPGFVqKfNig1/Xc+LrkEKR63dxFkCKaMrEPJlJL7NT6x1rBsHS3hAWenSUVCctrqbrxCYlojcK4TOeE5Ag==","signatures":[{"sig":"MEUCIQDgOEr6OJ2eEZkLa1t8NUC30XxewMn7WU+J32F2reYu5gIgZDk65sQtm2YWREYT3oMc6aeG2BWgRLiUHyUD+CrAYPo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5bebc0064.0","@material/base":"15.0.0-canary.5bebc0064.0","@material/shape":"15.0.0-canary.5bebc0064.0","@material/theme":"15.0.0-canary.5bebc0064.0","@material/animation":"15.0.0-canary.5bebc0064.0","@material/elevation":"15.0.0-canary.5bebc0064.0","@material/feature-targeting":"15.0.0-canary.5bebc0064.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.5bebc0064.0_1712871629825_0.9038147997048451","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/menu-surface","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.311f29a60.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"3953b6bd33e2634b56c97688594875d784021184","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.311f29a60.0.tgz","fileCount":38,"integrity":"sha512-Ej17V+0gwkxkSASfwi+J6iGTMzUK6hTuxcJvWSKySYkcvvxrV7DTYIIERjvLw6dTOY6EEXUAdv1A6qHTeL1pOg==","signatures":[{"sig":"MEUCIAdkRXM4+3DUsUoXC8M6elP7TyTCIaT4s9naFu6gxZ+iAiEAzBy5CRb1X0IXpojcOhYcS7tmnkawGu5uWU31PsAi5uk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.311f29a60.0","@material/base":"15.0.0-canary.311f29a60.0","@material/shape":"15.0.0-canary.311f29a60.0","@material/theme":"15.0.0-canary.311f29a60.0","@material/animation":"15.0.0-canary.311f29a60.0","@material/elevation":"15.0.0-canary.311f29a60.0","@material/feature-targeting":"15.0.0-canary.311f29a60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.311f29a60.0_1713895180331_0.31694532887176563","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/menu-surface","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.65c10a622.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"cfeaf2f13e38e055fe2baa9b749d56e8f1c50c1f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.65c10a622.0.tgz","fileCount":38,"integrity":"sha512-jvY+tQLkXLEUk6N5zgx1kKoGTuAS3Vb/HUoH6hXKBQDNYULPSRfVcmwaII54caq1Qeic1J/NVTFJGQTl6TCEcw==","signatures":[{"sig":"MEUCIFBerO+IyZBJLh7CzND8HnC86C6gt30iqygRcKUI/vxgAiEA66vM8+ayNNMwofodupcUjpb3TZTxaMhp8Hncmvag+ww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.65c10a622.0","@material/base":"15.0.0-canary.65c10a622.0","@material/shape":"15.0.0-canary.65c10a622.0","@material/theme":"15.0.0-canary.65c10a622.0","@material/animation":"15.0.0-canary.65c10a622.0","@material/elevation":"15.0.0-canary.65c10a622.0","@material/feature-targeting":"15.0.0-canary.65c10a622.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.65c10a622.0_1714070920283_0.7965013958637048","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/menu-surface","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.4b35cb7d0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"28550909fecb8d936f1800dbdc2250874ec440c4","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":38,"integrity":"sha512-J8+bACXHCCPcmiRhqYrYuh/b9cszjmYjcJ4ExY9OFgjZy91lr99/zSFAcETB+SUBa7KSayBrfmy0Sa2nlknApg==","signatures":[{"sig":"MEUCIQC5scx9ZIY3app0JNI847Xk46VmF6K0P3Xt/t3rtMdixAIgPGZ0f09hz2SWGw99Sod0uH8Ts0Sh8VkP4MWU70ydCXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4b35cb7d0.0","@material/base":"15.0.0-canary.4b35cb7d0.0","@material/shape":"15.0.0-canary.4b35cb7d0.0","@material/theme":"15.0.0-canary.4b35cb7d0.0","@material/animation":"15.0.0-canary.4b35cb7d0.0","@material/elevation":"15.0.0-canary.4b35cb7d0.0","@material/feature-targeting":"15.0.0-canary.4b35cb7d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.4b35cb7d0.0_1714651361133_0.8204583894510702","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/menu-surface","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.f80ac92b0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"745b7da795d3c5fba7915143fe98a24c1d5a69f6","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.f80ac92b0.0.tgz","fileCount":38,"integrity":"sha512-ylAv96390IJdo0X7bkJ9FBiegpzLZDDA9cOgM1/23hdMQiJYLGGvcfDdWndYPcIYet+lyLa+w95om2bvPeyKzg==","signatures":[{"sig":"MEQCIFNsMhijRoK5gmmc44rIrW2MzV703hYOz8eACyn4RwqRAiADDjgeL+ICcVGLESCvQPk0u/n9rShMQDmxTlmhtRlnyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f80ac92b0.0","@material/base":"15.0.0-canary.f80ac92b0.0","@material/shape":"15.0.0-canary.f80ac92b0.0","@material/theme":"15.0.0-canary.f80ac92b0.0","@material/animation":"15.0.0-canary.f80ac92b0.0","@material/elevation":"15.0.0-canary.f80ac92b0.0","@material/feature-targeting":"15.0.0-canary.f80ac92b0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.f80ac92b0.0_1714651978279_0.09575591356562407","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/menu-surface","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.2f5b899bc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"6e5b84bf94dd1c401052e2b5c105ee244ed6e5ef","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.2f5b899bc.0.tgz","fileCount":38,"integrity":"sha512-/DHpdMjTDhcb8k/LBlKcqZnPb3ZBFzh4kJAv118GMRiD0KypQaXWLOZWOOvDKavSuqCYjYikdj6MMPV7CNjDXQ==","signatures":[{"sig":"MEUCIAczAJKAaX5AUdKsfekPWPz6jMo1f0wQ6CHidbj3RTOGAiEA2UGf/sQLtqMziyt6V9tnDSUDl9gOlV1QQ2kPf34u904=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2f5b899bc.0","@material/base":"15.0.0-canary.2f5b899bc.0","@material/shape":"15.0.0-canary.2f5b899bc.0","@material/theme":"15.0.0-canary.2f5b899bc.0","@material/animation":"15.0.0-canary.2f5b899bc.0","@material/elevation":"15.0.0-canary.2f5b899bc.0","@material/feature-targeting":"15.0.0-canary.2f5b899bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.2f5b899bc.0_1716213299553_0.9227110908511409","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/menu-surface","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","menu surface"],"license":"MIT","_id":"@material/menu-surface@15.0.0-canary.cfec83c74.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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":"6766fd23e8a4d73fb9688cd67b741cf291ecff0d","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.cfec83c74.0.tgz","fileCount":38,"integrity":"sha512-LQMu5dT5hGoAbzgqJ4o++KUCB2GZf/HA4Pw2dNNjqy+LDBFZ2nfeEQHMkFP4BtDHn23MRNkzwAPaHyWAqKOdaQ==","signatures":[{"sig":"MEYCIQCJubkDZVEfZHhRQGBxQSKgR4M/lXS739hW9iQI3ynlwgIhANvt5GHOprsgJlx+yUcbfXgHQ516vXT/JTk38JpZQjSh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684070},"main":"dist/mdc.menuSurface.js","module":"index.js","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web menu surface component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cfec83c74.0","@material/base":"15.0.0-canary.cfec83c74.0","@material/shape":"15.0.0-canary.cfec83c74.0","@material/theme":"15.0.0-canary.cfec83c74.0","@material/animation":"15.0.0-canary.cfec83c74.0","@material/elevation":"15.0.0-canary.cfec83c74.0","@material/feature-targeting":"15.0.0-canary.cfec83c74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/menu-surface_15.0.0-canary.cfec83c74.0_1716231390659_0.7351635394017928","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/menu-surface","version":"15.0.0-canary.423edc3dc.0","description":"The Material Components for the web menu surface component","license":"MIT","keywords":["material components","material design","menu surface"],"main":"dist/mdc.menuSurface.js","module":"index.js","sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-menu-surface"},"dependencies":{"@material/animation":"15.0.0-canary.423edc3dc.0","@material/base":"15.0.0-canary.423edc3dc.0","@material/elevation":"15.0.0-canary.423edc3dc.0","@material/feature-targeting":"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","tslib":"^2.1.0"},"publishConfig":{"access":"public"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","readme":"<!--docs:\ntitle: \"Menu Surface\"\nlayout: detail\nsection: components\nexcerpt: \"Material Design menu surface.\"\niconId: menu\npath: /catalog/menu-surface/\n-->\n\n# Menu Surface\n\nThe MDC Menu Surface component is a reusable surface that appears above the content of the\npage and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position\nthemselves when opening.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/menus.html\">Material Design guidelines: Menus</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/menu\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/menu-surface\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n### Styles\n\n```css\n@use \"@material/menu-surface/mdc-menu-surface\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCMenuSurface} from '@material/menu-surface';\n\nconst menuSurface = new MDCMenuSurface(document.querySelector('.mdc-menu-surface'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n\n## Variants\n\n### Anchors and Positioning\n\n#### Anchored To Parent\n\nThe menu surface can be positioned to automatically anchor to a parent element when opened.\n\n```html\n<div id=\"toolbar\" class=\"toolbar mdc-menu-surface--anchor\">\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Anchor To Element Within Wrapper\n\nThe menu surface can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.\n\n```html\n<div class=\"mdc-menu-surface--anchor\">\n  <button id=\"menu-surface-button\">Open Menu Surface</button>\n  <div class=\"mdc-menu-surface\">\n  ...\n  </div>\n</div>\n```\n\n#### Fixed Position\n\nThe menu surface can use fixed positioning when being displayed.\n\n```html\n<div class=\"mdc-menu-surface mdc-menu-surface--fixed\">\n...\n</div>\n```\n\nOr in JS:\n\n```js\n// ...\nmenuSurface.setFixedPosition(true);\n```\n\n#### Absolute Position\n\nThe menu surface can use absolute positioning when being displayed. This requires that the element containing the\nmenu has the `position: relative` style.\n\n```html\n<div class=\"mdc-menu-surface\">\n...\n</div>\n```\n\n```js\n// ...\nmenuSurface.setAbsolutePosition(100, 100);\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-menu-surface` | Mandatory.\n`mdc-menu-surface--animating-open` | Indicates the menu surface is currently animating open. This class is removed once the animation completes.\n`mdc-menu-surface--open` | Indicates the menu surface is currently open, or is currently animating open.\n`mdc-menu-surface--animating-closed` | Indicates the menu surface is currently animating closed. This class is removed once the animation completes.\n`mdc-menu-surface--anchor` | Used to indicate which element the menu should be anchored to.\n`mdc-menu-surface--fixed` | Used to indicate that the menu is using fixed positioning.\n`mdc-menu-surface--fullwidth`| Sets the menu-surface's width to match that of its parent anchor. Do not use with `mdc-menu-surface--fixed` or if hoisting to body.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`ink-color($color)` | Sets the `color` property of the `mdc-menu-surface`.\n`fill-color($color)` | Sets the `background-color` property of the `mdc-menu-surface`.\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to menu surface with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n\n## Constants & Types\n\nConstant Name | Description\n--- | ---\n`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.ts](./constants.ts).\n\nType Name | Description\n--- | ---\n`MDCMenuDimensions` | Width/height of an element. See [types.ts](./types.ts).\n`MDCMenuDistance` | Margin values representing the distance from anchor point that the menu surface should be shown. See [types.ts](./types.ts).\n`MDCMenuPoint` | X/Y coordinates. See [types.ts](./types.ts).\n\n## `MDCMenuSurface` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`quickOpen` | `boolean` | Proxies to the foundation's `setQuickOpen()` method.\n`anchorElement` | `Element` | Gets or sets the element that the surface is anchored to, or `null` if the surface is not anchored. Defaults to the root element's parent `mdc-menu-surface--anchor` element if present.\n\nMethod Signature | Description\n--- | ---\n`isOpen() => boolean` | Proxies to the foundation's `isOpen` method.\n`open() => void` | Proxies to the foundation's `open` method.\n`close(skipRestoreFocus: boolean) => void` | Proxies to the foundation's `close` method.\n`setAnchorCorner(Corner) => void` | Proxies to the foundation's `setAnchorCorner(Corner)` method.\n`setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.\n`setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.\n`setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.\n`setMenuSurfaceAnchorElement(element: Element) => void` | Sets the element used as an anchor for `menu-surface` positioning logic.\n`setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.\n`getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.\n\n### Events\n\nEvent Name | Data | Description\n--- | --- | ---\n`MDCMenuSurface:closed` | none | Event emitted after the menu surface is closed.\n`MDCMenuSurface:closing` | none | Event emitted when the menu surface is closing, but animation may not have completed yet.\n`MDCMenuSurface:opened` | none | Event emitted after the menu surface is opened.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCMenuSurfaceAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Returns a boolean indicating whether the root element has a given class.\n`hasAnchor: () => boolean` | Returns whether the menu surface has an anchor for positioning.\n`notifyClose() => void` | Dispatches an event notifying listeners that the menu surface has been closed.\n`notifyOpen() => void` | Dispatches an event notifying listeners that the menu surface has been opened.\n`isElementInContainer(el: Element) => boolean` | Returns true if the `el` Element is inside the `mdc-menu-surface` container.\n`isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL.\n`setTransformOrigin(value: string) => void` | Sets the transform origin for the menu surface element.\n`isFocused() => boolean` | Returns a boolean value indicating whether the root element of the menu surface is focused.\n`saveFocus() => void` | Stores the currently focused element on the document, for restoring with `restoreFocus`.\n`restoreFocus() => void` | Restores the previously saved focus state, by making the previously focused element the active focus again.\n`getInnerDimensions() => MDCMenuDimensions` | Returns an object with the items container width and height.\n`getAnchorDimensions() => ClientRect \\| null` | Returns an object with the dimensions and position of the anchor.\n`getBodyDimensions() => MDCMenuDimensions` | Returns an object with width and height of the body, in pixels.\n`getWindowDimensions() => MDCMenuDimensions` | Returns an object with width and height of the viewport, in pixels.\n`getWindowScroll() => MDCMenuPoint` | Returns an object with the amount the body has been scrolled on the `x` and `y` axis.\n`setPosition(position: Partial<MDCMenuDistance>) => void` | Sets the position of the menu surface element.\n`setMaxHeight(value: string) => void` | Sets `max-height` style for the menu surface element.\n\n### `MDCMenuSurfaceFoundation`\n\nMethod Signature | Description\n--- | ---\n`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.ts](./constants.ts)\n`setAnchorMargin(margin: Partial<MDCMenuDistance>) => void` | Sets the distance from the anchor point that the menu surface should be shown.\n`setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.\n`setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.\n`setAbsolutePosition(x: number, y: number) => void` | Sets the absolute x/y position of the menu. Should only be used when the menu is hoisted or using fixed positioning.\n`handleBodyClick(event: MouseEvent) => void` | Method used as the callback function for the `click` event.\n`handleKeydown(event: KeyboardEvent) => void` | Method used as the callback function for the `keydown` events.\n`open() => void` | Opens the menu surface.\n`close() => void` | Closes the menu.\n`isOpen() => boolean` | Returns a boolean indicating whether the menu surface is open.\n`setQuickOpen(quickOpen: boolean) => void` | Sets whether the menu surface should open and close without animation when the `open`/`close` methods are called.\n","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-surface@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-TJ6moC2E4wpSWgqxHJYX9KF2Goz5GSN89ylxpzk5ql+9yV0iGm/Ue0YKrTeI/CL79MdJ1jct2z4Tt69Vsa7ICQ==","shasum":"44b9294fda6c079043a7cd046023315a3785d62f","tarball":"https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.423edc3dc.0.tgz","fileCount":38,"unpackedSize":684070,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEwxRrhSXTwITJq1jBDhybBsnyikmVBXLaueILYByTj9AiAEeO2Kv3rL8PWGxRzyY+YbgH4+/nha+NDBKhcazxCaIw=="}]},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/menu-surface_15.0.0-canary.423edc3dc.0_1719425514616_0.8654552936396416"},"_hasShrinkwrap":false}},"time":{"created":"2018-08-16T15:15:42.792Z","modified":"2024-06-26T18:11:55.230Z","0.39.0-0":"2018-08-16T15:15:43.272Z","0.39.0":"2018-08-27T17:40:42.893Z","0.39.1":"2018-08-31T21:36:35.778Z","0.40.0":"2018-09-24T20:01:29.455Z","0.40.1":"2018-10-08T20:54:42.479Z","0.41.0":"2018-10-29T20:22:11.397Z","0.42.0":"2018-12-04T22:54:59.345Z","0.42.1":"2018-12-17T22:25:26.416Z","0.43.0":"2019-01-07T19:49:16.253Z","0.44.0":"2019-02-04T18:23:34.601Z","0.44.1":"2019-02-19T23:03:00.884Z","1.0.0-0":"2019-02-27T23:59:42.891Z","1.0.0-1":"2019-03-04T23:33:35.678Z","1.0.0":"2019-03-06T21:08:26.292Z","1.0.1":"2019-03-11T22:07:08.929Z","1.1.0":"2019-03-26T19:26:07.826Z","1.1.1":"2019-04-08T20:14:03.341Z","2.3.0":"2019-05-28T21:23:34.965Z","3.0.0-alpha.0":"2019-06-12T04:06:50.748Z","3.0.0-alpha.1":"2019-06-12T19:02:13.032Z","3.0.0":"2019-06-25T22:27:57.340Z","3.1.0-alpha.0":"2019-07-16T13:29:10.894Z","3.1.0":"2019-07-22T22:02:48.609Z","4.0.0-alpha.0":"2019-08-07T21:09:27.187Z","4.0.0-canary.0":"2019-09-05T04:37:54.922Z","4.0.0-canary.1":"2019-09-09T20:20:42.561Z","3.2.0":"2019-09-12T21:53:42.710Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:35.535Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:18.676Z","4.0.0-canary.905884690.0":"2019-09-16T23:48:05.575Z","4.0.0-canary.199534d61.0":"2019-09-27T18:57:53.100Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:12.048Z","4.0.0-canary.735147131.0":"2019-10-16T01:23:41.874Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:01:36.535Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:04:38.579Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:08:45.297Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:38:20.286Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:10:49.866Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:35:15.530Z","4.0.0-canary.01628efa.0":"2019-10-29T00:03:11.270Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:56:56.574Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:59:00.968Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:01:41.178Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:29:19.212Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:01:31.608Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:10:48.074Z","4.0.0":"2019-11-02T18:11:47.356Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:33:49.199Z","5.0.0-canary.58500806e.0":"2019-11-08T15:35:54.166Z","5.0.0-canary.66299b646.0":"2019-11-08T20:33:50.128Z","5.0.0-canary.821871e04.0":"2019-11-08T21:28:18.496Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:07:21.290Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:42:31.784Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:37:51.425Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:58:49.002Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:30:57.932Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:06:03.465Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:32:57.449Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:48:40.877Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:19:33.409Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:09:49.384Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:10:43.808Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:11:13.356Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:54:58.282Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:16:53.698Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:07:23.704Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:18:12.754Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:19:51.645Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:20:34.008Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:55:12.572Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:22:53.951Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:59:16.922Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:56:02.729Z","5.0.0-canary.50f110a6c.0":"2019-12-10T16:59:43.684Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:16:29.486Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:47:25.986Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T18:59:27.502Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:09:59.836Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:36:55.642Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:09:49.259Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:33:26.774Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:40:38.535Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:16:58.761Z","5.0.0-canary.391674a26.0":"2019-12-18T19:17:10.774Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:35:21.078Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:20:23.987Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:24:02.574Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:49:58.716Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:25:04.669Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:14:27.620Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:27:16.412Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:24:17.152Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:09:53.721Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:26:54.366Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:47:47.548Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:50:12.214Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:54:45.471Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:45:47.462Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:03:22.459Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:54:15.771Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:42:29.565Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:09:35.790Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:22:33.275Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:37:07.596Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:26:26.367Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:55:40.567Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T14:59:50.920Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:15:50.757Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:10:19.342Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:39:39.103Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:15:21.877Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:26:06.960Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:39:47.098Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:17:14.136Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:19:25.575Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:20:59.425Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:22:19.673Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:56:58.975Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:28:03.952Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:41:37.102Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:10:24.397Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:11:02.497Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:22:23.472Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:42:43.933Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:58:17.770Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:16:20.295Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:23:17.719Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:40:22.122Z","5.0.0-canary.1eb032637.0":"2020-01-08T23:00:04.710Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:00:59.100Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:10:22.722Z","5.0.0-canary.aab102017.0":"2020-01-10T00:12:27.394Z","5.0.0-canary.426913342.0":"2020-01-10T01:44:18.329Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:25:26.175Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:57:01.193Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:28:06.604Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:18:56.408Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:32:21.878Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:13:40.695Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:15:28.425Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:52:54.338Z","5.0.0-canary.60354c577.0":"2020-01-14T22:46:02.857Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:38:50.770Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:43:06.804Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:10:35.762Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:48:00.856Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:48:27.335Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:17:37.918Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:24:01.051Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:47:05.527Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:07:07.180Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:36:59.902Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T01:00:22.218Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:17:10.437Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:20:51.597Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:36:04.709Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:30:55.598Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:39:53.956Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:11:39.002Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:49:47.302Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:37:27.657Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:46:28.008Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:45:07.694Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:22:23.174Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:55:38.549Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:57:44.981Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:17:05.852Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:09:33.169Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:12:44.630Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:55:19.941Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:55:18.448Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:47:42.265Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:20:53.858Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:45:52.794Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:32:16.767Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:56:04.755Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:24:13.075Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:29:28.375Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:43:25.375Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:49:05.025Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:09:39.908Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:55:43.928Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:16:56.796Z","5.0.0-canary.45985457b.0":"2020-01-29T23:33:02.818Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:37:22.851Z","5.0.0-canary.181486643.0":"2020-01-30T20:56:15.699Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:23:14.894Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:03:04.987Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:10:18.063Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:12:44.014Z","5.0.0-canary.535398572.0":"2020-02-03T18:12:01.652Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:03:53.083Z","5.0.0-canary.1eb29491c.0":"2020-02-04T21:00:32.893Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:02:55.418Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:33:12.179Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:29:54.079Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:21:18.176Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:55:31.536Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T22:59:25.857Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:48:42.117Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:25:34.950Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:11:29.330Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:43:24.905Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:43:14.259Z","5.0.0-canary.612443dfb.0":"2020-02-11T19:49:01.971Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:51:31.023Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:44:19.624Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:06:12.991Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:23:39.477Z","5.0.0":"2020-02-14T00:08:57.808Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:48:12.850Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:43:36.121Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:22:27.407Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:16:01.202Z","6.0.0-canary.765caef18.0":"2020-02-21T17:33:27.261Z","6.0.0-canary.949562303.0":"2020-02-21T20:37:35.447Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:58:00.440Z","6.0.0-canary.265ecbad5.0":"2020-02-25T21:00:39.375Z","5.1.0":"2020-02-25T21:37:53.469Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:38:50.399Z","6.0.0-canary.781434a92.0":"2020-02-25T23:27:51.611Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:03:23.030Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:11:59.630Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:09:44.960Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:25:35.199Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:44:03.312Z","6.0.0-canary.98b843417.0":"2020-03-05T18:30:54.530Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:22:10.352Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:46:32.558Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:21:49.457Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:02:16.396Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:36:40.115Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:58:15.567Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:05:18.651Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:33:10.474Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:25:24.262Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:37:56.902Z","6.0.0-canary.bec065920.0":"2020-03-12T20:21:05.165Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:20:53.513Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:01:09.643Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:47:50.485Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:34:37.909Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:35:47.798Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:53:24.311Z","6.0.0-canary.35a32aaea.0":"2020-03-20T19:59:01.959Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:15:10.487Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:43:21.865Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:46:59.396Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:18:19.266Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:04:53.035Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:56:23.531Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:19:29.966Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:56:16.426Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:55:53.197Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:09:21.200Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:13:43.550Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:03:49.854Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:24:37.567Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:36:08.832Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:41:37.617Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:32:25.321Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:29:52.815Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:47:13.863Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:22:35.456Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:46:25.711Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:30:57.300Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:52:41.031Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:33:53.451Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:05:57.502Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:10:23.238Z","6.0.0-canary.c02642273.0":"2020-04-15T16:17:22.298Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:43:18.116Z","6.0.0-canary.490fbdc09.0":"2020-04-16T05:59:44.022Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:26:40.364Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:19:08.872Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:54:23.593Z","6.0.0-canary.ca61b656f.0":"2020-04-16T19:59:58.030Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:32:54.790Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:41:02.932Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:02:55.654Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:21:30.782Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:17:56.786Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:58:20.875Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:55:51.686Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:20:13.349Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:14:52.690Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:18:27.226Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:41:56.629Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:07:11.510Z","7.0.0-canary.8540808be.0":"2020-04-23T17:25:58.666Z","6.0.0":"2020-04-23T17:26:32.330Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:45:39.442Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:21:09.884Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:06:02.816Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:18:50.975Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:43:55.984Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:32:11.658Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:06:53.903Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:17:27.869Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:44:01.547Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:29:33.166Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:27:49.479Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:32:40.031Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:42:18.684Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:25:45.442Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:22:33.111Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:35:48.661Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:47:34.695Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:19:02.192Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:31:12.916Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:33:53.697Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T16:59:00.569Z","7.0.0-canary.09f591967.0":"2020-05-05T21:04:20.511Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:09:29.099Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:07:49.740Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:55:04.927Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:18:40.864Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:49:24.993Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:38:21.167Z","7.0.0-canary.119e21426.0":"2020-05-08T20:22:26.077Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:07:14.939Z","7.0.0-canary.e84444387.0":"2020-05-08T21:31:33.894Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:13:05.240Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:28:58.857Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:32:25.589Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:27:12.245Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:25:02.787Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:18:05.434Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:47:11.325Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:42:43.678Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:51:25.261Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:53:34.343Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:44:03.120Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:17:58.550Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:50:42.516Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:09:16.150Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:38:05.478Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:36:27.527Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:50:30.909Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:02:47.118Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:12:42.480Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:41:08.663Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:01:59.108Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:14:31.235Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:18:09.777Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:19:57.941Z","7.0.0-canary.740860e78.0":"2020-05-21T17:26:38.314Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:28:39.269Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:29:00.064Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:31:42.238Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:33:03.815Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:47:59.462Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:20:58.469Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T20:59:49.296Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:03:55.616Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:28:33.780Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:31:55.173Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:32:53.029Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:46:18.652Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:45:16.015Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:07:28.402Z","7.0.0-canary.01de07011.0":"2020-05-26T19:52:33.107Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:34:54.695Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:13:38.946Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:54:51.951Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T18:59:15.099Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:16:19.333Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:20:46.118Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:29:54.942Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:38:09.826Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:36:46.089Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:51:15.506Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:55:16.874Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:50:16.338Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:15:04.125Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:05:12.091Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:40:49.330Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:25:41.349Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:44:25.461Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:49:10.416Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:48:58.168Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:25:59.192Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:02:52.753Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:23:44.972Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:52:13.107Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:46:35.545Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:03:43.611Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:57:37.077Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:09:17.862Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:12:45.581Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:14:20.664Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:14:25.222Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:04:44.627Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:44:15.895Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:41:53.514Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:57:16.978Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:53:58.282Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:26:25.761Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:17:06.988Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:40:18.488Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:47:17.260Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:09:00.224Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:31:18.408Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:49:56.488Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:22:04.378Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:16:16.367Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:04:54.413Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:17:04.655Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:22:03.616Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:28:22.295Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:48:54.930Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:11:19.868Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:20:30.991Z","7.0.0-canary.10b505785.0":"2020-06-19T20:21:59.418Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:38:15.155Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:40:27.006Z","7.0.0-canary.c20727498.0":"2020-06-19T20:43:15.320Z","7.0.0-canary.4e360ae94.0":"2020-06-19T21:00:00.804Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:02:31.799Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:03:35.155Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:28:44.233Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:31:01.379Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:32:03.389Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:34:41.729Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:24:19.468Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:15:16.402Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:18:01.371Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:25:49.380Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:54:05.782Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:58:01.434Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:29:57.674Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:28:50.722Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:34:25.226Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:42:48.497Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:48:56.561Z","7.0.0-canary.080965f39.0":"2020-06-23T15:18:14.455Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T16:00:43.425Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:25:40.695Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:48:38.191Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T19:01:00.630Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:03:33.230Z","7.0.0":"2020-06-23T19:11:31.561Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:12:27.014Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:41:51.675Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:56:35.291Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:32:11.314Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:57:31.134Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:53:56.369Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:39:13.814Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T20:02:25.227Z","8.0.0-canary.38197b443.0":"2020-06-25T21:23:14.037Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:39:20.420Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:17:27.434Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:48:54.825Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:24:15.957Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:15:53.882Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:31:25.915Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:51:56.315Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:06:12.372Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:15:07.990Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:47:40.069Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:56:55.853Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:27:48.898Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:39:31.997Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:42:06.658Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:48:50.051Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:16:27.363Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:44:46.938Z","8.0.0-canary.d850de590.0":"2020-07-09T18:06:12.854Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:35:55.978Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:36:25.205Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:52:20.604Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:21:15.934Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:13:07.262Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:43:27.088Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:07:52.579Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:34:59.245Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:20:50.040Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:11:17.613Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:13:42.510Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:15:46.061Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:35:15.420Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:10:04.558Z","8.0.0-canary.01db89053.0":"2020-07-16T16:40:14.519Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:20:39.881Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:56:21.377Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:50:54.159Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:47:55.545Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:23:54.132Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:34:23.006Z","8.0.0-canary.12a109680.0":"2020-07-22T23:04:12.500Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:53:40.984Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:50:24.082Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:47:54.435Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:48:11.014Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:59:30.067Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T21:00:19.400Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:24:19.144Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:24:44.062Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:44:22.580Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:11:28.224Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:57:27.764Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:14:05.330Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:07:15.042Z","8.0.0-canary.75553837c.0":"2020-07-27T15:13:08.465Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:38:44.573Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:47:51.845Z","8.0.0-canary.81dc33377.0":"2020-07-27T15:59:56.760Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:33:22.009Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:09:17.013Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:51:19.896Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:58:51.178Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:59:03.676Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:54:45.463Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:51:13.922Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:39:58.763Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:53:30.658Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:16:41.334Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:37:06.489Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:49:53.704Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:21:33.085Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:35:41.537Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:39:34.908Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:15:39.790Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:26:15.820Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:02:13.547Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:11:21.358Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:15:59.706Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:28:18.224Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:11:01.342Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:22:10.069Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:46:51.177Z","8.0.0-canary.005e86a9b.0":"2020-07-30T18:00:47.325Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:09:00.692Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:21:04.530Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:32:11.593Z","8.0.0-canary.f041a48c9.0":"2020-07-30T23:00:25.190Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:51:06.742Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:23:41.486Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:51:09.324Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:54:34.190Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:55:22.239Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:55:38.267Z","8.0.0-canary.72258f898.0":"2020-08-04T01:18:04.565Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:49:08.601Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:24:55.000Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:49:30.975Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:54:44.955Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:20:45.008Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:40:03.927Z","8.0.0-canary.08090126b.0":"2020-08-06T19:33:18.532Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:50:49.359Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:27:27.528Z","8.0.0-canary.96a640534.0":"2020-08-06T22:42:16.390Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:52:01.477Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:21:35.142Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:49:30.703Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:53:19.229Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:31:38.419Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:02:45.986Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:08:54.463Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:04:54.543Z","8.0.0-canary.760873445.0":"2020-08-12T21:43:56.683Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:53:56.198Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:01:34.128Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:29:24.440Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:13:04.739Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:29:50.832Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:50:54.270Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:18:09.283Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:51:49.283Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:16:51.906Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:30:43.634Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:23:09.485Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:39:16.872Z","8.0.0-canary.000d64815.0":"2020-08-17T17:05:02.497Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:32:36.115Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:37:31.221Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:42:49.638Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:24:37.620Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:21:43.655Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:33:46.544Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:38:23.997Z","8.0.0-canary.546277d32.0":"2020-08-20T16:44:33.589Z","8.0.0-canary.da72839f4.0":"2020-08-20T18:00:42.046Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:19:19.237Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:15:48.508Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:58:23.798Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:07:11.011Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:53:21.869Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:29:31.750Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:12:25.399Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T20:01:04.467Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:41:32.156Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:04:31.507Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:57:04.699Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:50:06.071Z","8.0.0-canary.911014711.0":"2020-08-27T16:08:47.154Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:56:40.629Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:56:50.302Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:57:58.881Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:13:32.944Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:16:43.176Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:11:24.091Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:50:38.511Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:56:24.766Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:10:57.130Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T23:00:57.590Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:33:26.436Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:55:09.660Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:52:38.908Z","8.0.0-canary.a306aa488.0":"2020-09-17T00:59:34.578Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:26:41.581Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:43:56.492Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:11:16.915Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:18:37.241Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:43:59.544Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:14:57.477Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:47:05.579Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:33:05.784Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:36:49.169Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:52:14.311Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:25:23.743Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:55:09.362Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:10:54.789Z","8.0.0-canary.d71622574.0":"2020-10-09T16:32:42.997Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:54:55.179Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:47:16.135Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:57:36.791Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:16:30.417Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:18:33.778Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:05:10.105Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:09:04.454Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:52:26.513Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:32:31.806Z","8.0.0-canary.596e98424.0":"2020-10-28T16:04:35.655Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:13:14.941Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:45:58.250Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:13:38.438Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:42:12.537Z","8.0.0-canary.c61db90a5.0":"2020-10-28T19:00:54.226Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:33:32.643Z","8.0.0-canary.5511c5254.0":"2020-10-30T18:01:08.711Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:05:47.418Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T23:00:15.640Z","8.0.0":"2020-11-02T23:00:36.288Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:22:23.620Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:29:05.439Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:38:00.212Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:10:18.727Z","9.0.0-canary.419e03572.0":"2020-11-04T01:33:54.954Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:46:42.753Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:06:09.195Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:57:29.189Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:16:56.495Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:45:36.238Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:21:48.837Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:50:47.022Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:46:36.991Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:18:05.716Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:25:55.440Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:27:52.586Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:58:57.191Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:44:52.302Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:35:41.223Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:26:55.616Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:53:10.832Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:56:15.714Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:19:21.225Z","9.0.0-canary.a41527604.0":"2020-11-19T20:01:10.428Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:56:44.904Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:48:27.101Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:09:52.896Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:15:55.501Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:31:59.702Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:35:10.266Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:41:11.855Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:52:10.035Z","9.0.0-canary.fd22355f7.0":"2020-11-30T23:00:26.932Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:57:40.901Z","9.0.0-canary.977585650.0":"2020-12-02T14:43:14.873Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:50:25.490Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:08:23.475Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:17:21.495Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:23:18.431Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:30:34.881Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:42:20.299Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T15:59:26.926Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:01:43.122Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:46:06.479Z","9.0.0-canary.832668d33.0":"2020-12-04T18:06:47.732Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:29:47.323Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:42:14.349Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:50:20.720Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:02:23.558Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:14:09.374Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:29:08.742Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:33:10.321Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:46:50.838Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:06:13.802Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:11:56.398Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:50:46.766Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:07:57.569Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:46:57.919Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:29:23.169Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:06:27.696Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:08:16.040Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:02:38.849Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:28:33.414Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:08:17.469Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:42:55.480Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:05:53.087Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:46:22.177Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:09:17.282Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:48:45.177Z","9.0.0":"2020-12-29T19:46:56.707Z","10.0.0-canary.776c18681.0":"2020-12-30T00:40:55.449Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:12:45.659Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:47:13.045Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:05:02.821Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:10:27.266Z","10.0.0-canary.365c69360.0":"2021-01-05T17:49:04.405Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:01:28.666Z","10.0.0-canary.766981c15.0":"2021-01-05T22:41:05.691Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:50:46.477Z","10.0.0-canary.968735356.0":"2021-01-06T15:51:51.481Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:45:08.246Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:27:15.819Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:35:00.478Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:20:39.235Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:52:21.011Z","10.0.0-canary.089de519c.0":"2021-01-08T22:21:23.391Z","10.0.0-canary.163119837.0":"2021-01-08T23:46:10.615Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:24:40.788Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:13:11.346Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:56:13.100Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:07:54.129Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:11:04.279Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:34:56.144Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:27:30.030Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:54:46.686Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:20:21.173Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:08:58.027Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:55:56.683Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:10:33.137Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:05:48.639Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:57:20.657Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:53:01.385Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:52:26.379Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:36:48.487Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:25:03.169Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:11:08.591Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:45:53.831Z","10.0.0-canary.623af861e.0":"2021-01-26T03:46:09.944Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:34:19.634Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:47:05.035Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:05:12.163Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:28:17.141Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:21:12.558Z","10.0.0-canary.994873795.0":"2021-01-27T14:51:59.876Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:03:22.164Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:33:29.828Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:04:39.820Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:04:37.037Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:15:43.505Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:21:27.504Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:50:19.292Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:44:02.497Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:19:26.455Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:35:01.657Z","10.0.0-canary.05f249666.0":"2021-02-04T17:51:16.628Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:44:18.888Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:35:54.723Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:01:35.585Z","10.0.0-canary.533092a90.0":"2021-02-05T03:47:39.785Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:18:38.160Z","10.0.0":"2021-02-05T16:19:57.680Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:43:07.240Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:32:36.497Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:05:48.895Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:04:39.790Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:35:44.489Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:18:26.710Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T18:01:25.979Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:42:16.289Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:53:41.427Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:17:57.054Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:07:53.399Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:42:52.823Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:31:55.125Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T16:00:23.649Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:31:49.144Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:12:41.609Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:17:16.117Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:10:58.284Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:26:03.088Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:59:02.473Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:45:45.351Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:35:53.563Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:06:35.633Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:39:15.520Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:24:29.590Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:43:21.284Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:28:30.604Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:37:57.663Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:14:04.111Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:37:36.924Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:46:43.683Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:01:37.634Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:50:18.223Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:46:40.283Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:31:32.887Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:15:08.030Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:34:08.597Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:35:22.408Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:35:49.217Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:51:33.464Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:16:33.806Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:49:15.895Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:23:24.411Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:38:05.155Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:08:50.662Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:39:44.145Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:54:01.522Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:22:00.354Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:33:04.803Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:25:05.909Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:43:02.026Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:01:47.476Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:41:00.092Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:50:21.194Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:46:36.897Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:40:49.783Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:45:00.505Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:28:24.563Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:53:19.678Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:58:17.677Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:25:53.447Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:50:37.611Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:03:38.233Z","11.0.0-canary.81911b707.0":"2021-03-11T18:24:10.625Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:37:42.159Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:02:17.194Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:09:52.623Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:34:07.764Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:41:12.913Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:45:08.563Z","11.0.0-canary.73a227194.0":"2021-03-12T00:24:57.481Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:03:52.313Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:35:53.784Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:20:57.116Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:48:43.827Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:13:16.746Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:40:28.391Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:42:12.568Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:02:32.467Z","11.0.0-canary.6072ed604.0":"2021-03-17T23:00:17.618Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:20:50.397Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:17:58.706Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:44:50.284Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:18:33.247Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:39:24.876Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:52:13.727Z","11.0.0-canary.cbc57c600.0":"2021-03-19T01:00:30.571Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:13:19.203Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:34:42.612Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:44:58.697Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:05:59.394Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:38:26.834Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:08:42.885Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:03:43.536Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:55:02.314Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:05:28.173Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:30:27.367Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:17:20.974Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:33:37.430Z","11.0.0-canary.e3ec22f45.0":"2021-03-25T17:58:40.792Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:58:16.866Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:49:16.318Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:21:30.968Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:34:27.082Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:12:19.105Z","11.0.0-canary.24609b822.0":"2021-03-31T20:57:41.383Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:06:00.775Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:01:40.066Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:48:01.111Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:24:53.912Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:05:48.421Z","11.0.0-canary.a4009b80a.0":"2021-04-05T22:01:14.337Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:42:53.768Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:45:27.677Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:54:37.196Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:58:39.679Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:36:36.052Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:39:25.999Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:36:08.829Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:11:52.815Z","11.0.0-canary.24255c408.0":"2021-04-09T20:13:13.469Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:54:17.547Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:16:22.972Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:44:12.567Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:03:46.421Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:04:53.564Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:32:09.740Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:46:59.491Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:54:57.335Z","11.0.0":"2021-04-15T22:59:07.075Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:45:50.385Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:47:39.958Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:42:01.884Z","12.0.0-canary.b52196498.0":"2021-04-19T19:58:35.836Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:09:25.641Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:57:52.834Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:38:39.793Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:50:10.680Z","12.0.0-canary.cad489689.0":"2021-04-22T16:50:14.725Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:35:21.464Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:14:01.132Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:43:53.949Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:50:14.588Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:10:42.588Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:20:38.394Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:59:26.655Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:37:15.529Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:58:39.119Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:46:59.649Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:08:11.351Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:13:37.579Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:48:44.103Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:54:30.803Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:45:38.408Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:50:04.481Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:43:52.754Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:18:52.620Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:24:43.048Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:02:46.229Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:38:32.732Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:23:10.307Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:54:26.876Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:23:38.985Z","12.0.0-canary.33148231f.0":"2021-05-03T19:39:37.564Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:46:38.908Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:42:29.628Z","12.0.0-canary.de997644b.0":"2021-05-04T17:29:07.297Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:56:01.470Z","12.0.0-canary.be999eb08.0":"2021-05-04T18:01:10.543Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:11:19.747Z","12.0.0-canary.718c90178.0":"2021-05-04T19:28:38.445Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:31:21.081Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:34:47.862Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:50:28.847Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:58:55.936Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:03:54.983Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:07:26.060Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:22:38.905Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:17:13.690Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:28:08.028Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T21:00:53.042Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:41:56.035Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:40:03.370Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:30:59.551Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:57:27.727Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:30:19.349Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:44:29.595Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:44:07.492Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:19:39.661Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:24:20.398Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:45:13.258Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:57:43.055Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:09:50.720Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:25:34.219Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T00:59:29.819Z","12.0.0-canary.cb162da37.0":"2021-05-11T01:59:16.807Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:18:13.626Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:23:22.201Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:20:40.085Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:24:06.727Z","12.0.0-canary.33a954852.0":"2021-05-13T15:08:33.000Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:31:53.566Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:08:49.540Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:14:40.738Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:41:29.297Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:54:43.912Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:13:59.278Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:29:12.515Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:57:39.368Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:51:50.172Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:19:30.008Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:06:46.409Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:15:15.389Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:36:16.324Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:05:41.834Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:46:25.182Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:55:17.026Z","12.0.0-canary.464a00286.0":"2021-06-03T14:47:05.679Z","12.0.0-canary.474de7878.0":"2021-06-03T15:15:05.260Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:47:06.940Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:15:02.000Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:42:24.745Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:49:14.891Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:23:03.502Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:41:41.495Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:07:08.412Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:08:08.255Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:36:35.991Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:36:35.780Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:06:39.565Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:47:05.878Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:40:02.900Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:18:57.521Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:22:50.145Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:30:49.912Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:04:22.936Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:51:14.012Z","12.0.0-canary.271fff902.0":"2021-06-15T22:51:52.197Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:07:11.605Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:06:17.100Z","12.0.0-canary.940550232.0":"2021-06-17T19:41:04.564Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:25:20.951Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:12:33.008Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:41:23.426Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:37:55.875Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:12:52.531Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:25:24.612Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:28:16.956Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:15:46.625Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:53:21.749Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:41:41.856Z","12.0.0-canary.796811db7.0":"2021-07-01T00:04:06.777Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:07:24.479Z","12.0.0-canary.435866d32.0":"2021-07-02T18:22:01.408Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-03T00:00:54.186Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:10:10.386Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:04:33.413Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:04:56.224Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:26:20.501Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:52:14.215Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:50:14.187Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:10:20.827Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:45:07.250Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:54:45.978Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:51:35.675Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:23:23.493Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:48:58.251Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:09:00.740Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:22:46.984Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:43:10.844Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:07:55.379Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:58:50.545Z","12.0.0-canary.7239684d4.0":"2021-07-16T15:59:58.428Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:14:47.452Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:43:56.826Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:42:52.485Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:09:54.052Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:57:41.461Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:06:22.218Z","12.0.0-canary.791311bba.0":"2021-07-20T22:08:24.881Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:36:50.336Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:50:46.198Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:07:15.425Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:39:04.316Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:13:02.258Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:33:03.371Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:56:38.036Z","12.0.0-canary.22f390c43.0":"2021-07-27T19:00:45.605Z","12.0.0":"2021-07-27T19:50:49.022Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:52:23.678Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:19:05.028Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:26:47.004Z","13.0.0-canary.28656298a.0":"2021-07-29T18:13:51.223Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:36:10.034Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:05:52.564Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:34:14.443Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:24:16.906Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:14:42.675Z","13.0.0-canary.a80c8b2c2.0":"2021-08-05T00:00:40.079Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:57:24.594Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:43:11.960Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:19:01.089Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:50:48.975Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:15:45.758Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:08:13.150Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:18:15.422Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:18:28.110Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:22:22.829Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:41:47.249Z","13.0.0-canary.f4241a42a.0":"2021-08-11T17:00:24.962Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:29:41.310Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:56:06.926Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:46:09.753Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:49:24.849Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:09:01.409Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:22:46.807Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:55:00.373Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:15:03.962Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:24:48.606Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:03:09.253Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:18:32.389Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:49:46.004Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:33:09.853Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:27:27.149Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:21:08.087Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:45:10.340Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:27:30.912Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:29:38.494Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:17:56.757Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:28:47.208Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:49:21.627Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:19:05.303Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:34:06.191Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:54:42.541Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T22:00:15.880Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:39:10.753Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:06:47.806Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:10:08.947Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:45:15.273Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:55:11.027Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:12:16.583Z","13.0.0-canary.611db508e.0":"2021-09-02T03:16:09.802Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:38:39.870Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:45:37.913Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:46:53.960Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:30:29.581Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:32:04.449Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:32:37.282Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:43:19.316Z","13.0.0-canary.72464476c.0":"2021-09-07T15:34:41.712Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:33:57.876Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:43:40.829Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:35:58.164Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:01:16.414Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:10:50.145Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:25:51.511Z","13.0.0-canary.864798678.0":"2021-09-09T18:37:18.844Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:22:06.985Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:04:06.636Z","13.0.0-canary.08398f880.0":"2021-09-13T23:34:47.159Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:50:47.347Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:12:46.332Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T21:59:29.937Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:17:48.548Z","13.0.0-canary.80a583365.0":"2021-09-17T20:35:58.874Z","13.0.0-canary.83900936a.0":"2021-09-17T23:24:30.818Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:35:54.929Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:47:46.106Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:37:52.948Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:12:04.558Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:57:49.298Z","13.0.0-canary.65084baff.0":"2021-09-23T21:25:25.889Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:41:49.498Z","13.0.0":"2021-09-24T19:46:02.866Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:46:46.832Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:10:56.993Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:29:10.669Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:42:55.456Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:57:05.430Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:31:29.619Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:28:27.627Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:47:06.819Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:21:59.005Z","14.0.0-canary.261f2db59.0":"2021-10-20T16:59:36.778Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:22:03.225Z","14.0.0-canary.348665978.0":"2021-10-21T14:50:56.882Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:12:32.020Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:52:45.077Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:01:29.290Z","14.0.0-canary.a986df922.0":"2021-10-29T21:34:58.096Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:05:50.068Z","14.0.0-canary.468392606.0":"2021-11-11T19:40:19.587Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:51:01.620Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:56:57.883Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:58:42.573Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:24:21.658Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:36:38.149Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:29:59.026Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:13:45.237Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:40:28.226Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:50:20.312Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:16:51.175Z","14.0.0-canary.554c71829.0":"2021-11-16T16:19:40.217Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:24:29.713Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T18:59:35.540Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:25:20.274Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:39:40.190Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:35:31.033Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:04:54.341Z","14.0.0-canary.93134d453.0":"2021-11-23T15:39:30.058Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:32:37.290Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:37:45.093Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:50:59.668Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:56:24.834Z","14.0.0-canary.17a072535.0":"2021-12-02T18:05:37.651Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:44:46.849Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:06:57.116Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:25:44.249Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:29:16.302Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:55:29.512Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:40:11.218Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:13:20.244Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:10:05.057Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:32:28.331Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:46:15.128Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:14:35.768Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:01:10.629Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:54:39.632Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:33:25.607Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:50:04.955Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:42:42.744Z","14.0.0-canary.390220e42.0":"2022-01-17T16:46:36.221Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:53:08.742Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:17:53.151Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:54:46.361Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:03:45.415Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:32:19.653Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:13:34.492Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:37:27.157Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:41:47.640Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:50:17.361Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:23:06.858Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:57:35.676Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:47:09.647Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:54:06.254Z","14.0.0-canary.96ea061c1.0":"2022-02-09T18:59:15.338Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:06:54.207Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:29:52.721Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:49:21.480Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:16:38.969Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:04:26.228Z","14.0.0-canary.868793776.0":"2022-02-22T19:35:50.916Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:46:26.356Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:33:26.456Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:27:41.527Z","14.0.0-canary.6505e61c5.0":"2022-03-03T20:00:51.974Z","14.0.0-canary.16c166154.0":"2022-03-08T23:22:38.515Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:28:52.636Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:29:51.489Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:50:19.798Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:03:51.571Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:18:07.203Z","14.0.0-canary.32b391398.0":"2022-03-17T17:59:29.616Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:39:29.683Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:52:15.891Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:44:19.413Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:51:02.565Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:18:49.348Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:40:11.622Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:04:51.444Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:35:11.127Z","14.0.0-canary.344d52823.0":"2022-03-29T18:43:31.584Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:33:12.095Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:14:30.894Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:24:27.989Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:23:39.420Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:05:59.375Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:47:57.904Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:11:31.510Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:02:09.386Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:45:38.741Z","14.0.0":"2022-04-28T16:56:12.444Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:57:18.407Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:14:56.073Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:31:47.281Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:56:17.971Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:58:37.897Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:24:47.341Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:40:36.982Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:18:45.065Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:44:31.308Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:27:07.871Z","15.0.0-canary.05930a453.0":"2022-05-13T18:47:44.491Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:01:17.977Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:32:59.748Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:03:02.986Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:21:49.328Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:58:01.455Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:40:17.574Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:21:20.465Z","15.0.0-canary.df47894db.0":"2022-06-13T17:08:55.879Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:30:08.606Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:57:46.168Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:22:55.162Z","15.0.0-canary.764de225d.0":"2022-06-29T16:27:26.314Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:28:46.319Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:55:21.489Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:54:46.433Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:51:27.285Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:31:24.685Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:03:01.504Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:31:47.350Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:39:01.126Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:39:41.077Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:37:09.329Z","15.0.0-canary.88db01990.0":"2022-07-12T11:40:26.332Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:29:18.973Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:35:21.037Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:05:39.262Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:08:28.734Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:49:41.786Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:43:31.518Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:01:23.918Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:05:24.490Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:24:30.664Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:47:01.437Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:20:05.990Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:30:01.954Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:22:10.848Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:40:27.616Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:57:29.054Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:09:35.254Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:04:45.001Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:45:56.675Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:13:53.019Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:41:03.946Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:21:03.980Z","15.0.0-canary.10196647d.0":"2022-08-03T21:53:53.041Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:43:16.254Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:20:50.520Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:46:15.435Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:01:37.351Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:05:59.303Z","15.0.0-canary.d25f3404c.0":"2022-09-01T09:44:44.622Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:21:19.113Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:18:36.189Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:20:06.615Z","15.0.0-canary.4299717da.0":"2022-09-07T16:15:48.738Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:18:59.709Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:04:15.429Z","15.0.0-canary.18cdc9a00.0":"2022-09-12T21:03:17.588Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:39:31.493Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:55:10.071Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:18:01.241Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:20:42.922Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:36:19.378Z","15.0.0-canary.9f17ff2cb.0":"2022-09-21T18:08:34.852Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:24:45.431Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:48:01.783Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:08:22.991Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:56:37.450Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:57:43.101Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:45:04.839Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:31:26.695Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:57:31.824Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:56:16.963Z","15.0.0-canary.db414b864.0":"2022-09-28T14:52:54.849Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:07:05.602Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:55:58.472Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:31:22.914Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:14:01.332Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:21:17.660Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:18:14.643Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:19:31.207Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:03:55.119Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:15:02.567Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:51:06.624Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:37:40.927Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:55:29.700Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:05:52.848Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:07:54.971Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:38:08.426Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:49:05.461Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:02:24.162Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T16:58:33.837Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:21:12.596Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:41:34.603Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:51:18.760Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:13:56.647Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:51:34.725Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:17:59.636Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:56:21.327Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:22:30.112Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:57:08.930Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:40:28.366Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:42:21.257Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:23:24.841Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:42:43.515Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:13:25.152Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:17:12.525Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:37:09.904Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:11:50.509Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:56:44.874Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:05:49.380Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:19:12.792Z","15.0.0-canary.fc539db34.0":"2022-10-24T18:59:10.361Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:45:04.145Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:30:34.600Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:15:16.610Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:32:29.908Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:49:23.323Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:56:25.011Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:36:54.045Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:10:44.143Z","15.0.0-canary.909b48215.0":"2022-11-03T04:07:51.248Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:19:12.751Z","15.0.0-canary.da95e2a05.0":"2022-11-04T16:59:05.648Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:57:03.109Z","15.0.0-canary.215506426.0":"2022-11-05T01:05:59.916Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:04:05.784Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:24:37.026Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:13:26.197Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:27:46.270Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:56:36.242Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:17:55.032Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:35:35.556Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:53:16.835Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:02:52.569Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:06:04.047Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:35:48.894Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:36:32.307Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:11:49.463Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:45:17.672Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T15:58:32.906Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:27:03.392Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:28:21.841Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:02:06.491Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:30:09.770Z","15.0.0-canary.b01136063.0":"2022-11-16T00:15:49.408Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:13:16.517Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:15:28.472Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:17:34.592Z","15.0.0-canary.3777b03cb.0":"2022-11-16T18:41:29.715Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:56:03.090Z","15.0.0-canary.7c73f6134.0":"2022-11-16T19:59:38.875Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:05:17.503Z","15.0.0-canary.40b18d043.0":"2022-11-16T22:58:52.338Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:08:56.255Z","15.0.0-canary.bb7751002.0":"2022-11-17T00:00:08.993Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:01:13.761Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:55:16.363Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:04:41.358Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:21:12.070Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:16:20.445Z","15.0.0-canary.697fbdebd.0":"2022-11-18T17:00:47.514Z","15.0.0-canary.d58410453.0":"2022-11-18T19:25:08.037Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:45:15.119Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:53:46.306Z","15.0.0-canary.96f472604.0":"2022-11-21T12:52:43.007Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:02:30.332Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:54:05.870Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T19:00:38.903Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:30:59.128Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:16:30.414Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:39:28.975Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:56:46.249Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:15:42.867Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:13:48.461Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:47:23.291Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:11:38.613Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:34:00.840Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:48:55.618Z","15.0.0-canary.65c411674.0":"2022-11-29T17:38:26.968Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:14:18.886Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:07:19.638Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:29:16.838Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:54:31.798Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:24:15.620Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:01:51.777Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:01:03.390Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:06:58.333Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:26:40.580Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:42:40.569Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:25:45.270Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:52:01.060Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:03:04.227Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:41:22.469Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:44:20.915Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:30:54.021Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:46:23.158Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:02:15.918Z","15.0.0-canary.817002c29.0":"2022-12-13T21:54:09.151Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:28:54.328Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:19:09.309Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:44:59.908Z","15.0.0-canary.34767110.0":"2022-12-14T17:21:23.236Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:25:40.708Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:08:45.305Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:27:15.016Z","15.0.0-canary.604264203.0":"2022-12-21T21:40:59.191Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:25:24.506Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:12:20.016Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:05:15.564Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:03:58.279Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:51:46.535Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:02:19.785Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:41:06.676Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:05:59.715Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:47:53.351Z","15.0.0-canary.af490a848.0":"2023-01-03T15:57:22.120Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:38:56.951Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:13:18.877Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:32:38.112Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:17:53.019Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:37:23.421Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:35:48.945Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:02:58.371Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:09:28.907Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:21:48.836Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:16:15.420Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:43:20.639Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:24:04.950Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:28:12.902Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:11:41.653Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:18:44.245Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:17:46.299Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:12:36.976Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:54:16.670Z","15.0.0-canary.202823f54.0":"2023-01-11T21:35:55.345Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:55:49.345Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:36:24.692Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:24:37.963Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:49:25.132Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:39:17.793Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:29:52.499Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:35:03.080Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:26:56.409Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:43:41.968Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:30:10.474Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:44:16.915Z","15.0.0-canary.15b221540.0":"2023-02-01T17:52:38.287Z","15.0.0-canary.eeebb8bba.0":"2023-02-01T18:22:17.213Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T18:58:25.616Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:34:09.608Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:38:18.877Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:08:59.999Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:14:35.755Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:24:03.163Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:09:33.395Z","15.0.0-canary.de38de758.0":"2023-02-09T15:42:26.735Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:03:02.654Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:49:55.286Z","15.0.0-canary.066d9439b.0":"2023-02-15T19:57:46.017Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:34:10.626Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:19:39.682Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:41:24.663Z","15.0.0-canary.901c83e77.0":"2023-02-27T18:06:11.874Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:35:50.624Z","15.0.0-canary.f32339937.0":"2023-03-06T15:15:37.063Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:27:31.288Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:41:47.624Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:42:56.082Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:26:24.841Z","15.0.0-canary.274610c77.0":"2023-03-09T14:58:42.085Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:52:42.011Z","15.0.0-canary.da22ca960.0":"2023-03-09T20:17:53.897Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:45:01.173Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:47:19.445Z","15.0.0-canary.de5224633.0":"2023-03-09T23:55:45.164Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:07:54.419Z","15.0.0-canary.23073a303.0":"2023-03-10T14:14:48.291Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:47:22.483Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:48:02.871Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:25:00.778Z","15.0.0-canary.82554d770.0":"2023-03-11T01:37:16.888Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:38:46.650Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:44:13.395Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:47:29.312Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:02:42.298Z","15.0.0-canary.112715df5.0":"2023-03-13T18:39:09.941Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:31:28.076Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:39:00.191Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:43:25.594Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:52:38.096Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:16:25.477Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:47:20.617Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:16:46.861Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:20:09.215Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:23:57.107Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:26:36.103Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:27:14.575Z","15.0.0-canary.87809c710.0":"2023-03-14T18:43:24.390Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:47:44.755Z","15.0.0-canary.419b23cc6.0":"2023-03-14T18:58:45.345Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:13:24.320Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:11:14.570Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:40:53.063Z","15.0.0-canary.39e473690.0":"2023-03-21T17:51:17.902Z","15.0.0-canary.cedffb44c.0":"2023-03-21T17:58:15.164Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:50:02.357Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:34:33.111Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:48:32.521Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:41:08.460Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:07:51.704Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:53:44.993Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:55:36.687Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:30:16.084Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:04:15.540Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:42:27.754Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:38:04.818Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:40:11.821Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:00:52.409Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:50:53.849Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:21:29.075Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:21:36.052Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:31:21.373Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:33:30.736Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:41:48.383Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:09:22.402Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:56:07.465Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:26:15.018Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:39:07.329Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:22:59.009Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:30:23.351Z","15.0.0-canary.d3c3fbaa3.0":"2023-05-12T18:00:51.797Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T01:59:58.301Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:53:58.160Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:25:25.244Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:42:36.887Z","15.0.0-canary.446734f27.0":"2023-05-30T21:48:12.531Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:18:18.819Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:13:57.656Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:18:09.980Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:05:55.578Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:38:09.035Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:03:44.108Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:57:06.703Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:16:27.899Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:23:39.058Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:13:51.834Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:25:44.459Z","15.0.0-canary.83355c322.0":"2023-07-10T15:05:30.645Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:20:50.412Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:47:12.860Z","15.0.0-canary.02702296e.0":"2023-08-25T12:04:55.232Z","15.0.0-canary.872b65832.0":"2023-08-30T12:13:17.656Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:06:43.885Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:39:40.534Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:05:02.559Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:44:58.266Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:16:48.503Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:11:49.283Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:45:55.610Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:15:01.802Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:06:17.775Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:23:04.219Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:44:18.592Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:36:39.367Z","15.0.0-canary.127a44b28.0":"2023-10-12T20:00:08.562Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:51:43.250Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:09:12.967Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:58:31.949Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:12:56.218Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:18:27.534Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:08:56.490Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:19:19.304Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:07:49.081Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:17:20.471Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:14:36.477Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:13:20.299Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:05:46.288Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:40:30.061Z","15.0.0-canary.311f29a60.0":"2024-04-23T17:59:40.494Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:48:40.442Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:02:41.302Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:12:58.429Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:54:59.742Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:56:30.853Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:11:54.828Z"},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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-surface"},"keywords":["material components","material design","menu surface"],"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":""}